/* =========================================================
   $CLOWN — WORLD'S OKAYEST STYLESHEET
   there is no design system here. there is only the circus.
   ========================================================= */

:root{
  --red:#e01b24;
  --red-dk:#8f0f16;
  --gold:#ffc93c;
  --yellow:#ffe66d;
  --pink:#ff2e88;
  --cyan:#22d3ee;
  --lime:#7cff4f;
  --purple:#7b2ff7;
  --orange:#ff7a1a;
  --ink:#0d0b0f;
  --cream:#fdf6e3;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:12px 12px 0 var(--ink);
  --font-big:"Bungee","Impact","Haettenschweiler","Arial Black",sans-serif;
  --font-shade:"Bungee Shade","Impact","Arial Black",sans-serif;
  --font-scary:"Creepster","Impact",cursive;
  --font-hand:"Permanent Marker","Comic Sans MS",cursive;
  --font-body:"Comic Neue","Comic Sans MS",cursive,sans-serif;
  --font-glitch:"Rubik Glitch","Impact",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  font-weight:700;
  color:var(--ink);
  background:var(--ink);
  overflow-x:hidden;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='11' fill='%23e01b24' stroke='%230d0b0f' stroke-width='3'/%3E%3Ccircle cx='14' cy='14' r='3.5' fill='%23fff' opacity='.75'/%3E%3C/svg%3E") 18 18, auto;
}
body.chaos{animation:pageDrunk 1.4s infinite}

img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}

/* ---------- confetti canvas ---------- */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9998}

/* =========================================================
   TICKERS
   ========================================================= */
.ticker{
  background:repeating-linear-gradient(90deg,var(--red) 0 40px,var(--cream) 40px 80px);
  border-top:5px solid var(--ink);
  border-bottom:5px solid var(--ink);
  overflow:hidden;
  padding:9px 0;
  position:relative;
  z-index:60;
}
.ticker--top{position:sticky;top:0}
.ticker__track{display:flex;white-space:nowrap;width:max-content;animation:marquee 28s linear infinite}
.ticker__track--rev{animation:marqueeRev 24s linear infinite}
.ticker__track span{
  font-family:var(--font-big);
  font-size:clamp(14px,2vw,22px);
  padding-right:20px;
  color:var(--ink);
  -webkit-text-stroke:1px var(--cream);
  text-shadow:2px 2px 0 var(--gold);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:47px;z-index:55;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 16px;
  background:var(--ink);
  border-bottom:5px solid var(--gold);
}
.nav__brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-big);font-size:24px;color:var(--gold);text-shadow:2px 2px 0 var(--red)}
.nav__brand:hover{animation:jiggle .3s infinite}
.nav__head{width:40px;height:40px;animation:spin 6s linear infinite}
.nav__links{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav__links a{
  text-decoration:none;font-family:var(--font-big);font-size:13px;
  color:var(--cream);padding:6px 10px;border:3px solid transparent;border-radius:4px;
}
.nav__links a:hover{background:var(--pink);border-color:var(--cream);transform:rotate(-4deg) scale(1.15);color:#fff}
.nav__cta{background:var(--lime);color:var(--ink)!important;border-color:var(--ink)!important;animation:blinkBg 1.1s infinite}
.honk-btn{
  font-family:var(--font-big);font-size:14px;cursor:pointer;
  background:var(--red);color:#fff;border:4px solid var(--cream);border-radius:999px;
  padding:8px 16px;box-shadow:0 4px 0 #6b0a10;
}
.honk-btn:hover{background:var(--pink);transform:scale(1.12) rotate(6deg)}
.honk-btn:active{transform:scale(.9);box-shadow:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:26px 16px 60px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0,rgba(255,201,60,.45),transparent 60%),
    repeating-conic-gradient(from 0deg at 50% -10%,var(--red) 0 9deg,var(--cream) 9deg 18deg);
}
.hero__tent{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 22px,transparent 22px 44px);
  pointer-events:none;
}
.hero__bulbs{
  position:absolute;top:0;left:0;right:0;height:26px;
  background:radial-gradient(circle,var(--yellow) 32%,transparent 34%) 0 0/38px 26px repeat-x;
  filter:drop-shadow(0 0 7px var(--gold));
  animation:bulbBlink .85s steps(2) infinite;
}
.hero__inner{position:relative;z-index:2;max-width:1100px;margin:0 auto}

.hero__kicker{
  display:inline-block;font-family:var(--font-big);font-size:clamp(11px,1.7vw,16px);
  background:var(--ink);color:var(--lime);padding:7px 14px;border:4px solid var(--lime);
  transform:rotate(-2deg);margin-bottom:14px;
}

.hero__title{
  font-family:var(--font-shade);
  font-size:clamp(72px,19vw,230px);
  line-height:.86;
  letter-spacing:2px;
  color:var(--gold);
  -webkit-text-stroke:3px var(--ink);
  text-shadow:0 10px 0 var(--red-dk);
  margin:2px 0;
}
.hero__title .l{display:inline-block;animation:letterDance 1.5s ease-in-out infinite}
.hero__title .l:nth-child(1){animation-delay:0s;color:var(--gold)}
.hero__title .l:nth-child(2){animation-delay:.12s;color:var(--pink)}
.hero__title .l:nth-child(3){animation-delay:.24s;color:var(--cyan)}
.hero__title .l:nth-child(4){animation-delay:.36s;color:var(--lime)}
.hero__title .l:nth-child(5){animation-delay:.48s;color:var(--orange)}
.hero__title .l:hover{transform:rotate(22deg) scale(1.35)!important}

.hero__badge{
  display:inline-block;font-family:var(--font-hand);font-size:clamp(15px,2.9vw,30px);
  background:var(--cream);border:4px solid var(--ink);border-radius:6px;
  padding:6px 18px;transform:rotate(1.6deg);box-shadow:var(--shadow);margin-bottom:10px;
}

.hero__stage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:2vw;margin:6px 0 4px;min-height:340px}
.hero__mascot{
  width:min(400px,62vw);
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.45));
  animation:mascotBob 2.4s ease-in-out infinite;
  transform-origin:50% 100%;
  z-index:3;
}
.hero__mascot:hover{animation:mascotFreak .28s infinite}
.hero__coin{width:min(120px,17vw);align-self:center;animation:spin 4s linear infinite,float 3s ease-in-out infinite}
.hero__coin--r{animation-direction:reverse,normal;animation-delay:0s,.7s}
.speech{
  position:absolute;top:1%;left:50%;transform:translateX(36%) rotate(6deg);
  background:var(--cream);border:5px solid var(--ink);border-radius:26px;
  font-family:var(--font-big);font-size:clamp(15px,2.5vw,26px);padding:10px 18px;
  box-shadow:var(--shadow);z-index:4;white-space:nowrap;
  animation:pop .5s;
}
.speech::after{content:"";position:absolute;bottom:-26px;left:22px;border:13px solid transparent;border-top-color:var(--ink)}

.hero__sub{font-size:clamp(15px,2.2vw,22px);color:var(--ink);background:rgba(253,246,227,.86);display:inline-block;padding:9px 16px;border:3px dashed var(--ink);border-radius:8px;margin:12px 0 20px}

.hero__scroll{margin-top:22px;font-family:var(--font-hand);font-size:18px;color:var(--ink);animation:float 1.7s ease-in-out infinite}

/* =========================================================
   BUTTONS
   ========================================================= */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:6px 0 18px}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--font-big);font-size:clamp(14px,2vw,21px);
  padding:15px 26px;border:5px solid var(--ink);border-radius:10px;
  box-shadow:var(--shadow);color:var(--ink);background:var(--cream);
  transition:transform .08s;
}
.btn:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:9px 9px 0 var(--ink);animation:btnFreak .25s infinite}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn--buy{background:var(--lime);font-size:clamp(16px,2.4vw,26px);animation:btnPulse 1s ease-in-out infinite}
.btn--x{background:#111;color:#fff}
.btn--chart{background:var(--cyan)}
.btn--tg{background:#29a9eb;color:#fff}
.btn--small{font-size:15px;padding:11px 18px}
.btn--alt{background:var(--gold)}
.btn--mega{
  background:linear-gradient(90deg,var(--pink),var(--gold),var(--lime),var(--cyan),var(--pink));
  background-size:300% 100%;
  font-size:clamp(19px,4vw,44px);padding:22px 40px;border-width:7px;
  box-shadow:var(--shadow-lg);animation:rainbowSlide 2.2s linear infinite,btnPulse .8s ease-in-out infinite;
}
.btn--mega-x{font-size:clamp(15px,2.4vw,26px);padding:18px 30px}

/* =========================================================
   CONTRACT ADDRESS
   ========================================================= */
.ca{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:var(--ink);border:5px solid var(--gold);border-radius:12px;
  padding:10px 14px;max-width:100%;box-shadow:var(--shadow);
}
.ca__label{font-family:var(--font-big);color:var(--gold);font-size:16px}
.ca code{font-family:"Courier New",monospace;color:var(--lime);font-size:clamp(11px,1.8vw,16px);word-break:break-all;font-weight:700}
.ca__copy{
  font-family:var(--font-big);font-size:13px;cursor:pointer;
  background:var(--gold);border:3px solid var(--cream);border-radius:6px;padding:6px 12px;color:var(--ink);
}
.ca__copy:hover{background:var(--pink);color:#fff;transform:scale(1.1)}

/* =========================================================
   BANNERS
   ========================================================= */
.banner{position:relative;border-top:7px solid var(--ink);border-bottom:7px solid var(--ink);overflow:hidden;background:var(--ink)}
.banner img{width:100%;height:clamp(180px,32vw,420px);object-fit:cover}
.banner--tilt img{animation:hueRoll 9s linear infinite}
.banner__stamp{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-11deg);
  font-family:var(--font-big);font-size:clamp(26px,7vw,86px);
  color:var(--gold);-webkit-text-stroke:4px var(--ink);
  text-shadow:0 8px 0 var(--red-dk);
  animation:stampBeat 1.6s ease-in-out infinite;pointer-events:none;
}
.banner__stamp--alt{color:var(--pink);animation:stampBeat 1.1s ease-in-out infinite reverse}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-title{
  font-family:var(--font-big);
  font-size:clamp(30px,7vw,76px);
  text-align:center;line-height:1;margin-bottom:8px;
}
.section-sub{
  text-align:center;font-family:var(--font-hand);
  font-size:clamp(14px,2vw,21px);margin-bottom:34px;opacity:.9;
}
.wobble{animation:wobble 2.4s ease-in-out infinite;color:var(--gold);-webkit-text-stroke:3px var(--ink);text-shadow:0 7px 0 var(--red-dk)}
.rainbow{
  background:linear-gradient(90deg,#ff2e88,#ffc93c,#7cff4f,#22d3ee,#7b2ff7,#ff2e88);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rainbowSlide 2.6s linear infinite;
  -webkit-text-stroke:2px var(--ink);
}
.glitchy{font-family:var(--font-glitch);color:var(--cyan);animation:glitch 2.6s infinite}

/* =========================================================
   TAPE / VIDEO
   ========================================================= */
.tape{
  position:relative;padding:56px 16px 70px;
  background:
    radial-gradient(circle at 50% 20%,#3b0a12,#150409 70%),
    var(--ink);
  color:var(--cream);
  border-bottom:7px solid var(--gold);
  overflow:hidden;
}
.curtain{
  position:absolute;top:0;bottom:0;width:clamp(30px,9vw,140px);
  background:repeating-linear-gradient(90deg,#a4121b 0 16px,#6e0b12 16px 32px);
  border-right:6px solid var(--ink);
  box-shadow:inset -14px 0 26px rgba(0,0,0,.6);
  z-index:2;
}
.curtain--l{left:0;border-radius:0 40% 30% 0/0 12% 8% 0}
.curtain--r{right:0;border-right:none;border-left:6px solid var(--ink);border-radius:40% 0 0 30%/12% 0 0 8%;box-shadow:inset 14px 0 26px rgba(0,0,0,.6)}

.tape .section-title,.tape .section-sub{position:relative;z-index:3}
.tape .section-sub{color:var(--gold)}

.tv{
  position:relative;z-index:3;max-width:900px;margin:0 auto;
  background:linear-gradient(180deg,#efe3c7,#bfae86);
  border:8px solid var(--ink);border-radius:26px;
  padding:20px 20px 14px;box-shadow:var(--shadow-lg);
  transform:rotate(-.7deg);
}
.tv__screen{position:relative;border:9px solid #1a1a1a;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9}
.tv__screen video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.15) contrast(1.05)}
.tv__scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px);
  animation:scan 7s linear infinite;
}
.tv__rec{position:absolute;top:12px;left:14px;font-family:"Courier New",monospace;color:#ff3b3b;font-size:clamp(12px,1.6vw,18px);letter-spacing:2px;text-shadow:0 0 8px #ff0000;animation:blink 1s steps(2) infinite}
.tv__time{position:absolute;bottom:12px;left:14px;font-family:"Courier New",monospace;color:#fff;font-size:clamp(11px,1.6vw,17px);letter-spacing:1px;text-shadow:2px 2px 3px #000}
.tv__controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.tv__knobs{display:flex;gap:14px;justify-content:center;margin-top:12px}
.tv__knobs span{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#7b6b45);border:4px solid var(--ink)}
.tv__knobs span:nth-child(2){animation:spin 3s linear infinite}

/* =========================================================
   MANIFESTO (sticky notes)
   ========================================================= */
.manifesto{
  padding:60px 16px 76px;
  background:var(--cream);
  background-image:
    radial-gradient(var(--red) 2.5px,transparent 2.6px),
    radial-gradient(var(--cyan) 2.5px,transparent 2.6px);
  background-size:56px 56px,56px 56px;
  background-position:0 0,28px 28px;
  border-bottom:7px solid var(--ink);
}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;max-width:1040px;margin:0 auto}
.note{
  padding:26px 20px;border:4px solid var(--ink);
  font-size:clamp(15px,2vw,20px);line-height:1.45;
  box-shadow:var(--shadow);min-height:170px;
  display:flex;align-items:center;
}
.note__t{display:block;width:100%}
.note:hover{transform:scale(1.06) rotate(0deg)!important;z-index:5;animation:jiggle .3s infinite}
.note small{opacity:.7;font-size:.8em}
.note--yellow{background:var(--yellow);transform:rotate(-3deg)}
.note--pink{background:#ffb3d9;transform:rotate(2.4deg)}
.note--cyan{background:#a5f0fb;transform:rotate(-1.6deg)}
.note--lime{background:#ccff9e;transform:rotate(3.2deg)}
.note--orange{background:#ffcf9e;transform:rotate(-2.2deg)}
.note--white{background:#fff;transform:rotate(1.4deg)}

/* =========================================================
   TOKENOMICS
   ========================================================= */
.tokenomics{
  padding:60px 16px 76px;color:var(--cream);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 26px,transparent 26px 52px),
    linear-gradient(180deg,#1a0b2e,#3b0d3f);
  border-bottom:7px solid var(--pink);
}
.tok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;max-width:1150px;margin:0 auto 50px}
.tok{
  background:rgba(253,246,227,.96);color:var(--ink);
  border:5px solid var(--ink);border-radius:16px;padding:24px 18px;text-align:center;
  box-shadow:var(--shadow);
}
.tok:nth-child(odd){transform:rotate(-1.6deg)}
.tok:nth-child(even){transform:rotate(1.6deg)}
.tok:hover{animation:jiggle .3s infinite;background:var(--yellow)}
.tok__coin{width:82px;margin:0 auto 10px}
.tok__emoji{font-size:62px;line-height:1;margin-bottom:6px;animation:float 2.4s ease-in-out infinite}
.tok h3{font-family:var(--font-big);font-size:17px;letter-spacing:1px;color:var(--red-dk)}
.tok__big{font-family:var(--font-big);font-size:clamp(17px,2.2vw,26px);letter-spacing:-.5px;margin:6px 0 10px;color:var(--ink);overflow-wrap:anywhere}
.tok p:last-child{font-size:15px;line-height:1.4;opacity:.85}

.pie-wrap{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;max-width:900px;margin:0 auto}
.pie{
  width:min(280px,72vw);aspect-ratio:1;border-radius:50%;
  border:8px solid var(--ink);box-shadow:var(--shadow-lg);
  background:conic-gradient(var(--pink) 0 40%,var(--gold) 40% 70%,var(--cyan) 70% 90%,var(--lime) 90% 100%);
  animation:spin 11s linear infinite;
}
.pie-legend{list-style:none;font-family:var(--font-big);font-size:clamp(14px,2vw,20px);line-height:2.1}
.pie-legend i{display:inline-block;width:20px;height:20px;border:3px solid var(--ink);margin-right:9px;vertical-align:-4px}

/* =========================================================
   SIGHTINGS
   ========================================================= */
.sightings{
  padding:60px 16px 80px;
  background:repeating-linear-gradient(90deg,var(--red) 0 60px,var(--cream) 60px 120px);
  border-bottom:7px solid var(--ink);
}
.sightings .section-sub{color:var(--ink);background:var(--cream);display:block;max-width:640px;margin:0 auto 34px;padding:6px 12px;border:3px solid var(--ink)}
.polaroids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1150px;margin:0 auto}
.polaroid{
  background:#fff;border:4px solid var(--ink);padding:12px 12px 0;
  box-shadow:var(--shadow);
}
.polaroid:nth-child(3n+1){transform:rotate(-2.6deg)}
.polaroid:nth-child(3n+2){transform:rotate(1.8deg)}
.polaroid:nth-child(3n){transform:rotate(-1.1deg)}
.polaroid:hover{transform:rotate(0) scale(1.07);z-index:6;animation:jiggle .35s infinite}
.polaroid__img{position:relative;overflow:hidden;border:3px solid var(--ink)}
.polaroid__img img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.08) saturate(.85)}
.polaroid__ts{position:absolute;bottom:6px;left:8px;font-family:"Courier New",monospace;font-size:12px;color:#fff;text-shadow:1px 1px 2px #000;letter-spacing:1px}
.polaroid figcaption{font-family:var(--font-hand);font-size:15px;padding:11px 4px 14px;text-align:center;color:var(--ink)}

/* =========================================================
   ROADMAP
   ========================================================= */
.roadmap{
  padding:60px 16px 80px;color:var(--cream);
  background:linear-gradient(180deg,#04121f,#062b1c);
  border-bottom:7px solid var(--lime);
}
.phases{list-style:none;max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.phase{
  background:var(--cream);color:var(--ink);
  border:5px solid var(--ink);border-radius:12px;padding:16px 20px;
  box-shadow:var(--shadow);display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
}
.phase:nth-child(odd){transform:rotate(-.9deg);margin-right:auto;width:min(100%,700px)}
.phase:nth-child(even){transform:rotate(.9deg);margin-left:auto;width:min(100%,700px)}
.phase:hover{animation:jiggle .3s infinite;background:var(--yellow)}
.phase b{font-family:var(--font-big);font-size:15px;background:var(--ink);color:var(--gold);padding:5px 10px;border-radius:5px}
.phase span{font-family:var(--font-big);font-size:clamp(16px,2.6vw,26px);flex:1}
.phase em{font-family:var(--font-hand);font-style:normal;font-size:14px;opacity:.8}
.phase--done{background:#ccff9e}
.phase--now{background:var(--gold);animation:phaseGlow 1.3s ease-in-out infinite}
.phase--lost{background:#ffb3d9;filter:blur(.5px)}

/* =========================================================
   HOW TO BUY
   ========================================================= */
.buy{
  padding:60px 16px 80px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,201,60,.5),transparent 55%),
    repeating-conic-gradient(from 18deg at 50% 110%,var(--cyan) 0 10deg,var(--cream) 10deg 20deg);
  border-bottom:7px solid var(--ink);
}
.buy .section-title{color:var(--purple);-webkit-text-stroke:2px var(--cream);text-shadow:0 6px 0 rgba(0,0,0,.35)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;max-width:1150px;margin:0 auto 54px}
.step{
  background:var(--cream);border:5px solid var(--ink);border-radius:14px;
  padding:26px 20px 22px;box-shadow:var(--shadow);position:relative;
}
.step:nth-child(even){transform:rotate(1.5deg)}
.step:nth-child(odd){transform:rotate(-1.5deg)}
.step:hover{animation:jiggle .3s infinite;background:#fff}
.step__n{
  position:absolute;top:-26px;left:-14px;
  width:56px;height:56px;border-radius:50%;
  background:var(--pink);color:#fff;border:5px solid var(--ink);
  font-family:var(--font-big);font-size:26px;
  display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);
  animation:float 2.2s ease-in-out infinite;
}
.step h3{font-family:var(--font-big);font-size:19px;margin:6px 0 8px}
.step p{font-size:15.5px;line-height:1.5}

.final-cta{display:flex;flex-direction:column;align-items:center;gap:20px}
.final-cta__head{width:130px;animation:mascotBob 1.6s ease-in-out infinite}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;padding:64px 16px 44px;background:var(--ink);color:var(--cream);overflow:hidden;text-align:center}
.footer__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;filter:grayscale(.4)}
.footer__inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.footer__head{width:92px;margin:0 auto 18px;animation:spin 9s linear infinite}
.footer__disclaimer{font-size:14.5px;line-height:1.65;opacity:.82;margin-bottom:22px}
.footer__links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-family:var(--font-big);font-size:15px;margin-bottom:16px}
.footer__links a{color:var(--gold);text-decoration:none;border-bottom:3px solid transparent}
.footer__links a:hover{color:var(--pink);border-bottom-color:var(--pink)}
.footer__visitor{color:var(--lime);font-family:"Courier New",monospace}
.footer__copy{font-family:var(--font-hand);font-size:15px;opacity:.65}

/* =========================================================
   FLOATING JUNK
   ========================================================= */
.floaty{position:fixed;width:74px;z-index:70;pointer-events:none;will-change:transform;top:0;left:0}
.floaty img{width:100%;animation:spin 2.4s linear infinite}

.chaos-toggle{
  position:fixed;right:14px;bottom:14px;z-index:9999;cursor:pointer;
  font-family:var(--font-big);font-size:13px;line-height:1.15;text-align:center;
  background:var(--pink);color:#fff;border:5px solid var(--ink);border-radius:50%;
  width:104px;height:104px;box-shadow:var(--shadow);
  animation:btnPulse 1.1s ease-in-out infinite;
}
.chaos-toggle:hover{background:var(--lime);color:var(--ink);transform:scale(1.12) rotate(9deg)}
.chaos-toggle.on{background:var(--lime);color:var(--ink)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:var(--lime);border:5px solid var(--lime);
  font-family:var(--font-big);font-size:17px;padding:13px 22px;border-radius:10px;
  z-index:9999;box-shadow:var(--shadow);animation:pop .35s;
}

/* =========================================================
   KEYFRAMES — the reason your battery is warm
   ========================================================= */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes blinkBg{0%,100%{background:var(--lime)}50%{background:var(--yellow)}}
@keyframes bulbBlink{0%{opacity:1}100%{opacity:.35}}
@keyframes pop{from{transform:scale(.3)}to{transform:scale(1)}}
@keyframes scan{from{background-position:0 0}to{background-position:0 400px}}

@keyframes jiggle{
  0%{transform:rotate(-2.5deg) scale(1.03)}
  50%{transform:rotate(2.5deg) scale(1.05)}
  100%{transform:rotate(-2.5deg) scale(1.03)}
}
@keyframes wobble{
  0%,100%{transform:rotate(-2.5deg) skewX(0)}
  25%{transform:rotate(2deg) skewX(-5deg)}
  50%{transform:rotate(-1.5deg) skewX(5deg)}
  75%{transform:rotate(3deg) skewX(-2deg)}
}
@keyframes letterDance{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-22px) rotate(5deg)}
}
@keyframes mascotBob{
  0%,100%{transform:translateY(0) rotate(-1.5deg) scaleY(1)}
  50%{transform:translateY(-16px) rotate(1.5deg) scaleY(1.02)}
}
@keyframes mascotFreak{
  0%{transform:translate(-6px,0) rotate(-6deg) scale(1.05)}
  33%{transform:translate(6px,-8px) rotate(7deg) scale(1.09)}
  66%{transform:translate(-4px,6px) rotate(-9deg) scale(1.03)}
  100%{transform:translate(5px,0) rotate(6deg) scale(1.07)}
}
@keyframes btnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes btnFreak{
  0%{transform:translate(-3px,-3px) rotate(-2deg)}
  50%{transform:translate(-3px,-5px) rotate(2.5deg)}
  100%{transform:translate(-3px,-3px) rotate(-2deg)}
}
@keyframes rainbowSlide{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes hueRoll{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
@keyframes stampBeat{0%,100%{transform:translate(-50%,-50%) rotate(-11deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.13)}}
@keyframes phaseGlow{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:6px 6px 0 var(--ink),0 0 34px var(--gold)}}
@keyframes glitch{
  0%,92%,100%{transform:translate(0);text-shadow:3px 3px 0 var(--pink),-3px -3px 0 var(--lime)}
  93%{transform:translate(-5px,2px);text-shadow:-6px 0 0 var(--red),6px 0 0 var(--cyan)}
  95%{transform:translate(5px,-2px);text-shadow:6px 0 0 var(--pink),-6px 0 0 var(--gold)}
  97%{transform:translate(-3px,-3px) skewX(9deg)}
}
@keyframes pageDrunk{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(.7deg) scale(1.008)}
  50%{transform:rotate(0) scale(.994)}
  75%{transform:rotate(-.7deg) scale(1.008)}
  100%{transform:rotate(0) scale(1)}
}
@keyframes shakeHard{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-9px,5px) rotate(-1deg)}
  40%{transform:translate(8px,-6px) rotate(1deg)}
  60%{transform:translate(-7px,-4px) rotate(-.6deg)}
  80%{transform:translate(6px,6px) rotate(.8deg)}
}
.shake{animation:shakeHard .42s}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  /* the nav is 3 rows tall down here — let it scroll away instead of
     eating a quarter of the phone screen forever */
  .nav{position:static;justify-content:center}
  .nav__links{margin-left:0;order:3;width:100%;justify-content:center}
  .nav__links a{font-size:11.5px;padding:5px 7px}
  .hero__stage{min-height:0;gap:0}
  .hero__coin{display:none}
  .speech{transform:translateX(10%) rotate(6deg);font-size:15px}
  .curtain{width:22px}
  .chaos-toggle{width:80px;height:80px;font-size:10.5px}
  .floaty{width:52px}
  .pie-wrap{gap:20px}
  /* 3 across is too tight from here down */
  .notes,.polaroids{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .notes,.polaroids{grid-template-columns:1fr}
}
@media (max-width:480px){
  .btn{font-size:14px;padding:13px 18px}
  .phase{flex-direction:column;align-items:flex-start;gap:6px}
}

/* people who get motion sick still deserve the clown */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ticker__track{animation:none}
  body.chaos{animation:none}
}