/* Only transform and opacity change during the shared, critically damped reveal.
   The final media slot and the rest of the document are laid out from first paint. */
.intro-backdrop { display: none; }
/* clip, unlike hidden, does not create a scrolling ancestor for process cards. */
main { overflow: clip; }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .intro-backdrop {
  display: block; position: fixed; inset: 0; z-index: 40;
  background: var(--paper); opacity: calc(1 - var(--intro-progress,0)); pointer-events: none;
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-hero {
  position: relative; z-index: 41; background: transparent;
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-stage { background: transparent; overflow: visible; }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-media { overflow: visible; }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-footage {
  overflow: visible; z-index: 0;
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-frame {
  transform-origin: 50% 50%; transform: translate3d(0,var(--intro-y,0px),0) scale(var(--intro-scale,1));
  will-change: transform;
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .site-header {
  z-index: 50; opacity: var(--intro-progress,0);
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .site-header:not(.scrolled) { background: #0c1430; }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) :is(.page-reveal,body > footer) {
  opacity: var(--intro-progress,0); transform: translate3d(0,var(--intro-content-y,48px),0); will-change: transform,opacity;
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-column {
  opacity: var(--intro-progress,0); transform: translate3d(var(--column-shift,0%),var(--intro-y,0px),0);
}
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) :is(.cinematic-scrim,.cinematic-progress) { opacity: calc(var(--intro-progress,0) * var(--scrim-opacity,1)); }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-scrim { transform: translate3d(0,var(--intro-y,0px),0) scale(var(--intro-scale,1)); }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-progress { transform: translate3d(0,calc(-50% + var(--intro-y,0px)),0); }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-hero[data-end-state="true"] .cinematic-end-state { opacity: var(--intro-progress,0); transition: none; transform: translate3d(0,var(--intro-y,0px),0); }
html:is([data-hero-intro="pending"],[data-hero-intro="hold"]) :is(.site-header,.cinematic-column,.cinematic-progress,.page-reveal,body > footer) { pointer-events: none; }
@media(max-width:767px) {
  html:is([data-hero-intro="pending"],[data-hero-intro="hold"],[data-hero-intro="revealing"]) .cinematic-frame {
    /* Mobile keeps its approved fixed crop and size; the reveal adds no zoom. */
    transform: translate3d(0,var(--intro-y,0px),0);
  }
}
@media(prefers-reduced-motion:reduce) {
  .intro-backdrop { display: none !important; }
}