/* ===================== Base / Variables ===================== */
:root{
  --ink:#1a0f06;
  --cream:#fff5e1;
  --yellow:#ffd23f;
  --orange:#ff7b00;
  --red:#ff3b3b;
  --pink:#ff4f9a;
  --blue:#1fc1ff;
  --teal:#2ee6c8;
  --green:#7ed957;
  --purple:#9b5de5;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Baloo 2',sans-serif;
  color:var(--ink);
  background:#2a1d4f;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
a{text-decoration:none;color:inherit}
b{color:var(--red)}

/* ===================== Animated Background ===================== */
.bg-fiesta{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, #ff9b3f 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #ff4f9a 0%, transparent 45%),
    linear-gradient(135deg,#ff7b00 0%,#ff3b6b 40%,#9b5de5 75%,#1fc1ff 100%);
  background-size:200% 200%;
  animation:bgShift 18s ease-in-out infinite;
}
@keyframes bgShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.bg-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;mix-blend-mode:overlay}
.blob-1{width:40vw;height:40vw;background:var(--yellow);top:-10%;left:-5%;animation:float1 14s ease-in-out infinite}
.blob-2{width:35vw;height:35vw;background:var(--teal);bottom:-12%;right:5%;animation:float2 17s ease-in-out infinite}
.blob-3{width:30vw;height:30vw;background:var(--pink);top:30%;left:55%;animation:float1 20s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.15)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-5vh) scale(1.2)}}

.halftone{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(26,15,6,.18) 1.5px,transparent 1.6px);
  background-size:22px 22px;
  animation:halftoneMove 8s linear infinite;
  opacity:.6;
}
@keyframes halftoneMove{from{background-position:0 0}to{background-position:22px 22px}}

/* papel picado bunting */
.bunting{position:absolute;top:0;left:0;width:100%;height:60px;display:flex;z-index:2;pointer-events:none}
.flag{flex:1;height:42px;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.12);animation:flagWave 3s ease-in-out infinite}
.flag::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55)}

@keyframes flagWave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(5px) rotate(.5deg)}}

/* floating emojis */
.floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.floaters span{position:absolute;font-size:2.2rem;opacity:.85;animation:floatUp linear infinite;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
@keyframes floatUp{
  0%{transform:translateY(110vh) rotate(0);opacity:0}
  10%{opacity:.9}
  90%{opacity:.9}
  100%{transform:translateY(-20vh) rotate(360deg);opacity:0}
}

/* ===================== Loader ===================== */
#loader{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#ff7b00,#ff3b6b);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .6s,visibility .6s}
#loader.hide{opacity:0;visibility:hidden}
.loader-logo{width:120px;height:120px;border-radius:50%;border:5px solid var(--ink);box-shadow:var(--shadow);animation:spinPop 1.4s ease-in-out infinite}
@keyframes spinPop{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(10deg)}}
.loader-bar{width:230px;height:18px;background:rgba(255,255,255,.35);border:3px solid var(--ink);border-radius:30px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--yellow);animation:load 1.6s ease forwards}
@keyframes load{to{width:100%}}
.loader-text{font-family:'Bangers',cursive;letter-spacing:2px;color:#fff;font-size:1.4rem;text-shadow:2px 2px 0 var(--ink)}

/* ===================== HUD ===================== */
.hud{position:fixed;top:0;left:0;width:100%;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff}
.brand span{font-family:'Luckiest Guy',cursive;color:#fff;font-size:1.15rem;letter-spacing:1px;text-shadow:2px 2px 0 var(--ink)}
.hud-nav{display:flex;gap:6px;background:rgba(255,245,225,.9);border:3px solid var(--ink);border-radius:40px;padding:5px 8px;box-shadow:var(--shadow)}
.hud-nav a{font-weight:800;font-size:.92rem;padding:6px 14px;border-radius:30px;transition:.2s}
.hud-nav a:hover{background:var(--yellow)}
.hud-nav a.active{background:var(--red);color:#fff}
.hud-buy{font-family:'Luckiest Guy',cursive;background:var(--yellow);border:3px solid var(--ink);
  border-radius:40px;padding:9px 18px;box-shadow:var(--shadow);letter-spacing:1px;transition:.15s}
.hud-buy:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}

/* ===================== Horizontal Track ===================== */
#track{
  position:relative;z-index:5;
  height:100vh;width:100vw;
  display:flex;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none;scrollbar-width:none;
}
#track::-webkit-scrollbar{display:none}

.panel{
  position:relative;
  flex:0 0 100vw;width:100vw;height:100vh;
  scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;
  padding:90px 5vw 70px;
}

/* ===================== Shared comic bits ===================== */
.sec-title{font-family:'Luckiest Guy',cursive;font-size:clamp(2rem,4.5vw,3.6rem);color:#fff;
  text-shadow:4px 4px 0 var(--ink),0 0 0 #000;line-height:1;letter-spacing:1px}
.sec-title span{color:var(--yellow)}
.sec-title.center{text-align:center;margin-bottom:8px}

.badge{display:inline-block;font-family:'Bangers',cursive;letter-spacing:2px;background:var(--red);color:#fff;
  padding:7px 16px;border:3px solid var(--ink);border-radius:30px;box-shadow:var(--shadow);font-size:1.05rem;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Luckiest Guy',cursive;letter-spacing:1px;
  border:4px solid var(--ink);border-radius:50px;padding:13px 26px;box-shadow:var(--shadow);
  font-size:1.05rem;transition:.15s;cursor:pointer}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-yellow{background:var(--yellow)}
.btn-blue{background:var(--blue);color:#06283a}
.btn.big{font-size:1.3rem;padding:16px 34px}

.pop{animation:pop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ===================== HERO ===================== */
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;max-width:1250px;width:100%}
.hero-copy .badge{animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.title-big{font-family:'Luckiest Guy',cursive;line-height:.9;margin:6px 0 14px}
.title-big .line-1{display:block;font-size:clamp(2.5rem,6vw,5rem);color:#fff;text-shadow:5px 5px 0 var(--ink)}
.title-big .line-2{display:block;font-size:clamp(3.4rem,9vw,7rem);color:var(--yellow);
  text-shadow:6px 6px 0 var(--ink);-webkit-text-stroke:2px var(--ink);animation:popBounce 2.6s ease-in-out infinite}
@keyframes popBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.speech{position:relative;background:var(--cream);border:4px solid var(--ink);border-radius:22px;
  padding:16px 20px;box-shadow:var(--shadow);max-width:430px;font-size:1.1rem;font-weight:600}
.speech::after{content:"";position:absolute;left:40px;bottom:-22px;border:12px solid transparent;
  border-top-color:var(--ink);border-bottom:0}
.speech::before{content:"";position:absolute;left:44px;bottom:-14px;border:9px solid transparent;
  border-top-color:var(--cream);border-bottom:0;z-index:1}

.ticker-pill{display:inline-block;margin:16px 0;background:var(--ink);color:var(--yellow);
  font-family:'Bangers',cursive;letter-spacing:2px;padding:8px 18px;border-radius:30px;font-size:1.2rem}
.ticker-pill b{color:#fff}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.scroll-hint{font-weight:800;color:#fff;text-shadow:2px 2px 0 var(--ink);font-size:.95rem;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.art-burst{position:absolute;width:115%;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(var(--yellow) 0 12deg,#fff 12deg 24deg);
  animation:spin 22s linear infinite;filter:drop-shadow(0 0 0 var(--ink))}
.art-burst::after{content:"";position:absolute;inset:8%;border-radius:50%;background:var(--orange);border:5px solid var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-img{position:relative;width:100%;max-width:430px;border:6px solid var(--ink);border-radius:26px;
  box-shadow:var(--shadow-lg);animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}

.sticker{position:absolute;font-family:'Bangers',cursive;background:#fff;border:4px solid var(--ink);
  border-radius:50%;width:84px;height:84px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);font-size:1.2rem;letter-spacing:1px}
.st-1{top:-18px;left:-10px;background:var(--pink);color:#fff;transform:rotate(-12deg);animation:floaty 3.2s ease-in-out infinite}
.st-2{bottom:10px;left:-26px;background:var(--teal);transform:rotate(10deg);animation:floaty 3.6s ease-in-out infinite reverse}
.st-3{top:20px;right:-18px;background:var(--yellow);font-size:2rem;animation:spinPop 2.4s ease-in-out infinite}

/* ===================== ABOUT ===================== */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;max-width:1200px;width:100%}
.comic-card{background:var(--cream);border:5px solid var(--ink);border-radius:26px;padding:30px 32px;box-shadow:var(--shadow-lg)}
.comic-card .sec-title{color:var(--orange);text-shadow:3px 3px 0 var(--ink);margin-bottom:14px}
.comic-card .sec-title span{color:var(--red)}
.comic-card p{font-size:1.12rem;font-weight:600;margin-bottom:12px;line-height:1.45}
.tilt-l{transform:rotate(-1.5deg)}

.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mini-card{background:#fff;border:4px solid var(--ink);border-radius:20px;padding:18px;box-shadow:var(--shadow);text-align:center;transition:.18s}
.mini-card .emoji{font-size:2.6rem;display:block;margin-bottom:6px}
.mini-card h3{font-family:'Luckiest Guy',cursive;letter-spacing:.5px;color:var(--orange);margin-bottom:4px}
.mini-card p{font-weight:600;font-size:.95rem}
.mini-card:nth-child(1){background:#fff3c4}
.mini-card:nth-child(2){background:#ffd9d9}
.mini-card:nth-child(3){background:#d4f4ff}
.mini-card:nth-child(4){background:#ffe0ef}
.hover-pop:hover{transform:translateY(-8px) rotate(-2deg);box-shadow:var(--shadow-lg)}

/* ===================== HOW TO BUY ===================== */
.how-wrap{max-width:1250px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.steps{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
.step-card{background:var(--cream);border:4px solid var(--ink);border-radius:22px;padding:20px 18px;
  width:200px;box-shadow:var(--shadow);text-align:center;position:relative;transition:.18s}
.step-card:hover{transform:translateY(-8px)}
.step-num{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;
  background:var(--red);color:#fff;border:4px solid var(--ink);font-family:'Luckiest Guy',cursive;font-size:1.4rem;
  display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink)}
.step-card h3{font-family:'Luckiest Guy',cursive;color:var(--orange);margin:14px 0 8px;letter-spacing:.5px}
.step-card p{font-weight:600;font-size:.95rem}
.step-arrow{font-family:'Luckiest Guy',cursive;font-size:2.2rem;color:#fff;text-shadow:3px 3px 0 var(--ink);align-self:center;animation:nudge 1.4s ease-in-out infinite}

.ca-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--ink);border:4px solid #000;border-radius:18px;padding:12px 18px;box-shadow:var(--shadow)}
.ca-label{font-family:'Bangers',cursive;letter-spacing:2px;color:var(--yellow);font-size:1rem}
.ca-box code{color:#fff;font-size:1.05rem;font-family:monospace;word-break:break-all}
.ca-copy{font-family:'Luckiest Guy',cursive;background:var(--yellow);border:3px solid #000;border-radius:14px;
  padding:6px 14px;cursor:pointer;box-shadow:2px 2px 0 #000;transition:.15s}
.ca-copy:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #000}

/* ===================== CHART ===================== */
.chart-wrap{max-width:1100px;width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.chart-frame{width:100%;background:var(--ink);border:6px solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow-lg);overflow:hidden}
#dexscreener-embed{position:relative;width:100%;padding-bottom:52%;min-height:340px}
#dexscreener-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===================== JOIN US ===================== */
.join-wrap{max-width:900px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.banner-frame{border:6px solid var(--ink);border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden;
  max-width:680px;width:100%;animation:floaty 5s ease-in-out infinite}
.banner-frame img{display:block;width:100%}
.join-sub{font-weight:700;font-size:1.15rem;color:#fff;text-shadow:2px 2px 0 var(--ink);max-width:600px}
.social-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.social{display:inline-flex;align-items:center;gap:10px;font-family:'Luckiest Guy',cursive;letter-spacing:1px;
  border:4px solid var(--ink);border-radius:50px;padding:13px 24px;box-shadow:var(--shadow);transition:.15s;font-size:1.02rem}
.social:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.social .ic{font-size:1.3rem}
.social.x{background:#fff}
.social.tg{background:var(--blue);color:#fff}
.social.buy{background:var(--yellow)}

.foot{display:flex;align-items:center;gap:12px;margin-top:18px;background:rgba(26,15,6,.55);
  border:3px solid var(--ink);border-radius:18px;padding:10px 18px}
.foot img{width:42px;height:42px;border-radius:50%;border:3px solid var(--ink)}
.foot p{color:#fff;font-weight:600;font-size:.85rem;text-align:left}

/* ===================== Dots + Progress ===================== */
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:12px}
.dots button{width:16px;height:16px;border-radius:50%;border:3px solid var(--ink);background:rgba(255,255,255,.5);cursor:pointer;transition:.2s;padding:0}
.dots button.active{background:var(--yellow);transform:scale(1.35);box-shadow:0 0 0 4px rgba(255,210,63,.4)}

.progress{position:fixed;left:0;bottom:0;width:100%;height:8px;background:rgba(0,0,0,.25);z-index:50}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--red),var(--pink));transition:width .15s}

.copy-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(40px);z-index:80;
  background:var(--ink);color:var(--yellow);font-family:'Luckiest Guy',cursive;letter-spacing:1px;
  padding:12px 22px;border-radius:40px;border:3px solid #000;box-shadow:var(--shadow);opacity:0;transition:.3s;pointer-events:none}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===================== Reveal on enter ===================== */
.panel .speech,.panel .badge,.panel .title-big,.panel .hero-art,.panel .comic-card,
.panel .mini-card,.panel .step-card,.panel .ca-box,.panel .chart-frame,.panel .banner-frame,
.panel .social,.panel .sec-title,.panel .hero-btns{opacity:0;transform:translateY(30px);transition:opacity .6s,transform .6s}
.panel.in-view .speech,.panel.in-view .badge,.panel.in-view .title-big,.panel.in-view .hero-art,
.panel.in-view .comic-card,.panel.in-view .mini-card,.panel.in-view .step-card,.panel.in-view .ca-box,
.panel.in-view .chart-frame,.panel.in-view .banner-frame,.panel.in-view .social,.panel.in-view .sec-title,
.panel.in-view .hero-btns{opacity:1;transform:none}
.panel.in-view .mini-card:nth-child(2){transition-delay:.08s}
.panel.in-view .mini-card:nth-child(3){transition-delay:.16s}
.panel.in-view .mini-card:nth-child(4){transition-delay:.24s}
.panel.in-view .step-card:nth-child(3){transition-delay:.1s}
.panel.in-view .step-card:nth-child(5){transition-delay:.2s}
.panel.in-view .step-card:nth-child(7){transition-delay:.3s}
.panel.in-view .social:nth-child(2){transition-delay:.1s}
.panel.in-view .social:nth-child(3){transition-delay:.2s}

/* ===================== Responsive ===================== */
@media(max-width:900px){
  .hud-nav{display:none}
  .hero-grid,.about-grid{grid-template-columns:1fr;gap:20px}
  .hero-art{order:-1}
  .hero-img{max-width:280px}
  .about-cards{grid-template-columns:1fr 1fr}
  .panel{padding:80px 6vw 60px;align-items:flex-start;overflow-y:auto}
  .step-arrow{transform:rotate(90deg)}
  .dots{right:10px}
}
@media(max-width:560px){
  .brand span{display:none}
  .about-cards{grid-template-columns:1fr}
  .hero-btns,.social-btns{justify-content:center}
}