/* ============================================================
 * EMOJI UNIVERSE - ANIMATIONS
 * Every keyframe, every easing, every joyful little motion.
 * ============================================================ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes bobSmall {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.85) translateY(40px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes copyPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--color-accent-soft); }
  40%  { transform: scale(1.15); box-shadow: 0 0 0 20px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

@keyframes shine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes heroDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.05); }
  100% { transform: translate(3%, -2%) scale(1); }
}

@keyframes auroraFloat {
  0%   { transform: translate(0, 0) scale(1) rotate(0); }
  33%  { transform: translate(8%, -6%) scale(1.1) rotate(8deg); }
  66%  { transform: translate(-6%, 8%) scale(0.95) rotate(-6deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes floatStar {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(20px, -30px) rotate(8deg); }
  50% { transform: translate(-20px, 20px) rotate(-12deg); }
  75% { transform: translate(15px, -10px) rotate(6deg); }
}

@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}

@keyframes wiggle {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80%      { transform: translateX(4px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80%      { transform: translateX(8px); }
}

@keyframes confettiFall {
  0%   { transform: translateY(-100vh) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes sparkle {
  0%, 100% { transform: scale(0); opacity: 0; }
  50%      { transform: scale(1); opacity: 1; }
}

@keyframes hue {
  0%   { filter: hue-rotate(0); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes rainbowShift {
  0%   { filter: hue-rotate(0); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes popOut {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoomOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}

@keyframes spinFlip {
  0%   { transform: rotateY(0) scale(1); }
  50%  { transform: rotateY(180deg) scale(0.9); }
  100% { transform: rotateY(360deg) scale(1); }
}

@keyframes glitchA {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitchB {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(2px, -2px); }
  40% { transform: translate(2px, 2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(-2px, 2px); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@keyframes spinUp {
  0%   { transform: rotate(0) scale(0); opacity: 0; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes flip {
  0%   { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes rubberBand {
  0%   { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(1.25, 0.75, 1); }
  40%  { transform: scale3d(0.75, 1.25, 1); }
  50%  { transform: scale3d(1.15, 0.85, 1); }
  65%  { transform: scale3d(0.95, 1.05, 1); }
  75%  { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes jello {
  0%, 11%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33% { transform: skewX(6.25deg) skewY(6.25deg); }
  44% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

@keyframes tada {
  0%   { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  100% { transform: scale3d(1, 1, 1); }
}

@keyframes heartBeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); }
}

@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0; }
}

@keyframes swing {
  20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  100% { transform: rotate3d(0, 0, 1, 0deg); }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
  40%, 43% { transform: translate3d(0, -30px, 0); }
  70% { transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); }
}

@keyframes flipInX {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); }
  60%  { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  100% { transform: perspective(400px); }
}

@keyframes flipInY {
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); }
  60%  { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  100% { transform: perspective(400px); }
}

@keyframes lightSpeedIn {
  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60%  { transform: skewX(20deg); opacity: 1; }
  80%  { transform: skewX(-5deg); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes hinge {
  0%   { transform-origin: top left; }
  20%, 60% { transform: rotate3d(0, 0, 1, 80deg); }
  40%, 80% { transform: rotate3d(0, 0, 1, 60deg); opacity: 1; }
  100% { transform: translate3d(0, 700px, 0); opacity: 0; }
}

@keyframes rollIn {
  from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rollOut {
  from { opacity: 1; }
  100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 var(--color-accent-soft); }
  50%      { box-shadow: 0 0 24px var(--color-accent-soft); }
}

@keyframes typingDots {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

@keyframes confetti1 {
  0% { transform: translateY(-100vh) rotate(0); }
  100% { transform: translateY(100vh) rotate(360deg); }
}

@keyframes confetti2 {
  0% { transform: translateY(-100vh) rotate(0); }
  100% { transform: translateY(100vh) rotate(-720deg); }
}

@keyframes confetti3 {
  0% { transform: translateY(-100vh) translateX(0) rotate(0); }
  100% { transform: translateY(100vh) translateX(150px) rotate(540deg); }
}

@keyframes confetti4 {
  0% { transform: translateY(-100vh) translateX(0) rotate(0); }
  100% { transform: translateY(100vh) translateX(-150px) rotate(-540deg); }
}

@keyframes emojiRain {
  0% {
    transform: translateY(-10vh) scale(0.4) rotate(0);
    opacity: 0;
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    transform: translateY(110vh) scale(1.4) rotate(360deg);
    opacity: 0;
  }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes glitchSlice {
  0%, 100% { clip-path: inset(0 0 0 0); }
  10% { clip-path: inset(20% 0 60% 0); }
  20% { clip-path: inset(70% 0 10% 0); }
  30% { clip-path: inset(30% 0 50% 0); }
  40% { clip-path: inset(85% 0 5% 0); }
  50% { clip-path: inset(40% 0 30% 0); }
  60% { clip-path: inset(10% 0 70% 0); }
  70% { clip-path: inset(60% 0 25% 0); }
  80% { clip-path: inset(45% 0 35% 0); }
  90% { clip-path: inset(15% 0 65% 0); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes typewriterCaret {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -16px); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, 12px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(0, -20px) rotate(8deg); }
}

@keyframes float4 {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(8px, -8px) rotate(-6deg); }
}

@keyframes counterRoll {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Animation utility classes */
.anim-bob       { animation: bob 2.5s ease-in-out infinite; }
.anim-pulse     { animation: pulse 1.6s ease-in-out infinite; }
.anim-wobble    { animation: wobble 1.6s ease-in-out infinite; }
.anim-spin      { animation: spin 3s linear infinite; }
.anim-spin-slow { animation: spin 8s linear infinite; }
.anim-shine     { animation: shine 3s linear infinite; }
.anim-shake     { animation: shake 0.6s; }
.anim-tada      { animation: tada 1s; }
.anim-jello     { animation: jello 1s; }
.anim-heartbeat { animation: heartBeat 1.5s ease-in-out infinite; }
.anim-flip      { animation: flip 2s; }
.anim-swing     { animation: swing 1s; }
.anim-bounce    { animation: bounce 1s; }
.anim-flash     { animation: flash 1s; }
.anim-rubber    { animation: rubberBand 1s; }
.anim-pop       { animation: pop 0.4s var(--ease-out-back); }
.anim-hue       { animation: hue 4s linear infinite; }
.anim-breathe   { animation: breathe 3s ease-in-out infinite; }

/* Stagger reveal */
.stagger-reveal > * {
  animation: fadeUp 0.4s var(--ease-out-quart) backwards;
}

.stagger-reveal > *:nth-child(1)  { animation-delay: 0.02s; }
.stagger-reveal > *:nth-child(2)  { animation-delay: 0.04s; }
.stagger-reveal > *:nth-child(3)  { animation-delay: 0.06s; }
.stagger-reveal > *:nth-child(4)  { animation-delay: 0.08s; }
.stagger-reveal > *:nth-child(5)  { animation-delay: 0.10s; }
.stagger-reveal > *:nth-child(6)  { animation-delay: 0.12s; }
.stagger-reveal > *:nth-child(7)  { animation-delay: 0.14s; }
.stagger-reveal > *:nth-child(8)  { animation-delay: 0.16s; }
.stagger-reveal > *:nth-child(9)  { animation-delay: 0.18s; }
.stagger-reveal > *:nth-child(10) { animation-delay: 0.20s; }
.stagger-reveal > *:nth-child(11) { animation-delay: 0.22s; }
.stagger-reveal > *:nth-child(12) { animation-delay: 0.24s; }
.stagger-reveal > *:nth-child(13) { animation-delay: 0.26s; }
.stagger-reveal > *:nth-child(14) { animation-delay: 0.28s; }
.stagger-reveal > *:nth-child(15) { animation-delay: 0.30s; }
.stagger-reveal > *:nth-child(16) { animation-delay: 0.32s; }
.stagger-reveal > *:nth-child(17) { animation-delay: 0.34s; }
.stagger-reveal > *:nth-child(18) { animation-delay: 0.36s; }
.stagger-reveal > *:nth-child(19) { animation-delay: 0.38s; }
.stagger-reveal > *:nth-child(20) { animation-delay: 0.40s; }
.stagger-reveal > *:nth-child(21) { animation-delay: 0.42s; }
.stagger-reveal > *:nth-child(22) { animation-delay: 0.44s; }
.stagger-reveal > *:nth-child(23) { animation-delay: 0.46s; }
.stagger-reveal > *:nth-child(24) { animation-delay: 0.48s; }
.stagger-reveal > *:nth-child(25) { animation-delay: 0.50s; }
.stagger-reveal > *:nth-child(26) { animation-delay: 0.52s; }
.stagger-reveal > *:nth-child(27) { animation-delay: 0.54s; }
.stagger-reveal > *:nth-child(28) { animation-delay: 0.56s; }
.stagger-reveal > *:nth-child(29) { animation-delay: 0.58s; }
.stagger-reveal > *:nth-child(30) { animation-delay: 0.60s; }