/* ==========================================================================
   BORRACHINHA MMA — scroll-driven fly-through, top row to canvas
   ========================================================================== */

/* Self-hosted variable fonts, cut to the characters the pages use: rebuild
   with scripts/build-fonts.mjs when copy adds a new character. */
@font-face{ font-family:"Big Shoulders Display"; src:url("fonts/big-shoulders-display.woff2") format("woff2"); font-weight:600 900; font-display:swap; }
@font-face{ font-family:"Oswald"; src:url("fonts/oswald.woff2") format("woff2"); font-weight:400 600; font-display:swap; }
@font-face{ font-family:"Inter"; src:url("fonts/inter.woff2") format("woff2"); font-weight:400 500; font-display:swap; }

:root{
  --ink:        #050505;
  --ink-soft:   #0c0d0f;
  --bone:       #f2f3f5;
  --bone-dim:   rgba(242,243,245,.58);
  --bone-faint: rgba(242,243,245,.28);
  --blood:      #d20a0a;
  --blood-lift: #ff2626;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --label:   "Oswald", "Arial Narrow", sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --gut: clamp(20px, 4.5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --------------------------------------------------------- stage + grade */

#scene{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
}

/* animated film grain — keeps the flat blacks from banding */
.grain{
  /* the steps below move it at most 4% of its own size: a 10% margin covers them */
  position:fixed; inset:-10%;
  z-index:2; pointer-events:none;
  opacity:.4;
  mix-blend-mode:overlay; /* texture on lit pixels, true black stays black */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  will-change:transform;
}
/* Frames running long (src/quality.js): no grain layer and no blur behind the
   buttons; the pages' own stylesheets drop their blurs and glows the same way. */
.q-lite .grain{ display:none; }
.q-lite .menu-btn{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(5,5,5,.62); }

@keyframes grain{
  0%   { transform:translate(0,0)      }
  16%  { transform:translate(-3%,-4%)  }
  33%  { transform:translate(2%,-2%)   }
  50%  { transform:translate(-2%,3%)   }
  66%  { transform:translate(3%,1%)    }
  83%  { transform:translate(-1%,-3%)  }
  100% { transform:translate(0,0)      }
}

.vignette{
  position:fixed; inset:0;
  z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 48%, transparent 52%, rgba(5,5,5,.55) 90%, rgba(5,5,5,.85) 100%),
    linear-gradient(to bottom, rgba(5,5,5,.55) 0%, transparent 18%, transparent 76%, rgba(5,5,5,.7) 100%);
}

/* ---------------------------------------------------------------- overlay */

.overlay{
  position:fixed; inset:0;
  z-index:3;
  pointer-events:none;
}

.panel{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding:0 var(--gut);
  opacity:0;
  visibility:hidden;
  will-change:opacity, transform;
  /* copy sits on photographs now, not on black */
  text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}

/* Final call to action sits low, so the canvas logo and the winner stay in view. */
.panel--bottom{ align-items:flex-end; padding-bottom:clamp(64px, 9vh, 110px); }
.panel--bottom::before{
  content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(5,5,5,.82), rgba(5,5,5,.45) 45%, transparent);
  pointer-events:none;
}
.panel--bottom .panel__inner{ position:relative; }

/* Staggered parallax: overlay.js writes --a (arrival) and --d (departure).
   Lines further down each panel travel further, so copy peels in layers. */
.panel{ --a:0; --d:0; }
.panel .eyebrow{ transform:translate3d(0, calc((1 - var(--a)) * 18px  - var(--d) * 26px),  0); }
.panel .display{ transform:translate3d(0, calc((1 - var(--a)) * 64px  - var(--d) * 90px),  0); }
.panel .lede,
.panel .body,
.panel .cta    { transform:translate3d(0, calc((1 - var(--a)) * 96px  - var(--d) * 120px), 0); }
.panel .display{
  /* the headline letter-spacing tightens as it lands */
  letter-spacing:calc(-.015em + (1 - var(--a)) * .06em);
}

.panel__inner{ width:100%; max-width:1600px; margin:0 auto; }
.panel__inner--center{ text-align:center; }
/* Arena title card: lift the block so the lede clears the lit cage below it. */
@media (min-aspect-ratio: 4/5){
  .panel--hero:not(.panel--bottom){ padding-bottom:26vh; }
}
.panel__inner--left  { text-align:left;  max-width:min(46ch, 52vw); margin:0; }
.panel__inner--right { text-align:right; max-width:min(46ch, 52vw); margin:0 0 0 auto; }

/* Arena: chapter copy overlaps, one block each side of the cage, so the
   headlines come down a size and each block keeps to its own third. */
.page-arena .panel:not(.panel--bottom) .display{ font-size:clamp(2.8rem, 7vw, 7.4rem); }
.page-arena .panel__inner--left,
.page-arena .panel__inner--right{ max-width:min(42ch, 36vw); }

/* Portrait: the scene centres the fighter up top, so copy sits in the lower
   third and always reads left — alternating sides has no room here. */
@media (max-aspect-ratio: 4/5){
  .panel{ align-items:flex-end; padding-bottom:clamp(88px, 13vh, 130px); }
  /* Copy always lands on the lower third here, often over busy cage signage:
     give every panel the scrim the final one uses. It fades with the panel. */
  .panel::before{
    content:""; position:absolute; inset:auto 0 0 0; height:58%;
    background:linear-gradient(to top, rgba(5,5,5,.85), rgba(5,5,5,.5) 50%, transparent);
    pointer-events:none;
  }
  .panel__inner{ position:relative; }
  /* Arena: the block that shares the screen sits up top, under the header. */
  .panel--top{ align-items:flex-start; padding-top:clamp(96px, 14vh, 130px); padding-bottom:0; }
  .panel--top::before{
    inset:0 0 auto 0; height:56%;
    background:linear-gradient(to bottom, rgba(5,5,5,.88), rgba(5,5,5,.5) 55%, transparent);
  }
  .page-arena .panel:not(.panel--bottom) .display{ font-size:clamp(2.2rem, 10.5vw, 3.4rem); }
  .page-arena .panel__inner--left,
  .page-arena .panel__inner--right{ max-width:none; }
  .page-arena .body{ font-size:.84rem; line-height:1.5; }
  .panel__inner--left,
  .panel__inner--right{ max-width:none; text-align:left; margin:0; }
  .panel .panel__inner--right .eyebrow{ justify-content:flex-start; }
  .panel .panel__inner--right .body{ margin-left:0; }
  .panel .body{ font-size:.88rem; }
}

/* ------------------------------------------------------------- typography */

.display{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(3.4rem, 11vw, 11rem);
  /* the face's capitals stand ~0.84em tall: at .95 each line clears the next */
  line-height:.95;
  letter-spacing:-.015em;
  margin:.12em 0 .28em;
  text-transform:uppercase;
  text-wrap:balance;
}
.display--brand{ font-size:clamp(3.2rem, 12.5vw, 13rem); }
.display--lg{ font-size:clamp(3.2rem, 9.5vw, 10rem); }
/* One line on desktop, so the overhead payoff above it stays uncovered. */
.display--cta{ font-size:clamp(2.6rem, 5.6vw, 6.4rem); margin:.2em 0 .1em; }
.accent{ color:var(--blood-lift); }
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.eyebrow{
  font-family:var(--label);
  font-weight:500;
  font-size:clamp(.66rem, .82vw, .8rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0;
  display:flex; gap:1em; align-items:center;
}
.panel__inner--center .eyebrow{ justify-content:center; }
.panel__inner--right  .eyebrow{ justify-content:flex-end; }

.lede{
  font-family:var(--label);
  font-weight:400;
  font-size:clamp(.82rem, 1.25vw, 1.05rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-dim);
  margin:0;
}

.body{
  font-size:clamp(.9rem, 1.05vw, 1.02rem);
  line-height:1.62;
  color:var(--bone-dim);
  max-width:42ch;
  margin:0;
}
.panel__inner--right .body{ margin-left:auto; }

/* ------------------------------------------------------------------- HUD */

.hud{
  position:fixed; z-index:4;
  pointer-events:none;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.hud--top{
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--gut);
}
.hud--bottom{
  bottom:0; left:0; right:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px;
  padding:clamp(16px,2.4vw,30px) var(--gut);
}
.hud--rail{
  top:50%; right:clamp(12px,1.6vw,22px);
  transform:translateY(-50%);
}

.mark{
  display:flex; align-items:center; gap:.7em;
  text-decoration:none; color:var(--bone);
  pointer-events:auto;
}
.mark__glyph{
  width:15px; height:16px;
  background:currentColor;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
}
.mark__word{
  font-family:var(--display); font-weight:800;
  font-size:1.16rem; letter-spacing:.14em;
}
.mark__word em{ font-style:normal; color:var(--blood-lift); margin-left:.35em; }
.mark__glyph{ color:var(--blood-lift); }

/* The wordmark holds the left; the tabs (or the buttons) take the right. */
.brand{ display:flex; align-items:center; margin-right:auto; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav__link{
  pointer-events:auto;
  font-family:var(--label); font-weight:500;
  font-size:.7rem; letter-spacing:.24em;
  color:var(--bone-dim); text-decoration:none;
  transition:color .35s var(--ease);
}
.nav__link:hover{ color:var(--bone); }
.nav__link--promo{ display:inline-flex; align-items:center; gap:.6em; color:var(--bone); }
.nav__link--promo::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:#e3203a; box-shadow:0 0 8px rgba(227,32,58,.9);
  animation:promo 1.4s steps(2, jump-none) infinite;
}
@keyframes promo{ 0%{ opacity:1; } 100%{ opacity:.2; } }
@media (max-width:1360px){
  .nav{ gap:clamp(12px, 1.4vw, 22px); }
  .nav__link{ letter-spacing:.16em; }
}
/* Narrower screens: placeholder links go first, then the whole row. */
@media (max-width:1000px){
  .nav__link[href="#"]{ display:none; }
  .nav__link{ letter-spacing:.16em; }
}
/* Nine tabs in the row: tighter still just above the sandwich breakpoint. */
@media (max-width:1100px){
  .nav{ gap:clamp(9px, 1.05vw, 14px); }
  .nav__link{ letter-spacing:.1em; }
}
/* The menu's extras (number, one-line summary) only show in the full-screen menu. */
.nav__no, .nav__sub{ display:none; }

/* Phones, landscape phones and small tablets: the tabs open as a full-screen
   menu from the sandwich button (src/menu.js). */
.menu-btn{ display:none; }
@media (max-width:900px), (pointer:coarse) and (max-width:1024px){
  .menu-btn{
    pointer-events:auto;
    display:inline-grid; place-content:center; gap:5px;
    width:44px; height:44px; padding:0; margin-left:10px; flex:none;
    background:rgba(5,5,5,.35); border:1px solid rgba(242,243,245,.34); border-radius:50%;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:border-color .3s var(--ease), background .3s var(--ease);
  }
  .menu-btn:hover, .menu-btn[aria-expanded="true"]{ border-color:var(--bone); }
  .menu-btn:focus-visible{ outline:1px solid var(--bone); outline-offset:3px; }
  .menu-btn span{
    display:block; width:18px; height:1.5px; border-radius:1px;
    background:var(--bone);
    transition:transform .4s var(--ease), opacity .2s var(--ease);
  }
  /* The three lines fold into an X. */
  .menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.2); }
  .menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .hud--top .menu-btn, .hud--top .cta-buy, .hud--top .cart-btn{ margin-left:auto; }
  .hud--top .cta-buy + .menu-btn, .hud--top .cart-btn + .menu-btn{ margin-left:10px; }

  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:stretch; justify-content:safe center; gap:0;
    padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(32px + env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(210,10,10,.2), transparent 70%),
      radial-gradient(70% 40% at 0% 100%, rgba(210,10,10,.1), transparent 70%),
      #060606;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease), visibility 0s .35s;
  }
  .nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s var(--ease); }
  .nav .nav__link{
    display:grid; grid-template-columns:2.6rem 1fr; align-items:baseline; gap:0;
    padding:clamp(6px, 1.1vh, 14px) 0;
    border-bottom:1px solid rgba(242,243,245,.1);
    font-size:1rem; letter-spacing:0; color:var(--bone);
    opacity:0; transform:translateY(16px);
    transition:opacity .4s var(--ease), transform .6s var(--ease);
  }
  .nav .nav__link:first-child{ border-top:1px solid rgba(242,243,245,.1); }
  .nav.is-open .nav__link{ opacity:1; transform:none; }
  .nav.is-open .nav__link:nth-child(2){ transition-delay:.05s; }
  .nav.is-open .nav__link:nth-child(3){ transition-delay:.1s; }
  .nav.is-open .nav__link:nth-child(4){ transition-delay:.15s; }
  .nav.is-open .nav__link:nth-child(5){ transition-delay:.2s; }
  .nav.is-open .nav__link:nth-child(6){ transition-delay:.25s; }
  .nav.is-open .nav__link:nth-child(7){ transition-delay:.3s; }
  .nav.is-open .nav__link:nth-child(8){ transition-delay:.35s; }
  .nav.is-open .nav__link:nth-child(9){ transition-delay:.4s; }
  .nav__no{
    display:block; align-self:start; padding-top:.55em;
    font-family:var(--label); font-style:normal; font-weight:500;
    font-size:.72rem; letter-spacing:.2em; color:var(--blood-lift);
  }
  .nav__label{
    font-family:var(--display); font-weight:800;
    font-size:clamp(1.6rem, min(9vw, 4.2vh), 3rem); letter-spacing:.03em; line-height:.95;
    transition:color .3s var(--ease), transform .4s var(--ease);
  }
  .nav .nav__link:hover .nav__label{ transform:translateX(6px); }
  .nav__sub{
    display:block; grid-column:2; margin-top:.3em;
    font-family:var(--body); font-size:.76rem; line-height:1.35; color:var(--bone-faint);
  }
  .nav .nav__link[aria-current="page"] .nav__label{ color:var(--blood-lift); }
  .nav .nav__link[aria-current="page"]::after{ display:none; }
  /* The promo's blinking dot follows its name. */
  .nav .nav__link--promo::before{ display:none; }
  .nav .nav__link--promo .nav__label::after{
    content:""; display:inline-block; vertical-align:.5em;
    width:10px; height:10px; margin-left:.35em; border-radius:50%;
    background:#e3203a; box-shadow:0 0 10px rgba(227,32,58,.9);
    animation:promo 1.4s steps(2, jump-none) infinite;
  }
  /* Pages that scroll natively stay put behind the open menu. */
  body.menu-open{ overflow:hidden; }
  /* The open menu covers everything, the scroll pages' own HUD layers included. */
  body.menu-open .hud--top{ z-index:50; }
  /* A header's backdrop blur (the scrolled header on PARTNERS, SHOP, PAGES,
     SECRET JUICE, the request form) makes it the box its fixed children are
     laid out in: the full-screen menu would shrink to the header's strip.
     The open menu covers the page anyway, so the blur goes while it is open. */
  body.menu-open .hud--top{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    filter:none !important; transform:none !important;
  }
}
/* Landscape phones: the names only, so all of them fit. */
@media (pointer:coarse) and (max-height:500px), (max-width:900px) and (max-height:500px){
  .nav__sub{ display:none !important; }
  .nav{ padding-top:calc(72px + env(safe-area-inset-top)); }
  .nav .nav__link{ padding:8px 0; }
  .nav__label{ font-size:clamp(1.6rem, 9vh, 2.4rem); }
}
/* Small phones: a narrower wordmark leaves room for the buttons. */
@media (max-width:420px){ .mark__word{ font-size:.98rem; letter-spacing:.1em; } }

.btn{
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--label); font-weight:600;
  font-size:.7rem; letter-spacing:.24em;
  text-decoration:none; text-transform:uppercase;
  padding:.82em 1.7em;
  border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--ghost{
  color:var(--bone);
  border:1px solid rgba(242,243,245,.32);
}
.btn--ghost:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn--solid{
  color:var(--bone); background:var(--blood);
  border:1px solid var(--blood);
}
.btn--solid:hover{ background:var(--blood-lift); border-color:var(--blood-lift); }

.cta{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(18px,2.4vw,32px);
}

/* ------------------------------------------------------- rail + counter */

.rail{
  width:1px; height:min(34vh, 260px);
  background:rgba(242,243,245,.16);
  position:relative;
}
.rail__fill{
  position:absolute; top:0; left:-1px;
  width:3px; height:0%;
  background:var(--blood-lift);
  box-shadow:0 0 12px 1px rgba(255,38,38,.7);
}

/* The scene's name only, no numbers. */
.counter{
  display:flex; align-items:baseline;
  font-family:var(--label); font-weight:500;
}
.counter__label{
  font-size:.72rem; letter-spacing:.3em; line-height:1.5;
  color:var(--bone);
}
@media (max-width:640px){ .counter__label{ max-width:48vw; font-size:.62rem; letter-spacing:.2em; } }

.hint{
  display:flex; align-items:center; gap:.9em;
  font-family:var(--label); font-weight:500;
  font-size:.66rem; letter-spacing:.32em;
  color:var(--bone-dim);
  transition:opacity .6s var(--ease);
}
.hint__mouse{
  width:17px; height:27px;
  border:1px solid rgba(242,243,245,.45);
  border-radius:10px;
  position:relative; display:block;
}
.hint__mouse i{
  position:absolute; left:50%; top:5px;
  width:2px; height:5px; margin-left:-1px;
  background:var(--bone);
  border-radius:2px;
  animation:wheel 1.9s var(--ease) infinite;
}
@keyframes wheel{
  0%  { opacity:0; transform:translateY(0)  }
  25% { opacity:1 }
  70% { opacity:0; transform:translateY(9px) }
  100%{ opacity:0 }
}

/* ----------------------------------------------------------- autoplay */

.auto{
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:.8em;
  margin:0; padding:4px 2px;
  background:none; border:0;
  font-family:var(--label); font-weight:500;
  font-size:.66rem; letter-spacing:.32em;
  color:var(--bone-dim);
  cursor:pointer;
  transition:color .35s var(--ease);
}
.auto:hover{ color:var(--bone); }
.auto:focus-visible{ outline:1px solid var(--bone-dim); outline-offset:5px; border-radius:4px; }
.auto__dial{ position:relative; width:26px; height:26px; display:grid; place-items:center; }
.auto__ringsvg{ position:absolute; inset:0; transform:rotate(-90deg); }
.auto__ringsvg circle{ fill:none; stroke-width:1.5; }
.auto__track{ stroke:rgba(242,243,245,.2); }
/* fills as the current chapter's time runs out */
.auto__ring{ stroke:var(--blood-lift); stroke-dasharray:69.12; stroke-dashoffset:69.12; }
.auto__glyph{ width:10px; height:10px; fill:currentColor; }
.auto__play{ display:none; }
.auto.is-off .auto__pause{ display:none; }
.auto.is-off .auto__play{ display:inline; }

/* Black curtain for the autoplay loop: fades out the finale, fades in the start. */
.curtain{
  position:fixed; inset:0; z-index:9;
  background:var(--ink);
  opacity:0;
  pointer-events:none;
}

/* The current page in the menu. */
.nav__link[aria-current="page"]{ color:var(--bone); position:relative; }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute;
  left:0; right:.24em; bottom:-7px; height:1px;
  background:var(--blood-lift);
}

/* -------------------------------------------------------------- boot bar */

.boot{
  position:fixed; inset:0; z-index:10;
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .9s var(--ease), visibility .9s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__bar{ width:min(180px,38vw); height:2px; background:rgba(242,243,245,.14); }
.boot__bar i{ display:block; height:100%; width:0%; background:var(--bone); }
.boot__pct{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,9vw,5.6rem); line-height:1;
  letter-spacing:-.02em;
}

/* ============================================================ static mode
   prefers-reduced-motion, or no WebGL. Native scroll, stacked sections,
   no hijack, no canvas.
   ========================================================================= */

body.is-static{ overflow-y:auto; overflow-x:hidden; }

body.is-static #scene,
body.is-static .hud--rail,
body.is-static .hint,
body.is-static .grain,
body.is-static .vignette,
body.is-static .boot,
body.is-static .curtain{ display:none; }

body.is-static .overlay{
  position:relative; inset:auto;
  pointer-events:auto;
  z-index:3;
}

body.is-static .panel{
  --a:1; --d:0;
  position:relative; inset:auto;
  opacity:1; visibility:visible;
  min-height:min(100svh, 820px);
  padding:clamp(72px,12vh,140px) var(--gut);
  border-bottom:1px solid rgba(242,243,245,.08);
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(210,10,10,.07), transparent 70%),
    linear-gradient(180deg, #050505, #0c0d0f 60%, #050505);
}
body.is-static .panel__inner--left,
body.is-static .panel__inner--right{ max-width:56ch; }

/* The two keyframes bookend the static page: arena up top, overhead finish last. */
body.is-static .panel--opening,
body.is-static .panel--hero{
  background:linear-gradient(rgba(5,5,5,.5), rgba(5,5,5,.5)), url("img/start-d.webp") center 60% / cover;
}
body.is-static .panel--bottom{
  background:linear-gradient(rgba(5,5,5,.25), rgba(5,5,5,.25)), url("img/end-d.webp") center / cover;
}
@media (orientation: portrait){
  body.is-static .panel--opening,
  body.is-static .panel--hero{
    background:linear-gradient(rgba(5,5,5,.5), rgba(5,5,5,.5)), url("img/start-m.webp") center / cover;
  }
  body.is-static .panel--bottom{
    background:linear-gradient(rgba(5,5,5,.25), rgba(5,5,5,.25)), url("img/end-m.webp") center / cover;
  }
}

body.is-static .hud--top{
  position:sticky;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(10px);
}
body.is-static .hud--bottom{ display:none; }

@media (prefers-reduced-motion:reduce){
  .grain,.hint__mouse i{ animation:none; }
}

/* Short screens (a phone held sideways): a slimmer header and HUD leave the
   copy room; src/fit.js then keeps every block between them. */
@media (orientation:landscape) and (max-height:520px){
  .hud--top{ padding-top:10px; padding-bottom:10px; }
  .hud--bottom{ padding-top:6px; padding-bottom:10px; }
  .hint{ display:none; }
  .counter__label{ font-size:.6rem; letter-spacing:.2em; }
  .menu-btn{ width:40px; height:40px; }
}