/* ============================================================
   CYBERBULL // ARCHIVE COMIC  — core stylesheet
   Perspective comic-deck system on a cyber-archive background
   ============================================================ */

:root{
  --ink:      #04060a;
  --ink-2:    #0a0f16;
  --panel:    #070b11;
  --neon:     #2bff5a;
  --neon-dim: #14a33a;
  --blue:     #1f6bff;
  --cyan:     #38e6ff;
  --warn:     #ff4a17;
  --bone:     #e6f1ec;
  --dust:     #7d8d92;

  --stroke: 3px;
  --gut: clamp(14px, 2.2vw, 26px);

  --shadow-hard: 10px 12px 0 #000;
  --shadow-neon: 10px 12px 0 #000, 10px 12px 0 3px var(--neon);
  --shadow-blue: 10px 12px 0 #000, 10px 12px 0 3px var(--blue);
  --shadow-warn: 10px 12px 0 #000, 10px 12px 0 3px var(--warn);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Share Tech Mono',ui-monospace,monospace;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--neon); color:#000; }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#05080c; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--neon),var(--blue));
  border:3px solid #05080c;
}

/* ============================================================
   BACKGROUND STACK  (fixed, layered art + shine)
   ============================================================ */
.bg-stack{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden;
  background:#03050a;
}
.bg-layer{
  position:absolute; inset:-6%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;
}
.bg-arena{
  background-image:url('04-web-arena-paradox.webp');
  opacity:.5;
  filter:saturate(1.15) contrast(1.05) brightness(.72);
  transform:scale(1.06);
}
.bg-wall{
  background-image:url('02-x-the-wall-404.webp');
  opacity:.15;
  mix-blend-mode:screen;
  filter:blur(1px) saturate(.7);
}
.bg-glow{
  background:
    radial-gradient(60% 45% at 50% 8%,  rgba(43,255,90,.17), transparent 70%),
    radial-gradient(70% 55% at 12% 78%, rgba(31,107,255,.20), transparent 72%),
    radial-gradient(55% 45% at 90% 60%, rgba(255,74,23,.10), transparent 70%);
}

/* ben-day halftone */
.bg-halftone{
  background-image:radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.2px);
  background-size:5px 5px;
  opacity:.55;
  mix-blend-mode:overlay;
}
/* scanlines */
.bg-scan{
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.40) 2px 4px);
  opacity:.5;
}
/* grid */
.bg-grid{
  background-image:
    linear-gradient(rgba(43,255,90,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,255,90,.055) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}
.bg-vignette{
  background:radial-gradient(ellipse 105% 85% at 50% 45%, transparent 30%, rgba(0,0,0,.86) 100%);
}

/* ---------- the SHINE sweep ---------- */
.bg-shine{
  position:absolute; top:-60%; left:-60%;
  width:65%; height:240%;
  background:linear-gradient(90deg,
     transparent 0%,
     rgba(56,230,255,.05) 30%,
     rgba(255,255,255,.14) 48%,
     rgba(43,255,90,.10) 60%,
     transparent 100%);
  filter:blur(22px);
  transform:rotate(18deg);
  mix-blend-mode:screen;
  animation:sweep 11s linear infinite;
}
.bg-shine.b{
  animation-duration:17s; animation-delay:-6s;
  width:38%;
  background:linear-gradient(90deg,transparent,rgba(43,255,90,.16),transparent);
  filter:blur(34px);
}
@keyframes sweep{
  0%   { transform:translateX(-30vw) rotate(18deg); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translateX(190vw) rotate(18deg); opacity:0; }
}

.bg-flicker{ background:rgba(43,255,90,.03); animation:flick 7s steps(1) infinite; }
@keyframes flick{
  0%,96%,100%{opacity:0} 97%{opacity:.5} 98%{opacity:0} 99%{opacity:.8}
}

/* ============================================================
   TYPE
   ============================================================ */
.font-display{ font-family:'Anton',Impact,sans-serif; letter-spacing:.01em; }
.font-comic{ font-family:'Bangers',cursive; letter-spacing:.05em; }
.font-mono{ font-family:'Share Tech Mono',monospace; }

.kicker{
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--neon);
}

.stroke-title{
  -webkit-text-stroke:2px #000;
  paint-order:stroke fill;
  text-shadow:
     4px 4px 0 #000,
     8px 8px 0 rgba(31,107,255,.55),
    12px 12px 0 rgba(0,0,0,.55);
}

.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-t); position:absolute; inset:0;
  -webkit-text-stroke:0;
}
.glitch::before{ color:var(--warn); transform:translate(-3px,2px); opacity:.5; clip-path:inset(0 0 58% 0); mix-blend-mode:screen; animation:gl1 4.5s infinite steps(2); }
.glitch::after { color:var(--cyan); transform:translate(3px,-2px); opacity:.5; clip-path:inset(56% 0 0 0); mix-blend-mode:screen; animation:gl2 5.5s infinite steps(2); }
@keyframes gl1{ 0%,92%,100%{transform:translate(-3px,2px)} 94%{transform:translate(-9px,4px)} 96%{transform:translate(2px,-2px)} }
@keyframes gl2{ 0%,90%,100%{transform:translate(3px,-2px)} 93%{transform:translate(10px,-5px)} 97%{transform:translate(-3px,3px)} }

/* ============================================================
   COMIC PANEL SYSTEM  (+ 3D perspective deck)
   ============================================================ */
.scene{ perspective:1700px; perspective-origin:50% 45%; }

.panel{
  position:relative;
  background:linear-gradient(180deg, rgba(12,18,26,.94), rgba(4,7,11,.97));
  border:var(--stroke) solid #000;
  outline:2px solid rgba(43,255,90,.35);
  outline-offset:-8px;
  box-shadow:var(--shadow-hard);
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease, outline-color .4s ease;
  overflow:hidden;
  backdrop-filter:blur(3px);
}
.panel::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.1px);
  background-size:4px 4px; opacity:.5; mix-blend-mode:overlay;
}
.panel::after{
  content:''; position:absolute; top:-1px; right:-1px; width:26px; height:26px; z-index:3;
  background:#000;
  clip-path:polygon(100% 0,0 0,100% 100%);
  border-left:var(--stroke) solid var(--neon);
}
.panel.p-blue{ outline-color:rgba(31,107,255,.45); }
.panel.p-blue::after{ border-left-color:var(--blue); }
.panel.p-warn{ outline-color:rgba(255,74,23,.45); }
.panel.p-warn::after{ border-left-color:var(--warn); }
.panel.p-plain::after{ display:none; }

.panel:hover{ box-shadow:var(--shadow-neon); outline-color:var(--neon); }
.panel.p-blue:hover{ box-shadow:var(--shadow-blue); }
.panel.p-warn:hover{ box-shadow:var(--shadow-warn); }

/* shine sweep across a panel on hover */
.gloss{
  position:absolute; top:-120%; left:-70%;
  width:55%; height:340%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(22deg);
  pointer-events:none; opacity:0; z-index:4;
}
.panel:hover .gloss{ opacity:1; animation:gloss 1.1s ease-out; }
@keyframes gloss{ from{ transform:translateX(-40%) rotate(22deg);} to{ transform:translateX(360%) rotate(22deg);} }

/* ---- 3D reveal ---- */
.tilt-l, .tilt-r, .tilt-u{
  opacity:0;
  transition:transform .95s cubic-bezier(.16,.9,.24,1), opacity .7s ease;
}
.tilt-l{ transform:perspective(1500px) rotateY(22deg) translateZ(-160px) translateX(-40px); }
.tilt-r{ transform:perspective(1500px) rotateY(-22deg) translateZ(-160px) translateX(40px); }
.tilt-u{ transform:perspective(1500px) rotateX(26deg) translateZ(-140px) translateY(50px); }
.in.tilt-l,.in.tilt-r,.in.tilt-u{
  opacity:1;
  transform:perspective(1500px) rotateY(0) rotateX(0) translateZ(0) translate(0,0);
}

.deck-l{ transform:perspective(1400px) rotateY(9deg) rotateX(3deg); }
.deck-r{ transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); }
.deck-l:hover,.deck-r:hover{ transform:perspective(1400px) rotateY(0) rotateX(0) translateZ(30px); }

/* ============================================================
   CAPTION BOXES / BUBBLES / BURSTS
   ============================================================ */
.caption{
  display:inline-block;
  background:var(--neon);
  color:#00120a;
  font-family:'Anton',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.42rem .9rem .3rem;
  border:3px solid #000;
  box-shadow:5px 5px 0 #000;
  transform:rotate(-1.6deg);
  font-size:clamp(12px,1.15vw,15px);
  line-height:1;
}
.caption.blue{ background:var(--cyan); color:#001018; }
.caption.warn{ background:var(--warn); color:#160200; }
.caption.bone{ background:var(--bone); color:#000; }

.bubble{
  position:relative;
  background:var(--bone);
  color:#07090c;
  border:3px solid #000;
  border-radius:18px;
  padding:1rem 1.15rem;
  box-shadow:7px 7px 0 #000;
  font-size:.95rem; line-height:1.5;
}
.bubble::after{
  content:''; position:absolute; bottom:-19px; left:34px;
  width:0;height:0;
  border:10px solid transparent;
  border-top:20px solid #000;
}
.bubble::before{
  content:''; position:absolute; bottom:-13px; left:38px; z-index:1;
  width:0;height:0;
  border:7px solid transparent;
  border-top:14px solid var(--bone);
}

.burst{
  display:grid; place-items:center;
  background:var(--warn); color:#fff;
  font-family:'Bangers',cursive;
  clip-path:polygon(50% 0,61% 18%,82% 10%,79% 32%,100% 42%,83% 55%,95% 76%,72% 74%,68% 97%,50% 82%,32% 97%,28% 74%,5% 76%,17% 55%,0 42%,21% 32%,18% 10%,39% 18%);
  filter:drop-shadow(4px 5px 0 #000);
}
.burst.green{ background:var(--neon); color:#001a08; }
.burst.blue { background:var(--blue); color:#eaf3ff; }

.sfx{
  font-family:'Bangers',cursive;
  color:var(--warn);
  -webkit-text-stroke:3px #000;
  paint-order:stroke fill;
  text-shadow:6px 6px 0 rgba(0,0,0,.85);
  line-height:.85;
  pointer-events:none;
  user-select:none;
}
.sfx.green{ color:var(--neon); }
.sfx.cyan{ color:var(--cyan); }

/* ============================================================
   BUTTONS
   ============================================================ */
.cbtn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:'Anton',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  padding:.85rem 1.4rem .75rem;
  border:3px solid #000;
  color:#00120a; background:var(--neon);
  box-shadow:6px 6px 0 #000;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, filter .2s;
  overflow:hidden;
  cursor:pointer;
}
.cbtn:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 #000; filter:brightness(1.08); }
.cbtn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 #000; }
.cbtn:hover .gloss{ opacity:1; animation:gloss .8s ease-out; }
.cbtn.ghost{ background:transparent; color:var(--bone); border-color:var(--neon); }
.cbtn.ghost:hover{ background:rgba(43,255,90,.1); }
.cbtn.blue{ background:var(--blue); color:#f0f6ff; }
.cbtn.warn{ background:var(--warn); color:#fff3ef; }
.cbtn.bone{ background:var(--bone); color:#000; }
.cbtn.cyan{ background:var(--cyan); color:#00131a; }

/* ============================================================
   WARNING STRIPE
   ============================================================ */
.hazard{
  background:repeating-linear-gradient(-45deg,
    var(--warn) 0 14px, #14100e 14px 28px);
}
.hazard-thin{
  background:repeating-linear-gradient(-45deg,
    rgba(255,74,23,.85) 0 10px, rgba(10,8,7,.9) 10px 20px);
}

.marquee{ overflow:hidden; white-space:nowrap; }
.marquee-track{ display:inline-block; animation:mq 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   NAV
   ============================================================ */
.navlink{
  position:relative;
  font-family:'Anton',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; font-size:13px; padding:.35rem 0;
  transition:color .2s;
}
.navlink::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--neon); transition:width .25s ease;
}
.navlink:hover{ color:var(--neon); }
.navlink:hover::after{ width:100%; }
.navlink.active{ color:var(--neon); }
.navlink.active::after{ width:100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(3.2rem, 11.5vw, 10rem);
  line-height:.82;
  text-transform:uppercase;
  margin:0;
}
.hero-sub{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.3rem,4.2vw,3.2rem);
  line-height:.95;
  color:var(--neon);
  text-transform:uppercase;
  -webkit-text-stroke:1.5px #000;
  paint-order:stroke fill;
  text-shadow:3px 4px 0 #000, 0 0 26px rgba(43,255,90,.55);
}

.stack-3d{ transform-style:preserve-3d; }
.float-a{ animation:floatA 7s ease-in-out infinite; }
.float-b{ animation:floatA 9s ease-in-out infinite reverse; }
@keyframes floatA{ 0%,100%{ translate:0 0 } 50%{ translate:0 -14px } }

/* ============================================================
   HOW TO BUY — perspective conveyor
   ============================================================ */
.rail{ perspective:1500px; perspective-origin:50% 50%; }
.step{
  transform:rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .35s, outline-color .35s;
}
.step:hover{ transform:rotateY(0deg) translateZ(70px); z-index:5; }

/* ============================================================
   CHART FRAME
   ============================================================ */
.crt{ position:relative; }
.crt .scanmask{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.18) 3px 6px);
}
.crt iframe{ display:block; width:100%; border:0; background:#0b0e13; }

/* ============================================================
   CA PILL
   ============================================================ */
.ca-pill{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:rgba(4,8,12,.92);
  border:3px solid #000; outline:2px solid rgba(43,255,90,.4); outline-offset:-7px;
  box-shadow:6px 6px 0 #000;
  padding:.7rem .8rem;
}
.ca-val{ color:var(--neon); word-break:break-all; font-size:.86rem; }

/* ============================================================
   MISC
   ============================================================ */
.tag{
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dust);
}
.stat-line{ border-bottom:1px dashed rgba(125,141,146,.35); }

.noise-img{ position:relative; overflow:hidden; }
.noise-img::after{
  content:''; position:absolute; inset:0; z-index:2;
  background-image:radial-gradient(rgba(0,0,0,.35) 1px, transparent 1.2px);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:.6;
}

#drawer{ transition:transform .35s cubic-bezier(.2,.8,.25,1), opacity .3s; transform-origin:top; }
#drawer.closed{ transform:translateY(-12px) scaleY(.94); opacity:0; pointer-events:none; }

.link-u{ color:var(--cyan); text-decoration:none; border-bottom:1px dashed rgba(56,230,255,.5); }
.link-u:hover{ color:var(--neon); border-bottom-color:var(--neon); }

@media (max-width:900px){
  .step{ transform:none !important; }
  .deck-l,.deck-r{ transform:none; }
  .bg-arena{ opacity:.42; }
  .panel{ outline-offset:-6px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .tilt-l,.tilt-r,.tilt-u{ opacity:1; transform:none; }
}