/* ============================================================
   ANIMATIONS — keyframes + reveal utilities for whimsy & motion.
   Loaded globally so every component, card and UI kit can use them
   by name (inline `animation:` or the helper classes below).
   All decorative motion is paused under prefers-reduced-motion.
   ============================================================ */

/* ---- Ambient float (stickers, avatars, sparkles) ---- */
@keyframes ds-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ds-float-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(10px); }
}

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

/* ---- Slow spin (decorative rings / badges) ---- */
@keyframes ds-spin-slow { to { transform: rotate(360deg); } }
@keyframes ds-spin-rev  { to { transform: rotate(-360deg); } }

/* ---- Marquee scroll (text bands, skill strips) ---- */
@keyframes ds-marquee      { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ds-marquee-rev  { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---- Wiggle (playful hover) ---- */
@keyframes ds-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}

/* ---- Pop in (entrances) ---- */
@keyframes ds-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Blob drift (hero backdrops) ---- */
@keyframes ds-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28px, -22px) scale(1.08); }
  66%      { transform: translate(-20px, 16px) scale(0.95); }
}

/* ---- Animated gradient position ---- */
@keyframes ds-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Bob (scroll cue) ---- */
@keyframes ds-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---- Jelly (squash & stretch — button press / tap feedback) ---- */
@keyframes ds-jelly {
  0%, 100% { transform: scale(1, 1); }
  30%      { transform: scale(1.18, 0.82); }
  55%      { transform: scale(0.86, 1.14); }
  75%      { transform: scale(1.06, 0.94); }
}

/* ---- Swing (pendulum hung from top — tags, ornaments) ---- */
@keyframes ds-swing {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* ---- Breathe (gentle living scale — idle CTAs, status dots) ---- */
@keyframes ds-breathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.07); opacity: 0.85; }
}

/* ---- Heartbeat (double-thump pulse — likes, alerts) ---- */
@keyframes ds-heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  12%           { transform: scale(1.22); }
  24%           { transform: scale(1); }
  32%           { transform: scale(1.13); }
}

/* ---- Pulse ring (expanding halo — notification / live dots) ---- */
@keyframes ds-pulse-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Shimmer (loading sheen sweep — skeletons, placeholders) ---- */
@keyframes ds-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }

/* ---- Bounce in (entrance that overshoots then settles) ---- */
@keyframes ds-bounce-in {
  0%   { transform: translateY(28px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(-8px) scale(1.03); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- Tada (celebratory attention pull — success, unlock) ---- */
@keyframes ds-tada {
  0%, 100% { transform: scale(1) rotate(0); }
  10%, 20% { transform: scale(0.92) rotate(-4deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(4deg); }
  40%, 60%, 80%      { transform: scale(1.1) rotate(-4deg); }
}

/* ============================================================
   HELPER CLASSES
   ============================================================ */
.ds-anim-float    { animation: ds-float 6s var(--ease-in-out, ease-in-out) infinite; }
.ds-anim-twinkle  { animation: ds-twinkle 3.2s ease-in-out infinite; }
.ds-anim-spin     { animation: ds-spin-slow 18s linear infinite; }
.ds-anim-bob      { animation: ds-bob 1.8s ease-in-out infinite; }
.ds-anim-swing    { animation: ds-swing 3s var(--ease-in-out, ease-in-out) infinite; transform-origin: top center; }
.ds-anim-breathe  { animation: ds-breathe 3.4s var(--ease-in-out, ease-in-out) infinite; }
.ds-anim-heartbeat{ animation: ds-heartbeat 1.8s ease-in-out infinite; }
.ds-anim-pulse-ring { animation: ds-pulse-ring 1.8s var(--ease-out, ease-out) infinite; }
.ds-anim-wiggle   { animation: ds-wiggle 0.9s ease-in-out infinite; }

/* Sheen sweep — pair with a striped background for skeletons/placeholders. */
.ds-anim-shimmer {
  background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--white, #fff) 65%, transparent) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ds-shimmer 1.6s linear infinite;
}

/* Playful hover — attach to interactive whimsy elements. */
.ds-hover-jelly:hover  { animation: ds-jelly 0.6s var(--ease-out, ease) both; }
.ds-hover-tada:hover   { animation: ds-tada 1s ease both; }
.ds-hover-wiggle:hover { animation: ds-wiggle 0.4s ease-in-out 2; }

/* Entrances — one-shot on mount. */
.ds-enter-pop      { animation: ds-pop 0.5s var(--ease-spring, ease) both; }
.ds-enter-bounce   { animation: ds-bounce-in 0.7s var(--ease-spring, ease) both; }

/* Stagger — add to a parent of .ds-enter-* / .ds-reveal children for a cascade. */
.ds-stagger > *:nth-child(1) { animation-delay: 0ms;   transition-delay: 0ms; }
.ds-stagger > *:nth-child(2) { animation-delay: 80ms;  transition-delay: 80ms; }
.ds-stagger > *:nth-child(3) { animation-delay: 160ms; transition-delay: 160ms; }
.ds-stagger > *:nth-child(4) { animation-delay: 240ms; transition-delay: 240ms; }
.ds-stagger > *:nth-child(5) { animation-delay: 320ms; transition-delay: 320ms; }
.ds-stagger > *:nth-child(6) { animation-delay: 400ms; transition-delay: 400ms; }

/* Scroll reveal — toggle .is-in (via IntersectionObserver) to play. */
.ds-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out, ease), transform 0.7s var(--ease-out, ease);
  will-change: opacity, transform;
}
.ds-reveal.is-in { opacity: 1; transform: none; }

.ds-reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.6s var(--ease-out, ease), transform 0.6s var(--ease-spring, ease); }
.ds-reveal-scale.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ds-anim-float, .ds-anim-twinkle, .ds-anim-spin, .ds-anim-bob,
  .ds-anim-swing, .ds-anim-breathe, .ds-anim-heartbeat, .ds-anim-pulse-ring,
  .ds-anim-wiggle, .ds-anim-shimmer,
  .ds-enter-pop, .ds-enter-bounce { animation: none !important; }
  .ds-hover-jelly:hover, .ds-hover-tada:hover, .ds-hover-wiggle:hover { animation: none !important; }
  .ds-reveal, .ds-reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
}