/* ==========================================================================
   PISTACIO — "ISSUE #1" comic stylesheet
   Ink outlines, halftone paper, hard offset shadows, 3-D stage perspective.
   ========================================================================== */

:root{
  --ink:      #14120d;
  --ink-2:    #2a2620;
  --paper:    #ece4d2;
  --paper-2:  #d9cfb8;

  --green:    #6f8f4f;
  --green-lt: #9cbc6e;
  --green-dk: #476032;

  --mouth:    #d9713f;
  --rose:     #c08e84;
  --teal:     #4e7c7a;
  --violet:   #8d7ab0;
  --sand:     #d9c48a;

  --edge:     4px;                     /* ink outline weight */
  --pop:      10px 10px 0 var(--ink);  /* hard comic shadow  */
  --pop-sm:   6px 6px 0 var(--ink);

  --display: "Bangers", "Impact", sans-serif;
  --hand:    "Patrick Hand", "Comic Sans MS", cursive;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--body);
  color:var(--paper);
  background:#0d1310;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ==========================================================================
   1. BACKGROUND STACK  (image + gradient + halftone + shine)
   ========================================================================== */

/* layer A — the artwork itself, fixed behind everything */
.bg-art{
  position:fixed; inset:0; z-index:-4;
  background:url("../../6.jpg") center 18% / cover no-repeat;
  filter:saturate(.55) contrast(1.05) blur(2px);
  opacity:.30;
  transform:scale(1.08);
}

/* layer B — deep ink wash so text always reads */
.bg-wash{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(111,143,79,.34), transparent 62%),
    radial-gradient(90%  70% at 12% 108%, rgba(78,124,122,.30), transparent 60%),
    radial-gradient(80%  60% at 92% 45%,  rgba(141,122,176,.20), transparent 60%),
    linear-gradient(180deg, #10160f 0%, #0d1310 40%, #0b0f0d 100%);
}

/* layer C — halftone dot print texture */
.bg-dots{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.34;
  mix-blend-mode:multiply;
}

/* layer D — THE SHINE: a slow specular bar raking across the page */
.bg-shine{
  position:fixed; inset:-40% -60%; z-index:-1; pointer-events:none;
  background:linear-gradient(
      100deg,
      transparent 38%,
      rgba(236,228,210,.05) 45%,
      rgba(255,255,255,.16) 50%,
      rgba(156,188,110,.12) 55%,
      transparent 62%);
  mix-blend-mode:screen;
  animation:rake 11s linear infinite;
}
/* second, tighter glint — offset so the sweep never feels mechanical */
.bg-shine::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(
      100deg, transparent 46%,
      rgba(255,255,255,.22) 50%,
      transparent 54%);
  animation:rake 11s linear infinite;
  animation-delay:-5.5s;
  opacity:.6;
}
@keyframes rake{
  0%   { transform:translate3d(-38%,0,0) rotate(-4deg); }
  100% { transform:translate3d( 38%,0,0) rotate(-4deg); }
}

/* soft vignette to seat the panels */
.bg-vig{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(115% 90% at 50% 45%, transparent 55%, rgba(6,9,7,.72) 100%);
}

/* ==========================================================================
   2. TYPE
   ========================================================================== */

.d{ font-family:var(--display); font-weight:400; letter-spacing:.02em; line-height:.92; }
.hand{ font-family:var(--hand); }

/* extruded comic title — layered shadows read as printed ink depth */
.title-3d{
  font-family:var(--display);
  color:var(--paper);
  text-shadow:
     2px  2px 0 var(--ink),  4px  4px 0 var(--ink),
     6px  6px 0 var(--ink),  8px  8px 0 var(--green-dk),
    10px 10px 0 var(--ink), 12px 12px 18px rgba(0,0,0,.55);
}
.title-3d.g{ color:var(--green-lt); }
.title-3d.o{ color:var(--mouth); }
.title-3d.s{ color:var(--sand); }

.stroke-ink{ -webkit-text-stroke:2px var(--ink); }

/* ==========================================================================
   3. THE 3-D STAGE  — every section is a plate standing in perspective
   ========================================================================== */

.stage{ perspective:1500px; perspective-origin:50% 40%; }

.plate{
  transform-style:preserve-3d;
  transform:rotateX(16deg) translate3d(0,60px,-190px);
  opacity:0;
  transition:transform 1s cubic-bezier(.16,.84,.32,1), opacity .8s ease;
  will-change:transform,opacity;
}
.plate.in{ transform:rotateX(0deg) translate3d(0,0,0); opacity:1; }

/* panels drift in from alternating sides, deeper in Z than the plate */
.pz{
  transform:translate3d(0,42px,-120px) rotateY(var(--ry,0deg));
  opacity:0;
  transition:transform .95s cubic-bezier(.16,.84,.32,1), opacity .7s ease;
  transition-delay:var(--dly,0ms);
}
.plate.in .pz{ transform:translate3d(0,0,0) rotateY(var(--ry-rest,0deg)); opacity:1; }

/* ==========================================================================
   4. COMIC PANEL
   ========================================================================== */

.panel{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--edge) solid var(--ink);
  border-radius:2px;
  box-shadow:var(--pop);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
}
.panel::before{                       /* paper grain + halftone inside panel */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(rgba(20,18,13,.16) .9px, transparent 1px);
  background-size:5px 5px; opacity:.5;
}
/* panel shine — a glass rake that fires on hover */
.panel::after{
  content:""; position:absolute; top:-60%; left:-140%; width:60%; height:260%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:rotate(14deg); pointer-events:none; z-index:3;
  transition:left .85s cubic-bezier(.3,.7,.3,1);
}
.panel:hover::after{ left:150%; }
.panel:hover{ transform:translateZ(38px) rotateX(2deg); box-shadow:16px 16px 0 var(--ink); }

.panel.dark{ background:var(--ink); color:var(--paper); }
.panel.dark::before{ background-image:radial-gradient(rgba(236,228,210,.14) .9px,transparent 1px); }
.panel.green { background:var(--green);  color:var(--ink); }
.panel.rose  { background:var(--rose);   color:var(--ink); }
.panel.teal  { background:var(--teal);   color:var(--paper); }
.panel.violet{ background:var(--violet); color:var(--ink); }
.panel.sand  { background:var(--sand);   color:var(--ink); }

.panel img{ display:block; width:100%; height:100%; object-fit:cover; }

/* panel number tab, top-left, like a printed page marker */
.pnum{
  position:absolute; top:0; left:0; z-index:4;
  background:var(--ink); color:var(--sand);
  font-family:var(--display); font-size:18px; letter-spacing:.08em;
  padding:4px 14px 5px; border-radius:0 0 12px 0;
}

/* ==========================================================================
   5. SPEECH BUBBLES
   ========================================================================== */

.bubble{
  position:relative;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-radius:26px;
  padding:12px 18px;
  font-family:var(--hand); font-size:19px; line-height:1.15;
  box-shadow:var(--pop-sm);
}
.bubble::after{
  content:""; position:absolute; bottom:-19px; left:32px;
  border:10px solid transparent; border-top:20px solid var(--ink);
}
.bubble::before{
  content:""; position:absolute; bottom:-12px; left:35px; z-index:1;
  border:8px solid transparent; border-top:15px solid var(--paper);
}
.bubble.right::after{ left:auto; right:32px; }
.bubble.right::before{ left:auto; right:35px; }

/* spiky "shout" bubble */
.shout{
  background:var(--sand); color:var(--ink);
  border:3px solid var(--ink);
  font-family:var(--display); letter-spacing:.05em;
  padding:14px 26px;
  clip-path:polygon(0% 18%,6% 6%,18% 12%,30% 0%,44% 10%,58% 2%,72% 12%,86% 4%,96% 16%,100% 34%,94% 50%,100% 68%,90% 82%,94% 96%,78% 90%,64% 100%,50% 92%,36% 100%,22% 90%,8% 96%,4% 78%,0% 60%,6% 42%);
  box-shadow:none;
}
.shout::before,.shout::after{ display:none; }

/* ==========================================================================
   6. BUTTONS & CHIPS
   ========================================================================== */

.btn-ink{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:22px; letter-spacing:.06em;
  padding:13px 28px 11px;
  border:var(--edge) solid var(--ink); border-radius:4px;
  background:var(--paper); color:var(--ink);
  box-shadow:var(--pop-sm);
  cursor:pointer; text-decoration:none;
  position:relative; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-ink::after{
  content:""; position:absolute; top:-60%; left:-130%; width:55%; height:250%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:rotate(14deg); transition:left .7s ease;
}
.btn-ink:hover::after{ left:150%; }
.btn-ink:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink); }
.btn-ink:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }

.btn-ink.pink { background:#ff4d94; color:var(--paper); }
.btn-ink.green{ background:var(--green-lt); }
.btn-ink.sand { background:var(--sand); }
.btn-ink.dark { background:var(--ink); color:var(--paper); border-color:var(--paper); box-shadow:6px 6px 0 rgba(236,228,210,.35); }

/* social / dex sticker badges */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px 11px 12px;
  border:3px solid var(--ink); border-radius:999px;
  background:var(--paper); color:var(--ink);
  font-family:var(--display); font-size:19px; letter-spacing:.05em;
  text-decoration:none; box-shadow:var(--pop-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chip:hover{ transform:translate(-3px,-3px) rotate(-1.5deg); box-shadow:9px 9px 0 var(--ink); }
.chip .glyph{
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  border:2.5px solid var(--ink); border-radius:999px;
  font-size:17px;
}
.chip .glyph svg{ width:18px; height:18px; }
.g-x   { background:#000;    color:#fff; }
.g-tg  { background:#2AABEE; color:#fff; }
.g-uni { background:#FF007A; color:#fff; }
.g-dex { background:#1b2a3a; color:#7ee3c7; }
.g-eth { background:#627EEA; color:#fff; }
.g-dt  { background:#00b3ff; color:#fff; }

/* ==========================================================================
   7. NAV
   ========================================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:16px 0;
}
.nav.stuck{
  background:rgba(13,19,16,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 4px 0 var(--ink);
  padding:9px 0;
}
.nav a.navlink{
  font-family:var(--display); font-size:20px; letter-spacing:.07em;
  color:var(--paper); text-decoration:none; padding:4px 2px;
  position:relative; transition:color .2s ease;
}
.nav a.navlink::after{
  content:""; position:absolute; left:0; bottom:-3px; height:4px; width:0;
  background:var(--mouth); transition:width .25s ease;
}
.nav a.navlink:hover{ color:var(--sand); }
.nav a.navlink:hover::after{ width:100%; }

.logo-badge{
  width:56px; height:56px; border-radius:999px;
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  object-fit:cover; background:var(--paper);
}

/* ==========================================================================
   8. MARQUEE
   ========================================================================== */

.marquee{
  border-top:var(--edge) solid var(--ink);
  border-bottom:var(--edge) solid var(--ink);
  background:var(--mouth);
  overflow:hidden; position:relative;
  transform:rotate(-1.4deg) scale(1.04);
}
.marquee .track{
  display:flex; width:max-content;
  animation:slide 26s linear infinite;
}
.marquee:hover .track{ animation-play-state:paused; }
.marquee .cell{
  display:flex; align-items:center; gap:18px;
  padding:12px 22px;
  font-family:var(--display); font-size:26px; letter-spacing:.07em;
  color:var(--ink); white-space:nowrap;
}
.marquee .dot{ width:12px; height:12px; border-radius:999px; background:var(--ink); flex:0 0 12px; }
.marquee .tok{
  width:38px; height:38px; border-radius:999px; object-fit:cover;
  border:2.5px solid var(--ink); background:var(--paper); flex:0 0 38px;
}
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ==========================================================================
   9. SECTION HEADERS — a 3-D billboard plate
   ========================================================================== */

.billboard{
  display:inline-block;
  background:var(--ink);
  border:var(--edge) solid var(--paper);
  padding:10px 30px 8px;
  transform:perspective(700px) rotateY(-9deg) rotateX(4deg);
  box-shadow:12px 12px 0 rgba(0,0,0,.55);
}
.billboard.r{ transform:perspective(700px) rotateY(9deg) rotateX(4deg); }
.kicker{
  font-family:var(--display); letter-spacing:.28em; font-size:15px;
  color:var(--mouth);
}

/* ==========================================================================
   10. HOW-TO-BUY strip
   ========================================================================== */

.step .big{
  font-family:var(--display); font-size:76px; line-height:.8;
  color:var(--ink); opacity:.14; position:absolute; right:12px; top:4px; z-index:1;
}

/* ==========================================================================
   11. CHART
   ========================================================================== */

.chart-frame{
  position:relative; width:100%;
  height:min(74vh,640px);
  border:var(--edge) solid var(--ink);
  background:#0b0f14;
  box-shadow:var(--pop);
  overflow:hidden;
}
.chart-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* ==========================================================================
   12. JOIN US banner
   ========================================================================== */

.banner-wrap{
  border:var(--edge) solid var(--ink);
  box-shadow:var(--pop);
  overflow:hidden; position:relative;
  transform-style:preserve-3d;
}
.banner-wrap img{ display:block; width:100%; height:auto; }
.banner-wrap::after{                      /* shine rake across the banner */
  content:""; position:absolute; top:-60%; left:-130%; width:45%; height:250%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(14deg); pointer-events:none;
  animation:bannerShine 6.5s ease-in-out infinite;
}
@keyframes bannerShine{
  0%,72%{ left:-130%; } 100%{ left:150%; }
}

/* ==========================================================================
   13. MISC
   ========================================================================== */

.ca-box{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--ink); color:var(--sand);
  border:3px solid var(--paper);
  padding:12px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; word-break:break-all;
  box-shadow:var(--pop-sm);
}

.float{ animation:float 6s ease-in-out infinite; }
.float.b{ animation-duration:7.5s; animation-delay:-2s; }
.float.c{ animation-duration:9s;   animation-delay:-4s; }
@keyframes float{
  0%,100%{ transform:translateY(0)     rotate(var(--rot,0deg)); }
  50%    { transform:translateY(-18px) rotate(calc(var(--rot,0deg) + 2deg)); }
}

.sticker{
  border:3px solid var(--ink); border-radius:8px;
  box-shadow:var(--pop-sm); background:var(--paper);
  object-fit:cover;
}

.divider-tape{
  height:34px; background:var(--sand);
  border-top:var(--edge) solid var(--ink);
  border-bottom:var(--edge) solid var(--ink);
  transform:rotate(.9deg) scale(1.05);
  background-image:repeating-linear-gradient(45deg,transparent 0 14px,rgba(20,18,13,.16) 14px 28px);
}

.dl{ font-family:var(--display); letter-spacing:.05em; }

::selection{ background:var(--mouth); color:var(--ink); }

/* toast */
#toast{
  position:fixed; left:50%; bottom:34px; z-index:90;
  transform:translate(-50%,26px); opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), opacity .3s ease;
}
#toast.show{ transform:translate(-50%,0); opacity:1; }

/* scrollbar */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:#0b0f0d; }
::-webkit-scrollbar-thumb{ background:var(--green); border:2px solid #0b0f0d; border-radius:8px; }

@media (max-width:768px){
  :root{ --edge:3px; --pop:6px 6px 0 var(--ink); --pop-sm:4px 4px 0 var(--ink); }
  .stage{ perspective:none; }
  .plate{ transform:translate3d(0,40px,0); }
  .billboard{ transform:none; box-shadow:6px 6px 0 rgba(0,0,0,.55); }
  .marquee{ transform:rotate(-1deg) scale(1.06); }
  .panel:hover{ transform:none; }
  .step .big{ font-size:54px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; }
  .plate,.pz{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}