/* Opening film composited in WebGL: the live gallery replaces the green billboard.
   Layers, bottom to top: poster background, video (texture source, never seen), poster copy,
   WebGL canvas. The home remains usable without JavaScript. */
.site-intro{display:none}
html{scrollbar-gutter:stable}
.intro-pending,.intro-pending body{overflow:hidden}
.intro-pending .site-intro{position:fixed;inset:0;z-index:120;display:block;background:#080d0f url('assets/intro/poster.jpg?v=grok-billboard-3') center/cover;isolation:isolate;transition:opacity .38s ease}
.site-intro video,.site-intro canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The poster (gallery already on the billboard) covers the raw green frame at all times. */
.site-intro:after{content:"";position:absolute;inset:0;z-index:1;background:inherit;pointer-events:none}
.site-intro canvas{z-index:2;opacity:0;pointer-events:none;transition:opacity .22s ease}
.intro-live canvas{opacity:1}
/* End: the canvas already shows the exact live hero, so the whole overlay dissolves into it. */
.site-intro.intro-out{opacity:0;pointer-events:none}
.intro-pending .site-header,.intro-pending .hero-heading,.intro-pending .hero-bottom{opacity:0;pointer-events:none}
.intro-pending.intro-revealing .site-header,.intro-pending.intro-revealing .hero-heading,.intro-pending.intro-revealing .hero-bottom{opacity:1;transition:opacity .38s ease}
.intro-skip{position:absolute;right:var(--gutter);bottom:max(28px,env(safe-area-inset-bottom));z-index:3;padding:11px 16px 11px 18px;border:0;border-radius:40px;background:#080d0fb8;box-shadow:inset 0 0 0 1px #ffffff40;color:white;font:500 11px/1.5 var(--mono);text-transform:none;display:flex;gap:14px;align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s,color .3s,opacity .3s}
.intro-skip:hover{background:#f6f7f8;color:#080d0f}
.intro-skip:focus-visible{outline:2px solid white;outline-offset:5px}
.intro-out .intro-skip{opacity:0}
@media(max-width:700px){.intro-skip{bottom:max(24px,env(safe-area-inset-bottom));padding:11px 14px}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none!important}.intro-pending,.intro-pending body{overflow:visible}.intro-pending .site-header,.intro-pending .hero-heading,.intro-pending .hero-bottom{opacity:1}}