/* Poop Panda V5 — responsive layout, animated hero, and replayable dust sweeps */

:root {
  --ink:#102330;
  --brown:#713316;
  --orange:#f87320;
  --cream:#fff1d0;
  --yellow:#ffe16a;
  --red:#f52e59;
  --sky:#39b6e9;
  --shadow:0 15px 35px #3a241c25
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:78px
}
body {
  margin:0;
  background:#fff7e5;
  color:var(--ink);
  font-family:Nunito,system-ui,sans-serif;
  overflow-x:hidden
}
h1,h2,h3,.brand,.btn {
  font-family:'Baloo 2',system-ui,sans-serif
}
h1,h2,h3,p {
  margin-top:0
}
h2 {
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1.08;
  color:var(--brown)
}
p {
  line-height:1.65
}
a {
  color:inherit
}
img {
  display:block;
  max-width:100%
}
.container {
  width:min(1160px,92%);
  margin:auto
}
.topbar {
  background:#102330;
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 5px 18px #0003
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:72px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.6rem;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap
}
.brand img {
  width:43px;
  height:43px;
  border-radius:50%;
  object-fit:cover;
  background:white
}
.navlinks {
  display:flex;
  align-items:center;
  gap:22px
}
.navlinks a {
  text-decoration:none;
  font-weight:900;
  font-size:.92rem
}
.navlinks a:hover {
  color:var(--yellow)
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:999px;
  background:var(--red);
  color:white;
  padding:12px 25px;
  text-decoration:none;
  font-size:1.1rem;
  font-weight:800;
  box-shadow:0 6px 0 #a81a3b;
  transition:transform .2s,box-shadow .2s;
  cursor:pointer
}
.btn:hover {
  transform:translateY(-3px);
  box-shadow:0 9px 0 #a81a3b
}
.btn.blue {
  background:#078de0;
  box-shadow:0 6px 0 #0767a2
}
.btn.yellow {
  background:#ffca36;
  color:#3e220c;
  box-shadow:0 6px 0 #c88b11
}
.menu {
  display:none;
  background:none;
  color:white;
  border:1px solid #ffffff55;
  border-radius:12px;
  padding:7px 12px;
  font-size:1.4rem
}
.hero {
  position:relative;
  min-height:580px;
  display:grid;
  align-items:center;
  background:linear-gradient(90deg,#102330e8 0%,#102330a6 43%,#10233012 100%),url('assets/hero.webp') center/cover;
  color:white;
  overflow:hidden
}
.hero-inner {
  position:relative;
  z-index:2;
  padding:85px 0;
  max-width:1160px;
  width:92%;
  margin:auto
}
.hero-copy {
  max-width:570px
}
.eyebrow {
  display:inline-block;
  background:#ffe16a;
  color:#462000;
  border-radius:50px;
  padding:7px 17px;
  font-weight:900;
  transform:rotate(-3deg)
}
h1 {
  font-size:clamp(3.9rem,9vw,7.3rem);
  line-height:.88;
  letter-spacing:-.04em;
  margin:25px 0;
  text-shadow:5px 7px 0 #552409
}
h1 span {
  color:var(--yellow)
}
.hero p {
  font-size:clamp(1.1rem,2vw,1.4rem);
  font-weight:900;
  max-width:490px
}
.actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px
}
.float-poop {
  position:absolute;
  z-index:1;
  font-size:clamp(2rem,4vw,3.8rem);
  animation:float 6s ease-in-out infinite;
  pointer-events:none;
  filter:drop-shadow(0 6px 4px #0004)
}
.poop1 {
  left:8%;
  top:14%
}
.poop2 {
  right:8%;
  top:14%;
  animation-delay:-2s
}
.poop3 {
  right:18%;
  bottom:12%;
  animation-delay:-4s
}
@keyframes float {
  0%,100% {
    transform:translateY(0) rotate(-10deg)
  }
  50% {
    transform:translateY(-28px) rotate(12deg)
  }
}
.section {
  padding:90px 0;
  position:relative
}
.cream {
  background:#fff0d0
}
.sky {
  background:linear-gradient(180deg,#b5eeff,#f2fdff)
}
.blk {
  background:linear-gradient(180deg,#a2b3b5,#6e898c)
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:55px
}
.story-text {
  font-size:1.2rem;
  font-weight:800
}
.highlight {
  color:#f2600b
}
.image-card {
  border:9px solid white;
  border-radius:30px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transform:rotate(2deg);
  background:white
}
.image-card img {
  width:100%;
  height:350px;
  object-fit:cover
}
.tag {
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#db6019
}
.sub {
  font-size:1.2rem;
  font-weight:900
}
.card-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.card {
  background:#fffdf6;
  border:3px solid #7d421b20;
  border-radius:26px;
  padding:27px;
  box-shadow:var(--shadow)
}
.card h3 {
  font-size:1.55rem;
  margin:10px 0;
  color:#793516
}
.card p {
  margin-bottom:0
}
.big-emoji {
  font-size:3.2rem;
  display:block
}
.note {
  background:#fff0cc;
  border:2px dashed #b8753d;
  border-radius:18px;
  padding:16px 20px;
  margin-top:25px;
  font-weight:800
}
.token-box {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
  margin-top:30px
}
.token-img {
  max-width:340px;
  margin:auto;
  filter:drop-shadow(0 15px 18px #74452644)
}
.token-info {
  background:white;
  border-radius:25px;
  padding:30px;
  box-shadow:var(--shadow)
}
.token-info dl {
  margin:0
}
.token-info div {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
  border-bottom:1px solid #e9e1d3
}
.token-info dt {
  font-weight:900
}
.token-info dd {
  margin:0;
  text-align:right;
  overflow-wrap:anywhere
}
.roadmap {
  margin-top:45px;
  padding:32px;
  border-radius:26px;
  background:#123348;
  color:white;
  text-align:center
}
.roadmap h3 {
  font-size:2.5rem;
  color:var(--yellow);
  margin-bottom:5px
}
.roadmap p {
  font-size:1.25rem;
  font-weight:900;
  margin:0
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:35px
}
.step {
  text-align:center;
  background:#fffdf5;
  padding:28px 18px;
  border-radius:25px;
  box-shadow:var(--shadow);
  position:relative
}
.step .number {
  display:inline-grid;
  place-items:center;
  width:39px;
  height:39px;
  background:var(--red);
  color:white;
  border-radius:50%;
  font-weight:900;
  margin-bottom:8px
}
.step .big-emoji {
  font-size:4rem
}
.step h3 {
  font-size:1.45rem;
  color:#713316
}
.step p {
  font-size:.96rem
}
.warning {
  background:#102330;
  color:#fff
}
.warning h2 {
  color:var(--yellow)
}
.warning p {
  max-width:830px
}
.warning .image-card img {
  height:250px
}
.footer {
  background:#071722;
  color:white;
  padding:26px 0;
  text-align:center
}
.footer p {
  margin:5px 0
}
.footer a {
  color:var(--yellow)
}
.pill {
  background:#ffffff24;
  padding:6px 13px;
  border-radius:20px;
  display:inline-block;
  margin-top:12px
}
.copyrow {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px
}
.address {
  padding:12px 14px;
  border:2px dashed #e9b98b;
  border-radius:14px;
  overflow-wrap:anywhere;
  flex:1;
  min-width:0;
  font-family:monospace;
  font-size:.85rem
}
.copybtn {
  background:#713316;
  color:white;
  border:0;
  border-radius:12px;
  padding:13px 17px;
  cursor:pointer;
  font-weight:900
}
.small {
  font-size:.88rem;
  opacity:.8
}
.confetti {
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,#ffe16a 2px,transparent 3px),radial-gradient(circle,#fff 2px,transparent 3px);
  background-size:100px 110px,140px 130px;
  background-position:20px 20px,50px 60px;
  opacity:.18;
  animation:drift 18s linear infinite
}
@keyframes drift {
  to {
    background-position:20px 350px,50px 390px
  }
}
@media(max-width:850px) {
  .navlinks {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:#102330;
    flex-direction:column;
    align-items:stretch;
    padding:20px 5%;
    gap:18px
  }
  .navlinks.open {
    display:flex
  }
  .menu {
    display:block
  }
  .split,.token-box {
    grid-template-columns:1fr
  }
  .card-grid {
    grid-template-columns:1fr 1fr
  }
  .steps {
    grid-template-columns:repeat(2,1fr)
  }
  .hero {
    min-height:560px;
    background-position:57% center
  }
  .hero-copy {
    max-width:520px
  }
}
@media(max-width:560px) {
  .section {
    padding:65px 0
  }
  .hero {
    min-height:630px;
    background:linear-gradient(180deg,#102330dd 0%,#102330a8 52%,#10233066 100%),url('assets/hero.webp') 40% center/cover
  }
  .hero-inner {
    padding:65px 0
  }
  .card-grid,.steps {
    grid-template-columns:1fr
  }
  .image-card img {
    height:260px
  }
  .token-info {
    padding:20px
  }
  .float-poop {
    opacity:.6
  }
  .brand {
    font-size:1.35rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important
  }
}
/* Playful asymmetric section transitions and messy layout */
.section {
  isolation:isolate;
  padding-top:120px;
  padding-bottom:115px
}
.section::before {
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  top:-1px;
  height:85px;
  background:var(--previous,#fff7e5);
  clip-path:polygon(0 0,100% 0,100% 17%,92% 37%,81% 21%,70% 54%,59% 33%,46% 71%,33% 42%,22% 80%,12% 49%,0 75%);
  pointer-events:none;
  z-index:1
}
#story {
  
}
#tokenomics {
  --previous:#fff0d0
}
#buy {
  --previous:#68888b
}
#disclaimer {
  --previous:#fff0d0
}
.hero {
  min-height:680px;
  clip-path:polygon(0 0,100% 0,100% 94%,87% 97%,72% 94%,56% 99%,37% 95%,18% 100%,0 96%);
  margin-bottom:-30px;
  padding-bottom:45px
}
#story .split>div:first-child {
  transform:rotate(-1.5deg)
}
#story .image-card {
  transform:rotate(5deg) translateY(18px)
}
#disclaimer .image-card {
  transform:rotate(-5deg)
}
.token-box>.token-img {
  transform:rotate(-8deg)
}
.token-info {
  transform:rotate(2deg)
}
.roadmap {
  transform:rotate(-2deg);
  border:5px dashed #ffe16a
}
.step:nth-child(odd) {
  transform:rotate(-3deg) translateY(12px)
}
.step:nth-child(even) {
  transform:rotate(3deg) translateY(-8px)
}
.step:hover,.image-card:hover {
  transform:rotate(0deg) translateY(-6px);
  transition:transform .25s
}
/* Desktop broom cursor, plus a keyboard-friendly clean button */
@media(hover:hover) and (pointer:fine) {
  body.clean-mode,body.clean-mode .hero {
    cursor:url('assets/broom.svg') 8 7, crosshair
  }
  body.clean-mode a,body.clean-mode button {
    cursor:pointer
  }
}
.clean-panel {
  position:absolute;
  z-index:6;
  right:5%;
  bottom:100px;
  max-width:300px;
  background:#fff8ddf0;
  color:#543019;
  border:4px solid #773817;
  border-radius:25px;
  padding:16px 19px;
  transform:rotate(4deg);
  box-shadow:8px 9px 0 #48290c77;
  text-align:center
}
.clean-panel strong {
  display:block;
  font:800 1.3rem 'Baloo 2',sans-serif
}
.clean-panel p {
  font-size:.9rem;
  line-height:1.35;
  margin:0 0 9px;
  font-weight:800
}
.clean-panel button {
  background:#ffe16a;
  color:#54290d;
  border:2px solid #713316;
  border-radius:30px;
  font:800 1rem 'Baloo 2',sans-serif;
  padding:8px 17px;
  cursor:pointer
}
.hero-mess {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none
}
.mess {
  position:absolute;
  display:block;
  border:0;
  background:none;
  padding:0;
  font-size:clamp(30px,4.3vw,67px);
  pointer-events:auto;
  cursor:pointer;
  filter:drop-shadow(2px 6px 4px #0007);
  animation:messBob var(--duration,4s) ease-in-out infinite alternate;
  transition:opacity .35s,scale .35s,filter .35s
}
.mess:hover {
  scale:1.2
}
.mess.cleaned {
  opacity:0;
  scale:0;
  filter:blur(10px);
  pointer-events:none
}
.mess:nth-child(1) {
  top:16%;
  left:61%;
  --duration:3s
}
.mess:nth-child(2) {
  top:37%;
  left:80%;
  --duration:4.7s
}
.mess:nth-child(3) {
  top:62%;
  left:55%;
  --duration:3.6s
}
.mess:nth-child(4) {
  top:19%;
  left:89%;
  --duration:5s
}
.mess:nth-child(5) {
  top:72%;
  left:72%;
  --duration:3.4s
}
.mess:nth-child(6) {
  top:45%;
  left:69%;
  --duration:4.1s
}
.mess:nth-child(7) {
  top:82%;
  left:88%;
  --duration:5.2s
}
@keyframes messBob {
  to {
    transform:translateY(-23px) rotate(14deg)
  }
}
.clean-count {
  display:block;
  font-weight:900;
  font-size:.9rem;
  margin:7px 0
}
.clean-message {
  font-size:.83rem;
  font-weight:900
}
.sweep-spark {
  position:fixed;
  z-index:100;
  pointer-events:none;
  font-size:2rem;
  animation:spark .65s ease-out forwards
}
@keyframes spark {
  to {
    transform:translateY(-65px) rotate(35deg);
    opacity:0
  }
}
.hero .actions .btn:first-child {
  animation:ctaWiggle 3.8s ease-in-out infinite
}
@keyframes ctaWiggle {
  0%,84%,100% {
    transform:rotate(0)
  }
  88% {
    transform:rotate(-5deg)
  }
  94% {
    transform:rotate(5deg)
  }
}
@media(max-width:850px) {
  .clean-panel {
    right:4%;
    bottom:55px;
    max-width:240px
  }
  .section {
    padding-top:105px
  }
  .hero-copy {
    max-width:65%
  }
}
@media(max-width:560px) {
  .hero {
    min-height:780px
  }
  .hero-copy {
    max-width:100%
  }
  .hero-inner {
    align-self:start;
    padding-top:65px
  }
  .clean-panel {
    right:5%;
    bottom:85px;
    max-width:250px
  }
  .mess:nth-child(1),.mess:nth-child(3) {
    top:56%
  }
  .mess:nth-child(2),.mess:nth-child(4) {
    top:70%
  }
  .mess:nth-child(5),.mess:nth-child(6),.mess:nth-child(7) {
    top:85%
  }
  .section {
    padding-top:100px;
    padding-bottom:90px
  }
  .section::before {
    height:55px
  }
  .token-info,.roadmap {
    transform:none
  }
  .step:nth-child(n) {
    transform:rotate(-1deg)
  }
  .step:nth-child(even) {
    transform:rotate(1deg)
  }
}
@media(prefers-reduced-motion:reduce) {
  .mess,.hero .actions .btn:first-child {
    animation:none!important
  }
}
/* V4: replayable sweeping dust reveal. Each section begins with a dusty film, then a
   diagonal brush clears it as it scrolls into view. Subtle streaks remain. */
.section {
  overflow:hidden
}
.section>.container {
  position:relative;
  z-index:4
}
.section .dust-film {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.64;
  background:repeating-linear-gradient(171deg,transparent 0 17px,#8d75512e 18px 23px,transparent 26px 55px),radial-gradient(ellipse at 24% 35%,#8d765a9c,transparent 65%),radial-gradient(ellipse at 85% 68%,#a18b6c8c,transparent 58%);
  mask-image:linear-gradient(105deg,#000 0%,#000 100%);
  -webkit-mask-image:linear-gradient(105deg,#000 0%,#000 100%);
  transition:opacity 1.4s ease .1s,clip-path 1.6s cubic-bezier(.18,.75,.28,1);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%)
}
.section.swept .dust-film {
  clip-path:polygon(110% 0,110% 0,110% 100%,110% 100%);
  opacity:0
}
.section .sweep-trails {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:repeating-linear-gradient(169deg,transparent 0 22px,#fff9de60 24px 26px,transparent 28px 47px),repeating-linear-gradient(174deg,transparent 0 80px,#65432217 82px 84px,transparent 88px 165px);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 83%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 83%,transparent);
  transition:opacity 1.1s ease .6s
}
.section.swept .sweep-trails {
  opacity:.58
}
.section .sweep-brush {
  position:absolute;
  top:25%;
  left:-180px;
  z-index:5;
  pointer-events:none;
  font-size:clamp(55px,8vw,110px);
  filter:drop-shadow(0 9px 6px #38261344);
  opacity:0;
  transform:rotate(-35deg);
}
.section.swept .sweep-brush {
  animation:sectionBrush 1.65s cubic-bezier(.2,.7,.25,1) both
}
@keyframes sectionBrush {
  0% {
    left:-180px;
    top:16%;
    opacity:0;
    transform:rotate(-40deg)
  }
  12% {
    opacity:1
  }
  38% {
    top:55%;
    transform:rotate(-15deg)
  }
  68% {
    top:30%;
    transform:rotate(-45deg)
  }
  87% {
    opacity:1
  }
  100% {
    left:110%;
    top:75%;
    opacity:0;
    transform:rotate(-25deg)
  }
}
.section:nth-of-type(even) .sweep-brush {
  animation-delay:.12s
}
@media(prefers-reduced-motion:reduce) {
  .section .dust-film {
    display:none
  }
  .section .sweep-brush {
    display:none
  }
  .section .sweep-trails {
    opacity:.25!important;
    transition:none
  }
}