/* ============================================
   ANIMATIONS
   ============================================ */

/* --- Basics --- */
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.15)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes popIn{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* --- Stars & Petals --- */
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes petalFall{0%{transform:translateY(-20px) translateX(0);opacity:0}10%{opacity:.8}90%{opacity:.7}100%{transform:translateY(calc(var(--vh,100vh) + 20px)) translateX(var(--drift));opacity:0}}
@keyframes petalSpin{0%{transform:rotate(0) rotateY(0)}50%{transform:rotate(180deg) rotateY(90deg)}100%{transform:rotate(360deg) rotateY(0)}}
@keyframes fireflyFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(var(--dx1),var(--dy1))}50%{transform:translate(var(--dx2),var(--dy2))}75%{transform:translate(var(--dx3),var(--dy3))}}
@keyframes fireflyGlow{0%,100%{opacity:.2}50%{opacity:1}}

/* --- Hearts --- */
@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}70%{transform:scale(1)}}
@keyframes heartRise{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-120px) scale(.3);opacity:0}}
@keyframes heartShatter{0%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(var(--hx),var(--hy)) rotate(var(--hr));opacity:.8}100%{transform:translate(var(--hx2),calc(var(--hy2) + 50px));opacity:0}}

/* --- Sparkle --- */
@keyframes sparkleOut{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(0);opacity:0}}

/* --- Nature --- */
@keyframes bloomPetal{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes growStem{from{height:0}to{height:var(--h)}}
@keyframes swingVine{0%,100%{transform:rotate(var(--swing-start,  -12deg))}50%{transform:rotate(var(--swing-end, 12deg))}}
@keyframes monkeySwing{0%,100%{transform:translateX(0) rotate(-3deg)}50%{transform:translateX(6px) rotate(3deg)}}
@keyframes butterflyFloat{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(var(--bx1),var(--by1)) scaleX(.3)}50%{transform:translate(var(--bx2),var(--by2)) scaleX(1)}75%{transform:translate(var(--bx3),var(--by3)) scaleX(.3)}100%{transform:translate(0,0) scaleX(1)}}

/* --- Weather --- */
@keyframes rainDrop{0%{transform:translateY(-20px);opacity:0}10%{opacity:.8}100%{transform:translateY(100vh);opacity:.4}}
@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* --- Creature animations --- */
@keyframes creatureIdle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-2deg)}50%{transform:translateY(-2px) rotate(0)}75%{transform:translateY(-5px) rotate(2deg)}}
@keyframes creatureDance{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(8deg) scale(1.1)}45%{transform:rotate(-5deg) scale(1.05)}60%{transform:rotate(5deg) scale(1)}80%{transform:rotate(-2deg)}100%{transform:rotate(0) scale(1)}}

/* --- Bear animations --- */
@keyframes bearDance{0%,100%{transform:rotate(0) translateY(0)}12%{transform:rotate(-8deg) translateY(-5px)}25%{transform:rotate(8deg) translateY(0)}37%{transform:rotate(-6deg) translateY(-8px)}50%{transform:rotate(6deg) translateY(0)}62%{transform:rotate(-4deg) translateY(-3px)}75%{transform:rotate(4deg) translateY(0)}87%{transform:rotate(-2deg) translateY(-2px)}}
@keyframes bearCry{0%,80%{transform:translateY(0)}10%{transform:translateY(2px)}20%{transform:translateY(-1px)}30%{transform:translateY(2px)}40%{transform:translateY(-1px)}50%{transform:translateY(2px)}}
@keyframes bearThrowHeart{0%{transform:translateX(0) translateY(0) scale(1);opacity:1}50%{transform:translateX(var(--tx)) translateY(-60px) scale(.8);opacity:.9}100%{transform:translateX(var(--tx2)) translateY(20px) scale(.4);opacity:0}}

/* --- Fireworks --- */
@keyframes fireworkLaunch{0%{transform:translateY(0);opacity:1}100%{transform:translateY(var(--launch-h,-200px));opacity:.8}}
@keyframes fireworkExplode{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--ex),var(--ey)) scale(0);opacity:0}}

/* --- Text effects --- */
@keyframes textGlow{0%,100%{text-shadow:0 0 10px rgba(255,143,175,.3)}50%{text-shadow:0 0 25px rgba(255,143,175,.7),0 0 50px rgba(231,84,128,.3)}}
@keyframes slowReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes breatheScale{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}

/* --- Page transitions --- */
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}

/* --- Apply animations via classes --- */
.anim-star{animation:twinkle var(--dur) ease-in-out infinite;animation-delay:var(--delay)}
.anim-petal{animation:petalFall var(--fall-dur) linear infinite;animation-delay:var(--delay)}
.anim-petal svg{animation:petalSpin var(--spin-dur) ease-in-out infinite}
.anim-firefly{animation:fireflyFloat var(--dur) ease-in-out infinite,fireflyGlow 2s ease-in-out infinite;animation-delay:var(--delay)}
.anim-float{animation:float 3s ease-in-out infinite}
.anim-pulse{animation:pulse 2s ease-in-out infinite}
.anim-heartbeat{animation:heartBeat 1.5s ease-in-out infinite}
.anim-fadeUp{animation:fadeUp .8s ease both}
.anim-bounce{animation:bounceIn .8s ease both}
.anim-pop{animation:popIn .6s ease both}
.anim-confetti{animation:confettiFall var(--dur) linear infinite;animation-delay:var(--d)}
.anim-rain{animation:rainDrop var(--dur) linear infinite;animation-delay:var(--d)}
.anim-butterfly{animation:butterflyFloat var(--dur) ease-in-out infinite;animation-delay:var(--d)}
.anim-vine{animation:swingVine var(--dur) ease-in-out infinite;animation-delay:var(--d)}
.anim-monkey{animation:monkeySwing var(--dur) ease-in-out infinite;animation-delay:var(--d)}
.anim-sparkle{animation:sparkleOut .6s ease forwards}
.anim-heart-rise{animation:heartRise 1s ease-out forwards}
.anim-bear-dance{animation:bearDance 1.2s ease-in-out infinite}
.anim-bear-cry{animation:bearCry 2s ease-in-out infinite}
.anim-text-glow{animation:textGlow 3s ease-in-out infinite}
.anim-breathe{animation:breatheScale 4s ease-in-out infinite}
.anim-grow-stem{animation:growStem 1.5s ease both;animation-delay:var(--d)}
.anim-bloom{animation:bloomPetal 1s ease both;animation-delay:var(--bd)}