/* ============================================================
   Cake Your Story — Motion & Animation Tokens
   Playful spring physics, ambient floating, tactile pops.
   ============================================================ */

:root {
  /* ---- Durations ---- */
  --dur-instant: 90ms;   /* @kind other */
  --dur-fast: 160ms;     /* @kind other */
  --dur-base: 240ms;     /* @kind other */
  --dur-slow: 420ms;     /* @kind other */
  --dur-float: 5200ms;   /* @kind other */

  /* ---- Easings ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  /* springy overshoot for selections & drops */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);       /* @kind other */
  --ease-spring-soft: cubic-bezier(0.18, 0.89, 0.32, 1.18);/* @kind other */
}

/* ---- Ambient floating (background stickers) ------------- */
@keyframes float-idle {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + 3deg)); }
}

/* slower, larger drift variant */
@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  33%      { transform: translate(6px, -10px) rotate(calc(var(--rot, 0deg) - 4deg)); }
  66%      { transform: translate(-6px, -4px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}

/* ---- Selection pop ------------------------------------- */
@keyframes pop-in {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Topping "drop" onto cake -------------------------- */
@keyframes drop-on {
  0%   { transform: translateY(-46px) scale(1.25) rotate(-8deg); opacity: 0; }
  60%  { transform: translateY(4px)   scale(0.94) rotate(2deg);  opacity: 1; }
  80%  { transform: translateY(-3px)  scale(1.03) rotate(-1deg); }
  100% { transform: translateY(0)     scale(1)    rotate(0deg); }
}

/* ---- Sparkle twinkle ----------------------------------- */
@keyframes twinkle {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.55; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

/* ---- Gentle wobble (hover on stickers) ----------------- */
@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}