/* =========================================================
   $MEOWDY - COWBOY CAT
   comic-book western  x  ROBINHOOD CHAIN (black + neon green)
   ========================================================= */

:root{
  /* --- robinhood chain core --- */
  --rh:#00c805;          /* robinhood green            */
  --rh-2:#0aff3d;        /* hot neon green (highlights) */
  --rh-deep:#046b12;     /* shadow green                */
  --rh-glow:rgba(0,200,5,.38);

  /* --- surfaces --- */
  --ink:#04060a;         /* near-black                  */
  --ink-2:#0a0f0d;
  --steel:#121a16;
  --paper:#eef7ee;       /* cool off-white              */
  --paper-2:#cfe3d2;

  /* --- western warmth (secondary now) --- */
  --gold:#ffc93c;
  --sun:#ff8a1f;
  --blood:#d1341c;

  --edge:5px;
  --shadow:14px 14px 0 var(--ink), 0 0 42px rgba(0,200,5,.16);
  --shadow-sm:7px 7px 0 var(--ink);
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  background:#04060a;
  color:var(--paper);
  font-family:"Inter",system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- global background stack ---------------------- */
.bg-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; }

.bg-photo{
  background:url("HQIYPgmXoAAkWor.jpg") center/cover no-repeat;
  background-attachment:fixed;
  filter:saturate(.55) contrast(1.1) hue-rotate(-8deg);
  opacity:.16;
  transform:scale(1.06);
}
.bg-tint{
  background:
    radial-gradient(1200px 780px at 78% 4%, rgba(0,200,5,.20), transparent 62%),
    radial-gradient(900px 900px at 6% 96%, rgba(10,255,61,.10), transparent 65%),
    radial-gradient(700px 500px at 50% 45%, rgba(255,138,31,.07), transparent 70%),
    linear-gradient(180deg,#04060a 0%, #070c09 40%, #04060a 100%);
}
/* chain-grid: the ledger under everything */
.bg-grid{
  background-image:
    linear-gradient(rgba(0,200,5,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,5,.075) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 78%);
  opacity:.9;
}
.bg-halftone{
  background-image:radial-gradient(rgba(0,0,0,.9) 1.15px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.26;
  mix-blend-mode:multiply;
}
.bg-grain{
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  opacity:.5;
}
.bg-vignette{ box-shadow:inset 0 0 280px 100px rgba(0,0,0,.92); }

/* the SHINE - neon-green gleam sweeping the whole page */
.bg-shine{ overflow:hidden; }
.bg-shine::before,
.bg-shine::after{
  content:"";
  position:absolute;
  top:-60%; left:-60%;
  width:38%; height:240%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(0,200,5,.06) 26%,
    rgba(10,255,61,.20) 47%,
    rgba(230,255,236,.34) 52%,
    rgba(0,200,5,.16) 58%,
    transparent 100%);
  filter:blur(10px);
  transform:rotate(18deg);
  animation:sweep 9s linear infinite;
}
.bg-shine::after{ animation-delay:4.5s; opacity:.6; width:18%; }

@keyframes sweep{
  0%{ transform:translateX(-40vw) rotate(18deg); }
  100%{ transform:translateX(190vw) rotate(18deg); }
}

/* pulsing signal glow */
.bg-glow{
  background:conic-gradient(from 210deg at 70% 0%,
    rgba(0,200,5,.16), transparent 22%, transparent 78%, rgba(10,255,61,.12));
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.5} 50%{opacity:1} }

.page{ position:relative; z-index:1; }

/* ---------- type ---------------------------------------- */
.f-comic{ font-family:"Bangers",cursive; letter-spacing:.045em; }
.f-west { font-family:"Rye",serif; }
.f-mono { font-family:"JetBrains Mono",ui-monospace,monospace; }

.title3d{
  font-family:"Bangers",cursive;
  color:var(--rh-2);
  line-height:.88;
  text-transform:uppercase;
  -webkit-text-stroke:3px var(--ink);
  text-shadow:
    3px 3px 0 var(--ink), 6px 6px 0 var(--rh-deep),
    9px 9px 0 var(--ink), 12px 12px 0 rgba(0,0,0,.6),
    0 0 42px var(--rh-glow);
}
.title3d.sm{ -webkit-text-stroke:2px var(--ink);
  text-shadow:2px 2px 0 var(--ink),4px 4px 0 var(--rh-deep),6px 6px 0 var(--ink),0 0 30px var(--rh-glow); }
.title3d.gold{ color:var(--gold);
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--blood),9px 9px 0 var(--ink),0 0 34px rgba(255,201,60,.30); }

.stroke-ink{ -webkit-text-stroke:2px var(--ink); }
.glow-green{ text-shadow:0 0 22px var(--rh-glow); }

/* ---------- comic panel --------------------------------- */
.panel{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--edge) solid var(--ink);
  border-radius:3px;
  box-shadow:var(--shadow);
}
.panel.dark{
  background:linear-gradient(160deg,#0b1210,#060a08);
  color:var(--paper);
  border-color:var(--rh);
  box-shadow:14px 14px 0 var(--ink), 0 0 0 1px rgba(10,255,61,.25), 0 0 60px rgba(0,200,5,.20);
}
.panel::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(4,6,10,.30) 1px, transparent 1.1px);
  background-size:5px 5px;
  opacity:.20; pointer-events:none; mix-blend-mode:multiply;
}
.panel.no-dots::after{ display:none; }

/* neon rim that lights up on hover */
.panel.lit::before{
  content:""; position:absolute; inset:-5px;
  border:2px solid transparent; border-radius:5px;
  transition:border-color .3s ease, box-shadow .3s ease;
  pointer-events:none;
}
.panel.lit:hover::before{ border-color:var(--rh-2); box-shadow:0 0 34px var(--rh-glow); }

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

/* caption box like a comic narration strip */
.caption{
  position:absolute; left:-6px; bottom:-6px;
  background:var(--rh-2);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:.35rem .7rem;
  font-family:"Bangers",cursive;
  letter-spacing:.05em;
  font-size:1.05rem;
  box-shadow:5px 5px 0 var(--ink);
}
.caption.top{ top:-6px; bottom:auto; }
.caption.right{ left:auto; right:-6px; }
.caption.gold{ background:var(--gold); }

/* ---------- speech bubble ------------------------------- */
.bubble{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:22px;
  padding:.9rem 1.2rem;
  font-family:"Bangers",cursive;
  letter-spacing:.05em;
  box-shadow:8px 8px 0 var(--ink), 0 0 46px var(--rh-glow);
}
.bubble::before,.bubble::after{
  content:""; position:absolute; bottom:-24px; left:34px;
  border:12px solid transparent;
  border-top-color:var(--ink);
}
.bubble::after{ bottom:-16px; left:38px; border:10px solid transparent; border-top-color:var(--paper); }

/* ---------- starburst badge ----------------------------- */
.burst{
  display:grid; place-items:center;
  background:var(--rh);
  color:var(--ink);
  font-family:"Bangers",cursive;
  text-align:center;
  clip-path:polygon(50% 0%,61% 20%,84% 12%,80% 36%,100% 50%,80% 64%,84% 88%,61% 80%,50% 100%,39% 80%,16% 88%,20% 64%,0% 50%,20% 36%,16% 12%,39% 20%);
  filter:drop-shadow(5px 5px 0 var(--ink)) drop-shadow(0 0 18px var(--rh-glow));
  animation:wobble 5s ease-in-out infinite;
}
@keyframes wobble{ 0%,100%{transform:rotate(-9deg) scale(1)} 50%{transform:rotate(6deg) scale(1.05)} }

/* ---------- chain pill ---------------------------------- */
.chain-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,200,5,.08);
  border:1.5px solid rgba(10,255,61,.45);
  color:var(--rh-2);
  border-radius:999px;
  padding:.34rem .85rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(0,200,5,.16) inset;
  text-decoration:none;
}
.chain-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--rh-2);
  box-shadow:0 0 0 0 rgba(10,255,61,.7);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(10,255,61,.65); }
  70%{ box-shadow:0 0 0 9px rgba(10,255,61,0); }
  100%{ box-shadow:0 0 0 0 rgba(10,255,61,0); }
}

/* ---------- buttons ------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:"Bangers",cursive; letter-spacing:.07em;
  font-size:1.12rem;
  padding:.72rem 1.35rem;
  border:4px solid var(--ink);
  border-radius:4px;
  color:var(--ink);
  background:var(--rh-2);
  box-shadow:7px 7px 0 var(--ink), 0 0 30px var(--rh-glow);
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
  text-transform:uppercase;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink), 0 0 46px var(--rh-glow); }
.btn:active{ transform:translate(7px,7px); box-shadow:0 0 0 var(--ink); }
.btn.blood{ background:var(--rh); color:#02150a; }
.btn.paper{ background:var(--paper); box-shadow:7px 7px 0 var(--ink); }
.btn.gold { background:var(--gold); box-shadow:7px 7px 0 var(--ink), 0 0 26px rgba(255,201,60,.30); }
.btn.dark {
  background:var(--steel); color:var(--rh-2);
  border-color:var(--rh); box-shadow:7px 7px 0 rgba(0,200,5,.28), 0 0 26px rgba(0,200,5,.16);
}
.btn.green{ background:var(--rh); color:#02150a; }

/* ---------- nav ----------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(4,6,10,.95), rgba(4,6,10,.74));
  border-bottom:1px solid rgba(10,255,61,.25);
  box-shadow:0 6px 30px rgba(0,200,5,.14);
}
.nav a.navlink{
  font-family:"Bangers",cursive; letter-spacing:.08em;
  color:var(--paper); text-decoration:none; font-size:1.05rem;
  padding:.25rem .1rem; position:relative;
}
.nav a.navlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:3px;
  background:var(--rh-2); box-shadow:0 0 14px var(--rh-glow);
  transition:right .22s ease;
}
.nav a.navlink:hover{ color:var(--rh-2); }
.nav a.navlink:hover::after{ right:0; }

.nav-logo{
  width:52px; height:52px; border-radius:50%;
  border:3px solid var(--ink);
  box-shadow:0 0 0 2px var(--rh), 0 0 22px var(--rh-glow);
  object-fit:cover;
}

/* ---------- ticker -------------------------------------- */
.ticker{
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  background:linear-gradient(90deg,var(--rh),var(--rh-2),var(--rh));
  color:#02150a;
  overflow:hidden;
  transform:rotate(-1.1deg) scale(1.03);
  box-shadow:0 0 50px var(--rh-glow);
}
.ticker-track{
  display:flex; width:max-content;
  animation:roll 26s linear infinite;
  font-family:"Bangers",cursive; letter-spacing:.12em; font-size:1.35rem;
  padding:.5rem 0;
}
.ticker-track span{ padding:0 1.1rem; white-space:nowrap; }
@keyframes roll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* =========================================================
   PERSPECTIVE - every section tilts its own way
   ========================================================= */

/* HERO - floating hero panel reacting to the mouse */
.stage-hero{ perspective:1400px; perspective-origin:60% 40%; }
.hero-card{
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--mx,0) * -9deg)) rotateX(calc(var(--my,0) * 7deg));
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.hero-card .float-a{ transform:translateZ(70px); }
.hero-card .float-b{ transform:translateZ(120px); }
.hero-card .float-c{ transform:translateZ(160px); }

/* ABOUT - fanned comic page, panels splay outward */
.stage-fan{ perspective:1800px; perspective-origin:50% 45%; }
.fan{ transform-style:preserve-3d; transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.fan-l{ transform:rotateY(15deg) rotateX(5deg) translateZ(-40px); }
.fan-c{ transform:rotateY(0deg)  rotateX(3deg) translateZ(20px);  }
.fan-r{ transform:rotateY(-15deg) rotateX(5deg) translateZ(-40px); }
.fan:hover{
  transform:rotateY(0) rotateX(0) translateZ(60px);
  box-shadow:22px 22px 0 var(--ink), 0 0 70px var(--rh-glow);
  z-index:5;
}

/* ABOUT text slabs - alternating hinge */
.stage-hinge{ perspective:1500px; }
.hinge-l{ transform:rotateY(9deg)  rotateZ(-.6deg); transform-origin:left center;  transition:transform .35s ease, box-shadow .35s ease; }
.hinge-r{ transform:rotateY(-9deg) rotateZ(.6deg);  transform-origin:right center; transition:transform .35s ease, box-shadow .35s ease; }
.hinge-l:hover,.hinge-r:hover{
  transform:rotateY(0) rotateZ(0) scale(1.015);
  box-shadow:14px 14px 0 var(--ink), 0 0 60px var(--rh-glow);
}

/* MEME FILMSTRIP - receding conveyor */
.stage-strip{ perspective:1200px; }
.strip-rail{ display:flex; gap:1.4rem; transform-style:preserve-3d; padding:2.2rem .5rem 2.6rem; }
.strip-card{
  flex:0 0 250px;
  transform:rotateY(-22deg) rotateX(6deg);
  transition:transform .3s ease, box-shadow .3s ease;
}
.strip-card:nth-child(even){ transform:rotateY(-22deg) rotateX(6deg) translateY(18px); }
.strip-card:hover{
  transform:rotateY(0) rotateX(0) translateZ(60px) scale(1.04);
  box-shadow:14px 14px 0 var(--ink), 0 0 60px var(--rh-glow);
  z-index:6;
}

/* HOW TO BUY - cards receding down a dusty trail */
.stage-trail{ perspective:1300px; perspective-origin:50% 20%; }
.trail-card{
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.trail-card:nth-child(1){ transform:rotateX(14deg) rotateZ(-2deg); }
.trail-card:nth-child(2){ transform:rotateX(11deg) rotateZ(1.4deg); }
.trail-card:nth-child(3){ transform:rotateX(8deg)  rotateZ(-1.4deg); }
.trail-card:nth-child(4){ transform:rotateX(5deg)  rotateZ(2deg); }
.trail-card:hover{
  transform:rotateX(0) rotateZ(0) translateZ(70px);
  box-shadow:20px 20px 0 var(--ink), 0 0 70px var(--rh-glow);
}

.step-num{
  font-family:"Bangers",cursive;
  font-size:3.1rem; line-height:1;
  color:var(--rh);
  -webkit-text-stroke:2px var(--ink);
}

/* CHART - arcade cabinet tilt that straightens when in view */
.stage-chart{ perspective:1600px; perspective-origin:50% 30%; }
.chart-frame{
  transform-style:preserve-3d;
  transform:rotateX(13deg) scale(.965);
  transition:transform .9s cubic-bezier(.2,.8,.25,1);
}
.chart-frame.settled{ transform:rotateX(2deg) scale(1); }

/* JOIN - banner slab lifting toward the reader */
.stage-join{ perspective:1500px; perspective-origin:50% 60%; }
.join-slab{
  transform-style:preserve-3d;
  transform:rotateX(-7deg) rotateZ(-.8deg);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.join-slab:hover{
  transform:rotateX(0) rotateZ(0) translateZ(40px);
  box-shadow:14px 14px 0 var(--ink), 0 0 90px var(--rh-glow);
}

.social-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.45rem; padding:1.3rem 1rem;
  background:linear-gradient(160deg,#0d1512,#070b09);
  color:var(--paper);
  border:3px solid rgba(10,255,61,.35);
  box-shadow:10px 10px 0 var(--ink), 0 0 30px rgba(0,200,5,.12);
  text-decoration:none;
  font-family:"Bangers",cursive; letter-spacing:.06em;
  transform:rotateY(-8deg);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.social-tile:nth-child(2){ transform:rotateY(0deg) translateZ(24px); }
.social-tile:nth-child(3){ transform:rotateY(8deg); }
.social-tile:hover{
  transform:rotateY(0) translateZ(60px) scale(1.03);
  background:var(--rh-2); color:var(--ink);
  border-color:var(--ink);
  box-shadow:6px 6px 0 var(--ink), 0 0 60px var(--rh-glow);
}
.social-tile i{ font-size:2.1rem; color:var(--rh-2); transition:color .25s ease; }
.social-tile:hover i{ color:var(--ink); }

/* ---------- CA readout ---------------------------------- */
.ca-box{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:linear-gradient(160deg,#0b1210,#060a08);
  color:var(--rh-2);
  border:1.5px solid rgba(10,255,61,.4);
  border-radius:8px;
  padding:.75rem .95rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.82rem; word-break:break-all;
  box-shadow:0 0 34px rgba(0,200,5,.12) inset;
}

/* ---------- section chrome ------------------------------ */
.sec{ position:relative; padding:6.5rem 0; }
.rope{
  height:3px;
  background:linear-gradient(90deg, transparent, var(--rh), var(--rh-2), var(--rh), transparent);
  box-shadow:0 0 26px var(--rh-glow);
  border:0;
}
.tag{
  display:inline-block;
  background:rgba(0,200,5,.10);
  color:var(--rh-2);
  border:1.5px solid rgba(10,255,61,.45);
  border-radius:999px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.42rem 1rem;
  box-shadow:0 0 26px rgba(0,200,5,.14) inset;
}

/* action speed-lines behind headings */
.speedlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(10,255,61,.10) 0deg 3deg, transparent 3deg 9deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 12%, transparent 74%);
          mask-image:radial-gradient(closest-side, #000 12%, transparent 74%);
  opacity:.7;
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* dexscreener embed */
#dexscreener-embed{ position:relative; width:100%; padding-bottom:min(78%,620px); }
#dexscreener-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%);
  background:var(--rh-2); color:var(--ink);
  border:4px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink), 0 0 50px var(--rh-glow);
  padding:.6rem 1.1rem; font-family:"Bangers",cursive; letter-spacing:.06em;
  z-index:99; transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.toast.show{ transform:translate(-50%,0); }

/* ---------- mobile: flatten the 3D ---------------------- */
@media (max-width:900px){
  :root{ --shadow:9px 9px 0 var(--ink), 0 0 30px rgba(0,200,5,.14); }
  .bg-photo{ background-attachment:scroll; }
  .bg-grid{ background-size:44px 44px; }
  .fan-l,.fan-c,.fan-r,.hinge-l,.hinge-r,
  .trail-card,.trail-card:nth-child(1),.trail-card:nth-child(2),
  .trail-card:nth-child(3),.trail-card:nth-child(4),
  .chart-frame,.join-slab,.social-tile,.social-tile:nth-child(2),
  .social-tile:nth-child(3),.hero-card{ transform:none !important; }
  .strip-card{ transform:none !important; flex-basis:210px; }
  .hero-card .float-a,.hero-card .float-b,.hero-card .float-c{ transform:none; }
  .sec{ padding:4.2rem 0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}