/* BG-AURORA — horizontal aurora bands across the page */
/* Ref: auroral CSS library technique (github.com/LunarLogic/auroral) */
/* Pure CSS, no JS required */

.aurora-band {
  position: fixed;
  left: -15%; width: 130%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

/* Upper band — cyan / purple */
.ab1 {
  top: 18%; height: 340px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,229,255,0.038) 28%,
    rgba(124,111,255,0.042) 52%,
    rgba(0,229,255,0.022) 75%,
    transparent 100%);
  animation: auroraShift1 22s ease-in-out infinite;
}

/* Middle band — purple tint */
.ab2 {
  top: 48%; height: 220px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(124,111,255,0.025) 45%,
    transparent 100%);
  animation: auroraShift2 34s ease-in-out infinite reverse;
}

/* Lower band — purple / orange */
.ab3 {
  top: 70%; height: 260px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(124,111,255,0.030) 35%,
    rgba(255,122,26,0.018) 65%,
    transparent 100%);
  animation: auroraShift3 28s ease-in-out infinite;
}

/* ── KEYFRAMES ── */
@keyframes auroraShift1 {
  0%,100% { transform: translateX(0) skewX(0deg); opacity: 1; }
  33%     { transform: translateX(-9%) skewX(-1deg); opacity: 0.55; }
  66%     { transform: translateX(6%) skewX(.6deg); opacity: 0.85; }
}
@keyframes auroraShift2 {
  0%,100% { transform: translateX(0); opacity: 0.7; }
  50%     { transform: translateX(12%); opacity: 0.35; }
}
@keyframes auroraShift3 {
  0%,100% { transform: translateX(0) skewX(0deg); opacity: 0.8; }
  40%     { transform: translateX(-7%) skewX(.8deg); opacity: 0.4; }
  80%     { transform: translateX(5%) skewX(-.4deg); opacity: 1; }
}

/* ── PERFORMANCE TIERS ── */
.perf-low .aurora-band { display: none; }
.perf-mid .ab2, .perf-mid .ab3 { display: none; }
.is-touch .ab2, .is-touch .ab3 { display: none; }