/* ─────────────────────────────────────────────────────────────────────
   Summer Shootout landing page.
   One screen. The poster's details (wordmark, date, venue, sponsors) and
   one job: Sign up, a solid bar fixed along the bottom from the first
   second. Nothing has rounded edges or floats; everything runs edge to
   edge.

   index.html   the film is the face of the page
   poster.html  opens on the poster; one scroll dissolves it into the film
   ───────────────────────────────────────────────────────────────────── */

/* Univers (Hiroki's own face) once its licence is sorted: put the .woff2
   files in assets/fonts/ and restore these two lines.
   @font-face{font-family:"Univers LT";src:url("fonts/UniversLTStd.woff2") format("woff2");font-weight:400;font-display:swap}
   @font-face{font-family:"Univers LT";src:url("fonts/UniversLTStd-Bold.woff2") format("woff2");font-weight:700;font-display:swap} */

:root{
  --blue:#216EBE;
  --ink:#12406F;
  --cream:#F9F5A4;
  --dark:#081A2C;
  --sans:"Univers LT",Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --cond:Archivo,"Helvetica Neue",Arial Narrow,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --bar:calc(66px + env(safe-area-inset-bottom));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--cream);
  font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img,video,canvas{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}

/* Everything sits on one fixed screen. In poster.html the page is a
   little taller only to give the one scroll something to drive; --x
   (set by landing.js) runs 0 to 1 as the poster dissolves into the film. */
.stage{position:fixed;inset:0;overflow:hidden}
.room{height:175svh}                      /* poster.html only: room for the one scroll */


/* ── the film ──────────────────────────────────────────────────────── */
.film{position:absolute;inset:0;background:var(--dark)}
/* shows its opening frame until playback starts, so never a black screen */
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A portrait film can't fill a wide screen without blowing up past its
   resolution, so it runs full height in the middle over a pre-blurred still
   of itself. Baked, not a live blur: Safari can't keep up with a full-screen
   blur filter, and stretching a tiny live canvas comes out blocky. */
@media (min-aspect-ratio:600/848){
  .film{background:var(--dark) url("video/ambient.jpg") center/cover no-repeat}
  .film__video{left:50%;right:auto;width:auto;aspect-ratio:540/960;translate:-50% 0;
    box-shadow:0 0 60px rgba(8,26,44,.35)}
}
.film__shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(8,26,44,.45),transparent 16%),
    linear-gradient(to top,rgba(8,26,44,.92),rgba(8,26,44,.4) 42%,transparent 66%)}


/* ── the details: the poster's own, in the poster's lower third ────── */
/* above the poster too (poster.html), so the lettering stays put while
   only the backdrop behind it dissolves */
.face{position:absolute;left:0;right:0;bottom:var(--bar);z-index:4;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 1.25rem clamp(1.6rem,4.5vh,2.6rem)}
.face__mark{margin:0;width:min(360px,70vw,40svh)}
.face__mark img{width:100%;height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
.face__when{margin:clamp(.9rem,2.4vh,1.3rem) 0 0;font:700 clamp(21px,2.6vh,25px)/1.08 var(--cond);
  font-stretch:72%}

.sponsors{list-style:none;margin:clamp(1.4rem,3.6vh,2.2rem) 0 0;padding:0;
  width:min(440px,100%);display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.sponsors img{height:auto;width:auto}
.s-hiroki{max-height:14px}.s-mizuno{max-height:27px}.s-audi{max-height:32px}.s-amex{max-height:24px}

.sound{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:4;
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem .5rem .65rem;
  border:1px solid rgba(249,245,164,.45);border-radius:999px;cursor:pointer;
  background:rgba(8,26,44,.4);color:var(--cream);
  font:700 12px/1 var(--cond);font-stretch:80%;letter-spacing:.14em;text-transform:uppercase}
.sound svg{width:17px;height:17px;fill:currentColor}
.sound .i-on,.sound[aria-pressed="true"] .i-off{display:none}
.sound[aria-pressed="true"] .i-on{display:block}

/* opening: lettering settles in */
.face > *{animation:settle 1.1s var(--ease) both}
.face__mark{animation-delay:.2s}
.face__when{animation-delay:.38s}
.face .sponsors{animation-delay:.52s}
@keyframes settle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}


/* ── the poster (poster.html) ──────────────────────────────────────── */
/* Laid over the film and dissolved away by the one scroll: no edge, no
   card, it simply turns into the film. */
.poster{position:absolute;inset:0;z-index:3;isolation:isolate;overflow:hidden;
  background:var(--blue);will-change:opacity}   /* opacity set by landing.js */
.poster.is-gone{visibility:hidden}

.poster__burst{position:absolute;z-index:-1;top:-6%;left:50%;translate:-50% 0;
  width:max(min(1180px,128vw,112svh),620px);pointer-events:none;
  transform-origin:50% 40%;will-change:transform}   /* scale set by landing.js;
     the fade-out is baked into burst-fade.png rather than a live mask */
.poster__burst img{width:100%;height:auto;transform-origin:58% 48%;
  animation:blastin 1.5s var(--ease) both}
@keyframes blastin{from{opacity:0;scale:1.16}to{opacity:1;scale:1}}
.poster::after{content:"";position:absolute;inset:auto 0 0;height:76%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(33,110,190,.86) 30%,var(--blue) 58%)}

.poster__cue{position:absolute;left:50%;bottom:calc(var(--bar) + .55rem);
  width:1px;height:26px;translate:-50% 0;overflow:hidden}
.poster__cue::after{content:"";position:absolute;inset:0;background:var(--cream);
  animation:drip 2.2s var(--ease) infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* the sound button belongs to the film, so it arrives with it */
.has-poster .sound{opacity:0}   /* landing.js fades it in with the film */


/* ── sign up: the point of the page ────────────────────────────────── */
/* A solid bar across the bottom, there from the first second and the
   same on every screen: no pill, no panel, no float. */
.signup{position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--bar);padding:0 1rem env(safe-area-inset-bottom);
  background:var(--cream);color:var(--ink);text-decoration:none;
  font:900 clamp(25px,3.2vh,30px)/1 var(--cond);font-stretch:66%;
  letter-spacing:.02em;text-transform:uppercase;
  transition:background .2s}
.signup svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:3;
  transition:transform .25s var(--ease)}
.signup:hover{background:#FFFBC4}
.signup:hover svg{transform:translateX(4px)}
.signup:focus-visible{outline-offset:-6px;outline-color:var(--ink)}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}