/* ============================================================
   ANTAHEEN — CINEMATIC BACKGROUNDS
   Pure CSS animated scenes for each chapter theme
   No images required. Looks stunning standalone.
   ============================================================ */

:root {
  --cbg-hero: #0a0a0b;
  --cbg-gold: #c9a96e;
  --cbg-gold-dim: #8a7348;
  --cbg-amber: #d4a843;
  --cbg-teal: #1a3a3a;
  --cbg-blue: #0d1b2a;
  --cbg-warm: #2a1a0a;
  --cbg-cool: #0a1a2a;
  --cbg-stage: #0f0f12;
}

/* ============================================================
   1. HERO — "THE STAGE AWAITS"
   Animated stage spotlights + smoke drift
   ============================================================ */
.hero-cinematic {
  position: relative;
  overflow: hidden;
}

.hero-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Central warm glow */
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(201,169,110,0.15) 0%, transparent 70%),
    /* Left spotlight */
    radial-gradient(ellipse 30% 80% at 20% 50%, rgba(201,169,110,0.12) 0%, transparent 60%),
    /* Right spotlight */
    radial-gradient(ellipse 30% 80% at 80% 50%, rgba(201,169,110,0.08) 0%, transparent 60%),
    /* Top rim light */
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(212,168,67,0.06) 0%, transparent 60%),
    /* Deep base */
    radial-gradient(ellipse 100% 100% at 50% 100%, #0d0d0f 0%, #0a0a0b 50%);
  animation: heroSpotlightDrift 12s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes heroSpotlightDrift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
  100% {
    background-position: 3% 2%, -2% 1%, 2% -1%, -1% 0%, 0% 0%;
    filter: brightness(1);
  }
}

/* Smoke particles overlay */
.hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 30% at 30% 70%, rgba(255,255,255,0.02) 0%, transparent 70%),
    radial-gradient(ellipse 35% 25% at 70% 65%, rgba(255,255,255,0.015) 0%, transparent 70%),
    radial-gradient(ellipse 50% 20% at 50% 80%, rgba(201,169,110,0.03) 0%, transparent 60%);
  animation: heroSmokeDrift 20s ease-in-out infinite;
  z-index: 0;
}

@keyframes heroSmokeDrift {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 1; }
  25% { transform: translateX(20px) translateY(-10px); }
  50% { transform: translateX(-15px) translateY(5px); }
  75% { transform: translateX(10px) translateY(-5px); }
}

/* ============================================================
   2. CHAPTER 1 — "BEFORE ANTAHEEN"
   Fading memories: desaturated, distant, nostalgic haze
   ============================================================ */
.chapter-bg--memories::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Faded sepia memory haze */
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(139,90,43,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 30% 40%, rgba(100,70,40,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 60%, rgba(80,60,40,0.04) 0%, transparent 60%),
    linear-gradient(180deg, #0c0c0d 0%, #0f0d0b 50%, #0a0a0b 100%);
  animation: memoryFade 15s ease-in-out infinite alternate;
}

@keyframes memoryFade {
  0% { opacity: 0.8; filter: saturate(0.6); }
  100% { opacity: 1; filter: saturate(0.9); }
}

/* ============================================================
   3. CHAPTER 2 — "THE IDEA"
   Spark of creation: warm ember glow, like a match in darkness
   ============================================================ */
.chapter-bg--spark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Central ember */
    radial-gradient(circle at 50% 50%, rgba(212,168,67,0.18) 0%, rgba(201,169,110,0.06) 30%, transparent 60%),
    /* Scattered sparks */
    radial-gradient(circle at 20% 30%, rgba(212,168,67,0.08) 0%, transparent 25%),
    radial-gradient(circle at 80% 40%, rgba(201,169,110,0.06) 0%, transparent 20%),
    radial-gradient(circle at 40% 70%, rgba(180,140,60,0.05) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(212,168,67,0.04) 0%, transparent 25%),
    linear-gradient(180deg, #0a0a0b 0%, #0f0c08 100%);
  animation: sparkPulse 4s ease-in-out infinite;
}

@keyframes sparkPulse {
  0%, 100% { filter: brightness(1) blur(0px); }
  50% { filter: brightness(1.15) blur(0.5px); }
}

/* Floating ember particles */
.chapter-bg--spark::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 60%, rgba(212,168,67,0.1) 0%, transparent 3px),
    radial-gradient(circle at 75% 35%, rgba(201,169,110,0.08) 0%, transparent 2px),
    radial-gradient(circle at 55% 75%, rgba(212,168,67,0.06) 0%, transparent 4px),
    radial-gradient(circle at 35% 25%, rgba(180,140,60,0.07) 0%, transparent 2px),
    radial-gradient(circle at 85% 65%, rgba(201,169,110,0.05) 0%, transparent 3px);
  animation: emberFloat 8s ease-in-out infinite;
}

@keyframes emberFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-15px) translateX(8px); }
  50% { transform: translateY(-25px) translateX(-5px); }
  75% { transform: translateY(-10px) translateX(12px); }
}

/* ============================================================
   4. CHAPTER 3 — "BIRTH"
   Explosion of light: the moment of creation, dramatic burst
   ============================================================ */
.chapter-bg--birth::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Central birth burst */
    radial-gradient(circle at 50% 50%, rgba(212,168,67,0.25) 0%, rgba(201,169,110,0.1) 20%, rgba(139,90,43,0.05) 40%, transparent 70%),
    /* Radiating light rays */
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(212,168,67,0.03) 10deg, transparent 20deg,
      transparent 40deg, rgba(201,169,110,0.04) 50deg, transparent 60deg,
      transparent 80deg, rgba(212,168,67,0.03) 90deg, transparent 100deg,
      transparent 120deg, rgba(201,169,110,0.04) 130deg, transparent 140deg,
      transparent 160deg, rgba(212,168,67,0.03) 170deg, transparent 180deg,
      transparent 200deg, rgba(201,169,110,0.04) 210deg, transparent 220deg,
      transparent 240deg, rgba(212,168,67,0.03) 250deg, transparent 260deg,
      transparent 280deg, rgba(201,169,110,0.04) 290deg, transparent 300deg,
      transparent 320deg, rgba(212,168,67,0.03) 330deg, transparent 340deg,
      transparent 360deg
    ),
    linear-gradient(180deg, #0d0b08 0%, #0a0a0b 100%);
  animation: birthBurst 6s ease-out infinite;
}

@keyframes birthBurst {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ============================================================
   5. CHAPTER 4 — "BREAKING HIERARCHY"
   Shattered glass / breaking barriers: angular light shards
   ============================================================ */
.chapter-bg--break::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Diagonal light shards */
    linear-gradient(135deg, transparent 40%, rgba(201,169,110,0.06) 45%, transparent 50%),
    linear-gradient(225deg, transparent 35%, rgba(212,168,67,0.05) 40%, transparent 45%),
    linear-gradient(45deg, transparent 45%, rgba(201,169,110,0.04) 50%, transparent 55%),
    linear-gradient(315deg, transparent 30%, rgba(180,140,60,0.05) 35%, transparent 40%),
    /* Central fracture glow */
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(212,168,67,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0c0a08 100%);
  animation: shardShift 10s ease-in-out infinite alternate;
}

@keyframes shardShift {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; opacity: 0.8; }
  100% { background-position: 5% 3%, -3% 2%, 2% -2%, -2% 3%, 0% 0%, 0% 0%; opacity: 1; }
}

/* ============================================================
   6. CHAPTER 5 — "THE BAND GROWS"
   Expanding universe: outward ripples, growing energy
   ============================================================ */
.chapter-bg--growth::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Expanding rings */
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 25%, rgba(201,169,110,0.04) 26%, transparent 27%),
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 40%, rgba(212,168,67,0.03) 41%, transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 55%, rgba(201,169,110,0.02) 56%, transparent 57%),
    /* Warm center glow */
    radial-gradient(circle at 50% 50%, rgba(212,168,67,0.12) 0%, rgba(201,169,110,0.05) 30%, transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0d0b08 100%);
  animation: growthRipple 8s ease-in-out infinite;
}

@keyframes growthRipple {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ============================================================
   7. CHAPTER 6 — "ORIGINAL MUSIC"
   Sound waves visualized: flowing sine waves, rhythmic pulses
   ============================================================ */
.chapter-bg--soundwaves::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Sound wave layers */
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 40px,
      rgba(201,169,110,0.03) 40px, rgba(201,169,110,0.03) 41px,
      transparent 41px, transparent 80px
    ),
    /* Curved wave glow */
    radial-gradient(ellipse 80% 30% at 50% 40%, rgba(212,168,67,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 25% at 30% 60%, rgba(201,169,110,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 25% at 70% 55%, rgba(180,140,60,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0b 0%, #0c0a08 100%);
  animation: waveFlow 6s ease-in-out infinite;
}

@keyframes waveFlow {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  50% { background-position: 20px 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}

/* ============================================================
   8. CHAPTER 7 — "PASSION + SUPPORT"
   Institutional warmth: structured grid, warm amber confidence
   ============================================================ */
.chapter-bg--institution::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Subtle grid structure */
    linear-gradient(90deg, rgba(201,169,110,0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,169,110,0.02) 1px, transparent 1px),
    /* Warm institutional glow */
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,168,67,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 30% 30%, rgba(201,169,110,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 70% 70%, rgba(180,140,60,0.05) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0b 0%, #0d0b06 100%);
  background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: gridPulse 10s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* ============================================================
   9. CHAPTER 8 — "THE GENERATIONS"
   DNA / lineage: flowing double helix curves, connecting threads
   ============================================================ */
.chapter-bg--generations::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Flowing connection lines */
    radial-gradient(ellipse 30% 80% at 35% 50%, rgba(201,169,110,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 30% 80% at 65% 50%, rgba(212,168,67,0.05) 0%, transparent 50%),
    /* Connecting threads */
    linear-gradient(90deg, transparent 48%, rgba(201,169,110,0.03) 49%, rgba(201,169,110,0.03) 51%, transparent 52%),
    /* Warm lineage glow */
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(212,168,67,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0c0a08 100%);
  animation: lineageFlow 12s ease-in-out infinite;
}

@keyframes lineageFlow {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  50% { background-position: 2% 1%, -2% -1%, 0% 0%, 0% 0%, 0% 0%; }
}

/* ============================================================
   10. CHAPTER 9 — "PHELE AASA SOHOR"
   City lights at night: bokeh orbs, urban warmth
   ============================================================ */
.chapter-bg--citynight::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Bokeh orbs */
    radial-gradient(circle at 20% 30%, rgba(212,168,67,0.12) 0%, transparent 8%),
    radial-gradient(circle at 70% 25%, rgba(201,169,110,0.09) 0%, transparent 6%),
    radial-gradient(circle at 40% 60%, rgba(180,140,60,0.08) 0%, transparent 10%),
    radial-gradient(circle at 80% 70%, rgba(212,168,67,0.07) 0%, transparent 7%),
    radial-gradient(circle at 30% 80%, rgba(201,169,110,0.06) 0%, transparent 9%),
    radial-gradient(circle at 60% 40%, rgba(180,140,60,0.05) 0%, transparent 8%),
    radial-gradient(circle at 90% 50%, rgba(212,168,67,0.06) 0%, transparent 6%),
    /* City glow haze */
    radial-gradient(ellipse 100% 60% at 50% 40%, rgba(201,169,110,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #08080a 0%, #0a0a0b 50%, #0c0a08 100%);
  animation: cityBreathe 10s ease-in-out infinite;
}

@keyframes cityBreathe {
  0%, 100% { filter: brightness(1) blur(0px); }
  50% { filter: brightness(1.1) blur(0.5px); }
}

/* ============================================================
   11. CHAPTER 10 — "TODAY"
   Present moment: sharp, clean, focused spotlight
   ============================================================ */
.chapter-bg--today::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Sharp focused spotlight */
    radial-gradient(circle at 50% 45%, rgba(212,168,67,0.2) 0%, rgba(201,169,110,0.08) 25%, transparent 55%),
    /* Clean rim light */
    radial-gradient(ellipse 80% 30% at 50% 0%, rgba(201,169,110,0.06) 0%, transparent 50%),
    /* Subtle floor reflection */
    radial-gradient(ellipse 60% 20% at 50% 100%, rgba(212,168,67,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0b 0%, #0c0c0d 100%);
  animation: todayFocus 5s ease-in-out infinite;
}

@keyframes todayFocus {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}

/* ============================================================
   12. CHAPTER 11 — "THE FUTURE"
   Horizon line: dawn breaking, infinite possibility, upward motion
   ============================================================ */
.chapter-bg--future::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Horizon glow */
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(212,168,67,0.15) 0%, rgba(201,169,110,0.08) 30%, transparent 60%),
    /* Rising light rays */
    conic-gradient(from 180deg at 50% 100%,
      transparent 0deg, rgba(212,168,67,0.04) 15deg, transparent 30deg,
      transparent 50deg, rgba(201,169,110,0.03) 65deg, transparent 80deg,
      transparent 100deg, rgba(212,168,67,0.04) 115deg, transparent 130deg,
      transparent 150deg, rgba(201,169,110,0.03) 165deg, transparent 180deg
    ),
    /* Star-like points */
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 2px),
    radial-gradient(circle at 70% 15%, rgba(255,255,255,0.06) 0%, transparent 1.5px),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.1) 0%, transparent 2px),
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.05) 0%, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.07) 0%, transparent 1.5px),
    /* Deep space to dawn transition */
    linear-gradient(180deg, #050508 0%, #080a10 30%, #0a0a0b 60%, #0c0a06 100%);
  animation: futureDawn 15s ease-in-out infinite alternate;
}

@keyframes futureDawn {
  0% { filter: brightness(0.9); }
  100% { filter: brightness(1.15); }
}

/* Twinkling stars */
.chapter-bg--future::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.1) 0%, transparent 1px),
    radial-gradient(circle at 45% 18%, rgba(255,255,255,0.08) 0%, transparent 1.5px),
    radial-gradient(circle at 75% 22%, rgba(255,255,255,0.06) 0%, transparent 1px),
    radial-gradient(circle at 85% 40%, rgba(255,255,255,0.09) 0%, transparent 1px),
    radial-gradient(circle at 25% 45%, rgba(255,255,255,0.07) 0%, transparent 1.5px),
    radial-gradient(circle at 60% 35%, rgba(255,255,255,0.05) 0%, transparent 1px);
  animation: starTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ============================================================
   13. CLOSING — "THE LEGACY"
   Golden aurora: warm, eternal, wrapping glow
   ============================================================ */
.closing-cinematic::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Golden aurora waves */
    radial-gradient(ellipse 80% 40% at 50% 60%, rgba(212,168,67,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 30% 50%, rgba(201,169,110,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 30% at 70% 50%, rgba(180,140,60,0.07) 0%, transparent 50%),
    /* Warm wrap-around */
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(212,168,67,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #0a0a0b 0%, #0c0a06 100%);
  animation: auroraWrap 10s ease-in-out infinite alternate;
}

@keyframes auroraWrap {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: 3% 2%, -2% 1%, 2% -1%, 0% 0%, 0% 0%; }
}

/* ============================================================
   BASE CHAPTER STYLES (apply to all chapters)
   ============================================================ */
.chapter-cinematic {
  position: relative;
}

.chapter-cinematic::before,
.chapter-cinematic::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* When real media is present, dim the CSS background */
.chapter-cinematic--media::before,
.chapter-cinematic--media::after {
  opacity: 0.3;
}

/* ============================================================
   LIGHT LEAK OVERLAY (global, subtle)
   Adds that anamorphic lens feel
   ============================================================ */
.cinematic-light-leak {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background:
    radial-gradient(ellipse 20% 80% at 0% 50%, rgba(212,168,67,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 20% 80% at 100% 50%, rgba(201,169,110,0.02) 0%, transparent 50%);
  animation: lightLeakShift 15s ease-in-out infinite alternate;
}

@keyframes lightLeakShift {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ============================================================
   FILM DUST PARTICLES (subtle floating specs)
   ============================================================ */
.cinematic-dust {
  position: fixed;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 0%, transparent 1px),
    radial-gradient(circle at 30% 60%, rgba(255,255,255,0.02) 0%, transparent 1.5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.025) 0%, transparent 1px),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.02) 0%, transparent 2px),
    radial-gradient(circle at 90% 70%, rgba(255,255,255,0.03) 0%, transparent 1px),
    radial-gradient(circle at 20% 90%, rgba(255,255,255,0.015) 0%, transparent 1.5px),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.02) 0%, transparent 1px);
  animation: dustFloat 20s ease-in-out infinite;
}

@keyframes dustFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(10px) translateX(-15px); }
  75% { transform: translateY(-10px) translateX(5px); }
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  .hero-cinematic::before,
  .chapter-cinematic::before,
  .closing-cinematic::before {
    animation-duration: 20s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cinematic::before,
  .hero-cinematic::after,
  .chapter-cinematic::before,
  .chapter-cinematic::after,
  .closing-cinematic::before,
  .cinematic-light-leak,
  .cinematic-dust {
    animation: none !important;
  }
}