/* GoatForge shared visual identity. One file re-skins every page: it only redefines the
 * color tokens (which every page reads), the animated background, a few hard-coded controls,
 * and the ember/cursor layers. Injected as the last <link> in <head> by rebrand.mjs so it wins.
 * Tune the whole site's look here. Remove the injected <link>/<script> to revert. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  --bg0: oklch(15% 0.012 45); --bg1: oklch(21% 0.022 45);
  --ink: oklch(94% 0.012 70); --muted: oklch(72% 0.030 60); --dim: oklch(50% 0.030 55);
  --line: oklch(62% 0.030 60 / .22);
  --accent: oklch(64% 0.200 40);      /* ember */
  --accent2: oklch(80% 0.150 72);     /* molten gold */
  --gold: oklch(82% 0.140 80);
  --panel-a: oklch(24% 0.020 45 / .72); --panel-b: oklch(14% 0.015 40 / .86);
  --hubac: var(--accent);
}

/* animated background: heat from the floor, one hot point up top, synthwave grid retired */
.bg{ background:
  radial-gradient(60% 42% at 50% 30%, oklch(64% 0.20 42 / .28), transparent 62%),
  radial-gradient(120% 55% at 50% 122%, oklch(58% 0.16 40 / .22), transparent 52%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px),
  radial-gradient(90% 60% at 50% -20%, oklch(24% 0.030 45) 0%, var(--bg1) 46%, var(--bg0) 88%) !important;}
.bg .grid{ display:none !important; }
.bg .scan{ opacity:.03 !important; }
.bg .g1{ background:radial-gradient(circle, oklch(66% 0.21 42 / .55), transparent 58%) !important; top:auto !important; bottom:8% !important; left:50% !important; transform:translateX(-50%) !important; width:34vw !important; height:34vw !important; }
.bg .g2{ background:radial-gradient(circle, oklch(78% 0.13 72 / .16), transparent 64%) !important; }

/* wordmark, where a page has one: cold steel "Goat" vs molten second word */
.hero h1{ font-family:'Anton',sans-serif !important; font-weight:400; letter-spacing:1px; text-transform:uppercase;
  overflow-wrap:anywhere;
  background:linear-gradient(180deg, oklch(97% 0.005 240) 0%, oklch(82% 0.02 242) 46%, oklch(62% 0.03 250) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.hero h1 i{ background:linear-gradient(180deg, oklch(88% 0.11 82) 0%, oklch(66% 0.21 42) 58%, oklch(56% 0.20 34) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 12px oklch(60% 0.2 40 / .45));}
.hero .kick{ color:var(--accent2) !important; border-color:oklch(72% 0.12 62 / .4) !important; background:oklch(64% 0.2 40 / .08) !important;}

/* emojis: lit by forge fire instead of default color on charcoal */
.mtile i:not(:has(.fi)), .hh-strip i:not(:has(.fi)), .hh-row i:not(:has(.fi)), .rz-body i:not(:has(.fi)){ filter:sepia(.5) saturate(1.5) hue-rotate(-12deg) brightness(.96); }

/* industrial shape: tighter corners + a forged steel top edge */
.mtile, .rz-body, .hh-strip, .ccard, .ss-card, .resume, .versus, .perk-card, .daily-cta{ border-radius:5px !important; }
.mtile, .rz-body, .hh-strip{ border-top:1px solid oklch(82% 0.12 72 / .16); }

/* shared controls that hard-code the old orange */
#hub{ --hubac:var(--accent) !important; }
.role-chip.on{ background:var(--accent) !important; border-color:var(--accent) !important; color:#180d07 !important; box-shadow:0 0 16px -3px oklch(64% 0.2 40 / .7) !important; }
.rz-go{ background:linear-gradient(180deg, var(--accent2), var(--accent)) !important; color:#180d07 !important; border:none !important; }
.rz-kick{ color:var(--accent2) !important; }
.daily-cta .dc-badge{ background:linear-gradient(180deg, var(--accent2), var(--accent)) !important; color:#180d07 !important; }
.ccard{ --rc:var(--accent) !important; }
.ccard:nth-of-type(3n){ --rc:var(--accent2) !important; }
.ccard:nth-of-type(3n+2){ --rc:var(--gold) !important; }

/* ---- ember rise (nodes created by forge-theme.js) ---- */
.forge-embers{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.forge-embers .ember{ position:absolute; bottom:-12px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #ffe6b0 0%, #ff7a24 55%, rgba(255,90,20,0) 72%);
  opacity:0; will-change:transform,opacity; animation:emberRise var(--d) linear var(--dl) infinite; }
@keyframes emberRise{
  0%{ transform:translate3d(0,0,0) scale(.6); opacity:0; }
  12%{ opacity:.5; }
  55%{ transform:translate3d(var(--sw),-42vh,0) scale(1); opacity:.4; }
  82%{ opacity:.25; }
  100%{ transform:translate3d(calc(var(--sw)*-.6),-80vh,0) scale(.35); opacity:0; }
}

/* ---- forge-light cursor (nodes created by forge-theme.js) ---- */
.forge-cursor{ position:fixed; left:0; top:0; width:240px; height:240px; border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(circle, oklch(72% 0.2 46 / .32) 0%, oklch(60% 0.18 40 / .10) 42%, transparent 70%);
  mix-blend-mode:screen; opacity:0; transition:opacity .3s ease; will-change:transform; }
.fspark{ position:fixed; left:0; top:0; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; pointer-events:none; z-index:3;
  background:radial-gradient(circle,#ffe6b0 0%,#ff7a24 60%,transparent 74%); opacity:0; will-change:transform,opacity; }
.fspark.go{ animation:fsparkFly .7s ease-out forwards; }
@keyframes fsparkFly{ 0%{ opacity:.9; transform:translate(0,0) scale(1); } 100%{ opacity:0; transform:translate(var(--sx,0), -30px) scale(.3); } }

@media (prefers-reduced-motion: reduce){ .forge-embers, .forge-cursor, .fspark{ display:none !important; } }
@media (max-width:820px){ .forge-embers .ember:nth-child(n+9){ display:none; } }

/* forge icon-set images (swapped in for emoji by forge-icons.js). !important so a page's own
   `.container img { width:100% }` rule (e.g. .reel-card img) can't blow an inline icon up to a
   full-size image - that was turning the 🔥 in a "🔥 PRIME" reel card into a giant flame. */
.fi{ display:inline-block !important; width:1.15em !important; height:1.15em !important;
  object-fit:contain !important; background:none !important; vertical-align:-0.22em; }

/* Landing logos: give each sport/mode icon a forged "medallion" socket - a cool dark plate with a
   hairline warm rim - so the ember-gold icons pop off the warm background instead of blending in.
   Also kill the old cool-theme grayscale that washed out the inactive sport chips. */
.sport-chip i:has(img), .mtile i:has(img){
  display:inline-grid !important; place-items:center; box-sizing:border-box;
  width:2.15em; height:2.15em; padding:.26em; margin-bottom:2px;
  border-radius:12px;
  background:radial-gradient(130% 130% at 50% 18%, #262b36, #0d1015 80%);
  border:1px solid oklch(80% 0.09 76 / .30);
  box-shadow:inset 0 1px 0 rgba(255,238,205,.10), inset 0 -7px 13px -9px #000, 0 3px 8px -2px rgba(0,0,0,.5);
}
.sport-chip i:has(img) .fi, .mtile i:has(img) .fi{ width:1.34em !important; height:1.34em !important;
  vertical-align:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.sport-chip i:has(img) img, .mtile i:has(img) img{ max-width:100%; max-height:100%; }
.sport-chip i{ filter:none !important; opacity:1 !important; }
.sport-chip.on i:has(img){ border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,238,205,.12), 0 0 15px -4px var(--accent); }

