/* Bye Now Billionaires! ($BNB) — golden confidence, cartoon chaos */
:root{
  --gold:#F3BA2F; --gold-deep:#E0A106; --gold-soft:#FFD96B;
  --ink:#111111; --ink-soft:#2A2520;
  --cream:#FFF4D6; --cream-deep:#F6E4B4; --white:#FFFFFF;
  --sky:#8FC9F2; --cloud:#F4FAFF;
  --leaf:#4CAF50; --leaf-deep:#2E7D32;
  --brick:#C0564A; --mortar:#D9D4CC;
  --bldg:#CFCAC2; --bldg2:#B9B3AA;
  --walk:#E7E3DC;
  --line:7px;
  --shadow-hard:10px 10px 0 var(--ink);
  --shadow-mid:7px 7px 0 var(--ink);
  --shadow-soft:5px 5px 0 var(--ink);
  --comic:"Luckiest Guy","Bangers",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Gochi Hand","Comic Sans MS",cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-width:1240px;
  font-family:var(--body); font-weight:700; color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(243,186,47,.20), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(143,201,242,.26), transparent 45%),
    repeating-linear-gradient(135deg, rgba(17,17,17,.028) 0 2px, transparent 2px 9px);
  overflow-x:hidden;
}

/* ---------- shared comic furniture ---------- */
.wrap{width:1180px; margin:0 auto; position:relative}
.wide{width:1480px; margin:0 auto; position:relative; max-width:94vw}

h1,h2,h3,.comic{font-family:var(--comic); font-weight:400; letter-spacing:.01em; line-height:.96}

.stroke{
  color:var(--gold);
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 7px 0 var(--ink), 0 9px 0 rgba(0,0,0,.18);
}

.plate{
  background:var(--cream); border:var(--line) solid var(--ink);
  border-radius:18px; box-shadow:var(--shadow-mid);
}

.awning{
  height:34px; border:var(--line) solid var(--ink); border-radius:12px 12px 4px 4px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 46px,var(--ink) 46px 92px);
  box-shadow:var(--shadow-soft); position:relative;
}
.awning::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-13px; height:13px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 46px,var(--ink) 46px 92px);
  border:5px solid var(--ink); border-top:0; border-radius:0 0 10px 10px;
  clip-path:polygon(0 0,100% 0,100% 40%,96% 100%,92% 40%,88% 100%,84% 40%,80% 100%,76% 40%,72% 100%,68% 40%,64% 100%,60% 40%,56% 100%,52% 40%,48% 100%,44% 40%,40% 100%,36% 40%,32% 100%,28% 40%,24% 100%,20% 40%,16% 100%,12% 40%,8% 100%,4% 40%,0 100%);
}

/* section headers */
.sec{padding:96px 0 40px; position:relative}
.sec-head{display:flex; flex-direction:column; align-items:center; gap:18px; margin-bottom:46px; text-align:center}
.sec-head .awning{width:560px}
.sec-head h2{font-size:62px; margin:0; max-width:1000px}
.sec-head p{margin:0; font-size:20px; max-width:760px; color:var(--ink-soft); font-weight:800}

/* speech bubble */
.bubble{
  position:relative; background:var(--white); border:var(--line) solid var(--ink);
  border-radius:28px; padding:20px 26px; box-shadow:var(--shadow-mid);
  font-family:var(--comic); font-weight:400;
  animation:bubblePop .5s cubic-bezier(.2,1.5,.4,1) both;
}
.bubble::before,.bubble::after{content:""; position:absolute; width:0; height:0; border-style:solid}
.bubble::before{bottom:-32px; left:48px; border-width:32px 26px 0 0; border-color:var(--ink) transparent transparent transparent}
.bubble::after{bottom:-20px; left:54px; border-width:21px 17px 0 0; border-color:var(--white) transparent transparent transparent}
@keyframes bubblePop{0%{transform:scale(.6) rotate(-4deg); opacity:0}100%{transform:scale(1) rotate(0); opacity:1}}

/* chunky comic buttons */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--comic); font-weight:400; font-size:26px; letter-spacing:.02em;
  padding:16px 34px; border:var(--line) solid var(--ink); border-radius:16px;
  cursor:pointer; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-mid); transition:transform .08s, box-shadow .08s;
  user-select:none;
}
.btn:hover{transform:translate(2px,2px); box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(7px,7px); box-shadow:0 0 0 var(--ink)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-black{background:var(--ink); color:var(--white)}
.btn-black:hover{background:#333}
.btn-cream{background:var(--cream); color:var(--ink)}

/* parody stamp */
.stamp{
  font-family:var(--comic); font-weight:400; color:var(--brick);
  border:5px solid var(--brick); border-radius:10px; padding:8px 16px;
  font-size:19px; letter-spacing:.09em; transform:rotate(-9deg);
  background:rgba(255,244,214,.82); box-shadow:3px 3px 0 rgba(192,86,74,.3);
  white-space:nowrap;
}

/* ---------- HERO ---------- */
.hero{padding:34px 0 10px; position:relative}
.masthead{
  display:flex; align-items:center; justify-content:center; gap:26px;
  margin:0 auto 26px; width:1480px; max-width:94vw; position:relative;
}
.masthead .tick{
  font-family:var(--comic); font-size:38px; flex:0 0 auto; background:var(--ink); color:var(--gold);
  border:var(--line) solid var(--ink); border-radius:16px; padding:8px 24px 12px;
  box-shadow:var(--shadow-mid); transform:rotate(-3deg); white-space:nowrap;
}
.masthead h1{
  font-size:82px; margin:0; text-align:center; white-space:nowrap;
  position:relative; flex:0 1 auto;
}
.shine{position:relative; display:inline-block; overflow:hidden}
.shine::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 48%,transparent 58%);
  mix-blend-mode:overlay; transform:translateX(-120%);
  animation:shine 5.5s ease-in-out infinite; pointer-events:none;
}
@keyframes shine{0%,72%{transform:translateX(-120%)}92%,100%{transform:translateX(120%)}}

.banner-frame{
  position:relative; width:1480px; max-width:94vw; margin:0 auto;
  border:9px solid var(--ink); border-radius:22px; overflow:hidden;
  box-shadow:14px 14px 0 var(--ink), 0 0 0 5px var(--gold) inset;
  background:var(--sky);
}
.banner-frame img{display:block; width:100%; height:auto}
.banner-frame .stamp{position:absolute; left:22px; bottom:20px; z-index:4}

.tagline{
  text-align:center; font-family:var(--comic); font-size:46px; margin:30px 0 10px;
  color:var(--ink);
}
.tagline em{color:var(--gold-deep); font-style:normal; -webkit-text-stroke:2px var(--ink); paint-order:stroke fill}
.hero-sub{text-align:center; font-size:21px; max-width:860px; margin:0 auto 30px; color:var(--ink-soft)}

/* CA console */
.ca-panel{
  width:1180px; max-width:94vw; margin:0 auto; padding:30px 34px;
  display:grid; grid-template-columns:1fr auto auto auto; gap:18px; align-items:center;
  background:var(--cream); border:var(--line) solid var(--ink); border-radius:22px;
  box-shadow:var(--shadow-hard); position:relative;
}
.ca-panel::before{
  content:"CONTRACT ADDRESS"; position:absolute; top:-19px; left:34px;
  font-family:var(--comic); font-size:17px; letter-spacing:.14em;
  background:var(--ink); color:var(--gold); padding:5px 14px; border-radius:8px;
  border:4px solid var(--ink);
}
.ca-box{
  background:var(--white); border:6px solid var(--ink); border-radius:14px;
  padding:14px 18px; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-size:19px; font-weight:800; letter-spacing:.01em;
  user-select:all; -webkit-user-select:all; word-break:break-all; line-height:1.3;
}
.copied{
  position:absolute; right:30px; top:-62px; display:flex; align-items:center; gap:10px;
  background:var(--gold); border:6px solid var(--ink); border-radius:14px;
  padding:9px 18px; font-family:var(--comic); font-size:24px;
  box-shadow:var(--shadow-soft); opacity:0; transform:translateY(12px) scale(.8);
  transition:all .28s cubic-bezier(.2,1.6,.4,1); pointer-events:none;
}
.copied.on{opacity:1; transform:translateY(0) scale(1)}
.copied svg{width:32px; height:32px; animation:coinSpin 1.6s linear infinite}
@keyframes coinSpin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ---------- comic strip ---------- */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:start}
.panel{position:relative}
.panel .art{
  position:relative; aspect-ratio:7/5; border:var(--line) solid var(--ink); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-mid); background:var(--sky);
}
.panel .art img{width:100%; height:100%; object-fit:cover; display:block}
.panel .art svg{width:100%; height:100%; display:block}
.panel .cap{
  margin-top:-26px; margin-left:14px; position:relative; z-index:3; width:88%;
  background:var(--cream); border:6px solid var(--ink); border-radius:12px;
  padding:14px 18px; font-family:var(--comic); font-size:23px; line-height:1.14;
  box-shadow:var(--shadow-soft);
}
.panel .num{
  position:absolute; top:-18px; left:-16px; z-index:4;
  width:54px; height:54px; border-radius:50%; background:var(--gold);
  border:6px solid var(--ink); display:grid; place-items:center;
  font-family:var(--comic); font-size:26px; box-shadow:4px 4px 0 var(--ink);
}
.arrowlink{
  position:absolute; top:40%; right:-30px; width:36px; z-index:5; color:var(--ink);
  animation:nudge 1.9s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}

/* ---------- full-bleed scenes ---------- */
.scene{
  position:relative; width:100%; margin:40px 0;
  border-top:var(--line) solid var(--ink); border-bottom:var(--line) solid var(--ink);
  overflow:hidden; background:var(--sky);
}
.scene .art{display:block; width:100%; height:auto}
.scene svg.art{height:560px; width:100%}
.scene .label{
  position:absolute; font-family:var(--comic); z-index:6;
  background:var(--cream); border:6px solid var(--ink); border-radius:12px;
  padding:11px 20px; font-size:25px; box-shadow:var(--shadow-soft); white-space:nowrap;
}
.label-ribbon{
  top:9%; left:31%; transform:translateX(-50%) rotate(-2deg);
  background:var(--gold); font-size:23px;
}
.label-sign{
  top:33%; left:79%; right:auto; transform:translate(-50%,-50%) rotate(-3deg);
  background:transparent; border:0; box-shadow:none;
  font-family:var(--hand); font-size:24px; color:#5A3B1E;
  animation:signwob 5s ease-in-out infinite; white-space:normal; width:170px; text-align:center;
  line-height:1.12; padding:0;
}
@keyframes signwob{0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(1deg)}}
@keyframes swing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-3deg)}}

.scene-intro{
  width:980px; max-width:92vw; margin:34px auto 0; text-align:center;
  font-size:21px; color:var(--ink-soft);
}

/* ---------- cast ---------- */
.cast-stage{position:relative; border:var(--line) solid var(--ink); border-radius:22px;
  overflow:hidden; box-shadow:var(--shadow-hard); background:var(--sky)}
.cast-stage img{display:block; width:100%; height:auto}
.cast-stage svg{display:block; width:100%; height:540px}
.cast-notes{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:34px}
.note{
  background:var(--cream); border:var(--line) solid var(--ink); border-radius:16px;
  padding:20px 22px; box-shadow:var(--shadow-mid); position:relative;
}
.note:nth-child(odd){transform:rotate(-.9deg)}
.note:nth-child(even){transform:rotate(.9deg)}
.note h3{font-size:27px; margin:0 0 10px}
.note p{margin:0; font-size:17px; color:var(--ink-soft); line-height:1.45}
.note .quip{
  margin-top:14px; display:block; font-family:var(--comic); font-size:20px;
  background:var(--white); border:5px solid var(--ink); border-radius:11px; padding:10px 14px;
}
.note::before{
  content:""; position:absolute; top:-15px; left:50%; width:62px; height:22px;
  transform:translateX(-50%) rotate(-3deg); background:rgba(243,186,47,.75);
  border:3px solid rgba(17,17,17,.45); border-radius:3px;
}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:34px}
.card{position:relative; background:var(--cream); border:var(--line) solid var(--ink);
  border-radius:18px; box-shadow:var(--shadow-hard); overflow:visible}
.card.c-wide{grid-column:span 3}
.card.c-sq{grid-column:span 2}
.card:nth-child(3n+1){transform:rotate(-.6deg)}
.card:nth-child(3n){transform:rotate(.6deg)}
.card .frame{position:relative; background:var(--sky); border-bottom:var(--line) solid var(--ink);
  border-radius:11px 11px 0 0; overflow:hidden}
.card .frame img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.card .frame svg{display:block; width:100%; aspect-ratio:4/3}
.card .cap{padding:18px 22px; font-family:var(--comic); font-size:24px; line-height:1.14}
.card .sub{display:block; font-family:var(--body); font-weight:800; font-size:15px;
  color:var(--ink-soft); margin-top:8px; line-height:1.4}
.card .onart{
  position:absolute; z-index:5; font-family:var(--comic);
  border:6px solid var(--ink); border-radius:12px; padding:9px 16px; font-size:22px;
  box-shadow:var(--shadow-soft);
}
.onart.banner-allgood{
  top:22%; left:50%; transform:translate(-50%,-50%) rotate(-1deg);
  background:transparent; border:0; box-shadow:none;
  font-size:40px; color:var(--ink);
}
.onart.door-closed{top:16%; right:9%; background:var(--white); font-size:19px; transform:rotate(6deg)}

.pow{
  position:absolute; z-index:7; font-family:var(--comic); font-size:28px; color:var(--ink);
  background:var(--gold); border:6px solid var(--ink); padding:7px 15px;
  clip-path:polygon(8% 0,92% 6%,100% 48%,90% 100%,12% 94%,0 50%);
  opacity:0; transform:scale(.4) rotate(-12deg);
}
.pow.on{animation:powIn .5s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes powIn{to{opacity:1; transform:scale(1) rotate(-8deg)}}

/* ---------- finale ---------- */
.finale{position:relative; margin-top:60px}
.finale .scene{margin-bottom:0}
.label-pigeonsign{
  top:74%; left:21.6%; bottom:auto; transform:translate(-50%,-50%) rotate(-1.5deg);
  background:transparent; border:0; box-shadow:none;
  font-family:var(--hand); font-size:22px; color:#4A3A22;
  white-space:normal; width:140px; text-align:center; line-height:1.15; padding:0;
}
.finale-head{text-align:center; padding:54px 0 10px}
.finale-head h2{font-size:84px; margin:0}
.finale-head p{font-family:var(--comic); font-size:34px; margin:18px 0 0; color:var(--gold-deep);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill}

footer{text-align:center; padding:48px 0 60px; font-size:16px; color:var(--ink-soft)}
footer .stamp{display:inline-block; margin-bottom:20px}
footer .legal{max-width:720px; margin:0 auto; line-height:1.6}

/* ---------- floating decor ---------- */
.decor{position:absolute; pointer-events:none; z-index:2}
.coin-spin{animation:coinSpin 3.4s linear infinite}
.coin-glint{animation:glint 4.2s ease-in-out infinite}
@keyframes glint{0%,86%,100%{filter:brightness(1)}92%{filter:brightness(1.7)}}
.receipt{
  position:fixed; width:46px; z-index:0; pointer-events:none; opacity:.42;
  animation:drift 34s linear infinite;
}
@keyframes drift{
  0%{transform:translate(-70px,74vh) rotate(0deg)}
  30%{transform:translate(5vw,30vh) rotate(130deg)}
  55%{transform:translate(2vw,80vh) rotate(250deg)}
  80%{transform:translate(95vw,36vh) rotate(380deg)}
  100%{transform:translate(108vw,78vh) rotate(500deg)}
}
.pigeon-perch{position:absolute; width:96px; z-index:6}
.pigeon-head{transform-origin:62% 62%; animation:tilt 6s ease-in-out infinite}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-13deg)}86%{transform:rotate(9deg)}}

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

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
}


/* ---------- delivered-art retirement ---------- */
.art-slot.has-img > svg, .art.has-img > svg{display:none}
.scene .art-slot.has-img img{display:block; width:100%; height:auto}
.scene .art-slot.has-img{height:auto}
.cast-stage .art-slot.has-img img{display:block; width:100%; height:auto}
.card .frame .art-slot.has-img img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.panel .art .art-slot.has-img img, .panel .art img{width:100%; height:100%; object-fit:cover}
/* painted scenes already carry their own sky/props — drop the decorative overlays */
.scene.art-real .decor{display:none}