/* =========================================================================
   GOKUSEM — COMIC PANEL DESIGN SYSTEM
   ========================================================================= */

:root{
  --ink:#070d09;
  --paper:#fff6e4;
  --paper-dim:#f2e6c8;
  --orange:#ff6a00;
  --orange-deep:#e8481c;
  --green:#1ddb5c;
  --green-deep:#0a6b2e;
  --blue:#1b2f8f;
  --blue-bright:#3a6dff;
  --yellow:#ffd447;
  --line:4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Baloo 2','Comic Neue',system-ui,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.font-comic{
  font-family:'Bangers','Baloo 2',cursive;
  letter-spacing:.03em;
  line-height:1;
}
::selection{background:var(--orange); color:var(--ink);}

a{color:inherit;}
button{font-family:inherit;}

/* ---------- halftone / texture ---------- */
.halftone{
  position:relative;
}
.halftone::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(0,0,0,.55) 1.4px, transparent 1.6px);
  background-size:10px 10px;
  opacity:.18;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.halftone-yellow::before{
  background-image:radial-gradient(rgba(255,212,71,.9) 1.6px, transparent 1.8px);
  mix-blend-mode:screen;
  opacity:.25;
}
.halftone-green::before{
  background-image:radial-gradient(rgba(29,219,92,.9) 1.6px, transparent 1.8px);
  mix-blend-mode:screen;
  opacity:.3;
}

/* ---------- comic ink border / pop shadow ---------- */
.comic-border{
  border:var(--line) solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
}
.comic-border-thin{
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
}

/* ---------- section image backgrounds with legibility overlay ---------- */
.bg-img{
  background-size:cover;
  background-position:center;
  position:relative;
}
.bg-img::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.overlay-hero::after{
  background:
    linear-gradient(180deg, rgba(3,8,5,.5) 0%, rgba(3,8,5,.68) 55%, rgba(3,6,4,.95) 100%);
}
.overlay-about::after{
  background:
    linear-gradient(180deg, rgba(3,10,5,.72) 0%, rgba(3,10,5,.5) 40%, rgba(2,8,4,.9) 100%);
}
.overlay-buy::after{
  background:
    linear-gradient(180deg, rgba(2,4,6,.85) 0%, rgba(2,4,6,.58) 45%, rgba(2,4,6,.92) 100%);
}
.overlay-chart::after{
  background:
    linear-gradient(180deg, rgba(2,3,3,.92) 0%, rgba(2,3,3,.85) 50%, rgba(2,3,3,.96) 100%);
}
.overlay-join::after{
  background:
    linear-gradient(180deg, rgba(2,5,3,.55) 0%, rgba(2,5,3,.82) 70%, rgba(1,4,2,.97) 100%);
}

/* ---------- diagonal comic-panel section cuts (the "perspective") ---------- */
.cut-hero-bottom{ clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 64px)); }
.cut-about-top{ margin-top:-60px; clip-path:polygon(0 60px,100% 0,100% 100%,0 100%); }
.cut-about-bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 56px),0 100%); }
.cut-buy-top{ margin-top:-54px; clip-path:polygon(0 0,100% 54px,100% 100%,0 100%); }
.cut-buy-bottom{ clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 48px)); }
.cut-chart-top{ margin-top:-46px; }
.cut-join-top{ margin-top:0; clip-path:polygon(0 48px,100% 0,100% 100%,0 100%); }

@media (max-width:640px){
  .cut-hero-bottom{ clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 28px)); }
  .cut-about-top{ margin-top:-26px; clip-path:polygon(0 26px,100% 0,100% 100%,0 100%); }
  .cut-about-bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%); }
  .cut-buy-top{ margin-top:-24px; clip-path:polygon(0 0,100% 24px,100% 100%,0 100%); }
  .cut-buy-bottom{ clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 24px)); }
  .cut-join-top{ clip-path:polygon(0 22px,100% 0,100% 100%,0 100%); }
}

/* ---------- perspective panel cards ---------- */
.panel{
  background:var(--paper);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(var(--tilt,-1deg));
  transition:transform .25s ease, box-shadow .25s ease;
}
.panel:hover{
  transform:rotate(0deg) translate(-3px,-3px) perspective(700px) rotateX(2deg);
  box-shadow:11px 11px 0 var(--ink);
}
.tilt-1{--tilt:-1.6deg;}
.tilt-2{--tilt:1.3deg;}
.tilt-3{--tilt:-.8deg;}
.tilt-4{--tilt:1.8deg;}
.tilt-0{--tilt:0deg;}

.stage{ perspective:1400px; }
.stage-card{
  transform-style:preserve-3d;
  transform:rotateY(var(--ry,-6deg)) rotateX(var(--rx,2deg));
  transition:transform .4s ease;
}
.stage:hover .stage-card{ transform:rotateY(0deg) rotateX(0deg); }

/* ---------- starburst behind headings ---------- */
.burst{ position:relative; display:inline-block; }
.burst::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:135%; height:190%;
  transform:translate(-50%,-50%);
  background:var(--yellow);
  clip-path:polygon(50% 0%,61% 20%,80% 8%,78% 30%,100% 32%,86% 48%,100% 68%,78% 68%,80% 90%,61% 80%,50% 100%,39% 80%,20% 90%,22% 68%,0% 68%,14% 48%,0% 32%,22% 30%,20% 8%,39% 20%);
  z-index:-1;
  opacity:.9;
}

/* ---------- comic buttons ---------- */
.btn-comic{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Bangers',cursive;
  letter-spacing:.04em;
  font-size:1.15rem;
  padding:.7rem 1.6rem;
  border:3px solid var(--ink);
  border-radius:6px;
  box-shadow:5px 5px 0 var(--ink);
  transform:skew(-6deg);
  transition:transform .12s ease, box-shadow .12s ease;
  cursor:pointer;
  text-decoration:none;
}
.btn-comic > *{ transform:skew(6deg); display:inline-flex; align-items:center; gap:.5rem;}
.btn-comic:hover{ transform:skew(-6deg) translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.btn-comic:active{ transform:skew(-6deg) translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn-primary{ background:var(--orange); color:var(--ink); }
.btn-secondary{ background:var(--paper); color:var(--ink); }
.btn-blue{ background:var(--blue-bright); color:#fff; }
.btn-green{ background:var(--green); color:var(--ink); }
.btn-x{ background:#000; color:#fff; }
.btn-tg{ background:#27a7e7; color:#fff; }
.btn-disabled{ opacity:.55; pointer-events:none; filter:grayscale(.4); }

/* icon chip badges (pump.fun / dexscreener — no bootstrap-icons glyph exists) */
.chip-icon{
  width:2.1rem; height:2.1rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2.5px solid var(--ink);
  font-family:'Bangers',cursive;
  font-size:1rem;
  flex:none;
}

/* ---------- speech bubble ---------- */
.speech-bubble{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--ink);
}
.speech-bubble::after{
  content:"";
  position:absolute;
  left:46px; bottom:-22px;
  width:0; height:0;
  border:14px solid transparent;
  border-top-color:var(--paper);
  filter:drop-shadow(0 3px 0 var(--ink));
}

/* ---------- sfx pop text ---------- */
.sfx{
  font-family:'Bangers',cursive;
  color:var(--yellow);
  -webkit-text-stroke:2px var(--ink);
  text-stroke:2px var(--ink);
  text-shadow:3px 3px 0 var(--ink);
  transform:rotate(var(--r,-8deg));
  pointer-events:none;
  user-select:none;
}

/* ---------- ticker marquee ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 22s linear infinite;
}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- numbered step badge ---------- */
.step-badge{
  width:3.4rem; height:3.4rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--green);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:50%;
  font-family:'Bangers',cursive;
  font-size:1.6rem;
  box-shadow:4px 4px 0 var(--ink);
  flex:none;
}

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px) rotate(var(--tilt,0deg)); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)); }

/* ---------- CRT / monitor frame for chart ---------- */
.monitor{
  background:#141414;
  border:5px solid var(--ink);
  border-radius:14px;
  box-shadow:9px 9px 0 var(--ink), inset 0 0 0 3px #333;
}
.blink{ animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 50%{opacity:.25;} }

/* ---------- copy toast ---------- */
.toast{
  position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%) translateY(20px);
  background:var(--yellow); color:var(--ink); border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); border-radius:8px; padding:.6rem 1.2rem;
  font-family:'Bangers',cursive; letter-spacing:.04em; z-index:100;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- nav ---------- */
.navbar{
  border-bottom:4px solid var(--ink);
  background:var(--ink);
}
.nav-link{
  font-family:'Bangers',cursive;
  letter-spacing:.03em;
  font-size:1.05rem;
  color:var(--paper);
  position:relative;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0%; height:3px; background:var(--orange);
  transition:width .2s ease;
}
.nav-link:hover::after{ width:100%; }

.logo-badge{
  border:3px solid var(--paper);
  box-shadow:0 0 0 3px var(--ink);
  border-radius:50%;
  overflow:hidden;
}

/* mobile nav panel */
#mobileNav{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
#mobileNav.open{ max-height:26rem; }

/* ---------- misc utility ---------- */
.text-outline{
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}
.torn-divider{
  height:26px;
  background:var(--ink);
  clip-path:polygon(0% 0%,4% 100%,8% 0%,12% 100%,16% 0%,20% 100%,24% 0%,28% 100%,32% 0%,36% 100%,40% 0%,44% 100%,48% 0%,52% 100%,56% 0%,60% 100%,64% 0%,68% 100%,72% 0%,76% 100%,80% 0%,84% 100%,88% 0%,92% 100%,96% 0%,100% 100%,100% 0%,0 0%);
}