/* Echoes of Light — intro stage.
   Same grammar as the Disney+ castle stage: one sticky full-viewport backdrop
   that the opening chapters scroll over. Here the backdrop is the installation
   itself, crossfading between night views as you descend. */

.echo-stage{ position:relative; background:var(--dark-bg,#08070C) }
/* The page base sets `section[data-tone="dark"] > * { position:relative; z-index:1 }`,
   which outranks a single class and cancels the pin. Re-assert at higher
   specificity so the backdrop actually sticks under all three chapters. */
section.echo-stage[data-tone] > .echo-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:0 }
section.echo-stage[data-tone] > .echo-chapters{ z-index:1 }
/* live 3D projection stage */
.echo-3d{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease }
.echo-3d.is-ready{ opacity:1 }
.echo-3d canvas{ display:block; width:100%; height:100% }
.echo-fallback{ position:absolute; inset:0; opacity:1; transition:opacity 1.2s ease }
.echo-3d.is-ready ~ .echo-fallback{ opacity:0 }
.echo-fallback img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06) }

.echo-frame{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s cubic-bezier(.4,0,.2,1) }
.echo-frame.is-on{ opacity:1 }
.echo-frame img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(var(--z,1.08)); transition:transform 1.6s cubic-bezier(.2,.7,.2,1) }
.echo-vig{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,7,12,.92) 0%, rgba(8,7,12,.66) 36%, rgba(8,7,12,.06) 66%, rgba(8,7,12,.42) 100%),
    linear-gradient(180deg, rgba(8,7,12,.62) 0%, transparent 24%, transparent 62%, rgba(8,7,12,.86) 100%) }
.echo-grain{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 90% at 78% 14%, rgba(150,90,220,.20), transparent 58%),
             radial-gradient(90% 70% at 18% 88%, rgba(60,90,230,.16), transparent 60%) }

.echo-chapters{ position:relative; z-index:1; margin-top:-100svh }
.echo-chapters .chapter{ min-height:100svh; display:flex; align-items:center; padding:clamp(56px,8vh,110px) var(--gutter) }
.echo-chapters .chapter-inner{ width:100%; max-width:var(--maxw); margin:0 auto }
.echo-chapters .chapter-hero{ align-items:flex-start }
.echo-chapters .chapter-hero .chapter-inner{ display:flex; flex-direction:column; min-height:calc(100svh - clamp(96px,16vh,220px)) }
.echo-chapters .hero-foot{ margin-top:auto }

.ec-copy{ max-width:52ch }
.ec-k{ font-family:'Outfit',system-ui,sans-serif; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--dark-ink-soft,rgba(238,240,252,.6)); display:flex; align-items:baseline; gap:10px; margin-bottom:clamp(16px,2vw,26px) }
.ec-k b{ font-weight:500; color:var(--accent,#B08BFF) }
.ec-t{ font-family:'PP Monument Extended',system-ui,sans-serif; font-weight:900; font-size:clamp(24px,2.7vw,42px); line-height:1.1; letter-spacing:-.005em; margin:0 0 clamp(16px,2vw,28px); text-wrap:pretty }
.ec-t em{ font-family:'Outfit',system-ui,sans-serif; font-weight:300; font-style:italic; letter-spacing:.01em }
.ec-copy p{ font-family:'Outfit',system-ui,sans-serif; font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.74; color:var(--dark-ink-soft,rgba(238,240,252,.66)); margin:0 0 16px; max-width:52ch; text-wrap:pretty }
.ec-copy p:last-child{ margin-bottom:0 }

/* real media fills for the page's placeholder tiles */
.ph.has-media::before,.ph.has-media::after{ content:none }
.ph.has-media{ border:0; background:transparent }
.ph.has-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1 }
.ph.has-media .caption,.ph.has-media .ph-label,.ph.has-media .ph-dim{ z-index:3 }
.vb-frame > img,.hm-frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }

@media (max-width:820px){
  .echo-vig{ background:linear-gradient(180deg, rgba(8,7,12,.86) 0%, rgba(8,7,12,.5) 38%, rgba(8,7,12,.92) 100%) }
  .ec-copy{ max-width:none }
}
@media (prefers-reduced-motion:reduce){ .echo-frame img{ transition:none } }