/* ==========================================================================
   FIGHTER page — layered on top of styles.css
   The athlete chapters draw on #bg and #fg with DOM grain and vignette; the
   arsenal chapters draw everything, grain included, on #gl. The two groups
   crossfade (src/fighter/main.js).
   ========================================================================== */

/* Depth order: [smoke → giant name → athlete → vignette → grain] → arsenal → copy → HUD */
.page-fighter .layers{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.page-fighter #bg,
.page-fighter #fg,
.page-fighter #gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
.page-fighter #bg{ z-index:0; }
.page-fighter .bigname{ z-index:1; }
.page-fighter #fg{ z-index:2; }
.page-fighter .layers .vignette{ z-index:3; }
.page-fighter .layers .grain{ z-index:4; }
.page-fighter #gl{ z-index:1; visibility:hidden; }
.page-fighter .overlay{ z-index:5; }
.page-fighter .hud{ z-index:6; }

/* ------------------------------------------------------------ giant name */

.bigname{
  position:fixed; left:50%; top:8vh;
  transform:translate3d(-50%,0,0);
  transform-origin:50% 40%;
  pointer-events:none;
  white-space:nowrap;
  will-change:transform, opacity;
  --fill:0%;
}
.bigname span{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:17vw; /* fallback; main.js fits the whole word to ~88% of the width */
  line-height:.8;
  letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,243,245,.28);
  /* liquid fill rising from the baseline: hard stop at --fill */
  background:linear-gradient(to top, var(--blood) var(--fill), transparent var(--fill));
  -webkit-background-clip:text;
          background-clip:text;
  filter:drop-shadow(0 0 60px rgba(210,10,10,.18));
  /* steps back while copy has to sit over it (src/fighter/main.js) */
  opacity:var(--name-under, 1);
}
/* the glow is a 60px blur redrawn over the whole word: not on a slow device */
.q-lite .bigname span{ filter:none; }
@media (orientation: portrait){
  .bigname{ top:14vh; }
  .bigname span{ -webkit-text-stroke-width:1px; }
}

/* ---------------------------------------------------------------- copy */

.display--name{
  font-size:clamp(2.4rem, 6vw, 5.6rem);
  letter-spacing:.02em;
  margin:.2em 0 .25em;
}

.panel--stats .panel__inner{ max-width:min(560px, 46vw); }

.record{ margin:.6em 0 1.4em; }
.record__num{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(4.2rem, 10vw, 9.5rem);
  line-height:.84;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.record__num i{ font-style:normal; color:var(--blood-lift); margin:0 .04em; }
.record__label,
.stat dt,
.source{
  font-family:var(--label);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.3em;
  color:var(--bone-dim);
}
.record__label{ display:block; margin-top:.9em; }

.stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2.2vw, 28px) clamp(18px, 3vw, 40px);
  margin:0;
}
.stat{
  border-top:1px solid rgba(242,243,245,.16);
  padding-top:.8em;
  /* each tile lands a beat after the one before it */
  transform:translate3d(0, calc((1 - var(--a)) * 40px), 0);
}
.stat:nth-child(2){ transform:translate3d(0, calc((1 - var(--a)) * 60px), 0); }
.stat:nth-child(3){ transform:translate3d(0, calc((1 - var(--a)) * 80px), 0); }
.stat:nth-child(4){ transform:translate3d(0, calc((1 - var(--a)) * 100px), 0); }
.stat dd{
  margin:.25em 0 0;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.4rem, 4.4vw, 4rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat dd small{ font-size:.5em; color:var(--blood-lift); margin-left:.08em; }
.source{ margin-top:1.6em; font-size:.58rem; color:var(--bone-faint); }

/* ------------------------------------------------------- record ticker */

.panel--railed{ padding-bottom:clamp(170px, 24vh, 240px); } /* keep copy clear of the ticker */
.ticker{
  position:absolute; left:0; right:0;
  bottom:clamp(74px, 11vh, 120px);
  overflow:hidden;
  border-top:1px solid rgba(242,243,245,.12);
  border-bottom:1px solid rgba(242,243,245,.12);
  padding:.95em 0;
  background:rgba(5,5,5,.35);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.ticker--rail{ opacity:0; visibility:hidden; }
body.page-fighter.is-static .ticker--rail{ opacity:1; visibility:visible; }
.ticker__track{ display:flex; width:max-content; will-change:transform; }
.tick{
  display:inline-flex; align-items:baseline; gap:.75em;
  margin-right:3.4em;
  font-family:var(--label); font-weight:500;
  font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  color:var(--bone);
}
.tick b{
  display:inline-grid; place-items:center;
  width:1.7em; height:1.7em;
  font-size:.72rem; font-weight:600; letter-spacing:0;
  border:1px solid rgba(242,243,245,.35);
  color:var(--bone-dim);
}
.tick--w b{ background:var(--blood); border-color:var(--blood); color:var(--bone); }
.tick i{ font-style:normal; color:var(--bone-dim); letter-spacing:.1em; }
.tick em{ font-style:normal; color:var(--bone-faint); font-size:.66rem; }

/* ------------------------------------------------------------- portrait */

@media (max-aspect-ratio: 4/5){
  .panel--stats .panel__inner{ max-width:none; }
  .record__num{ font-size:clamp(3.4rem, 17vw, 5rem); }
  .stats{ gap:12px 18px; }
  .stat dd{ font-size:2.1rem; }
  .source{ display:none; }
  .panel--railed{ padding-bottom:150px; }
  .panel--record .body{ font-size:.86rem; max-width:34ch; }
  .ticker{ bottom:84px; }
}

/* ========================================================== the arsenal */

/* The word ARSENAL is drawn in particles; the heading stays for screen readers
   and for the static layout. */
body.page-fighter:not(.is-static) .hero-word{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; margin:0;
}
.part-arsenal.panel--hero .lede{ margin-top:1.1em; }

/* Chapter copy: a little smaller than the arena page, so two-word lines
   like "TAKE ONE." hold together beside the figure. */
.part-arsenal .panel__inner--left,
.part-arsenal .panel__inner--right{ max-width:min(560px, 40vw); }
.part-arsenal .display:not(.display--cta):not(.display--brand){
  font-size:clamp(3rem, 8.2vw, 9.2rem);
}

/* ------------------------------------------------- headline letter drop */

.page-fighter .display .w{ display:inline-block; white-space:nowrap; }
.page-fighter .display .ch{
  display:inline-block;
  /* each letter lands a beat after the one before it */
  transform:translate3d(0, calc((1 - var(--a)) * (0.5em + var(--i) * 0.07em)), 0)
            rotate(calc((1 - var(--a)) * 6deg));
  opacity:clamp(0, calc(var(--a) * 2.4 - var(--i) * 0.06), 1);
}
body.is-static .display .ch{ transform:none; opacity:1; }

/* ------------------------------------------------------------------ KPIs */

.kpis{
  display:flex; flex-wrap:wrap;
  gap:clamp(22px, 3vw, 48px);
  margin:clamp(18px, 2.4vw, 30px) 0 0;
}
.panel__inner--right .kpis{ justify-content:flex-end; }
.kpi{
  display:flex; flex-direction:column-reverse;
  min-width:10ch;
  border-top:1px solid rgba(242,243,245,.18);
  padding-top:.7em;
  transform:translate3d(0, calc((1 - var(--a)) * 110px - var(--d) * 130px), 0);
}
.kpi + .kpi{ transform:translate3d(0, calc((1 - var(--a)) * 140px - var(--d) * 150px), 0); }
.kpi dd{
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem, 4.6vw, 4.4rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.kpi dd small{ font-size:.5em; color:var(--blood-lift); margin-left:.08em; }
.kpi dt{
  margin-top:.55em;
  font-family:var(--label); font-weight:500;
  font-size:.62rem; letter-spacing:.28em;
  color:var(--bone-dim);
}

/* --------------------------------------------------------------- cursor */

.cursor{ display:none; }
body.has-cursor{ cursor:none; }
body.has-cursor a,
body.has-cursor button{ cursor:none; }
body.has-cursor .cursor{
  display:block;
  position:fixed; left:0; top:0; z-index:12;
  pointer-events:none;
}
.cursor__ring,
.cursor__dot{ position:fixed; left:0; top:0; will-change:transform; }
.cursor__ring::before{
  content:""; position:absolute;
  left:-18px; top:-18px; width:36px; height:36px;
  border:1px solid rgba(242,243,245,.5);
  border-radius:50%;
  transition:transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
}
.cursor__dot::before{
  content:""; position:absolute;
  left:-2.5px; top:-2.5px; width:5px; height:5px;
  border-radius:50%;
  background:var(--blood-lift);
}
.cursor.is-link .cursor__ring::before{ transform:scale(1.7); background-color:rgba(242,243,245,.08); border-color:rgba(242,243,245,.8); }
.cursor.is-figure .cursor__ring::before{ transform:scale(2.4); border-color:var(--blood-lift); }

/* ------------------------------------------------------------- portrait */

@media (max-aspect-ratio: 4/5){
  .part-arsenal .panel__inner--left,
  .part-arsenal .panel__inner--right{ max-width:none; }
  .part-arsenal:not(.panel--hero) .body{ font-size:.86rem; max-width:34ch; margin-top:.6em; }
  .kpis{ gap:18px; margin-top:14px; }
  .kpi{ min-width:0; flex:1; }
  .kpi dd{ font-size:2.2rem; }
  .kpi dt{ font-size:.56rem; letter-spacing:.2em; }
}

/* ========================================================= static mode */

body.page-fighter.is-static .layers,
body.page-fighter.is-static #gl{ display:none; }

body.page-fighter.is-static .panel--hero:not(.part-arsenal){
  min-height:min(100svh, 900px);
  background:
    url("img/athlete/cutout.webp") center bottom / auto 86% no-repeat,
    radial-gradient(60% 55% at 50% 45%, rgba(210,10,10,.45), transparent 70%),
    #050505;
}
body.page-fighter.is-static .ticker{ position:relative; bottom:auto; margin-top:2rem; }
body.page-fighter.is-static .panel--record{ flex-direction:column; justify-content:center; }

body.page-fighter.is-static .part-arsenal.panel--hero{
  background:radial-gradient(60% 55% at 50% 45%, rgba(210,10,10,.3), transparent 70%), #050505;
}
body.page-fighter.is-static .panel[data-stage="6"]{
  background:url("img/arsenal/kick.webp") right 6% center / auto 78% no-repeat,
             radial-gradient(50% 60% at 72% 50%, rgba(80,120,220,.22), transparent 70%), #050505;
}
body.page-fighter.is-static .panel[data-stage="7"]{
  background:url("img/arsenal/hands.webp") left 6% center / auto 82% no-repeat,
             radial-gradient(50% 60% at 28% 50%, rgba(210,10,10,.3), transparent 70%), #050505;
}
body.page-fighter.is-static .panel[data-stage="8"]{
  background:url("img/arsenal/war.webp") right 8% bottom / auto 88% no-repeat,
             radial-gradient(50% 60% at 72% 50%, rgba(240,110,20,.24), transparent 70%), #050505;
}
@media (max-aspect-ratio: 4/5){
  body.page-fighter.is-static .panel[data-stage="6"],
  body.page-fighter.is-static .panel[data-stage="7"],
  body.page-fighter.is-static .panel[data-stage="8"]{
    background-position:center top 12%, center, center;
    background-size:auto 46%, auto, auto;
  }
}

/* A phone held sideways: the giant name starts below the header. */
@media (orientation:landscape) and (max-height:520px){
  .bigname{ top:58px; }
}