/* Sticker Pack motion — Wrong Moon Howl + slap/stamp/deal reveals */

/* ---------- Preloader: Wrong Moon Howl ---------- */
.preloader{display:none}
.js .preloader{
  display:grid;place-items:center;position:fixed;inset:0;z-index:10000;
  background:#0b1020;overflow:hidden;
}
.moon-scene{
  position:relative;z-index:2;width:min(420px,88vw);height:min(420px,70vh);
  display:grid;place-items:center;transition:opacity .35s var(--ease-out),transform .55s var(--ease-out);
}
.night-sky{position:absolute;inset:0;pointer-events:none}
.night-sky i{
  position:absolute;width:3px;height:3px;background:#fff;border-radius:1px;opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
  animation:starPop .4s var(--bounce) forwards;
}
.night-sky i:nth-child(1){left:12%;top:18%;animation-delay:.05s}
.night-sky i:nth-child(2){left:28%;top:8%;animation-delay:.12s}
.night-sky i:nth-child(3){left:55%;top:14%;animation-delay:.18s}
.night-sky i:nth-child(4){left:78%;top:10%;animation-delay:.08s}
.night-sky i:nth-child(5){left:88%;top:28%;animation-delay:.22s}
.night-sky i:nth-child(6){left:18%;top:42%;animation-delay:.15s}
.night-sky i:nth-child(7){left:70%;top:40%;animation-delay:.28s}
.night-sky i:nth-child(8){left:42%;top:6%;animation-delay:.2s}
@keyframes starPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}

.streetlight{
  position:absolute;top:6%;left:50%;transform:translateX(-50%) translateY(-120%) scale(.6);
  opacity:0;z-index:3;display:grid;place-items:center;
}
.streetlight .pole{
  position:absolute;top:58px;left:50%;width:6px;height:70px;background:#1a1a1a;
  border:2px solid #fff;transform:translateX(-50%);border-radius:3px;
}
.streetlight .lamp{
  position:relative;z-index:2;width:72px;height:72px;border-radius:50%;
  background:var(--sun);border:3px solid #fff;box-shadow:0 0 0 3px var(--ink), 6px 6px 0 var(--ink);
  display:grid;place-items:center;font-size:1.6rem;
}
.streetlight .glow{
  position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,63,.45),transparent 70%);
  opacity:0;pointer-events:none;
}
.preloader.phase-moon .streetlight{
  animation:moonDrop .5s var(--bounce) forwards;
}
.preloader.phase-moon .streetlight .glow{animation:glowOn .4s ease-out .25s forwards}
@keyframes moonDrop{
  0%{opacity:0;transform:translateX(-50%) translateY(-120%) scale(.6)}
  70%{opacity:1;transform:translateX(-50%) translateY(8%) scale(1.05)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes glowOn{to{opacity:1}}

.boot-wolves{
  position:relative;z-index:4;display:flex;justify-content:center;align-items:flex-end;
  gap:10px;margin-top:90px;
}
.boot-wolves img{
  width:110px;height:110px;border-radius:18px;opacity:0;
  outline:5px solid #fff;
}
.boot-w2{transform:rotate(10deg) scale(1.2);z-index:1;--rest:8deg}
.boot-w1{transform:rotate(-10deg) scale(1.2);z-index:2;margin-left:-18px;--rest:-6deg}
.preloader.phase-wolves .boot-w2{animation:slapOn .42s var(--bounce) forwards}
.preloader.phase-wolves .boot-w1{animation:slapOn .42s var(--bounce) .12s forwards}

.awoo-bubble{
  position:absolute;top:38%;right:2%;z-index:5;
  background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:18px;
  padding:10px 14px;font-family:var(--f-display);font-weight:800;font-size:1.35rem;
  box-shadow:4px 4px 0 var(--ink);transform:rotate(6deg) scale(.5);opacity:0;
}
.awoo-bubble::after{
  content:"";position:absolute;left:18px;bottom:-10px;width:14px;height:14px;background:#fff;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);
}
.preloader.phase-awoo .awoo-bubble{animation:popIn .28s var(--bounce) forwards}
.wrong-caption{
  position:absolute;bottom:8%;left:50%;transform:translateX(-50%) rotate(-4deg);
  font-family:var(--f-note);font-size:1.6rem;color:#fff;opacity:0;letter-spacing:.02em;
  text-shadow:2px 2px 0 #000;
}
.preloader.phase-awoo .wrong-caption{animation:popIn .28s var(--bounce) .15s forwards}

.cream-wipe{
  position:absolute;inset:0;z-index:6;background:var(--cream);
  clip-path:circle(0% at 50% 45%);pointer-events:none;
}
.preloader.phase-wipe .cream-wipe{animation:wipeOpen .7s cubic-bezier(.76,0,.24,1) forwards}
.preloader.phase-wipe .moon-scene{opacity:0;transform:scale(1.08)}
@keyframes wipeOpen{to{clip-path:circle(150% at 50% 45%)}}

.boot-skip{
  position:absolute;bottom:max(18px,env(safe-area-inset-bottom));right:18px;z-index:8;
  border:var(--border);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;
  font:700 .85rem var(--f-body);box-shadow:3px 3px 0 var(--ink);
}
.preloader.gone{display:none!important}
html.loading body{overflow:hidden}

@keyframes slapOn{
  0%{opacity:0;transform:scale(1.18) rotate(10deg)}
  70%{opacity:1;transform:scale(.97) rotate(-2deg)}
  100%{opacity:1;transform:scale(1) rotate(var(--rest, -4deg))}
}
@keyframes popIn{0%{opacity:0;transform:scale(.7) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(var(--rest,6deg))}}
@keyframes revealRise{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:none}}
@keyframes revealSlap{0%{opacity:0;transform:scale(1.14) rotate(8deg) translateY(18px)}70%{transform:scale(.98) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes revealStamp{0%{opacity:0;transform:scale(1.4) rotate(-8deg)}100%{opacity:1;transform:rotate(var(--rest,-2deg))}}
@keyframes revealDeal{0%{opacity:0;transform:translateY(40px) scale(.92) rotate(0)}100%{opacity:1;transform:none}}
@keyframes revealSwing{0%{opacity:0;transform:rotate(-8deg) translateY(-12px);transform-origin:top center}100%{opacity:1;transform:none}}
@keyframes revealToss{0%{opacity:0;transform:translateY(-30px) rotate(-8deg)}100%{opacity:1;transform:rotate(var(--rest,-2deg))}}
@keyframes navDrop{0%{opacity:0;transform:translateY(-16px)}100%{opacity:1;transform:none}}
@keyframes meetL{0%{opacity:0;transform:translateX(-48px)}100%{opacity:1;transform:none}}
@keyframes meetR{0%{opacity:0;transform:translateX(48px)}100%{opacity:1;transform:translate(4px,4px)}}
@keyframes ringDraw{to{stroke-dashoffset:0}}
@keyframes barFill{from{width:0}to{width:var(--w)}}
@keyframes badgeSpinIn{0%{opacity:0;transform:rotate(-90deg) scale(.6)}100%{opacity:1;transform:rotate(0) scale(1)}}

/* ---------- Hero entrance (after Wrong Moon wipe) ---------- */
.js .nav-shell{opacity:0}
.ready .nav-shell{animation:navDrop .28s var(--ease-out) both}

.js .hero-copy > *,
.js .sky-card{opacity:0;transform:translateY(24px)}
.ready .hero-copy > *{
  animation:revealRise .42s var(--ease-out) both;
}
.ready .hero-copy > *:nth-child(1){animation-name:revealStamp;animation-duration:.28s;animation-timing-function:var(--bounce);animation-delay:80ms}
.ready .hero-copy > *:nth-child(2){animation-delay:140ms}
.ready .hero-copy > *:nth-child(3){animation-delay:620ms}
.ready .hero-copy > *:nth-child(4){animation-delay:700ms;animation-name:revealSlap;animation-timing-function:var(--bounce)}
.ready .hero-copy > *:nth-child(5){animation-delay:820ms}
.ready .sky-card{animation:revealRise .6s var(--ease-out) .3s both}
.ready .sky-w2{opacity:0;animation:slapOn .42s var(--bounce) .7s both;--rest:8deg}
.ready .sky-w1{opacity:0;animation:slapOn .42s var(--bounce) .82s both;--rest:-6deg}
.ready .bubble.b1{opacity:0;animation:popIn .28s var(--bounce) 1s both;--rest:-4deg}
.ready .bubble.b2{opacity:0;animation:popIn .28s var(--bounce) 1.1s both;--rest:3deg}
.ready .story-moon{opacity:0;animation:slapOn .42s var(--bounce) .6s both;--rest:0deg}
.ready .nfa-badge{opacity:0;animation:badgeSpinIn .6s var(--bounce) 1.15s both}
.ready .word-blue::after{animation:underlineDraw .36s var(--ease-out) .55s forwards}
.ready .stamp-tomato{animation:revealStamp .42s var(--bounce) .85s both;--rest:-2deg}

/* ---------- Scroll reveals ---------- */
.js .reveal{opacity:0;will-change:transform,opacity}
.js .reveal.in{opacity:1}
.js .reveal[data-motion="rise"].in{animation:revealRise .28s var(--ease-out) both;animation-delay:var(--d,0ms)}
.js .reveal[data-motion="slap"].in{animation:revealSlap .42s var(--bounce) both;animation-delay:var(--d,0ms)}
.js .reveal[data-motion="stamp"].in{animation:revealStamp .42s var(--bounce) both;animation-delay:var(--d,0ms)}
.js .reveal[data-motion="deal"].in{animation:revealDeal .6s var(--bounce) both;animation-delay:var(--d,0ms)}
.js .reveal[data-motion="swing"].in{animation:revealSwing .6s var(--bounce) both;animation-delay:var(--d,0ms)}
.js .reveal[data-motion="toss"].in{animation:revealToss .42s var(--bounce) both;animation-delay:var(--d,0ms)}

/* Lore cards deal from stack feel */
.lore-grid .trading-card.reveal{transform-origin:50% 120%}
.trading-card.in .stat i::after{animation:barFill .5s var(--snap) both;animation-delay:var(--bar-d,.2s)}

/* Howl chamber: dashed ring draws when revealed */
.howl-chamber.reveal .ring-bg{stroke-dasharray:340;stroke-dashoffset:340}
.howl-chamber.reveal.in .ring-bg{animation:ringDraw .6s var(--snap) .15s forwards}
.howl-chamber.reveal.in .curved{animation:popIn .28s var(--bounce) .35s both;--rest:12deg}

/* Footer mark meet-in-the-middle */
.footer-mark .solid,.footer-mark .outline{opacity:0}
.footer-mark.in .solid{animation:meetL .6s var(--ease-out) both}
.footer-mark.in .outline{animation:meetR .6s var(--ease-out) both}

/* Community stickers slap from the side */
.community.in .pack-sticker.s1{animation:slapOn .42s var(--bounce) .2s both;--rest:-8deg}
.community.in .pack-sticker.s2{animation:slapOn .42s var(--bounce) .32s both;--rest:7deg}
.pack-sticker{opacity:0}
.community.in .pack-sticker{opacity:1}

/* Quiz result peel-in */
.quiz-anim{animation:revealSlap .42s var(--bounce) both}
.quiz-result{animation:revealDeal .5s var(--bounce) both}

.split .ch{display:inline-block}
.ready .split .ch{animation:rise .42s var(--ease-out) both;animation-delay:calc(var(--i)*60ms + .14s)}
@keyframes rise{0%{transform:translateY(24px);opacity:0}100%{transform:none;opacity:1}}
.split .ch.boing{animation:boing .42s var(--bounce)!important}
@keyframes boing{0%{transform:none}40%{transform:translateY(-8%) scale(1.05,.96)}100%{transform:none}}
.glitch{position:relative}
.caret{display:inline-block;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.eyes{position:absolute;inset:0;pointer-events:none;z-index:3}
.eye{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:2px solid var(--ink)}
.eye i{position:absolute;width:55%;height:55%;left:22%;top:22%;border-radius:50%;background:#111;transform:translate(var(--px,0px),var(--py,0px))}
.eye.blink{transform:translate(-50%,-50%) scaleY(.08)}
.eyes.hypno .eye i{animation:hypno .5s linear infinite}
@keyframes hypno{to{rotate:360deg}}

.howl-btn.charging{transform:scale(.94);box-shadow:0 0 0 var(--ink)}
.howl-btn.charging .hc-wolf{animation:microShake .12s linear infinite}
@keyframes microShake{50%{transform:rotate(1.5deg)}100%{transform:rotate(-1.5deg)}}
.wobble{animation:wobble 5s ease-in-out infinite}
.derp{animation:derp 4.5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes derp{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}50%{transform:rotate(2deg) translateY(-2px)}}

.story-moon.boop{animation:boop .35s var(--bounce)}
.story-moon.bothered{background:var(--tomato);color:#fff}
@keyframes boop{40%{transform:scale(1.12)}100%{transform:none}}
.comic.is-on{transform:translateY(-4px)}

.tilting{will-change:transform}
.brain-btn{border:2px solid var(--ink);background:var(--mint);border-radius:999px;padding:6px 10px;font:700 .75rem var(--f-mono);cursor:pointer;margin-bottom:8px;box-shadow:2px 2px 0 var(--ink)}
.trading-card.smart{outline:3px solid var(--cobalt);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:opacity .15s linear!important}
  .reveal,.pack-sticker,.hero-copy > *,.sky-card,.sky-w1,.sky-w2,.bubble,.nav-shell,.footer-mark .solid,.footer-mark .outline{opacity:1!important;transform:none!important}
  .ticker-track,.gallery-track,.nfa-badge{animation:none!important}
  .btn:hover,.quiz-opt:hover{transform:none;box-shadow:var(--shadow)}
  .preloader{display:none!important}
}