/* =====================================================================
   ASHES - design tokens, base styles and shared primitives.

   The accent is the city accent: #f97316, the same orange every in-game UI
   uses (ox_inventory, ox_lib, the banking app, the club). Gold #fbbf24 is
   pulled off the logo's wings and is used sparingly, for prices and the
   live badge - it is a highlight, not a second theme.

   Everything is driven off the custom properties in :root. Retheming the
   site is those values and nothing else.
   ===================================================================== */

/* --- fonts ---------------------------------------------------------- */
/* Both faces are lifted from ashes_carradio's UI so the website and the
   in-game radio read as the same brand. Self-hosted: no external font CDN,
   nothing to block, no layout shift. */
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../fonts/chakra-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* accent */
  --ac:        #f97316;
  --ac2:       #c2410c;
  --ac-deep:   #431407;
  --ac-soft:   #fed7aa;
  --gold:      #fbbf24;
  --gold-dim:  #b45309;

  /* warm neutrals - these are grey with the red channel lifted, so every
     surface sits in the same fire-lit key rather than going cold */
  --bg:        #0a0706;
  --bg-2:      #100b09;
  --surface:   #171110;
  --surface-2: #1f1815;
  --line:      #2c2320;
  --line-soft: rgba(249, 115, 22, 0.14);

  /* text */
  --fg:        #f7f0ec;
  --fg-2:      #c8b9b1;
  --fg-3:      #8d7d75;

  /* semantic - deliberately NOT orange. A live badge and an error have to
     read at a glance without being confused for the brand. */
  --live:      #ef4444;
  --good:      #34d399;
  --warn:      #f59e0b;

  --font-ui:      'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-ui);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --shadow:      0 18px 50px -12px rgba(0, 0, 0, 0.75);
  --shadow-ac:   0 0 0 1px var(--line-soft), 0 20px 60px -20px rgba(249, 115, 22, 0.35);

  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- base ----------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A single fixed ember wash behind everything. Fixed rather than per-section
   so scrolling moves the content past the light, not the light with it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% -8%,  rgba(249, 115, 22, 0.16), transparent 70%),
    radial-gradient(700px 500px at 100% 12%, rgba(194, 65, 12, 0.10),  transparent 70%),
    radial-gradient(800px 600px at 0% 55%,   rgba(120, 40, 10, 0.10),  transparent 70%);
}

/* Film grain + vignette.
   A flat dark page reads as an empty void rather than as a lit room - it is the
   single biggest reason a dark layout looks unfinished. Grain gives the black
   a surface, and the vignette gives the viewport an edge, so content sits IN
   something instead of floating on nothing.
   The noise is a self-contained SVG turbulence data URI: no image request, and
   it tiles at any viewport size. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Above everything including the header, so the whole page shares one
     surface. pointer-events:none keeps it out of the way of every control. */
  z-index: 999;
  background-image:
    radial-gradient(135% 105% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: 100% 100%, 180px 180px;
  /* Deliberately NOT mix-blend-mode. An overlay/soft-light blend applies to the
     whole layer including the vignette, which then lightens the page edges
     instead of darkening them. Plain alpha compositing does both jobs
     predictably: the noise is baked at low opacity in the SVG itself. */
}

/* height:auto is load-bearing, not tidiness.
   The width/height attributes on an <img> are presentational hints that map to
   CSS width and height. Setting only `width` in a stylesheet overrides the
   width hint but leaves the HEIGHT hint in place - so the image renders at the
   CSS width by its intrinsic pixel height and comes out visibly stretched.
   (The hero logo rendered 400x914 from a 914x914 source.) Aspect-ratio only
   applies when one axis is auto, so this is what restores it. Rules that
   deliberately set a height - .brand img, .tier-badge img - are more specific
   and still win. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Stops a two-line heading breaking as a full line plus one orphaned word,
     which is the most common way a good type scale still looks careless. */
  text-wrap: balance;
}

/* The page commits to one visual world - a dark, fire-lit city - rather than
   shipping a light mode. That is a deliberate choice, not an omission, so the
   tokens are pinned against a viewer-side theme toggle flipping them. */
:root[data-theme='light'],
:root[data-theme='dark'] { color-scheme: dark; }

p { margin: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ac); color: #17100c; }

/* --- layout --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}

/* 104px top AND bottom put ~208px of empty black between every pair of
   sections, which read as the page being unfinished rather than as breathing
   room. Asymmetric padding - more above a heading than below the block it
   closes - keeps each section attached to its own title. */
.section { padding: 76px 0 64px; position: relative; z-index: 1; }

/* A hairline between sections. On a page this dark, a 1px rule does more to
   separate two blocks than another 60px of nothing. */
.section + .section > .wrap::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

.section-head { margin-bottom: 40px; max-width: 720px; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 16px;
}
.kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ac));
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
}

.section-lede {
  margin-top: 14px;
  color: var(--fg-2);
  font-size: 17px;
  max-width: 62ch;
}

/* --- panel ---------------------------------------------------------- */
.panel {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* A one-pixel warm rim along the top edge - reads as light catching the
   lip of the panel, and keeps the cards from looking like flat rectangles. */
.panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
}

/* --- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--ac), var(--ac2));
  color: #180d06;
  box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.7);
}
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(249, 115, 22, 0.85); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: var(--fg);
}
.btn-ghost:hover { border-color: var(--ac); background: rgba(249, 115, 22, 0.08); }

.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }
.btn-block { width: 100%; }

/* --- badges --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-2);
}

.badge-live { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }
.badge-live .dot { background: var(--live); }

.badge-on { border-color: rgba(52, 211, 153, 0.35); color: #86efac; }
.badge-on .dot { background: var(--good); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* The pulse is what makes a "live" pill read as live rather than as a label.
   Box-shadow rather than a scaled pseudo-element so it never affects layout. */
.dot-pulse { animation: dotPulse 2s ease-out infinite; }
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* --- scrollbars ----------------------------------------------------- */
.scroll-y { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ac2) transparent; }
.scroll-y::-webkit-scrollbar { width: 8px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.scroll-y:hover::-webkit-scrollbar-thumb { background: var(--ac2); background-clip: content-box; }

/* --- reveal on scroll ----------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Motion is decoration everywhere on this page - the reveals, the embers,
   the pulse. None of it carries meaning, so all of it goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}