/**
 * Claymorphism Animation CSS v2.0
 * Juicy, tactile micro-interactions for K-12 EdTech
 * 
 * Animation Categories:
 * - Squish/Press: Tactile button presses
 * - Jelly/Wobble: Elastic feedback
 * - Pop/Bounce: Entrances and celebrations
 * - Float/Drift: Ambient motion
 * - Glow/Pulse: Attention and states
 * - Loading: Progress indicators
 */

/* ========================================
   CSS CUSTOM PROPERTIES FOR ANIMATIONS
   ======================================== */
:root {
  /* Timing functions - matches claymorphism.css */
  --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Duration scale */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
}

/* ========================================
   RESPECT REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   CELEBRATION PARTICLES (Candy Colors)
   ======================================== */
.celebration-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #7FFF00 0%, #00C2FF 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

.confetti-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
}

/* ========================================
   CLAY SQUISH ANIMATIONS - Tactile Press
   ======================================== */
@keyframes squish {
  0% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(0.95, 1.02) translateY(3px);
  }
  60% {
    transform: scale(1.02, 0.98) translateY(4px);
  }
  100% {
    transform: scale(0.98) translateY(5px);
  }
}

.animate-squish {
  animation: squish 0.15s ease-out forwards;
}

/* Bouncy squish for extra fun */
@keyframes squish-bounce {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(0.92, 1.05) translateY(4px);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(2px);
  }
  75% {
    transform: scale(0.98, 1.02) translateY(3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.animate-squish-bounce {
  animation: squish-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   JELLY WOBBLE - For selections/correct answers
   ======================================== */
@keyframes jelly-wobble {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.15, 0.85);
  }
  30% {
    transform: scale(0.85, 1.15);
  }
  45% {
    transform: scale(1.08, 0.92);
  }
  60% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.03, 0.97);
  }
  100% {
    transform: scale(1);
  }
}

.animate-jelly {
  animation: jelly-wobble 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   POP IN - Playful entrance
   ======================================== */
@keyframes pop-in {
  0% {
    transform: scale(0) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
  }
  80% {
    transform: scale(0.9) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.animate-pop-in {
  animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   RUBBER BAND - Elastic snap back
   ======================================== */
@keyframes rubber-band {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25, 0.75);
  }
  40% {
    transform: scale(0.75, 1.25);
  }
  50% {
    transform: scale(1.15, 0.85);
  }
  65% {
    transform: scale(0.95, 1.05);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
  100% {
    transform: scale(1);
  }
}

.animate-rubber-band {
  animation: rubber-band 0.8s ease-in-out;
}

/* ========================================
   WIGGLE - Playful attention grab
   ======================================== */
@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(6deg);
  }
  45% {
    transform: rotate(-4deg);
  }
  60% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}

.animate-wiggle {
  animation: wiggle 0.6s ease-in-out;
}

/* Continuous wiggle for notifications */
@keyframes wiggle-continuous {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

.animate-wiggle-continuous {
  animation: wiggle-continuous 0.5s ease-in-out infinite;
}

/* ========================================
   CANDY FLOAT - Dreamy hover effect
   ======================================== */
@keyframes candy-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(1deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
  75% {
    transform: translateY(-10px) rotate(0.5deg);
  }
}

.animate-float {
  animation: candy-float 3s ease-in-out infinite;
}

/* ========================================
   SUCCESS CELEBRATION
   ======================================== */
@keyframes celebrate {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.1) rotate(-3deg);
    filter: brightness(1.1);
  }
  50% {
    transform: scale(1.15) rotate(3deg);
    filter: brightness(1.2);
  }
  75% {
    transform: scale(1.05) rotate(-1deg);
    filter: brightness(1.1);
  }
  100% {
    transform: scale(1) rotate(0);
    filter: brightness(1);
  }
}

.animate-celebrate {
  animation: celebrate 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========================================
   CANDY GLOW PULSE
   ======================================== */
@keyframes candy-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.4),
                0 0 20px rgba(0, 194, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 194, 255, 0),
                0 0 30px rgba(0, 194, 255, 0.4);
  }
}

.animate-candy-glow {
  animation: candy-glow 2s ease-in-out infinite;
}

@keyframes candy-glow-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(127, 255, 0, 0.4),
                0 0 20px rgba(127, 255, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(127, 255, 0, 0),
                0 0 30px rgba(127, 255, 0, 0.4);
  }
}

.animate-candy-glow-green {
  animation: candy-glow-green 2s ease-in-out infinite;
}

@keyframes candy-glow-pink {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.4),
                0 0 20px rgba(255, 105, 180, 0.2);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(255, 105, 180, 0),
                0 0 30px rgba(255, 105, 180, 0.4);
  }
}

.animate-candy-glow-pink {
  animation: candy-glow-pink 2s ease-in-out infinite;
}

/* Pulse Glow Animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(88, 204, 2, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(88, 204, 2, 0);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Bounce Animation */
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

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

.animate-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Slide In From Bottom */
@keyframes slide-in-bottom {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide In From Top */
@keyframes slide-in-top {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-top {
  animation: slide-in-top 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade In */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out;
}

/* Scale In */
@keyframes scale-in {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scale-in {
  animation: scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spin Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Success Glow */
@keyframes success-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(88, 204, 2, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(88, 204, 2, 0.4);
  }
}

.animate-success-glow {
  animation: success-glow 1s ease-in-out;
}

/* Error Flash */
@keyframes error-flash {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(255, 75, 75, 0.3);
  }
}

.animate-error-flash {
  animation: error-flash 0.5s ease-in-out;
}

/* Progress Bar Fill */
.progress-bar-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Hover Lift */
.card-hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-lift:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Button Press Effect */
.button-press {
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.button-press:active {
  transform: scale(0.95) translateY(2px);
}

/* Badge Unlock Animation */
@keyframes badge-unlock {
  0% {
    transform: scale(0.8) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-badge-unlock {
  animation: badge-unlock 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Quest Complete Animation */
@keyframes quest-complete {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    background-color: #7AC70C;
  }
  100% {
    transform: scale(1);
  }
}

.animate-quest-complete {
  animation: quest-complete 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Streak Fire Animation */
@keyframes streak-fire {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(-3deg);
  }
  75% {
    transform: scale(1.1) rotate(3deg);
  }
}

.animate-streak-fire {
  animation: streak-fire 1s ease-in-out infinite;
}

/* Coin Bounce */
@keyframes coin-bounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(10deg);
  }
  50% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.15) rotate(5deg);
  }
}

.animate-coin-bounce {
  animation: coin-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Stagger Delay Utilities */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* Smooth Transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-fast {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-slow {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* HTMX Loading States */
.htmx-swapping {
  opacity: 0.5;
  transition: opacity 0.2s ease-out;
}

.htmx-settling {
  animation: fade-in 0.3s ease-out;
}

/* ========================================
   FOCUS VISIBLE - Candy Blue outline
   ======================================== */
*:focus-visible {
  outline: 3px solid #00C2FF;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Special focus for buttons */
.clay-btn:focus-visible,
.clay-option:focus-visible {
  outline: 3px solid #00C2FF;
  outline-offset: 4px;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.4),
    inset -2px -2px 4px rgba(0, 0, 0, 0.1),
    0 6px 0 var(--btn-shadow-color, #66CC00),
    0 0 0 6px rgba(0, 194, 255, 0.2);
}

/* ========================================
   LOADING STATES
   ======================================== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.06) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

/* ========================================
   CLAY-SPECIFIC MICRO-INTERACTIONS
   ======================================== */

/* === CLAY BUTTON PRESS === */
@keyframes clay-press {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(4px) scale(0.97);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.animate-clay-press {
  animation: clay-press 0.2s var(--ease-squish);
}

/* === CLAY OPTION SELECT === */
@keyframes clay-select {
  0% {
    transform: scale(1);
    border-color: var(--clay-border-color, rgba(0, 0, 0, 0.06));
  }
  30% {
    transform: scale(0.96);
  }
  60% {
    transform: scale(1.02);
    border-color: var(--candy-blue);
  }
  100% {
    transform: scale(1);
    border-color: var(--candy-blue);
  }
}

.animate-clay-select {
  animation: clay-select 0.4s var(--ease-bounce);
}

/* === CLAY CORRECT ANSWER === */
@keyframes clay-correct {
  0% {
    transform: scale(1);
    background: var(--cream);
  }
  25% {
    transform: scale(1.05) rotate(-2deg);
  }
  50% {
    transform: scale(1.08) rotate(2deg);
    background: linear-gradient(135deg, #E8FFEB 0%, #D0FFD6 100%);
  }
  75% {
    transform: scale(1.02) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0);
    background: linear-gradient(135deg, #E8FFEB 0%, #D0FFD6 100%);
  }
}

.animate-clay-correct {
  animation: clay-correct 0.6s var(--ease-bounce);
}

/* === CLAY INCORRECT ANSWER === */
@keyframes clay-incorrect {
  0%, 100% {
    transform: translateX(0);
    background: var(--cream);
  }
  10%, 30%, 50%, 70% {
    transform: translateX(-4px);
  }
  20%, 40%, 60% {
    transform: translateX(4px);
  }
  80% {
    background: linear-gradient(135deg, #FFF0F0 0%, #FFE4E4 100%);
  }
}

.animate-clay-incorrect {
  animation: clay-incorrect 0.5s var(--ease-smooth);
}

/* === CLAY CARD ENTRANCE === */
@keyframes clay-card-enter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-clay-card-enter {
  animation: clay-card-enter 0.5s var(--ease-bounce);
}

/* === CLAY BADGE EARNED === */
@keyframes clay-badge-earned {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
  70% {
    transform: scale(0.9) rotate(-5deg);
  }
  85% {
    transform: scale(1.1) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-clay-badge-earned {
  animation: clay-badge-earned 0.8s var(--ease-bounce);
}

/* === CLAY POINTS EARNED === */
@keyframes clay-points-fly {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-30px) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(0.8);
  }
}

.animate-clay-points-fly {
  animation: clay-points-fly 1s var(--ease-smooth) forwards;
}

/* === CLAY PROGRESS FILL === */
@keyframes clay-progress-fill {
  0% {
    width: 0%;
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.animate-clay-progress-fill {
  animation: clay-progress-fill 1s var(--ease-squish);
}

/* === CLAY MODAL ENTER === */
@keyframes clay-modal-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

.animate-clay-modal-enter {
  animation: clay-modal-enter 0.4s var(--ease-bounce);
}

/* === CLAY TOAST ENTER === */
@keyframes clay-toast-enter {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }
  60% {
    transform: translateX(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.animate-clay-toast-enter {
  animation: clay-toast-enter 0.5s var(--ease-bounce);
}

/* === CLAY TOAST EXIT === */
@keyframes clay-toast-exit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }
}

.animate-clay-toast-exit {
  animation: clay-toast-exit 0.3s var(--ease-smooth) forwards;
}

/* === CLAY SQUISH ON HOVER === */
@keyframes clay-squish-hover {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.98, 1.02);
  }
  100% {
    transform: scale(1);
  }
}

.clay-squish-hover:hover {
  animation: clay-squish-hover 0.3s var(--ease-squish);
}

/* === CLAY BREATHING (Subtle idle animation) === */
@keyframes clay-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.9),
      inset -1px -1px 2px rgba(0, 0, 0, 0.03),
      0 4px 0px rgba(0, 0, 0, 0.1),
      0 12px 24px rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: scale(1.01);
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.95),
      inset -1px -1px 2px rgba(0, 0, 0, 0.02),
      0 5px 0px rgba(0, 0, 0, 0.08),
      0 16px 32px rgba(0, 0, 0, 0.1);
  }
}

.animate-clay-breathe {
  animation: clay-breathe 4s ease-in-out infinite;
}

/* === CLAY HIGHLIGHT PULSE === */
@keyframes clay-highlight-pulse {
  0%, 100% {
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.9),
      inset -1px -1px 2px rgba(0, 0, 0, 0.03),
      0 4px 0px rgba(0, 0, 0, 0.1),
      0 12px 24px rgba(0, 0, 0, 0.08),
      0 0 0 0 var(--candy-blue);
  }
  50% {
    box-shadow:
      inset 2px 2px 4px rgba(255, 255, 255, 0.9),
      inset -1px -1px 2px rgba(0, 0, 0, 0.03),
      0 4px 0px rgba(0, 0, 0, 0.1),
      0 12px 24px rgba(0, 0, 0, 0.08),
      0 0 0 8px rgba(0, 194, 255, 0.3);
  }
}

.animate-clay-highlight-pulse {
  animation: clay-highlight-pulse 2s ease-in-out infinite;
}

/* === CLAY ICON BOUNCE === */
@keyframes clay-icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-6px) rotate(-5deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  75% {
    transform: translateY(-3px) rotate(3deg);
  }
}

.animate-clay-icon-bounce {
  animation: clay-icon-bounce 0.6s var(--ease-bounce);
}

/* === CLAY CHECKBOX CHECK === */
@keyframes clay-check {
  0% {
    transform: scale(0) rotate(-45deg);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.animate-clay-check {
  animation: clay-check 0.3s var(--ease-bounce);
}

/* === CLAY RIPPLE EFFECT === */
@keyframes clay-ripple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.clay-ripple {
  position: relative;
  overflow: hidden;
}

.clay-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.clay-ripple:active::after {
  animation: clay-ripple 0.6s var(--ease-smooth);
}

/* === CLAY CONFETTI BURST === */
@keyframes clay-confetti-1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-40px, -80px) rotate(360deg); opacity: 0; }
}
@keyframes clay-confetti-2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(40px, -90px) rotate(-360deg); opacity: 0; }
}
@keyframes clay-confetti-3 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-60px, -60px) rotate(180deg); opacity: 0; }
}
@keyframes clay-confetti-4 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(60px, -70px) rotate(-180deg); opacity: 0; }
}

/* ========================================
   INTERACTIVE STATE CLASSES
   ======================================== */

/* Apply to buttons for tactile press */
.clay-interactive {
  transition: transform 0.1s var(--ease-smooth), box-shadow 0.1s var(--ease-smooth);
}

.clay-interactive:active {
  animation: clay-press 0.15s var(--ease-squish);
}

/* Hover lift effect for cards */
.clay-lift {
  transition: transform 0.2s var(--ease-squish), box-shadow 0.2s var(--ease-smooth);
}

.clay-lift:hover {
  transform: translateY(-4px);
}

/* Focus ring for accessibility */
.clay-focus:focus-visible {
  outline: 3px solid var(--candy-blue);
  outline-offset: 3px;
  animation: clay-highlight-pulse 1.5s ease-in-out infinite;
}

/* ========================================
   DISABLE ANIMATIONS FOR REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .animate-pulse-glow,
  .animate-bounce-in,
  .animate-shake,
  .animate-slide-in-bottom,
  .animate-slide-in-top,
  .animate-fade-in,
  .animate-scale-in,
  .animate-spin,
  .animate-pulse,
  .animate-success-glow,
  .animate-error-flash,
  .animate-badge-unlock,
  .animate-quest-complete,
  .animate-streak-fire,
  .animate-coin-bounce,
  .animate-squish,
  .animate-squish-bounce,
  .animate-jelly,
  .animate-pop-in,
  .animate-rubber-band,
  .animate-wiggle,
  .animate-wiggle-continuous,
  .animate-float,
  .animate-celebrate,
  .animate-candy-glow,
  .animate-candy-glow-green,
  .animate-candy-glow-pink,
  .animate-shimmer,
  .animate-clay-press,
  .animate-clay-select,
  .animate-clay-correct,
  .animate-clay-incorrect,
  .animate-clay-card-enter,
  .animate-clay-badge-earned,
  .animate-clay-points-fly,
  .animate-clay-modal-enter,
  .animate-clay-toast-enter,
  .animate-clay-breathe,
  .animate-clay-highlight-pulse,
  .animate-clay-icon-bounce,
  .animate-clay-check {
    animation: none !important;
  }
  
  .card-hover-lift:hover,
  .clay-card:hover,
  .clay-lift:hover {
    transform: none;
  }
  
  .button-press:active,
  .clay-btn:active,
  .clay-interactive:active {
    transform: none;
  }
  
  .clay-ripple:active::after {
    animation: none;
  }
}