/* Home page intro loader (inc/intro.php, assets/js/intro.js).
   The overlay is display:none unless the inline head gate set html.intro-on, so without JS, under reduced
   motion, on a deep link or on a return visit it is never rendered. While it is up the page cannot scroll
   (overflow:hidden on <html>); the scrollbar gutter is kept so the deck is measured at the width it will
   have afterwards. The overlay is width:100vw, not inset:0: 100vw includes the gutter, a fixed box with left/right:0
   stops at it and would leave a strip of the page showing (classic scrollbars; with overlay scrollbars the two are
   the same). That cannot make the page scroll sideways: html is overflow:hidden while it is up. The fade is
   opacity + transform only. */
.intro{display:none}
html.intro-on{overflow:hidden;scrollbar-gutter:stable}
html.intro-on .intro{
  position:fixed;top:0;left:0;width:100vw;height:100%;z-index:1000;display:flex;flex-direction:column;
  background:var(--navy-deep,#050818);color:var(--cream,#F6EBC8);
  overscroll-behavior:contain;
  transition:opacity .4s ease,transform .4s ease;
  will-change:opacity,transform;
}
/* the poster is a CSS background, not video[poster]: it is only fetched when the overlay is actually shown */
.intro__stage{
  flex:1 1 auto;min-height:0;   /* the whole screen: the video has all of it */
  background:url(../intro/intro-poster.jpg) center/contain no-repeat;
}
.intro__video{display:block;width:100%;height:100%;object-fit:contain;background:transparent}
/* A portrait phone (aspect ratio 0.6 or narrower; phones are 0.45-0.5, the 464x848 picture is 0.547) gets the picture
   filling the whole screen: cover, trimming a few percent off each side. The picture sits at 64% 50%, not 50%: on a phone the visible
   window (391 of the picture's 464 px) is barely wider than the chip (~385 px) when it fills the frame at 2.5-3 s, and the chip is
   a little right of centre then, so a centred crop cut ~9 px off its right rim; 58% still cut ~3 px, 64% keeps the rim inside
   (measured on the frames of the mp4). The end card (chip at x 63-408, centre ~235 of 464) stays within ~7 px of the screen's
   centre. The poster uses the same fit and position so nothing jumps when the video's first frame replaces it. Desktop and
   landscape keep contain, centred on navy. */
@media (max-aspect-ratio:3/5){
  .intro__stage{background-size:cover;background-position:64% 50%}
  .intro__video{object-fit:cover;object-position:64% 50%}
}
/* Skip: the only control. A small pill floating over the video in the bottom-right corner, inside the safe-area inset (gold
   text and a thin gold outline on translucent navy: DESIGN.md's quiet secondary look). The visible box is ~72x32; the
   44px touch target comes from the ::after, which is part of the button for clicks and taps. */
.intro__skip{
  position:absolute;z-index:1;
  right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;
  min-width:64px;height:32px;padding:0 16px;margin:0;border:0;border-radius:999px;
  background:rgba(5,8,24,.75);color:var(--gold-hi,#F7DB82);
  box-shadow:0 0 0 1px var(--gold,#D9A52E) inset;
  font:700 12px/1 var(--f-label,inherit);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.intro__skip::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-6px;right:-6px}
.intro__skip:hover{background:rgba(5,8,24,.8)}
.intro__skip:focus-visible{outline:2px solid var(--gold-hi,#F7DB82);outline-offset:3px}
html.intro-on .intro.is-out{opacity:0;transform:scale(1.03);pointer-events:none}
body[tabindex="-1"]:focus{outline:none}
@media print{.intro{display:none!important}}