/* =====================================================================
   FLIPPY — Tactical Design Tokens
   Operation Flippy: military command terminal × cartoon gore mascot
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik+Spray+Paint&family=Sigmar&family=Bagel+Fat+One&family=Bowlby+One&family=Anton&family=Saira+Stencil+One&family=Permanent+Marker&family=Bungee+Inline&family=Pirata+One&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* ---------- Surfaces (pure black + dark olive) ---------- */
  --void:        #000000;   /* page floor — pure black */
  --tar:         #050605;   /* default bg */
  --asphalt:     #090b08;   /* sections */
  --bunker:      #0c0f0a;   /* cards */
  --bunker-hi:   #131811;   /* card hover */

  /* ---------- Olive / camo greens ---------- */
  --olive-deep:  #1b240f;
  --olive:       #2f3f17;
  --olive-hi:    #4a6322;
  --moss:        #6a8a2c;

  /* ---------- Acid neon (the FLIPPY signal) ---------- */
  --acid:        #a6ff14;   /* purer green lime, less yellow */
  --acid-hot:    #c9ff35;   /* hover / hi */
  --acid-deep:   #6fbf06;   /* pressed */
  --acid-dim:    #3d7203;   /* low-contrast bg */
  --acid-glow-25: rgba(166, 255, 20, 0.25);
  --acid-glow-45: rgba(166, 255, 20, 0.45);
  --acid-glow-65: rgba(166, 255, 20, 0.65);

  /* ---------- Gore accent (sparing — only for danger / kill moments) ---------- */
  --blood:       #d7263d;
  --blood-deep:  #8a0f23;
  --rust:        #c97b2f;

  /* ---------- Bone / utility chrome ---------- */
  --bone:        #ededeb;
  --bone-dim:    #b8b8a8;
  --ash:         #6e7768;
  --smoke:       #3e4438;
  --line:        #2a3122;
  --line-hot:    #44551f;

  /* ---------- Semantic ---------- */
  --bg:          var(--void);
  --fg:          var(--bone);
  --fg-dim:      var(--bone-dim);
  --fg-meta:     var(--ash);
  --accent:      var(--acid);
  --danger:      var(--blood);

  /* ---------- Spacing (4-base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- Radii (hard, mechanical — max 14) ---------- */
  --r-0: 0px;    /* default: mostly sharp */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-max: 14px;

  /* ---------- Glows / shadows ---------- */
  --glow-sm: 0 0 10px var(--acid-glow-25);
  --glow-md: 0 0 24px var(--acid-glow-45);
  --glow-lg: 0 0 64px var(--acid-glow-45);
  --glow-text: 0 0 12px var(--acid-glow-65), 0 0 2px var(--acid);
  --inset-top: inset 0 1px 0 rgba(255,255,255,0.05);

  /* ---------- Type — v3.1 spray-paint cult ----------
     - f-stencil: ANTON — condensed white stencil for WE ARE / sections.
     - f-cartoon: RUBIK SPRAY PAINT — actual spray-painted graffiti for the FLIPPY mark.
     - f-fat:     BAGEL FAT ONE — fat chunky cartoon backup.
     - f-grit:    PIRATA ONE — dark cult lettering for accents.
     - f-body:    RAJDHANI — military tech sans.
     - f-mono:    SHARE TECH MONO — HUD readouts.
  */
  --f-stencil:  'Anton', 'Saira Stencil One', 'Impact', system-ui, sans-serif;
  --f-cartoon:  'Rubik Spray Paint', 'Bagel Fat One', 'Sigmar', system-ui, sans-serif;
  --f-fat:      'Bagel Fat One', 'Sigmar', system-ui, sans-serif;
  --f-grit:     'Pirata One', 'Permanent Marker', system-ui, sans-serif;
  --f-body:     'Rajdhani', system-ui, sans-serif;
  --f-mono:     'Share Tech Mono', ui-monospace, monospace;

  /* ---------- Motion ---------- */
  --ease-snap:  cubic-bezier(0.2, 0.9, 0.2, 1);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --d-fast:     140ms;
  --d-base:     280ms;
  --d-slow:     520ms;

  /* ---------- Layout ---------- */
  --max-w: 1400px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ============================================================
   Base reset (page-level)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--void); color-scheme: dark; }

body {
  background: var(--void);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* High-quality painted-edge effect for stencil + cartoon titles */
.paint-rough {
  filter: url(#flippy-paint-rough);
}
.paint-medium {
  filter: url(#flippy-paint-medium);
}
.paint-heavy {
  filter: url(#flippy-paint-heavy);
}

/* Better antialiasing on huge display text */
.cartoon, .stencil {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--acid); color: var(--void); }

/* Custom scrollbar — tactical */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tar); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--olive-hi), var(--olive));
  border: 2px solid var(--tar);
}
::-webkit-scrollbar-thumb:hover { background: var(--acid); }

/* Cursor: precision crosshair on interactive elements */
button, a, [role="button"] {
  cursor: crosshair;
}

/* ============================================================
   Recurring textures — grid / scanlines / noise / camo
   ============================================================ */

.tac-grid {
  background-image:
    linear-gradient(rgba(185,255,31,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,255,31,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
}

.tac-grid-fine {
  background-image:
    linear-gradient(rgba(185,255,31,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,255,31,0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}

.tac-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(185,255,31,0.04) 3px,
    rgba(0,0,0,0) 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

.tac-noise {
  position: relative;
}
.tac-noise::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.72  0 0 0 0 1  0 0 0 0 0.12  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/></svg>");
  opacity: 0.4;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* corner brackets — military HUD frame */
.tac-bracket {
  position: relative;
}
.tac-bracket::before,
.tac-bracket::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--acid);
  pointer-events: none;
}
.tac-bracket::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.tac-bracket::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ============================================================
   Reusable HUD frame — used everywhere
   ============================================================ */
.hud {
  position: relative;
  background: linear-gradient(180deg, var(--bunker) 0%, var(--asphalt) 100%);
  border: 1px solid var(--line);
  /* clipped corners — military panel feel */
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
  box-shadow: var(--inset-top), 0 16px 40px rgba(0,0,0,0.45);
}

.hud-hot {
  border-color: var(--line-hot);
  background: linear-gradient(180deg, var(--bunker-hi) 0%, var(--bunker) 100%);
}

/* ============================================================
   Stencil text (uppercase, condensed military)
   ============================================================ */
.stencil {
  font-family: var(--f-stencil);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cartoon {
  font-family: var(--f-cartoon);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mono {
  font-family: var(--f-mono);
  letter-spacing: 0.05em;
}

/* Distressed paint title — acid green chunky stencil with a brush edge */
.title-paint {
  font-family: var(--f-stencil);
  text-transform: uppercase;
  color: var(--acid);
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-shadow:
    0 0 0 var(--acid),
    1px 1px 0 var(--olive-deep),
    2px 2px 0 var(--olive-deep),
    0 0 24px rgba(185,255,31,0.35);
  position: relative;
}

/* eyebrow tag — small uppercase with bracket */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acid);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before,
.eyebrow::after {
  content: ""; width: 18px; height: 1px;
  background: var(--acid);
  opacity: 0.7;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bg: var(--acid);
  --fg: var(--void);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-stencil);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bg);
  position: relative;
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
  cursor: crosshair;
  transition: transform var(--d-fast) var(--ease-snap),
              filter var(--d-fast) var(--ease-snap);
}
.btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 12px var(--acid-glow-65));
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.985); }

.btn-ghost {
  --bg: transparent;
  --fg: var(--acid);
  border: 2px solid var(--acid);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--acid-glow-25);
  filter: drop-shadow(0 0 14px var(--acid-glow-45));
}

.btn-blood {
  --bg: var(--blood);
  --fg: var(--bone);
  border-color: var(--blood);
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes radar-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes radar-ping {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes scan-down {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.85; }
}
@keyframes pulse-acid {
  0%, 100% { box-shadow: 0 0 0 0 var(--acid-glow-45); }
  50%      { box-shadow: 0 0 0 8px rgba(185,255,31,0); }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes tape-roll {
  from { background-position: 0 0; }
  to   { background-position: 200px 0; }
}
@keyframes shake-mild {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}
@keyframes float-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes glitch-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
}

.flicker { animation: flicker 6s infinite; }
.blink { animation: blink 1s steps(2) infinite; }

/* warning tape — diagonal yellow/black hazard, animated */
.tape {
  background: repeating-linear-gradient(
    -45deg,
    var(--acid) 0 16px,
    var(--void) 16px 32px
  );
  animation: tape-roll 8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}