/* ============================================================
   CableBox — Aurora engine
   Northern-lights curtains + ambient bloom over the dark base.
   Compositor-only transforms (translate / scale / rotate) so it
   stays smooth; blur is static. Cycles the brand six.
   ============================================================ */

.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* the dark base sits under everything */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(73,80,250,0.10), transparent 60%),
    var(--bg);
  z-index: -2;
}

.aurora__field {
  position: absolute;
  inset: -10% -10% 0 -10%;
  filter: blur(64px) saturate(135%);
  z-index: -1;
}

/* A curtain = a tall draped sheet of colour fading to nothing.
   We animate horizontal drift + gentle vertical breathing + a
   slow hue feel via opacity crossfades. */
.curtain {
  position: absolute;
  top: -18%;
  height: 115%;
  width: 46%;
  border-radius: 50% 50% 42% 42% / 70% 70% 30% 30%;
  mix-blend-mode: screen;
  opacity: 0.62;
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

.c1 {
  left: -6%;
  background: linear-gradient(177deg, var(--electric) 0%, rgba(73,80,250,0.0) 62%);
  animation: drift1 34s ease-in-out infinite, breathe 17s ease-in-out infinite;
}
.c2 {
  left: 16%;
  background: linear-gradient(180deg, var(--cyan) 0%, rgba(209,248,248,0.0) 55%);
  opacity: 0.5;
  animation: drift2 41s ease-in-out infinite, breathe 21s ease-in-out infinite -4s;
}
.c3 {
  left: 34%;
  background: linear-gradient(182deg, var(--lavender) 0%, rgba(203,131,247,0.0) 60%);
  animation: drift3 38s ease-in-out infinite -6s, breathe 19s ease-in-out infinite -2s;
}
.c4 {
  left: 52%;
  background: linear-gradient(178deg, var(--pink) 0%, rgba(244,41,150,0.0) 58%);
  opacity: 0.55;
  animation: drift1 44s ease-in-out infinite -12s, breathe 23s ease-in-out infinite -8s;
}
.c5 {
  left: 70%;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(254,192,19,0.0) 50%);
  opacity: 0.42;
  animation: drift2 37s ease-in-out infinite -3s, breathe 18s ease-in-out infinite -10s;
}
.c6 {
  left: 84%;
  background: linear-gradient(176deg, var(--deep) 0%, rgba(43,24,170,0.0) 64%);
  opacity: 0.7;
  animation: drift3 46s ease-in-out infinite -16s, breathe 25s ease-in-out infinite -5s;
}

/* slow horizontal sway with a touch of skew — curtains never snap */
@keyframes drift1 {
  0%, 100% { transform: translateX(-6%) skewX(-7deg) scaleX(1); }
  50%      { transform: translateX(10%)  skewX(8deg)  scaleX(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translateX(8%)  skewX(6deg)  scaleX(1.08); }
  50%      { transform: translateX(-9%) skewX(-9deg) scaleX(0.94); }
}
@keyframes drift3 {
  0%, 100% { transform: translateX(-4%) skewX(4deg)  scaleX(0.96); }
  50%      { transform: translateX(12%) skewX(-6deg) scaleX(1.16); }
}
/* vertical breathing — the lights rise and fall */
@keyframes breathe {
  0%, 100% { scale: 1 0.92;  opacity: var(--o, 0.5); }
  50%      { scale: 1.04 1.1; }
}

/* Ambient blooms — soft round colour pools that wander */
.bloom {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.bloom.b1 {
  width: 60vw; height: 60vw; left: -10vw; top: -22vw;
  background: radial-gradient(circle, rgba(73,80,250,0.55), transparent 66%);
  animation: wander1 52s ease-in-out infinite;
}
.bloom.b2 {
  width: 50vw; height: 50vw; right: -8vw; top: -10vw;
  background: radial-gradient(circle, rgba(244,41,150,0.42), transparent 66%);
  animation: wander2 60s ease-in-out infinite;
}
.bloom.b3 {
  width: 44vw; height: 44vw; left: 28vw; top: 6vw;
  background: radial-gradient(circle, rgba(203,131,247,0.4), transparent 64%);
  animation: wander3 48s ease-in-out infinite -8s;
}

@keyframes wander1 {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(8vw, 4vw); }
  66%     { transform: translate(-5vw, 7vw); }
}
@keyframes wander2 {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(-10vw, 6vw); }
}
@keyframes wander3 {
  0%,100% { transform: translate(0,0); }
  40%     { transform: translate(6vw, -4vw); }
  75%     { transform: translate(-7vw, 5vw); }
}

/* Stars / fine grain so the dark isn't dead flat */
.aurora__grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 65%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 12% 72%, rgba(255,255,255,0.3), transparent);
  background-repeat: no-repeat;
}

/* Fade the hero aurora down into the page */
.aurora__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,28,0) 40%,
    rgba(2,2,28,0.45) 72%,
    rgba(2,2,28,0.9) 92%,
    var(--bg) 100%);
  pointer-events: none;
}

/* Section-break pulse — a faint band of aurora light between sections */
.seam {
  position: relative;
  height: 1px;
  background: var(--hairline);
  overflow: visible;
}
.seam::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(680px, 76vw); height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--electric), var(--lavender), var(--pink), transparent);
  filter: blur(2px);
  opacity: 0.0;
  animation: seamPulse 9s ease-in-out infinite;
}
@keyframes seamPulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.7; }
}