/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN — PAGE-LOAD CHOREOGRAPHY (v4 — NO CLASS GATE)
 *
 * Animations now run AUTOMATICALLY when CSS is parsed. No JS dependency.
 * `animation-fill-mode: backwards` means each element shows the `from`
 * keyframe state during its delay, then animates to its visible state.
 *
 * For replay-on-logo-click, the JS detaches and re-attaches the inline
 * animation property to force a fresh play.
 * ════════════════════════════════════════════════════════════════════════ */


/* h1 spans need inline-block for transforms to work */
.hero-elevated .hero-reveal > h1 > span,
.hero-elevated .hero-reveal > h1 > .word-bunyan,
.hero-elevated .hero-reveal > h1 > .punctuation {
  display: inline-block;
}


/* ════════════════════════════════════════════════════════════════════════
 * ═══ THE MASMAK CINEMA — fortress building itself ════════════════════
 * Layered behind the hero headline as an architectural watermark.
 * Construction sequence (each piece rises from the ground in order):
 *   0.3s — foundation line draws across
 *   0.6s — left tower rises
 *   1.0s — right tower rises
 *   1.4s — main fortress wall fills in
 *   1.9s — crenellations pop in one by one
 *   2.3s — arched gate carves out
 *   2.6s — slit windows ignite
 *   2.9s — gold apex domes light up (with glow)
 * ════════════════════════════════════════════════════════════════════════ */
.masmak-cinema {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Centered, large but subtle — text reads above it */
  opacity: 0.55;
}
@media (max-width: 720px) {
  .masmak-cinema { opacity: 0.35; }
}

/* The foundation line — draws from left to right */
.masmak-ground {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: bn-draw-line 1s cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
}
@keyframes bn-draw-line {
  to { stroke-dashoffset: 0; }
}

/* Common technique for "rising from ground": animate clip-path inset
 * from bottom (100%) → 0%. Each piece reveals upward like construction. */
.masmak-tower-left,
.masmak-tower-right,
.masmak-wall,
.masmak-gate {
  transform-origin: center bottom;
}

.masmak-tower-left {
  animation: bn-rise-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 600ms backwards;
}
.masmak-tower-right {
  animation: bn-rise-up 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1000ms backwards;
}
.masmak-wall {
  animation: bn-rise-up 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1400ms backwards;
}
.masmak-gate {
  animation: bn-gate-carve 1s cubic-bezier(0.34, 1.5, 0.64, 1) 2300ms backwards;
}

@keyframes bn-rise-up {
  from {
    opacity: 0;
    transform: translateY(80px) scaleY(0.4);
    transform-origin: center bottom;
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@keyframes bn-gate-carve {
  0%   { opacity: 0; transform: translateY(30px) scale(0.3); transform-origin: center bottom; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Crenellations pop in one by one (each rect with cascading delays) */
.masmak-crenel rect {
  transform-origin: center bottom;
  animation: bn-crenel-pop .55s cubic-bezier(0.34, 1.7, 0.64, 1) backwards;
}
.masmak-crenel rect:nth-child(1)  { animation-delay: 1900ms; }
.masmak-crenel rect:nth-child(2)  { animation-delay: 1950ms; }
.masmak-crenel rect:nth-child(3)  { animation-delay: 2000ms; }
.masmak-crenel rect:nth-child(4)  { animation-delay: 2050ms; }
.masmak-crenel rect:nth-child(5)  { animation-delay: 2100ms; }
.masmak-crenel rect:nth-child(6)  { animation-delay: 2150ms; }
.masmak-crenel rect:nth-child(7)  { animation-delay: 2200ms; }
.masmak-crenel rect:nth-child(8)  { animation-delay: 2250ms; }
.masmak-crenel rect:nth-child(9)  { animation-delay: 2300ms; }
.masmak-crenel rect:nth-child(10) { animation-delay: 2350ms; }
@keyframes bn-crenel-pop {
  from { opacity: 0; transform: translateY(-12px) scaleY(0); }
  to   { opacity: 0.7; transform: translateY(0) scaleY(1); }
}

/* Slit windows ignite */
.masmak-window {
  animation: bn-window-light .6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.masmak-window:nth-of-type(1) { animation-delay: 2600ms; }
.masmak-window:nth-of-type(2) { animation-delay: 2650ms; }
.masmak-window:nth-of-type(3) { animation-delay: 2700ms; }
.masmak-window:nth-of-type(4) { animation-delay: 2750ms; }
.masmak-window:nth-of-type(5) { animation-delay: 2800ms; }
.masmak-window:nth-of-type(6) { animation-delay: 2850ms; }
@keyframes bn-window-light {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 0.8; transform: scale(1); }
}

/* Gold apex domes — IGNITE with glow burst */
.masmak-apex {
  animation: bn-apex-ignite 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transform-origin: center;
}
.masmak-apex:nth-of-type(1) { animation-delay: 2900ms; }
.masmak-apex:nth-of-type(2) { animation-delay: 3000ms; }
@keyframes bn-apex-ignite {
  0%   { opacity: 0; transform: scale(0); filter: drop-shadow(0 0 0 transparent); }
  50%  { opacity: 1; transform: scale(1.8); filter: drop-shadow(0 0 24px rgba(244, 215, 122, 1)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 8px rgba(244, 215, 122, 0.6)); }
}

/* Replay — reset all Masmak parts when .bn-replay class is added */
.hero-elevated.bn-replay .masmak-ground,
.hero-elevated.bn-replay .masmak-tower-left,
.hero-elevated.bn-replay .masmak-tower-right,
.hero-elevated.bn-replay .masmak-wall,
.hero-elevated.bn-replay .masmak-gate,
.hero-elevated.bn-replay .masmak-crenel rect,
.hero-elevated.bn-replay .masmak-window,
.hero-elevated.bn-replay .masmak-apex {
  animation: none;
}


/* ═══ Beat 1: Hero canvas (skyline + sun + palms) ═══════════════════════ */
.hero-elevated .hero-canvas {
  animation: bn-canvas-arrive 2s cubic-bezier(0.16, 1, 0.3, 1) 50ms backwards;
}
@keyframes bn-canvas-arrive {
  from { opacity: 0; transform: translateY(24px) scale(1.04); }
  to   { opacity: 1; transform: none; }
}

/* ═══ Beat 2: Hero meta + label ═════════════════════════════════════════ */
.hero-elevated .hero-reveal > .hero-meta {
  animation: bn-fade-down 1.1s cubic-bezier(0.16, 1, 0.3, 1) 500ms backwards;
}
.hero-elevated .hero-reveal > .label-rule {
  animation: bn-label-track 1.3s cubic-bezier(0.16, 1, 0.3, 1) 750ms backwards;
}
@keyframes bn-fade-down {
  from { opacity: 0; transform: translateY(-18px); filter: blur(4px); }
}
@keyframes bn-label-track {
  from { opacity: 0; transform: translateY(14px); letter-spacing: 1.8em; }
}

/* ═══ Beat 3: H1 word-by-word DRAMATIC unfold ═══════════════════════════ */
.hero-elevated .hero-reveal > h1 > span:nth-of-type(1) {
  animation: bn-word-unfold 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1100ms backwards;
}
.hero-elevated .hero-reveal > h1 > span:nth-of-type(2) {
  animation: bn-word-unfold 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1450ms backwards;
}
.hero-elevated .hero-reveal > h1 > .word-bunyan {
  animation: bn-bunyan-grand 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1800ms backwards;
}
.hero-elevated .hero-reveal > h1 > .punctuation {
  animation: bn-dot-drop .9s cubic-bezier(0.34, 1.6, 0.64, 1) 2700ms backwards;
}
@keyframes bn-word-unfold {
  0%   { opacity: 0; transform: translateY(64px) scale(0.75) rotate(-3deg); filter: blur(18px); }
  55%  { opacity: 1; filter: blur(3px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes bn-bunyan-grand {
  0%   { opacity: 0; transform: translateY(90px) scale(0.45); filter: blur(28px); }
  45%  { opacity: 1; filter: blur(8px) drop-shadow(0 0 40px rgba(244, 215, 122, 1)); }
  75%  { transform: translateY(-6px) scale(1.04); filter: blur(0) drop-shadow(0 0 24px rgba(244, 215, 122, .6)); }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 6px 24px rgba(244, 215, 122, .28)); }
}
@keyframes bn-dot-drop {
  0%   { opacity: 0; transform: translateY(-32px) scale(2.2); }
  100% { opacity: 1; transform: none; }
}

/* ═══ Beat 4: tagline + lead ════════════════════════════════════════════ */
.hero-elevated .hero-reveal > .hero-tagline {
  animation: bn-fade-up-cinematic 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3000ms backwards;
}
.hero-elevated .hero-reveal > .hero-lead {
  animation: bn-fade-up-cinematic 1.1s cubic-bezier(0.16, 1, 0.3, 1) 3200ms backwards;
}
@keyframes bn-fade-up-cinematic {
  from { opacity: 0; transform: translateY(36px); filter: blur(6px); }
}

/* ═══ Beat 5: CTAs ══════════════════════════════════════════════════════ */
.hero-elevated .hero-reveal > .cta-row > *:nth-child(1) {
  animation: bn-cta-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 3400ms backwards;
}
.hero-elevated .hero-reveal > .cta-row > *:nth-child(2) {
  animation: bn-cta-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 3550ms backwards;
}
@keyframes bn-cta-rise {
  from { opacity: 0; transform: translateY(42px) scale(0.88); }
}

/* ═══ Beat 6: stats stagger ═════════════════════════════════════════════ */
.hero-elevated .hero-reveal > .stats > .stat:nth-child(1) {
  animation: bn-stat-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 3800ms backwards;
}
.hero-elevated .hero-reveal > .stats > .stat:nth-child(2) {
  animation: bn-stat-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 3920ms backwards;
}
.hero-elevated .hero-reveal > .stats > .stat:nth-child(3) {
  animation: bn-stat-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 4040ms backwards;
}
.hero-elevated .hero-reveal > .stats > .stat:nth-child(4) {
  animation: bn-stat-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 4160ms backwards;
}
@keyframes bn-stat-rise {
  from { opacity: 0; transform: translateY(32px) scale(.88); filter: blur(4px); }
}

/* ═══ Beat 7: scroll hint ═══════════════════════════════════════════════ */
.hero-elevated .scroll-hint {
  animation: bn-fade-up-cinematic 1.4s cubic-bezier(0.16, 1, 0.3, 1) 4400ms backwards;
}

/* ═══ Navbar (independent of hero, no class gating) ══════════════════════ */
.nav .bunyan-mark svg path,
.nav .bunyan-mark svg circle,
.nav .bunyan-mark svg rect {
  animation: bn-mark-paint 1.2s cubic-bezier(0.16, 1, 0.3, 1) 200ms backwards;
}
.nav .bunyan-wordmark .bw-ar {
  animation: bn-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 600ms backwards;
}
.nav .bunyan-wordmark .bw-en {
  animation: bn-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 750ms backwards;
}
@keyframes bn-mark-paint {
  from { opacity: 0; transform: translateY(-8px) scale(0.85); }
}


/* ═══ FORCE-REPLAY support: add `.bn-replay` to hero to fire animations again
 * The JS toggles a class which doesn't gate visibility (the rules above run
 * unconditionally) — it just causes a re-application via animation-name reset. */
.hero-elevated.bn-replay .hero-canvas,
.hero-elevated.bn-replay .hero-reveal > .hero-meta,
.hero-elevated.bn-replay .hero-reveal > .label-rule,
.hero-elevated.bn-replay .hero-reveal > h1 > span,
.hero-elevated.bn-replay .hero-reveal > h1 > .word-bunyan,
.hero-elevated.bn-replay .hero-reveal > h1 > .punctuation,
.hero-elevated.bn-replay .hero-reveal > .hero-tagline,
.hero-elevated.bn-replay .hero-reveal > .hero-lead,
.hero-elevated.bn-replay .hero-reveal > .cta-row > *,
.hero-elevated.bn-replay .hero-reveal > .stats > .stat,
.hero-elevated.bn-replay .scroll-hint {
  animation: none;
}


/* ═══ REDUCED MOTION — accessibility opt-out ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.bn-respect-reduced-motion .hero-elevated .hero-canvas,
  body.bn-respect-reduced-motion .hero-elevated .hero-reveal > *,
  body.bn-respect-reduced-motion .hero-elevated .hero-reveal > h1 > *,
  body.bn-respect-reduced-motion .hero-elevated .scroll-hint,
  body.bn-respect-reduced-motion .nav * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}