/* ============================================================
   POOPCOIN — comic styled meme coin site
   Palette: orange • golden brown • cream • toilet white
   ============================================================ */
:root{
  --orange:      #F7931E;
  --orange-deep: #E8780A;
  --gold:        #FFB627;
  --brown:       #5C3A1E;
  --brown-2:     #8B5A2B;
  --cream:       #FFF6E6;
  --ink:         #221404;
  --white:       #FFFFFF;
  --shadow:      6px 6px 0 var(--ink);
  --shadow-lg:   10px 10px 0 var(--ink);
  --radius:      22px;
  --maxw:        1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Fredoka', system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #ffd089 0%, transparent 45%),
    radial-gradient(circle at 85% 70%, #ffb04a 0%, transparent 40%),
    linear-gradient(160deg, #ff9f2e 0%, #f7831e 45%, #e8700a 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
section{ position:relative; z-index:2; padding:90px 22px; }

/* ---------- Background FX ---------- */
.bg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.halftone{
  position:absolute; inset:-50%;
  background-image:radial-gradient(rgba(255,255,255,.18) 2px, transparent 2px);
  background-size:26px 26px;
  opacity:.5;
  animation:halftoneDrift 40s linear infinite;
}
@keyframes halftoneDrift{ to{ transform:translate(26px,26px); } }
.stink{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
  filter:blur(30px);
  animation:waft 14s ease-in-out infinite;
}
.stink-1{ width:340px; height:340px; left:-60px; top:10%; }
.stink-2{ width:420px; height:420px; right:-80px; top:45%; animation-delay:-5s; }
.stink-3{ width:300px; height:300px; left:30%; bottom:-60px; animation-delay:-9s; }
@keyframes waft{
  0%,100%{ transform:translateY(0) scale(1); opacity:.4; }
  50%{ transform:translateY(-40px) scale(1.15); opacity:.7; }
}

/* ---------- Particles (floating poop & flies) ---------- */
.particles{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.particle{
  position:absolute; bottom:-60px;
  font-size:28px;
  animation:floatUp linear infinite;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25));
  will-change:transform, opacity;
}
@keyframes floatUp{
  0%{ transform:translateY(0) rotate(0deg) scale(1); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.9; }
  100%{ transform:translateY(-115vh) rotate(360deg) scale(1.2); opacity:0; }
}
.fly{ animation:flyAround 8s ease-in-out infinite; }
@keyframes flyAround{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(40px,-30px) rotate(15deg); }
  50%{ transform:translate(-20px,-60px) rotate(-10deg); }
  75%{ transform:translate(30px,-90px) rotate(8deg); }
  100%{ transform:translate(0,-120px) rotate(0); opacity:0; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 26px;
  background:rgba(255,246,230,.85);
  backdrop-filter:blur(10px);
  border-bottom:4px solid var(--ink);
  transition:transform .35s ease, box-shadow .35s ease;
}
.nav.shrink{ box-shadow:0 6px 0 rgba(0,0,0,.15); }
.nav-brand{ display:flex; align-items:center; gap:10px; font-family:'Bangers',cursive; font-size:1.7rem; letter-spacing:1px; color:var(--brown); }
.nav-logo{ width:42px; height:42px; border:3px solid var(--ink); border-radius:50%; background:var(--orange); animation:spinSlow 9s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.nav-links{ display:flex; align-items:center; gap:26px; font-weight:600; font-size:1.02rem; }
.nav-links a{ position:relative; padding:4px 2px; transition:color .2s; }
.nav-links a:not(.nav-buy):hover{ color:var(--orange-deep); }
.nav-links a:not(.nav-buy)::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:3px;
  background:var(--orange-deep); transition:width .25s;
}
.nav-links a:not(.nav-buy):hover::after{ width:100%; }
.nav-buy{
  background:var(--ink); color:var(--gold)!important;
  padding:8px 18px; border-radius:30px; border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--orange-deep);
  transition:transform .15s;
}
.nav-buy:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--orange-deep); }
.nav-toggle{ display:none; font-size:1.6rem; background:none; border:none; cursor:pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:130px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; perspective:1200px; }
.hero-grid{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.badge{
  display:inline-block; background:var(--ink); color:var(--gold);
  font-weight:700; padding:7px 16px; border-radius:30px;
  border:3px solid var(--gold); margin-bottom:18px; font-size:.95rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}
.hero-title{
  font-family:'Luckiest Guy', cursive;
  font-size:clamp(3.6rem, 9vw, 7rem);
  line-height:.92; letter-spacing:2px;
  text-transform:uppercase;
  -webkit-text-stroke:4px var(--ink);
  text-shadow:8px 8px 0 var(--ink);
  margin-bottom:6px;
}
.hero-title .w1{ color:var(--cream); }
.hero-title .w2{ color:var(--gold); }
.hero-title .word{ display:inline-block; animation:wobble 5s ease-in-out infinite; }
.hero-title .w2{ animation-delay:-2.5s; }
@keyframes wobble{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(2deg) translateY(-6px); } }
.hero-tag{
  font-family:'Bangers',cursive; font-size:clamp(1.5rem,3.5vw,2.4rem);
  letter-spacing:1.5px; color:var(--ink);
}
.hero-tag span{ color:var(--orange-deep); }
.hero-sub{ font-size:1.15rem; max-width:480px; margin:14px 0 26px; color:var(--brown); font-weight:500; }

.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.05rem;
  padding:14px 26px; border-radius:40px; border:4px solid var(--ink);
  cursor:pointer; transition:transform .14s ease, box-shadow .14s ease;
  box-shadow:var(--shadow); position:relative;
}
.btn:active{ transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }
.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:var(--shadow-lg); }
.btn-ghost{ background:var(--cream); color:var(--ink); }
.btn-ghost:hover{ transform:translate(-2px,-2px) rotate(1deg); box-shadow:var(--shadow-lg); }
.btn.big{ font-size:1.25rem; padding:18px 38px; }

/* CA box */
.ca-box{
  margin-top:24px; display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--cream);
  padding:10px 16px; border-radius:14px; border:3px dashed var(--gold);
  font-size:.95rem; cursor:pointer; max-width:100%; transition:transform .15s;
}
.ca-box:hover{ transform:scale(1.02); }
.ca-label{ color:var(--gold); font-weight:700; }
.ca-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Hero art / 3D coin */
.hero-art{ position:relative; transform-style:preserve-3d; }
.coin-stage{ position:relative; transform-style:preserve-3d; animation:bob 5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
.hero-img{
  border-radius:26px; border:5px solid var(--ink);
  box-shadow:var(--shadow-lg);
  transition:transform .25s ease;
  transform-style:preserve-3d;
}
.glow{
  position:absolute; inset:-10% ; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,120,.85), transparent 65%);
  filter:blur(40px); animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.6; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.1);} }

.burst{
  position:absolute; font-family:'Luckiest Guy',cursive;
  background:var(--cream); color:var(--orange-deep);
  padding:10px 18px; border:4px solid var(--ink); border-radius:50% 50% 50% 4px;
  box-shadow:var(--shadow); font-size:1.4rem; transform:rotate(-12deg);
  animation:burstPop 2.2s ease-in-out infinite;
}
.burst-a{ top:4%; right:-2%; }
.burst-b{ bottom:6%; left:-4%; animation-delay:-1.1s; transform:rotate(10deg); }
@keyframes burstPop{ 0%,100%{ transform:scale(1) rotate(-12deg);} 50%{ transform:scale(1.18) rotate(-6deg);} }

/* Marquee */
.marquee{
  margin-top:60px; overflow:hidden; white-space:nowrap;
  background:var(--ink); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink);
  transform:rotate(-1.5deg) scale(1.04);
}
.marquee-track{ display:inline-flex; animation:scroll 22s linear infinite; }
.marquee-track span{
  font-family:'Bangers',cursive; font-size:1.6rem; letter-spacing:2px;
  color:var(--gold); padding:12px 0;
}
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head{ text-align:center; max-width:var(--maxw); margin:0 auto 50px; }
.section-title{
  font-family:'Luckiest Guy',cursive; font-size:clamp(2.4rem,6vw,4rem);
  text-transform:uppercase; letter-spacing:1.5px; color:var(--cream);
  -webkit-text-stroke:3px var(--ink); text-shadow:6px 6px 0 var(--ink);
}
.section-title span{ color:var(--gold); }
.section-kicker{ font-family:'Bangers',cursive; font-size:1.3rem; letter-spacing:1px; color:var(--brown); margin-top:8px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
.about-panel{
  border:5px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; background:var(--cream);
  transform:rotate(-2deg); transition:transform .3s;
}
.about-panel:hover{ transform:rotate(0); }
.about-text{
  background:var(--cream); border:5px solid var(--ink); border-radius:var(--radius);
  padding:34px; box-shadow:var(--shadow-lg);
}
.about-text .lead{ font-family:'Bangers',cursive; font-size:1.6rem; color:var(--orange-deep); letter-spacing:.5px; margin-bottom:14px; line-height:1.2; }
.about-text p{ font-size:1.1rem; color:var(--brown); margin-bottom:14px; line-height:1.55; }
.about-stats{ display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 6px; }
.stat{
  flex:1; min-width:120px; text-align:center; background:var(--orange);
  border:4px solid var(--ink); border-radius:16px; padding:16px 10px;
  box-shadow:var(--shadow); transition:transform .2s;
}
.stat strong{ display:block; font-size:2rem; margin-bottom:6px; }
.stat span{ font-weight:600; font-size:.95rem; color:var(--ink); }
.fineprint{ font-size:.85rem!important; font-style:italic; opacity:.8; }

/* ============================================================
   HOW TO BUY
   ============================================================ */
.steps{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step-card{
  position:relative; background:var(--cream); border:5px solid var(--ink);
  border-radius:var(--radius); padding:30px 22px 26px; box-shadow:var(--shadow-lg);
  transition:transform .25s; overflow:hidden;
}
.step-card:nth-child(even){ transform:rotate(1.5deg); }
.step-card:nth-child(odd){ transform:rotate(-1.5deg); }
.step-card:hover{ transform:rotate(0) translateY(-6px); }
.step-num{
  position:absolute; top:-18px; left:-18px; width:60px; height:60px;
  background:var(--gold); border:4px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; font-family:'Luckiest Guy',cursive;
  font-size:1.8rem; box-shadow:var(--shadow);
}
.step-card h3{ font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:.5px; margin:12px 0 8px; color:var(--orange-deep); }
.step-card p{ color:var(--brown); font-weight:500; line-height:1.45; }
.step-emoji{ font-size:2.6rem; margin-top:16px; text-align:right; animation:nudge 3s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.howto-cta{ text-align:center; margin-top:48px; }

/* ============================================================
   CHART
   ============================================================ */
.chart-frame{
  max-width:var(--maxw); margin:0 auto;
  background:var(--ink); border:6px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:10px; overflow:hidden;
}
.chart-embed{ position:relative; width:100%; min-height:520px; border-radius:14px; overflow:hidden; background:#0d0a06; }
.chart-embed iframe{ width:100%; height:600px; border:0; display:block; }
.chart-placeholder{
  min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; color:var(--cream); padding:30px;
}
.chart-ph-logo{ width:110px; height:110px; border-radius:50%; border:4px solid var(--gold); animation:spinSlow 8s linear infinite; }
.chart-placeholder h3{ font-family:'Bangers',cursive; font-size:2rem; letter-spacing:1px; color:var(--gold); }
.chart-placeholder p{ max-width:460px; opacity:.85; }

/* ============================================================
   JOIN US
   ============================================================ */
.join-banner{
  max-width:var(--maxw); margin:0 auto 44px;
  border:6px solid var(--ink); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden; background:var(--orange);
  transform:rotate(-1deg); transition:transform .3s;
}
.join-banner:hover{ transform:rotate(0) scale(1.01); }
.socials{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.social{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  background:var(--cream); border:5px solid var(--ink); border-radius:var(--radius);
  padding:30px 18px; box-shadow:var(--shadow-lg); transition:transform .2s;
}
.social:hover{ transform:translateY(-8px) rotate(-1.5deg); }
.social-icon{ font-size:2.8rem; line-height:1; }
.social-label{ font-family:'Bangers',cursive; font-size:1.5rem; letter-spacing:1px; }
.social-sub{ color:var(--brown); font-weight:500; }
.social-x{ background:#111; color:var(--cream); }
.social-x .social-sub{ color:#bbb; }
.social-tg{ background:#d9f0ff; }
.social-buy{ background:var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative; z-index:2; text-align:center;
  background:var(--ink); color:var(--cream);
  padding:60px 22px 40px; border-top:5px solid var(--gold);
}
.footer-logo{ width:80px; height:80px; margin:0 auto 14px; border-radius:50%; border:3px solid var(--gold); animation:bob 5s ease-in-out infinite; }
.footer-name{ font-family:'Luckiest Guy',cursive; font-size:1.8rem; letter-spacing:1px; }
.footer-name span{ color:var(--gold); }
.footer-disc{ max-width:620px; margin:14px auto; opacity:.7; font-size:.92rem; line-height:1.5; }
.footer-links{ display:flex; justify-content:center; gap:24px; margin:18px 0; flex-wrap:wrap; }
.footer-links a{ font-weight:700; color:var(--gold); transition:transform .15s; }
.footer-links a:hover{ transform:translateY(-3px); display:inline-block; }
.footer-copy{ opacity:.6; font-size:.85rem; margin-top:10px; }

/* ============================================================
   Reveal-on-scroll + toast
   ============================================================ */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.pop-in{ animation:popIn .6s cubic-bezier(.18,1.5,.5,1) both; }
@keyframes popIn{ from{ transform:scale(0); } to{ transform:scale(1); } }

.toast{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(120px);
  background:var(--ink); color:var(--gold); font-weight:700;
  padding:14px 26px; border-radius:40px; border:3px solid var(--gold);
  box-shadow:var(--shadow); z-index:100; transition:transform .35s cubic-bezier(.18,1.4,.5,1);
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-copy{ display:flex; flex-direction:column; align-items:center; }
  .hero-art{ order:-1; max-width:420px; margin:0 auto; }
  .about-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .socials{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:18px;
    background:var(--cream); padding:26px; border-bottom:4px solid var(--ink);
    transform:translateY(-150%); transition:transform .3s; z-index:49;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{ display:block; }
  .steps{ grid-template-columns:1fr; }
  section{ padding:64px 18px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}