/* Frame 03 — THE REVEAL
   Tunnel mouth opens into the White Out. Auto-triggered from Frame 02
   at walk progress = 1. Headline lock: "107. THE CATHEDRAL." */

.frame[data-frame="03"] {
  background: var(--surface-void);
  overflow: hidden;
}

.frame[data-frame="03"] .reveal-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* The bloom: starts as a tight bright dot (continuing F02's tunnel-mouth)
   and expands to fill the screen as a near-pure white field. */
.frame[data-frame="03"] .reveal-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18vmin;
  height: 18vmin;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    #ffffff 0%,
    #fbf7ec 35%,
    rgba(245, 240, 220, 0.85) 60%,
    rgba(212, 160, 23, 0.25) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: blur(2px);
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* White Out destination — real crowd photo behind the headline.
   Asset path lives in JS (whiteout-hero.jpg when delivered;
   whiteout-placeholder.svg until then). */
.frame[data-frame="03"] .reveal-wash {
  position: absolute;
  inset: 0;
  background-color: var(--paper-cream); /* warm fallback if image fails */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
  transform: scale(1.02);
}

/* Slight upward camera tilt as the wash settles in (per storyboard) */
.frame[data-frame="03"].is-active .reveal-wash {
  animation:
    reveal-wash 700ms var(--ease-default) 650ms forwards,
    reveal-wash-tilt 4500ms var(--ease-default) 700ms forwards;
}
@keyframes reveal-wash-tilt {
  to { transform: scale(1.06) translateY(-1.5%); }
}

/* Fireworks layer — top third of frame.
   CSS particle bursts (placeholder); video overlay swaps in later. */
.frame[data-frame="03"] .reveal-fireworks {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity;
}
.frame[data-frame="03"] .reveal-fireworks .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 35%, rgba(212,160,23,0.6) 60%, transparent 75%);
  box-shadow: 0 0 18px 4px rgba(255, 235, 170, 0.55);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: reveal-spark 1800ms var(--ease-default) infinite;
}
@keyframes reveal-spark {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  60%  { transform: translate(-50%, -50%) scale(2.4); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}
.frame[data-frame="03"].is-active .reveal-fireworks {
  animation: reveal-fireworks-in 800ms var(--ease-default) 1100ms forwards;
}
@keyframes reveal-fireworks-in { to { opacity: 1; } }

/* Headline block sits above the wash and the letterbox bars */
.frame[data-frame="03"] .reveal-headline {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--ink-paper);
  opacity: 0;
  will-change: opacity, transform;
}

.frame[data-frame="03"] .reveal-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(96px, 18vw, 240px);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--gold-base);
  text-shadow: 0 2px 40px rgba(184, 134, 11, 0.18);
}

.frame[data-frame="03"] .reveal-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: clamp(16px, 2.5vh, 28px) auto;
  background: rgba(42, 36, 25, 0.55);
}

.frame[data-frame="03"] .reveal-subtitle {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: var(--tracking-widest);
  color: var(--ink-paper);
}

/* === Animations fire when .is-active is present === */

.frame[data-frame="03"].is-active .reveal-bloom {
  animation: reveal-bloom 1100ms var(--ease-default) forwards;
}

.frame[data-frame="03"].is-active .reveal-headline {
  animation:
    reveal-headline-in 900ms var(--ease-default) 1000ms forwards,
    reveal-headline-float 7s var(--ease-default) 1900ms infinite alternate;
}

@keyframes reveal-headline-float {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-6px) scale(1); }
}

@keyframes reveal-bloom {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); filter: blur(6px); }
  20%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(28); filter: blur(0); }
}

@keyframes reveal-wash {
  to { opacity: 1; }
}

@keyframes reveal-headline-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .frame[data-frame="03"].is-active .reveal-bloom,
  .frame[data-frame="03"].is-active .reveal-wash,
  .frame[data-frame="03"].is-active .reveal-headline {
    animation: none;
    opacity: 1;
  }
  .frame[data-frame="03"].is-active .reveal-wash { background: var(--paper-cream); }
  .frame[data-frame="03"].is-active .reveal-bloom { display: none; }
}

/* Scroll-on hint at the bottom (matches F02's hint styling) */
.frame[data-frame="03"] .reveal-hint {
  position: absolute;
  left: 50%;
  bottom: calc(8vh + 12px);
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(42, 36, 25, 0.55);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  animation: reveal-hint-in 600ms var(--ease-default) 2200ms forwards;
}

@keyframes reveal-hint-in {
  to { opacity: 1; }
}

/* Cinematic 2.39:1 letterbox bars — match F04 treatment.
   Above wash + fireworks but below the headline + hint (z 5). */
.frame[data-frame="03"] .letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 8vh;
  background: #000000;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  will-change: transform, opacity;
}
.frame[data-frame="03"] .letterbox--top    { top: 0;    transform: translateY(-100%); }
.frame[data-frame="03"] .letterbox--bottom { bottom: 0; transform: translateY( 100%); }

.frame[data-frame="03"].is-active .letterbox--top {
  animation: letterbox-in-top-03 1.2s var(--ease-default) forwards;
}
.frame[data-frame="03"].is-active .letterbox--bottom {
  animation: letterbox-in-bottom-03 1.2s var(--ease-default) forwards;
}

@keyframes letterbox-in-top-03    { to { opacity: 1; transform: translateY(0); } }
@keyframes letterbox-in-bottom-03 { to { opacity: 1; transform: translateY(0); } }

.frame[data-frame="03"] .letterbox-label {
  position: absolute;
  top: 50%;
  left: clamp(16px, 3vw, 48px);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--gold-base);
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .frame[data-frame="03"] .letterbox,
  .frame[data-frame="03"].is-active .letterbox--top,
  .frame[data-frame="03"].is-active .letterbox--bottom {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}