/* ============================================================
   FUFU — Urban Brutalist / Hypebeast design tokens & utilities
   Dark asphalt base · electric lime accent · extended sans
   ============================================================ */

:root {
  --bg:        #0a0a0b;   /* asphalt black            */
  --bg-2:      #101012;   /* raised asphalt           */
  --surface:   #161619;   /* card surface             */
  --surface-2: #1d1d21;   /* raised card              */
  --line:      #2b2b30;   /* hairline                 */
  --line-2:    #3a3a40;
  --white:     #f3f3ef;   /* off-white ink            */
  --muted:     #8c8c93;   /* muted ink                */
  --muted-2:   #5d5d63;
  --lime:      #ccff00;   /* electric lime accent     */
  --lime-deep: #aee000;
  --ink-on-lime:#0a0a0b;
  --danger:    #ff3b20;   /* loss / warning red       */
  --win:       #2bd66a;   /* honest win green         */

  --ff-disp: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --ff-body: "Archivo", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
.fufu, .fufu * { margin: 0; padding: 0; }

/* ============================================================
   TEXTURES
   ============================================================ */
.tex-asphalt {
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(204,255,0,0.06), transparent 60%),
    radial-gradient(80% 60% at 100% 110%, rgba(204,255,0,0.04), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(28deg,  rgba(0,0,0,0.5) 0 3px, transparent 3px 7px);
}
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* caution / hazard tape */
.hazard {
  background-image: repeating-linear-gradient(
    -45deg, var(--lime) 0 16px, #0a0a0b 16px 32px);
}
.hazard-thin {
  background-image: repeating-linear-gradient(
    -45deg, var(--lime) 0 8px, #0a0a0b 8px 16px);
}

/* ============================================================
   TYPE
   ============================================================ */
.disp {
  font-family: var(--ff-disp);
  font-weight: 900;
  font-stretch: var(--disp-stretch, 125%);
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.01em;
  color: var(--white);
}
.disp-out {            /* outline / stroke headline */
  -webkit-text-stroke: 2px var(--white);
  color: transparent;
}
.disp-out-lime { -webkit-text-stroke-color: var(--lime); }
.mono {
  font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}
.kicker {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--lime);
}
.eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* ============================================================
   BRUTALIST PRIMITIVES
   ============================================================ */
.box {
  border: 2px solid var(--white);
  background: var(--surface);
  box-shadow: 6px 6px 0 #000;
}
.box-lime {
  border: 2px solid var(--lime);
  box-shadow: 6px 6px 0 var(--lime);
}

/* massive button */
.btn-x {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  font-family: var(--ff-disp); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 20px; line-height: 1;
  padding: 20px 22px;
  background: var(--lime); color: var(--ink-on-lime);
  border: 2px solid var(--lime);
  box-shadow: 6px 6px 0 #000;
  cursor: pointer; user-select: none;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-x:hover { transform: translate(-2px,-2px); box-shadow: 9px 9px 0 #000; background: #d9ff33; }
.btn-x:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #000; }
.btn-x .arrow { transition: transform .15s ease; }
.btn-x:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 16px; color: var(--white);
  background: transparent; border: 2px solid var(--line-2);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }

/* chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px; border: 1.5px solid var(--line-2); color: var(--muted);
}
.chip-lime { color: var(--lime); border-color: var(--lime); }
.chip-solid { background: var(--lime); color: var(--ink-on-lime); border-color: var(--lime); }

/* section number tag */
.sec-tag {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; color: var(--lime); text-transform: uppercase;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__track > * { padding-right: 0; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-animate { animation: mq linear infinite; }

/* divider dot */
.dot { width: 5px; height: 5px; background: var(--lime); border-radius: 50%; display: inline-block; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes pulseLime {
  0%,100% { box-shadow: 0 0 0 0 rgba(204,255,0,0.55); }
  50%     { box-shadow: 0 0 0 7px rgba(204,255,0,0); }
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  animation: blink 1.1s steps(2,jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes shk { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* scrollbar (inside phone) */
.noscroll::-webkit-scrollbar { width: 0; height: 0; }
.noscroll { scrollbar-width: none; }

/* image slot theming */
image-slot {
  --is-bg: #0d0d0f;
  background: #0d0d0f;
  filter: grayscale(0.2) contrast(1.05);
}