.video-hero { position: relative; isolation: isolate; }
.video-hero .hero-inner {
  position: relative;
  min-height: calc(100vh - 90px);
  min-height: calc(100svh - 90px);
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; pointer-events: none; }
.video-hero.is-playing .hero-video { opacity: 1; }
.video-hero.is-playing::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000d, #0005); }
.hero-intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #090909; opacity: 0; pointer-events: none; z-index: 2; }
.video-hero.is-intro .hero-intro { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-intro, .hero-video { display: none; } }

body.marble .home-hero.video-hero { background: linear-gradient(90deg, #000d, #0005), #090909 url(assets/hero-video-poster.jpg) center / cover; }
.hero-intro { transition: opacity 180ms ease-out; }
.video-hero.is-intro .hero-intro { transition: none; }

html:has(.site-intro[open]), body:has(.site-intro[open]) { overflow: hidden; }
.site-intro { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #090909; overflow: hidden; overscroll-behavior: none; transition: opacity 180ms ease-out; }
.site-intro::backdrop { background: transparent; }
.site-intro.is-ending { opacity: 0; }
.site-intro video { width: 100%; height: 100%; object-fit: contain; display: block; }