/* ============================================================
   FURY GAMING — brand microsite styles (FORGE)
   Built entirely on tokens.css. Boldness is spent on ONE idea:
   temperature. Everything else stays quiet and disciplined.
   ============================================================ */

@import url("../tokens/tokens.css");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ash-900);color:var(--bone-100);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body::before{ /* faint forged grain + heat haze at top */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:var(--grad-ground);opacity:.9;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--heat-30);color:var(--white-hot)}

/* ---- shared layout ---- */
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;position:relative;z-index:1}
section{padding-block:clamp(3.5rem,7vw,6rem)}
.eyebrow{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fury-amber);
  display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--heat-40),transparent)}
.section-head{max-width:62ch;margin-bottom:var(--space-7)}
.section-head h2{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 108;
  font-size:clamp(2.1rem,4.4vw,3.45rem);line-height:0.98;letter-spacing:var(--tracking-tight);
  color:var(--white-hot);margin:var(--space-3) 0 var(--space-4);max-width:20ch;text-wrap:balance}
.section-head p{color:var(--fog-300);max-width:var(--measure)}
.idx{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--fog-400);letter-spacing:.2em}

/* ---- nav ---- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  padding:14px var(--gutter);background:color-mix(in srgb,var(--ash-900) 72%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--iron-500)}
.nav-brand{display:flex;align-items:center;gap:11px}
.nav-brand .nav-mark{height:30px;width:auto;display:block}
.nav-brand .nm{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 112;
  font-size:18px;letter-spacing:.01em;color:var(--white-hot)}
.nav-brand .nm i{color:var(--fury);font-style:normal}
.nav-links{display:flex;gap:var(--space-5);font-family:var(--font-mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--fog-300)}
.nav-links a{position:relative;padding-block:4px;transition:color var(--dur-2) var(--ease-out)}
.nav-links a:hover{color:var(--white-hot)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--heat-40);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-ignite)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:860px){.nav-links{display:none}}

/* scroll temperature bar */
.heatbar{position:fixed;inset-block-start:0;inset-inline-start:0;height:2px;z-index:var(--z-top);
  width:var(--p,0%);background:linear-gradient(90deg,var(--heat-10),var(--heat-40),var(--heat-70));
  box-shadow:var(--glow-heat)}

/* ---- HERO ---- */
.hero{min-height:100svh;display:flex;align-items:center;padding-block:120px var(--space-9);position:relative}
.hero .wrap{display:grid;gap:var(--space-6)}
.hero-mark{height:clamp(84px,11vw,138px);width:auto;display:block}
.hero h1{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 118;
  font-size:var(--fs-mega);line-height:var(--lh-tight);letter-spacing:var(--tracking-mega);
  color:var(--white-hot);margin:0;display:flex}
.hero h1 .ch{display:inline-block;color:var(--iron-400);transition:color var(--dur-4) var(--ease-ignite),text-shadow var(--dur-4) var(--ease-ignite)}
.hero h1 .ch.lit{color:var(--white-hot)}
.hero h1 .ch.y.lit{color:var(--fury);text-shadow:var(--glow-text)}
.hero-lede{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 105;
  font-size:var(--fs-h2);color:var(--bone-100);line-height:1.04;letter-spacing:var(--tracking-tight);max-width:18ch}
.hero-sub{color:var(--fog-300);max-width:54ch;font-size:1.05rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fog-400)}
.hero-meta b{color:var(--fury-amber);font-weight:600}
.thesis{display:flex;align-items:center;gap:14px;margin-top:var(--space-5);
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--bone-200)}
.thesis .dot{width:9px;height:9px;border-radius:50%;background:var(--heat-40);box-shadow:var(--glow-heat);
  animation:pulse 2.6s var(--ease-ignite) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

/* embers */
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ember{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:var(--heat-50);box-shadow:0 0 8px var(--heat-40);opacity:0;
  animation:rise var(--dur,9s) linear infinite}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:.9}80%{opacity:.5}100%{transform:translateY(-78vh) translateX(var(--dx,20px)) scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.ember{display:none}.thesis .dot{animation:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);font-weight:600;
  font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  padding:13px 22px;border:1px solid var(--iron-400);background:var(--graphite-700);color:var(--bone-100);
  border-radius:var(--r-1);transition:transform var(--dur-2) var(--ease-ignite),border-color var(--dur-2) var(--ease-ignite),box-shadow var(--dur-2) var(--ease-ignite),color var(--dur-2) var(--ease-ignite);position:relative}
.btn:hover{border-color:var(--heat-40);color:var(--white-hot);box-shadow:var(--glow-heat);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--heat-40),var(--heat-30));border-color:var(--heat-30);color:#1a0a02}
.btn.primary:hover{box-shadow:var(--glow-hot);filter:brightness(1.06)}

/* ---- cards / tiles ---- */
.card{background:var(--graphite-700);border:1px solid var(--iron-500);border-radius:var(--r-2);padding:var(--space-6)}
.grid{display:grid;gap:var(--space-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---- 2014 -> 2026 ---- */
.evo{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-6);align-items:center}
.evo .panel{text-align:center}
.evo .frame{border:1px solid var(--iron-500);border-radius:var(--r-2);padding:var(--space-6);
  background:var(--graphite-800);display:grid;place-items:center;min-height:300px}
.evo .frame.old{background:#fff}
.evo img{max-height:240px;width:auto}
.evo .new img{height:210px;width:auto}
.evo .arrow{font-family:var(--font-mono);color:var(--heat-40);font-size:24px}
.evo .tag{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog-400);margin-top:var(--space-3)}
.evo .tag b{color:var(--bone-100)}
@media (max-width:760px){.evo{grid-template-columns:1fr}.evo .arrow{transform:rotate(90deg)}}

/* ---- logo section ---- */
.logo-stage{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-5);align-items:stretch}
.logo-hero{display:grid;place-items:center;gap:var(--space-5);min-height:340px;position:relative;overflow:hidden}
.logo-hero .mk-toggle{height:clamp(150px,22vw,248px);width:auto;display:block;transition:filter var(--dur-3) var(--ease-ignite)}
.logo-hero .mk-toggle.lit{filter:drop-shadow(0 0 26px rgba(255,106,26,.42))}
.temp-toggle{display:inline-flex;border:1px solid var(--iron-400);border-radius:var(--r-pill);overflow:hidden;
  font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.temp-toggle button{padding:13px 20px;background:transparent;color:var(--fog-300);border:0;cursor:pointer;font:inherit;transition:background var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.temp-toggle button.on{background:var(--heat-40);color:#1a0a02}
.variant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.variant{background:var(--graphite-800);border:1px solid var(--iron-500);border-radius:var(--r-2);
  padding:var(--space-5);display:grid;place-items:center;gap:var(--space-3);text-align:center}
.variant img{height:88px;width:auto}
.variant.light{background:var(--bone-100)}
.variant .cap{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-400)}
.variant.light .cap{color:var(--graphite-700)}
.variant-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;margin-top:var(--space-5)}
.lockup-card{display:flex;flex-direction:column;justify-content:center;gap:var(--space-5)}
.lockup-img{width:100%;max-width:380px;height:auto;align-self:center}
.lockup-note{color:var(--fog-300);font-size:var(--fs-small);max-width:42ch}
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.dd{border:1px solid var(--iron-500);border-radius:var(--r-2);padding:var(--space-5);background:var(--graphite-800)}
.dd .h{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:.5em;margin-bottom:var(--space-3)}
.dd.do .h{color:var(--heat-60)} .dd.dont .h{color:#C9554A}
.dd ul{margin:0;padding-left:1.1em;color:var(--fog-300);font-size:var(--fs-small)}
@media (max-width:760px){.logo-stage{grid-template-columns:1fr}.dodont{grid-template-columns:1fr}}

/* ---- color ---- */
.rampbar{height:64px;border-radius:var(--r-2);overflow:hidden;display:flex;border:1px solid var(--iron-500)}
.rampbar .stop{flex:1;position:relative}
.ramp-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;
  letter-spacing:.1em;color:var(--fog-400);margin-top:8px;text-transform:uppercase}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3);margin-top:var(--space-5)}
@media (max-width:760px){.swatches{grid-template-columns:repeat(2,1fr)}}
.sw{border:1px solid var(--iron-500);border-radius:var(--r-2);overflow:hidden;cursor:pointer;
  background:var(--graphite-800);transition:transform var(--dur-2) var(--ease-ignite),box-shadow var(--dur-2) var(--ease-out)}
.sw:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.sw .chip{height:74px}
.sw .meta{padding:10px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em}
.sw .meta .nm{color:var(--bone-100);text-transform:uppercase}
.sw .meta .hex{color:var(--fog-400);display:flex;justify-content:space-between;margin-top:3px}
.sw .meta .hex .copy{color:var(--heat-50)}
.states{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.state{display:inline-flex;align-items:center;gap:.6em;padding:8px 14px;border:1px solid var(--iron-500);
  border-radius:var(--r-pill);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-200)}
.state .d{width:9px;height:9px;border-radius:50%}

/* ---- type ---- */
.specimen{border:1px solid var(--iron-500);border-radius:var(--r-2);padding:var(--space-6);background:var(--graphite-800);margin-bottom:var(--space-4)}
.specimen .role{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--fury-amber);margin-bottom:var(--space-4);display:flex;justify-content:space-between}
.specimen .big{font-size:clamp(2.4rem,7vw,5.4rem);line-height:.9;color:var(--white-hot)}
.sp-display{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 115;letter-spacing:-.01em}
.sp-mono{font-family:var(--font-mono);font-weight:600;letter-spacing:.04em}
.sp-body{font-family:var(--font-body)}
.specimen .scale{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;color:var(--bone-200);margin-top:var(--space-3)}

/* ---- motion demos ---- */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
@media (max-width:760px){.demos{grid-template-columns:1fr}}
.demo{min-height:200px;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between}
.demo .label{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--fog-300)}
.demo .stage{flex:1;display:grid;place-items:center;border:1px dashed var(--iron-400);border-radius:var(--r-2);background:var(--graphite-800);min-height:120px}
.heatbtn{position:relative;width:74px;height:74px;border-radius:var(--r-2);border:1px solid var(--iron-400);background:var(--graphite-700);
  display:grid;place-items:center;transition:border-color var(--dur-3) var(--ease-ignite),box-shadow var(--dur-3) var(--ease-ignite)}
.heatbtn img{position:absolute;height:44px;width:auto;transition:opacity var(--dur-3) var(--ease-ignite)}
.heatbtn .hot{opacity:0}
.demo .stage:hover .heatbtn{border-color:var(--heat-40);box-shadow:var(--glow-hot)}
.demo .stage:hover .heatbtn .hot{opacity:1}
.demo .stage:hover .heatbtn .cold{opacity:0}
.ignite-demo{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 115;
  font-size:2.4rem;line-height:1;display:flex;letter-spacing:-.01em}
.ignite-demo .ic{color:var(--iron-400);transition:color var(--dur-4) var(--ease-ignite),text-shadow var(--dur-4) var(--ease-ignite)}
.ignite-demo .ic.lit{color:var(--white-hot)}
.ignite-demo .ic.y.lit{color:var(--fury);text-shadow:var(--glow-text)}

/* ---- voice ---- */
.voice-lines{display:grid;gap:var(--space-3)}
.vline{position:relative;padding:9px 0 9px 20px;color:var(--bone-100)}
.vline::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--heat-40);border-radius:1px;transform:rotate(45deg)}
.vline .k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--fog-400);display:block;margin-bottom:4px}

/* ---- applications ---- */
.app{border:1px solid var(--iron-500);border-radius:var(--r-2);overflow:hidden;background:var(--graphite-800)}
.app .body{padding:var(--space-5);min-height:160px;position:relative;display:grid;place-items:center}
.app .cap{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-400);
  padding:10px var(--space-5);border-top:1px solid var(--iron-500)}
/* lower third */
.l3{position:relative;width:100%;aspect-ratio:16/7;background:linear-gradient(120deg,#0d0c0f,#1a1410);border-radius:var(--r-1);overflow:hidden}
.l3 .bug{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:11px;
  background:color-mix(in srgb,var(--ash-900) 70%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--iron-500);padding:8px 16px 8px 11px;border-radius:2px}
.l3 .bug::before{content:"";position:absolute;inset:0 auto 0 0;width:34px;border-radius:2px 0 0 2px;
  background:var(--grad-ember);opacity:.18;pointer-events:none}
.l3 .bug img{height:30px;width:auto}
.l3 .bug .t{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 110;color:var(--white-hot);font-size:15px;line-height:1}
.l3 .bug .s{font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;color:var(--fury-amber);text-transform:uppercase}
.l3 .live{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--white-hot)}
.l3 .live .d{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30}
/* social tile */
.tile-social{aspect-ratio:1;background:var(--grad-ground);border-radius:var(--r-1);display:grid;place-items:center;gap:14px;text-align:center;width:100%}
.tile-social img{height:90px;width:auto}
.tile-social .t{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 115;color:var(--white-hot);font-size:22px}
/* favicon row */
.fav-row{display:flex;align-items:center;gap:18px}
.fav{background:var(--graphite-700);border:1px solid var(--iron-500);border-radius:6px;display:grid;place-items:center}
.fav img{height:76%;width:auto}
/* jersey crest */
.jersey{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.jersey img{height:120px;width:auto}
.jersey-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.34em;color:var(--bone-200);text-transform:uppercase}

/* ---- kit / downloads ---- */
.kit{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
@media (max-width:760px){.kit{grid-template-columns:1fr}}
.dl{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  border:1px solid var(--iron-500);border-radius:var(--r-2);padding:var(--space-4) var(--space-5);background:var(--graphite-800);
  transition:border-color var(--dur-2) var(--ease-ignite),box-shadow var(--dur-2) var(--ease-ignite),transform var(--dur-2) var(--ease-ignite)}
.dl:hover{border-color:var(--heat-40);box-shadow:var(--glow-ember);transform:translateY(-2px)}
.dl .n{font-family:var(--font-mono);font-size:var(--fs-small);color:var(--bone-100)}
.dl .x{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--fury-amber);letter-spacing:.1em}

/* ---- footer ---- */
.foot{border-top:1px solid var(--iron-500);padding-block:var(--space-8);margin-top:var(--space-9)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-5)}
.foot .lk{display:flex;align-items:center;gap:16px}
.foot .lk img{height:46px;width:auto}
.foot .fury{font-family:var(--font-display);font-weight:900;font-variation-settings:'wght' 900,'wdth' 115;font-size:34px;color:var(--white-hot);line-height:1}
.foot .fury i{color:var(--fury);font-style:normal}
.foot small{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;color:var(--fog-400);text-transform:uppercase}

/* ---- reveal on scroll ---- */
/* content is visible by default; the hidden->reveal only applies when JS is present,
   so no-JS / headless / print never ships blank sections */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-ignite)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* focus visibility */
:focus-visible{outline:2px solid var(--heat-50);outline-offset:3px;border-radius:2px}