/* ===== BONKO step-up : animations ===== */
/* Apparition au scroll */
.reveal{opacity:0;transform:translateY(38px) scale(.98);filter:blur(4px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}

/* Logo : flotte doucement + reflet de glace qui passe */
.hero-banner{animation:logo-float 5s ease-in-out infinite}
@keyframes logo-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hero-scene:after{content:'';position:absolute;inset:8% 22%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#ffffffaa 50%,transparent 60%);background-size:300% 100%;mix-blend-mode:soft-light;animation:ice-sheen 6s ease-in-out infinite;-webkit-mask:url('assets/bonko-logo.png') center/contain no-repeat;mask:url('assets/bonko-logo.png') center/contain no-repeat}
@keyframes ice-sheen{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}

/* Titre d'accroche : lettres qui tombent */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(-24px) rotate(-6deg);animation:word-drop .7s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes word-drop{to{opacity:1;transform:none}}

/* Reflet qui balaie les boutons */
.button,.outro-x,.footer-dex-link,.motion-toggle{isolation:isolate}
.button>*:first-child{position:relative;z-index:1}
.button:after,.outro-x:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff66 45%,#ffffffcc 50%,#ffffff66 55%,transparent 70%);background-size:250% 100%;background-position:130% 0;transition:background-position .9s ease}
.button:hover:after,.outro-x:hover:after{background-position:-30% 0}

/* Titres de section : givre qui brille au survol */
.monke-story h2,.meme-room-heading h2,.toy-panel>summary h2,.outro-copy h2{transition:transform .35s cubic-bezier(.3,1.5,.5,1),filter .35s}
.monke-story h2:hover,.meme-room-heading h2:hover,.outro-copy h2:hover{transform:scale(1.03) rotate(-1deg);filter:drop-shadow(0 0 14px #9fe0ff)}

/* Galerie : entrée en cascade + tilt */
#evidenceWall .evidence{transition:transform .35s cubic-bezier(.3,1.5,.5,1),filter .3s!important}
#evidenceWall .evidence:hover{transform:translateY(-8px) rotate(-2deg) scale(1.06)!important;filter:drop-shadow(0 10px 14px #0b2a4a44)}
#evidenceWall.in .evidence{animation:pop-in .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes pop-in{from{opacity:0;transform:translateY(20px) scale(.85)}}
.spotlight-picture{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.spotlight-picture.tilt{transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
#spotlightTitle.swap{animation:title-swap .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes title-swap{from{opacity:0;transform:translateY(14px)}}

/* Modèles MAKE A MEME */
.template-choice{transition:transform .25s cubic-bezier(.3,1.6,.5,1)!important}
.template-choice:hover{transform:translateY(-4px) scale(1.06)}
.meme-caption{transition:transform .3s}
.meme-canvas.bump .meme-caption{animation:cap-bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes cap-bump{40%{transform:scale(1.08) rotate(-1deg)}}

/* Traînée de flocons derrière le curseur */
.flake{position:fixed;pointer-events:none;z-index:60;color:#fff;text-shadow:0 0 6px #6fc4ff;font-size:12px;animation:flake-fall 1s ease-out forwards}
@keyframes flake-fall{to{opacity:0;transform:translate(var(--dx),28px) rotate(180deg) scale(.4)}}

/* Scintillements sur les sections sombres */
.monke-story .spark,.hood-outro .spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #9fe0ff;pointer-events:none;animation:twinkle 3s ease-in-out infinite;opacity:0}
@keyframes twinkle{50%{opacity:1;transform:scale(1.6)}}

@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}.hero-banner,.hero-scene:after,.spark,.hero h1 .w{animation:none!important;opacity:1;transform:none}.flake{display:none}}

/* === HOLD $BONKO / EARN $PENGU animé === */
#rewardsTitle{position:relative}
#rewardsTitle .rw-w{display:inline-block;opacity:0;transform:translateY(-40px) scale(.8) rotate(-6deg)}
#rewardsTitle.go .rw-w{animation:rw-drop .75s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes rw-drop{to{opacity:1;transform:none}}
#rewardsTitle .tk-bonko,#rewardsTitle .tk-pengu{background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(0 4px 0 var(--sh)) drop-shadow(0 0 18px var(--gl));animation:rw-shine 3.2s linear infinite,rw-wobble 2.6s ease-in-out infinite}
#rewardsTitle .tk-bonko{--sh:#7a3d12;--gl:#ffb36b66;background-image:linear-gradient(100deg,#e8a466 0%,#e8a466 40%,#fff3e0 50%,#e8a466 60%,#e8a466 100%)}
#rewardsTitle .tk-pengu{--sh:#1b5f9c;--gl:#6fc4ffaa;background-image:linear-gradient(100deg,#8fd8ff 0%,#8fd8ff 40%,#ffffff 50%,#8fd8ff 60%,#8fd8ff 100%);animation-delay:1.6s,1.3s}
@keyframes rw-shine{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes rw-wobble{0%,100%{transform:none}25%{transform:translateY(-4px) rotate(-1.5deg)}75%{transform:translateY(2px) rotate(1deg)}}
.rw-coin{position:absolute;top:-10px;width:22px;height:22px;border-radius:50%;pointer-events:none;z-index:0;
 background:radial-gradient(circle at 35% 30%,#fff 0 18%,#bfe6ff 30%,#5fb2ec 70%,#2f78b8 100%);box-shadow:0 0 12px #6fc4ffaa,inset 0 -2px 3px #0b2a4a55;
 animation:rw-coin 3.6s linear infinite;opacity:0}
.rw-coin:after{content:'P';position:absolute;inset:0;display:grid;place-items:center;font:900 11px/1 'Arial Black',sans-serif;color:#0b2a4a}
@keyframes rw-coin{0%{opacity:0;transform:translateY(0) rotateY(0)}10%{opacity:.9}85%{opacity:.9}100%{opacity:0;transform:translateY(360px) rotateY(720deg)}}
@media(prefers-reduced-motion:reduce){#rewardsTitle .rw-w{opacity:1;transform:none}#rewardsTitle .tk-bonko,#rewardsTitle .tk-pengu{animation:none}.rw-coin{display:none}}
.rw-coin{background:url('assets/pengu-coin.png') center/contain no-repeat!important;box-shadow:0 0 14px #6fc4ff99!important}
.rw-coin:after{content:none!important}
.rewards>*:not(.rw-coin){position:relative;z-index:1}
.rw-coin{z-index:0!important}