/* ============================================================
   REALITY BEAST // V2 — MAXIMALIST BRUTALIST CYBER
   "world on fire" — base layer
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Archivo+Expanded:wght@600;800;900&display=swap');

:root{
  --bg:      #060507;
  --bg-2:    #0d0c10;
  --panel:   #111016;
  --ink:     #ECEAE6;
  --ink-dim: #8a8780;
  --acid:    #C6FF1A;   /* electric green */
  --fire:    #FF3B0D;   /* flame */
  --amber:   #FF8A00;   /* ember */
  --cyan:    #00F0FF;   /* cyber cyan */
  --magenta: #FF1E6F;   /* hot */
  --line:    rgba(236,234,230,.14);
  --line-2:  rgba(236,234,230,.30);

  --display: "Anton", sans-serif;
  --expand:  "Archivo Expanded", sans-serif;
  --mono:    "Space Mono", monospace;

  --gut: clamp(16px, 4vw, 64px);
  --max: 1600px;
  --ease: cubic-bezier(.2,.9,.25,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  font-size:15px;
  line-height:1.5;
  cursor:none;
}
@media (pointer:coarse){ body{ cursor:auto; } }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
::selection{ background:var(--acid); color:#000; }

/* ---- Cyber grid + scanline + grain overlays (fixed, pointer-none) ---- */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:9000; }
.fx-grid{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 30%, transparent 85%);
}
.fx-scan{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 3px);
  mix-blend-mode:multiply; opacity:.16; animation:flicker 5s steps(60) infinite;
}
.fx-vig{ background:radial-gradient(ellipse 90% 80% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%); }
.fx-noise{ opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes flicker{ 0%,100%{opacity:.16;} 92%{opacity:.16;} 93%{opacity:.07;} 94%{opacity:.2;} 96%{opacity:.1;} }
@media (prefers-reduced-motion: reduce){ .fx-scan{ animation:none; } }

/* ---- Custom cursor (HUD reticle) ---- */
.cursor{ position:fixed; top:0; left:0; z-index:10000; pointer-events:none; mix-blend-mode:difference; transform:translate(-50%,-50%); }
.cursor .ring{ width:26px; height:26px; border:1.5px solid var(--ink); border-radius:50%; transition:width .18s, height .18s, border-radius .18s, background .18s; }
.cursor .dot{ position:absolute; top:50%; left:50%; width:3px; height:3px; background:var(--acid); transform:translate(-50%,-50%); }
.cursor.hot .ring{ width:46px; height:46px; border-radius:4px; border-color:var(--acid); }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1; }
.hud-label{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--acid); display:inline-flex; align-items:center; gap:.7em; }
.hud-label::before{ content:"//"; opacity:.7; }
.hud-label.fire{ color:var(--fire); }

/* big brutalist headings */
.brut-h{ font-family:var(--display); text-transform:uppercase; line-height:.82; letter-spacing:.005em; }

/* ---- Bracketed brutalist button ---- */
.cbtn{
  position:relative; display:inline-flex; align-items:center; gap:.8em;
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:13px;
  padding:18px 28px; border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .18s, color .18s, transform .18s;
}
.cbtn::before, .cbtn::after{ content:""; position:absolute; width:8px; height:8px; border:1.5px solid var(--acid); transition:all .2s; }
.cbtn::before{ top:-4px; left:-4px; border-right:0; border-bottom:0; }
.cbtn::after{ bottom:-4px; right:-4px; border-left:0; border-top:0; }
.cbtn:hover{ background:var(--acid); color:#000; transform:translate(-2px,-2px); }
.cbtn:hover::before, .cbtn:hover::after{ width:14px; height:14px; border-color:var(--fire); }
.cbtn--fire{ border-color:var(--fire); color:var(--fire); }
.cbtn--fire:hover{ background:var(--fire); color:#000; }
.cbtn--fire::before, .cbtn--fire::after{ border-color:var(--ink); }

/* ---- Glitch text ---- */
.glitch{ position:relative; display:inline-block; }
.glitch::before, .glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch::before{ color:var(--cyan); transform:translate(-2px,0); mix-blend-mode:screen; animation:glx 3.4s infinite linear alternate; }
.glitch::after{  color:var(--magenta); transform:translate(2px,0); mix-blend-mode:screen; animation:gly 2.7s infinite linear alternate; }
@keyframes glx{ 0%{clip-path:inset(0 0 92% 0);} 20%{clip-path:inset(40% 0 40% 0);} 40%{clip-path:inset(78% 0 4% 0);} 60%{clip-path:inset(10% 0 80% 0);} 80%{clip-path:inset(55% 0 30% 0);} 100%{clip-path:inset(0 0 92% 0);} }
@keyframes gly{ 0%{clip-path:inset(85% 0 5% 0);} 25%{clip-path:inset(12% 0 70% 0);} 50%{clip-path:inset(48% 0 35% 0);} 75%{clip-path:inset(70% 0 12% 0);} 100%{clip-path:inset(85% 0 5% 0);} }
@media (prefers-reduced-motion: reduce){ .glitch::before,.glitch::after{ animation:none; opacity:.4; } }

/* ---- Warning stripes ---- */
.stripes{ background-image:repeating-linear-gradient(45deg, var(--fire) 0 18px, #000 18px 36px); }

/* ---- Marquee ---- */
@keyframes mq-l{ to{ transform:translateX(-50%);} }
@keyframes mq-r{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }

/* ---- Reveal (armed by JS .rb-on) ---- */
.rb-on [data-rv]{ opacity:0; transform:translateY(40px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rb-on [data-rv-stag] > *{ opacity:0; transform:translateY(40px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-rv].on, [data-rv-stag].on > *{ opacity:1 !important; transform:none !important; }
/* failsafe snap (background tab / throttled paint) */
.rb-snap [data-rv], .rb-snap [data-rv-stag] > *{ transition:none !important; }
@media (prefers-reduced-motion: reduce){ .rb-on [data-rv], .rb-on [data-rv-stag] > *{ opacity:1; transform:none; transition:none; } }