:root{
  --night:#1b1012;
  --cocoa:#2c1b1b;
  --cocoa2:#3e2725;
  --blush:#f6d3d0;
  --cream:#fff3ee;
  --pink:#ff7fa8;
  --hot:#ff4f8b;
  --gold:#f2b84b;
  --violet:#8f74d6;
  --ink:#2a1716;
  --display:'Bagel Fat One',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--night)}
body{
  min-width:1180px;background:var(--night);color:var(--cream);
  font-family:var(--body);font-weight:600;overflow-x:hidden;font-synthesis:none;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'%3E%3Cg fill='%23ff7fa8' stroke='%232a1716' stroke-width='4'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='39' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='51' cy='26' rx='6' ry='8'/%3E%3C/g%3E%3C/svg%3E") 16 16,auto;
}
a,button{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 64 64'%3E%3Cg fill='%23f2b84b' stroke='%232a1716' stroke-width='4'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='39' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='51' cy='26' rx='6' ry='8'/%3E%3C/g%3E%3C/svg%3E") 16 16,pointer}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
main,.foot,.nav{position:relative;z-index:1}
main{overflow-x:clip}

/* ---------- doodles ---------- */
.doodles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.doodle{position:absolute;width:var(--s);height:var(--s);opacity:var(--o);
  animation:drift var(--d) ease-in-out infinite alternate;}
.doodle svg{width:100%;height:100%;fill:currentColor}
@keyframes drift{
  from{transform:translate(0,0) rotate(var(--r0))}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--r1))}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-size:18px;letter-spacing:.02em;
  padding:12px 22px;border-radius:999px;border:3px solid var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;white-space:nowrap}
.btn.big{font-size:24px;padding:16px 32px}
.btn-buy{background:var(--pink);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn-ghost{background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn:hover{transform:translateY(-3px) rotate(-2deg);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-buy:hover{animation:jiggle .45s ease}
@keyframes jiggle{
  0%,100%{transform:translateY(-3px) rotate(0)}
  25%{transform:translateY(-3px) rotate(-4deg) scale(1.04)}
  50%{transform:translateY(-3px) rotate(3deg) scale(1.06)}
  75%{transform:translateY(-3px) rotate(-2deg) scale(1.03)}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;
  padding:14px 48px;background:rgba(27,16,18,.82);backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(255,127,168,.25)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:24px}
.brand img{width:44px;height:44px;border-radius:50%;border:3px solid var(--pink)}
.links{display:flex;gap:28px;margin-left:24px;font-weight:800;font-size:17px}
.links a{opacity:.85;transition:color .2s}
.links a:hover{color:var(--pink);opacity:1}
.nav-cta{margin-left:auto;display:flex;gap:12px}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:center;gap:24px;padding:40px 64px 72px;min-height:calc(100vh - 76px);overflow:hidden}
.hero-bg{position:absolute;inset:-60px;z-index:-1;
  background:
    radial-gradient(60% 70% at 72% 50%, rgba(255,127,168,.32), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(242,184,75,.16), transparent 70%),
    url(assets/banner.jpg) center/cover;
  filter:blur(38px) saturate(1.1);opacity:.55}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,16,18,.92) 30%,rgba(27,16,18,.45))}
.hero-copy{position:relative;z-index:2}
.tags{display:flex;gap:10px;margin-bottom:18px}
.tag{font-family:var(--display);font-size:17px;padding:6px 16px;border-radius:999px;border:3px solid var(--ink);
  color:var(--ink);box-shadow:0 4px 0 var(--ink);animation:wiggle 2.6s ease-in-out infinite}
.tag:nth-child(2){animation-delay:.3s}.tag:nth-child(3){animation-delay:.6s}
.t-pink{background:var(--pink)}.t-gold{background:var(--gold)}.t-cream{background:var(--cream)}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}

.title{font-family:var(--display);font-weight:400;line-height:.88;letter-spacing:-.01em;
  font-size:clamp(96px,8.6vw,138px);margin:4px 0 22px;color:var(--cream);
  text-shadow:0 6px 0 var(--ink)}
.title .drop{display:block}
.title .accent{color:var(--pink);-webkit-text-stroke:0}
.title .ch{display:inline-block;opacity:0;transform:translateY(-120px) rotate(-14deg);
  animation:drop .7s cubic-bezier(.3,1.6,.5,1) forwards}
.title .ch:hover{animation:boing .5s ease;opacity:1;transform:none}
@keyframes drop{to{opacity:1;transform:none}}
@keyframes boing{0%{transform:none}30%{transform:translateY(-18px) scale(1.15,.9)}60%{transform:translateY(4px) scale(.95,1.08)}100%{transform:none}}

.lede{font-size:23px;line-height:1.45;max-width:600px;color:var(--blush);margin-bottom:26px}
.lede b{color:var(--gold);font-weight:900}

.ca-box{display:flex;align-items:center;gap:14px;max-width:640px;padding:12px 12px 12px 18px;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink)}
.ca-label{font-family:var(--display);font-size:16px;background:var(--gold);border:2px solid var(--ink);border-radius:10px;padding:4px 10px}
.ca{flex:1;min-width:0;font-family:var(--mono);font-size:18px;word-break:break-all}
.copy{font-family:var(--display);font-size:17px;padding:10px 20px;border-radius:14px;border:3px solid var(--ink);
  background:var(--pink);color:var(--ink);transition:transform .15s}
.copy:hover{transform:rotate(-4deg) scale(1.06)}
.copy.done{background:var(--gold)}
.ctas{display:flex;gap:16px;margin-top:24px}

.hero-art{position:relative;justify-self:center;width:min(560px,40vw);aspect-ratio:1;z-index:2}
.ring{position:absolute;inset:-14%;width:128%;height:128%;animation:spin 28s linear infinite}
.ring text{font-family:var(--display);font-size:25px;letter-spacing:.14em;fill:var(--pink)}
@keyframes spin{to{transform:rotate(360deg)}}
.portrait{position:absolute;inset:0;border:none;padding:0;background:none;border-radius:50%;
  transform:rotate(var(--rx,0deg));transition:transform .3s ease}
.portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:6px solid var(--ink);box-shadow:0 0 0 6px var(--pink),0 0 70px 10px rgba(255,79,139,.45),0 18px 0 6px var(--ink)}
.portrait:hover{transform:scale(1.02) rotate(-2deg)}
.hero-art.ringing .portrait{animation:shake .5s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:rotate(-4deg) scale(1.03)}40%{transform:rotate(4deg) scale(1.05)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
.bell-badge{position:absolute;right:-2%;bottom:6%;width:112px;height:112px;padding:14px;border-radius:50%;
  background:var(--cream);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);
  transform-origin:50% 0;animation:swing 2.2s ease-in-out infinite}
.bell-badge svg{width:100%;height:100%}
@keyframes swing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.hero-art.ringing .bell-badge{animation:swing .18s ease-in-out 6}
.bubble{position:absolute;left:-6%;top:6%;font-family:var(--display);font-size:24px;color:var(--ink);
  background:var(--cream);border:3px solid var(--ink);border-radius:22px;padding:10px 20px;box-shadow:0 5px 0 var(--ink);
  animation:bob 2.4s ease-in-out infinite}
.bubble::after{content:"";position:absolute;right:26px;bottom:-14px;width:22px;height:22px;background:var(--cream);
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-1deg)}}

/* ---------- marquee ---------- */
.marquee{position:relative;z-index:3;background:var(--pink);color:var(--ink);border-block:4px solid var(--ink);
  transform:rotate(-2deg);margin:-30px -20px 0;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.track{display:flex;align-items:center;gap:34px;width:max-content;padding:16px 0;animation:marq 26s linear infinite}
.track span{font-family:var(--display);font-size:36px;white-space:nowrap}
.track i{width:34px;height:34px;flex:none;background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='39' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='51' cy='26' rx='6' ry='8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='26' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='39' cy='15' rx='6' ry='8.5'/%3E%3Cellipse cx='51' cy='26' rx='6' ry='8'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- banner ---------- */
.banner{position:relative;margin-top:-10px;overflow:hidden;background:var(--night);perspective:1400px}
.banner-inner{transform:scale(1.05) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .25s ease-out}
.banner-inner img{width:100%;height:auto}
.banner-cap{position:absolute;left:56px;bottom:56px;max-width:420px}
.banner-cap h2{font-family:var(--display);font-weight:400;font-size:64px;line-height:.95;color:var(--cream);
  text-shadow:0 5px 0 var(--ink),0 0 30px rgba(0,0,0,.6);transform:rotate(-3deg)}
.kicker{display:inline-block;font-family:var(--display);font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 16px;margin-bottom:12px;
  box-shadow:0 4px 0 var(--ink);transform:rotate(-3deg)}

/* ---------- rules: full-bleed scenes ---------- */
.rules{background:var(--blush);color:var(--ink)}
.rules-head{padding:110px 64px 70px;text-align:center}
.rules-head h2{font-family:var(--display);font-weight:400;font-size:96px;line-height:.95;margin-top:8px}
.rules-head .accent{color:var(--hot)}
.scene{position:relative;overflow:hidden;border-top:6px solid var(--ink);background:var(--night)}
.scene img{width:100%;height:auto;transform:scale(1.08);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.scene.in img{transform:scale(1)}
.scene::after{content:"";position:absolute;inset:0;pointer-events:none}
.side-l::after{background:linear-gradient(15deg,rgba(27,16,18,.9) 0,rgba(27,16,18,.55) 26%,transparent 50%)}
.side-r::after{background:linear-gradient(-15deg,rgba(27,16,18,.9) 0,rgba(27,16,18,.55) 26%,transparent 50%)}
.scene-cap{position:absolute;z-index:2;bottom:150px;max-width:560px;color:var(--cream);
  opacity:0;transition:opacity .7s ease .2s, transform .8s cubic-bezier(.3,1.5,.5,1) .2s}
.side-l .scene-cap{left:64px;transform:translateX(-80px) rotate(-4deg)}
.side-r .scene-cap{right:64px;text-align:right;transform:translateX(80px) rotate(4deg)}
.side-l.in .scene-cap{opacity:1;transform:rotate(-2deg)}
.side-r.in .scene-cap{opacity:1;transform:rotate(2deg)}
.scene-cap .num{display:inline-block;font-family:var(--display);font-size:20px;color:var(--ink);background:var(--pink);
  border:3px solid var(--ink);border-radius:999px;padding:4px 16px;box-shadow:0 4px 0 var(--ink);animation:wiggle 2.6s ease-in-out infinite}
.scene-cap h3{font-family:var(--display);font-weight:400;font-size:88px;line-height:.92;margin:14px 0;
  text-shadow:0 6px 0 var(--ink),0 0 40px rgba(0,0,0,.5)}
.scene-cap p{font-size:24px;font-weight:800;color:var(--blush);text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* ---------- finale ---------- */
.finale{position:relative;min-height:clamp(700px,90vh,880px);display:flex;align-items:center;padding:80px 64px;overflow:hidden;background:var(--cocoa)}
.finale-bg{position:absolute;inset:0;background-size:cover;background-position:100% 50%}
.finale-fb{position:absolute;right:0;top:50%;height:120%;width:auto;max-width:none;transform:translateY(-50%);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 38%);mask:linear-gradient(90deg,transparent 0,#000 38%)}
.finale-bg.has-bg .finale-fb{display:none}
.finale-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,16,18,.92) 0,rgba(27,16,18,.7) 40%,transparent 62%)}
.finale-copy{position:relative;z-index:2;max-width:660px}
.big{font-family:var(--display);font-weight:400;font-size:150px;line-height:.86;margin:4px 0 30px;text-shadow:0 6px 0 var(--ink)}
.accent{color:var(--pink)}
.finale .big .accent{display:inline-block;animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;gap:28px;padding:28px 64px;background:var(--night);border-top:2px solid rgba(255,127,168,.25);font-size:15px;color:rgba(255,243,238,.7)}
.foot .brand{font-size:20px;color:var(--cream)}
.foot .site{font-family:var(--mono);color:var(--pink)}
.foot .site:hover{text-decoration:underline}
.foot p{margin-left:auto;max-width:520px;text-align:right}
/* visitor counter: the script un-hides the number only when a real count arrives;
   gate on the number span itself, not any span (the label is always visible) */
.visits{display:none;align-items:baseline;gap:12px;flex:none;padding:10px 20px;border-radius:999px;
  background:rgba(255,127,168,.12);border:3px solid var(--pink)}
.visits:has(#website_visits_aaron:not([hidden])){display:flex}
.visits-label{font-family:var(--display);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
#website_visits_aaron{font-family:var(--display);font-size:26px;color:var(--gold);line-height:1}

/* ---------- reveal + fx ---------- */
.reveal{opacity:0;transform:translateY(40px) rotate(-1deg);transition:opacity .7s ease, transform .7s cubic-bezier(.3,1.4,.5,1)}
.reveal.in{opacity:1;transform:none}
.fx{position:fixed;z-index:50;pointer-events:none;left:0;top:0;width:var(--s);height:var(--s);
  animation:pop 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.fx svg{width:100%;height:100%;fill:currentColor}
@keyframes pop{
  0%{transform:translate(var(--x),var(--y)) scale(.2) rotate(0);opacity:1}
  100%{transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) + var(--dy))) scale(1) rotate(var(--rot));opacity:0}
}
.burst{position:fixed;z-index:51;pointer-events:none;font-family:var(--display);font-size:44px;color:var(--ink);
  background:var(--gold);border:4px solid var(--ink);padding:10px 22px;
  clip-path:polygon(50% 0,61% 22%,85% 8%,78% 34%,100% 42%,80% 58%,94% 84%,66% 76%,54% 100%,42% 78%,14% 92%,22% 64%,0 50%,22% 38%,10% 12%,38% 22%);
  padding:44px 56px;transform:translate(-50%,-50%) scale(.3) rotate(-10deg);animation:burst .8s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes burst{
  40%{transform:translate(-50%,-50%) scale(1.1) rotate(6deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(-4deg);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .title .ch,.reveal,.scene-cap{opacity:1;transform:none}
}