/* ═══════════════════════════════════════════════════
   CINEMATIC.CSS — Bollywood visual treatment
   Rich jewel tones · Bokeh · God rays · Marigold · Drama
════════════════════════════════════════════════════ */

/* ─── Bollywood color overrides ─── */
:root {
  --bollywood-crimson:  #4a0818;
  --bollywood-magenta:  #8b1a4a;
  --bollywood-saffron:  #e8721c;
  --bollywood-gold:     #f4a522;
  --bollywood-rose:     #c4345a;
  --bollywood-deep:     #0d0208;
  --ray-color:          rgba(244, 165, 34, 0.12);
  --bokeh-gold:         rgba(244, 180, 60, 0.55);
  --bokeh-rose:         rgba(196, 52, 90, 0.4);
  --bokeh-saffron:      rgba(232, 114, 28, 0.45);
  --bokeh-white:        rgba(255, 240, 210, 0.35);
}

/* ═══════════════════════════════════════════════════
   FILM GRAIN (canvas injected by JS, this is CSS fallback)
════════════════════════════════════════════════════ */
#grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   LETTERBOX BARS — cinematic widescreen
════════════════════════════════════════════════════ */
.letterbox::before,
.letterbox::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 28px;
  background: #000;
  z-index: 15;
  pointer-events: none;
}
.letterbox::before { top: 0; }
.letterbox::after  { bottom: 0; }

/* ═══════════════════════════════════════════════════
   HERO — Bollywood jewel-tone upgrade
════════════════════════════════════════════════════ */
#hero {
  background: url('../assets/photos/hero.jpg') center/cover no-repeat;
}

/* ─── Bokeh particles ─── */
.bokeh {
  position: absolute;
  width:  var(--size, 80px);
  height: var(--size, 80px);
  left:   var(--x, 50%);
  top:    var(--y, 50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--color, rgba(244,180,60,0.6)) 0%,
    transparent 70%
  );
  filter: blur(var(--blur, 14px));
  opacity: var(--op, 0.2);
  animation: bokehDrift var(--dur, 12s) ease-in-out var(--delay, 0s) infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes bokehDrift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--op, 0.2);
  }
  33% {
    transform: translate(var(--tx, 20px), var(--ty, -25px)) scale(1.18);
    opacity: calc(var(--op, 0.2) * 1.5);
  }
  66% {
    transform: translate(calc(var(--tx, 20px) * -0.6), calc(var(--ty, -25px) * 0.7)) scale(0.88);
    opacity: calc(var(--op, 0.2) * 0.7);
  }
}

/* ─── God rays / light rays ─── */
.ray {
  position: absolute;
  top: -30%;
  left: var(--left, 50%);
  width: 80px;
  height: 180%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--ray-color) 30%,
    rgba(244, 165, 34, 0.08) 60%,
    transparent 100%
  );
  transform: rotate(var(--angle, 0deg));
  transform-origin: top center;
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
  animation: raySweep var(--dur, 15s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes raySweep {
  0%, 100% { opacity: 0.4; transform: rotate(var(--angle, 0deg)) scaleX(1); }
  50%       { opacity: 1;   transform: rotate(calc(var(--angle, 0deg) + 8deg)) scaleX(1.6); }
}

/* ─── Lens flare pulse ─── */
.lens-flare {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: flarePulse var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes flarePulse {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50%       { opacity: 1; transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════
   THE MOMENT — Stage spotlight upgrade
════════════════════════════════════════════════════ */
#the-moment {
  background: url('../assets/photos/moment.jpg') center/cover no-repeat;
}

.stage-light {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 100vw);
  height: 130%;
  background: radial-gradient(
    ellipse 50% 70% at 50% 0%,
    rgba(244, 165, 34, 0.22) 0%,
    rgba(196, 52, 90, 0.08) 50%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1;
  animation: stageGlow 7s ease-in-out infinite;
}

@keyframes stageGlow {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scaleX(1.15); }
}

/* ═══════════════════════════════════════════════════
   CLOSING — Rich crimson upgrade
════════════════════════════════════════════════════ */
#closing {
  background: url('../assets/photos/closing.jpg') center/cover no-repeat;
}

/* ═══════════════════════════════════════════════════
   SECTION 3 (Closer) — Warm amber background
════════════════════════════════════════════════════ */
#closer.section-alt {
  background: linear-gradient(160deg, #f7ede0 0%, #f0ddc8 50%, #e8ccb0 100%);
}

/* ═══════════════════════════════════════════════════
   VIGNETTE — on all full-screen dark sections
════════════════════════════════════════════════════ */
.vignette-inset {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 40%,
    rgba(5, 1, 3, 0.7) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════
   SPARKLE — twinkling light dots for closing
════════════════════════════════════════════════════ */
.sparkle {
  position: absolute;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: var(--sparkle-color, #f4a522);
  left: var(--sx, 50%);
  top:  var(--sy, 50%);
  pointer-events: none;
  z-index: 2;
  animation: sparkleGlow var(--sdur, 3s) ease-in-out var(--sdelay, 0s) infinite;
}

@keyframes sparkleGlow {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 1; transform: scale(1); box-shadow: 0 0 6px 2px var(--sparkle-color, #f4a522); }
}

/* ═══════════════════════════════════════════════════
   TIMELINE card — subtle jewel tone accent
════════════════════════════════════════════════════ */
.timeline-card.special .timeline-card-inner {
  background: linear-gradient(135deg, #fffaf5 0%, #fdf0e8 50%, #fae8d8 100%);
  border: 1px solid rgba(244, 165, 34, 0.35);
}

/* ═══════════════════════════════════════════════════
   HERO counter — saffron glow on numbers
════════════════════════════════════════════════════ */
.counter-num {
  text-shadow: 0 0 20px rgba(244, 165, 34, 0.5);
}

/* ═══════════════════════════════════════════════════
   HERO title — gold shimmer animation
════════════════════════════════════════════════════ */
.hero-script {
  background: linear-gradient(
    90deg,
    #fff8f0 20%,
    #f4a522 45%,
    #e8d48a 55%,
    #fff8f0 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ═══════════════════════════════════════════════════
   MOMENT DATE — saffron glow
════════════════════════════════════════════════════ */
.moment-date {
  text-shadow:
    0 0 40px rgba(244, 165, 34, 0.6),
    0 0 80px rgba(244, 165, 34, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════
   LETTER — gold border more vivid
════════════════════════════════════════════════════ */
.letter-body {
  border-left: 3px solid var(--bollywood-gold);
}

/* ═══════════════════════════════════════════════════
   PULL QUOTE — jewel tone
════════════════════════════════════════════════════ */
.pull-quote {
  border-left: 3px solid var(--bollywood-gold);
  color: var(--bollywood-magenta);
}

/* ═══════════════════════════════════════════════════
   SECTION YEAR LABELS — saffron
════════════════════════════════════════════════════ */
.section-year { color: var(--bollywood-saffron); }

/* ═══════════════════════════════════════════════════
   GOLD ACCENTS — richer
════════════════════════════════════════════════════ */
.timeline-dot.gold {
  background: var(--bollywood-gold);
  box-shadow: 0 0 0 3px rgba(244, 165, 34, 0.4), 0 0 12px rgba(244, 165, 34, 0.4);
}

#scroll-progress { background: linear-gradient(90deg, var(--bollywood-rose), var(--bollywood-gold)); }

/* ═══════════════════════════════════════════════════
   MARIGOLD PETALS — CSS fallback (canvas handles the real animation)
════════════════════════════════════════════════════ */
.petal::before { content: '✿'; color: var(--bollywood-saffron); }