/* ==========================================================
   2500 — COMIC / BLACK HOLE
   ========================================================== */

:root{
  --ink:#05060d;
  --paper:#f4f1e4;
  --blue:#3fa9ff;
  --blue-deep:#0a2a6b;
  --cyan:#8ff4ff;
  --gold:#ffc247;
  --pink:#ff4f9b;
  --edge:4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Bangers',Impact,sans-serif;letter-spacing:.03em;font-weight:400}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ---------- BACKGROUND STACK ---------- */
#bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#02030a}
#bg .bg-img{
  position:absolute;inset:-6%;
  background:url('../assets/logo.jpg') center/cover no-repeat;
  filter:saturate(1.15) contrast(1.05) brightness(.42) blur(2px);
  transform:scale(1.06);
  animation:bgdrift 40s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  from{transform:scale(1.06) translate3d(0,0,0) rotate(0deg)}
  to{transform:scale(1.14) translate3d(-1.5%,1.5%,0) rotate(1.2deg)}
}
#bg .bg-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 0%, rgba(2,3,10,.55) 48%, rgba(2,3,10,.94) 100%),
    linear-gradient(180deg, rgba(2,3,10,.72), rgba(2,3,10,.55) 35%, rgba(2,3,10,.9));
}
/* halftone comic dots over background */
#bg .bg-dots{
  position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px);
  background-size:6px 6px;
}
/* SHINE sweep */
#bg .bg-shine{
  position:absolute;top:-60%;left:-70%;width:70%;height:240%;
  background:linear-gradient(100deg,
     rgba(255,255,255,0) 0%,
     rgba(143,244,255,.10) 38%,
     rgba(255,255,255,.34) 50%,
     rgba(143,244,255,.10) 62%,
     rgba(255,255,255,0) 100%);
  filter:blur(6px);
  transform:rotate(14deg);
  animation:sweep 7.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{left:-70%;opacity:0}
  12%{opacity:1}
  60%{opacity:1}
  100%{left:135%;opacity:0}
}
#bg .bg-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:
    linear-gradient(rgba(63,169,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,169,255,.35) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 72%);
}

/* ---------- COMIC PRIMITIVES ---------- */
.panel{
  position:relative;
  background:linear-gradient(160deg,rgba(9,14,34,.93),rgba(3,5,16,.96));
  border:var(--edge) solid #05060d;
  outline:2px solid rgba(143,244,255,.35);
  outline-offset:-10px;
  box-shadow:12px 12px 0 rgba(0,0,0,.85), 0 0 44px rgba(63,169,255,.18);
  border-radius:6px;
}
.panel::after{ /* inner halftone */
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background-image:radial-gradient(rgba(63,169,255,.35) 1px,transparent 1.1px);
  background-size:9px 9px;opacity:.18;
}
.panel-lite{
  background:var(--paper);color:var(--ink);
  border:var(--edge) solid #05060d;
  box-shadow:10px 10px 0 rgba(0,0,0,.85);
  border-radius:6px;
}

.tape{
  position:absolute;width:120px;height:26px;background:rgba(255,194,71,.85);
  border:2px solid #05060d;top:-14px;left:24px;transform:rotate(-4deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.6);
}

.stroke-title{
  color:#fff;
  text-shadow:
    -3px -3px 0 #05060d, 3px -3px 0 #05060d, -3px 3px 0 #05060d, 3px 3px 0 #05060d,
    0 0 26px rgba(63,169,255,.85), 0 10px 0 rgba(10,42,107,.9);
}
.stroke-gold{
  color:var(--gold);
  text-shadow:-3px -3px 0 #05060d,3px -3px 0 #05060d,-3px 3px 0 #05060d,3px 3px 0 #05060d,0 0 24px rgba(255,194,71,.6);
}

/* comic burst badge */
.burst{
  position:relative;display:inline-block;padding:.55rem 1.4rem;
  background:var(--gold);color:#05060d;border:3px solid #05060d;
  font-family:'Bangers',Impact,sans-serif;letter-spacing:.08em;
  clip-path:polygon(3% 12%,12% 0,24% 10%,38% 1%,50% 11%,63% 1%,76% 10%,88% 0,97% 12%,100% 30%,94% 50%,100% 70%,97% 88%,88% 100%,76% 90%,63% 99%,50% 89%,38% 99%,24% 90%,12% 100%,3% 88%,0 70%,6% 50%,0 30%);
  box-shadow:6px 6px 0 rgba(0,0,0,.75);
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Bangers',Impact,sans-serif;letter-spacing:.06em;font-size:1.15rem;
  padding:.75rem 1.5rem;border:3px solid #05060d;border-radius:4px;
  background:var(--gold);color:#05060d;
  box-shadow:7px 7px 0 rgba(0,0,0,.8);
  transition:transform .12s ease, box-shadow .12s ease, filter .2s;
  cursor:pointer;position:relative;overflow:hidden;
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(0,0,0,.8);filter:brightness(1.08)}
.btn:active{transform:translate(7px,7px);box-shadow:0 0 0 rgba(0,0,0,.8)}
.btn-blue{background:var(--blue);color:#04122b}
.btn-ghost{background:rgba(244,241,228,.06);color:var(--paper);border-color:#05060d;outline:2px solid rgba(143,244,255,.4);outline-offset:-7px}
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);
}
.btn:hover::before{animation:btnshine .75s ease}
@keyframes btnshine{to{left:150%}}

/* ---------- PERSPECTIVE / SECTION STYLE ---------- */
.stage{perspective:1600px;perspective-origin:50% 50%}
.tilt-l{transform:rotateY(7deg) rotateX(3deg) rotateZ(-1.1deg)}
.tilt-r{transform:rotateY(-7deg) rotateX(3deg) rotateZ(1.1deg)}
.tilt-flat{transform:rotateX(5deg)}
.deck{transform-style:preserve-3d}

.reveal{opacity:0;transform:translateY(46px) rotateX(12deg) scale(.96);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* angled section dividers = comic gutters */
.gutter{
  height:56px;background:repeating-linear-gradient(90deg,#05060d 0 34px,rgba(63,169,255,.55) 34px 40px);
  transform:skewY(-2.2deg);border-top:3px solid #05060d;border-bottom:3px solid #05060d;
  box-shadow:0 0 30px rgba(63,169,255,.25);
}

/* ---------- NAV ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(3,5,16,.92),rgba(3,5,16,.55));
  border-bottom:3px solid #05060d;
  box-shadow:0 6px 0 rgba(0,0,0,.5),0 10px 40px rgba(63,169,255,.15);
}
#nav .navlink{
  font-family:'Bangers',Impact,sans-serif;letter-spacing:.08em;font-size:1.05rem;
  padding:.35rem .7rem;border:2px solid transparent;transition:.15s;
}
#nav .navlink:hover{color:var(--gold);border-color:#05060d;background:rgba(63,169,255,.14);transform:rotate(-1.2deg)}
.logo-badge{
  border:3px solid #05060d;border-radius:50%;
  box-shadow:0 0 0 3px rgba(143,244,255,.55),4px 4px 0 rgba(0,0,0,.8);
}

/* ---------- HERO ---------- */
.hero-title{
  font-size:clamp(4.2rem,17vw,13rem);line-height:.82;
}
.speech{
  position:relative;background:var(--paper);color:var(--ink);
  border:3px solid #05060d;border-radius:14px;padding:.9rem 1.2rem;
  box-shadow:7px 7px 0 rgba(0,0,0,.8);
}
.speech::after{
  content:"";position:absolute;bottom:-18px;left:34px;
  border-width:18px 14px 0 0;border-style:solid;border-color:#05060d transparent transparent transparent;
}
.orbit{animation:orbit 9s ease-in-out infinite}
@keyframes orbit{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}

.hole{
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#000 0 42%,rgba(10,42,107,.9) 55%,rgba(63,169,255,.55) 66%,transparent 72%);
  box-shadow:0 0 70px rgba(63,169,255,.6),inset 0 0 60px #000;
  animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.marquee{overflow:hidden;border-top:3px solid #05060d;border-bottom:3px solid #05060d;background:var(--gold);color:#05060d}
.marquee-track{display:inline-flex;gap:2.5rem;white-space:nowrap;animation:march 26s linear infinite;padding:.45rem 0}
@keyframes march{to{transform:translateX(-50%)}}

/* ---------- CA BAR ---------- */
.ca-box{
  font-family:ui-monospace,Menlo,monospace;font-size:.85rem;word-break:break-all;
  background:#05060d;border:3px solid #05060d;outline:2px solid rgba(143,244,255,.45);outline-offset:-8px;
  color:var(--cyan);padding:.85rem 1rem;border-radius:4px;
}

/* ---------- STEPS ---------- */
.step-num{
  font-family:'Bangers',Impact,sans-serif;font-size:3.4rem;line-height:1;
  color:var(--gold);-webkit-text-stroke:3px #05060d;paint-order:stroke fill;
}

/* ---------- CHART ---------- */
#dexframe{width:100%;height:100%;border:0;display:block}
.chart-wrap{position:relative;padding-top:min(78vh,620px);background:#05060d;border-radius:3px;overflow:hidden}
.chart-wrap iframe,.chart-wrap .chart-fallback{position:absolute;inset:0;width:100%;height:100%}

/* ---------- JOIN / BANNER ---------- */
.banner-frame{
  border:var(--edge) solid #05060d;
  box-shadow:14px 14px 0 rgba(0,0,0,.85),0 0 60px rgba(63,169,255,.28);
  overflow:hidden;position:relative;border-radius:6px;
}
.banner-frame::before{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-16deg);animation:sweep2 5.5s ease-in-out infinite;
}
@keyframes sweep2{0%{left:-60%}55%{left:130%}100%{left:130%}}

.social-btn{
  width:64px;height:64px;display:grid;place-items:center;
  border:3px solid #05060d;border-radius:8px;background:var(--paper);color:#05060d;
  box-shadow:6px 6px 0 rgba(0,0,0,.8);transition:.14s;
}
.social-btn:hover{transform:translate(3px,3px) rotate(-4deg);box-shadow:2px 2px 0 rgba(0,0,0,.8);background:var(--gold)}

/* toast */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  z-index:99;background:var(--gold);color:#05060d;border:3px solid #05060d;
  padding:.6rem 1.3rem;font-family:'Bangers',Impact,sans-serif;letter-spacing:.06em;
  box-shadow:6px 6px 0 rgba(0,0,0,.8);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
#toast.show{transform:translate(-50%,0)}

@media (max-width:768px){
  .tilt-l,.tilt-r,.tilt-flat{transform:none}
  .panel{box-shadow:8px 8px 0 rgba(0,0,0,.85)}
  #bg .bg-img{filter:saturate(1.1) brightness(.36) blur(3px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none}
}