/* ============================================
   ANIMATION SYSTEM FOUNDATION
   ============================================ */

:root {
    /* Bounce Easing Functions */
    --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce-in: cubic-bezier(0.36, 0, 0.66, -0.56);
    --ease-spring: cubic-bezier(0.5, 1.75, 0.5, 0.85);
    --ease-squash: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Timing Tokens */
    --duration-micro: 150ms;
    --duration-short: 250ms;
    --duration-medium: 400ms;
    --duration-long: 600ms;
}

/* ============================================
   MICROINTERACTIONS - BUTTONS
   ============================================ */

/* Word Button Hover - Bouncy lift */
.word-button {
    transition:
        transform var(--duration-micro) var(--ease-spring),
        box-shadow var(--duration-micro) var(--ease-squash),
        border-color var(--duration-micro) ease,
        background-color var(--duration-micro) ease;
}

.word-button:hover:not(.paired):not(.shake) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

/* Word Button Press - Squash effect */
.word-button:active:not(.paired) {
    transform: scale(0.97, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition-duration: 50ms;
}

/* Selection Pop Animation */
@keyframes selection-pop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.08);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

.word-button.selected {
    animation: selection-pop var(--duration-short) var(--ease-bounce-out);
}

/* Deselection Deflate */
@keyframes deselection-deflate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.word-button.deselecting {
    animation: deselection-deflate var(--duration-micro) var(--ease-squash);
}

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

/* Improved Match Animation - Celebration Jiggle */
@keyframes match-jiggle-bouncy {
    0% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(1.12) rotate(-8deg);
    }
    30% {
        transform: scale(1.12) rotate(8deg);
    }
    45% {
        transform: scale(1.08) rotate(-5deg);
    }
    60% {
        transform: scale(1.08) rotate(5deg);
    }
    75% {
        transform: scale(1.04) rotate(-2deg);
    }
    90% {
        transform: scale(1.02) rotate(1deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.word-button.match-animation {
    animation: match-jiggle-bouncy var(--duration-long) var(--ease-bounce-out) !important;
}

/* Improved Shake Animation - Squash wind-up then dampening shake */
@keyframes shake-bouncy {
    0% {
        transform: scaleX(1) translateX(0);
    }
    10% {
        transform: scaleX(0.95) translateX(0);
    }
    20% {
        transform: scaleX(1.02) translateX(-14px);
    }
    35% {
        transform: scaleX(1) translateX(12px);
    }
    50% {
        transform: scaleX(1) translateX(-8px);
    }
    65% {
        transform: scaleX(1) translateX(5px);
    }
    80% {
        transform: scaleX(1) translateX(-2px);
    }
    100% {
        transform: scaleX(1) translateX(0);
    }
}

.word-button.shake {
    animation: shake-bouncy 0.5s var(--ease-squash) !important;
    background-color: #ffebee !important;
    border-color: #f44336 !important;
    border-width: 3px !important;
}

/* Category pulse when complete */
@keyframes category-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 currentColor;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 transparent;
    }
}

.word-button.category-complete-pulse {
    animation: category-pulse var(--duration-medium) var(--ease-bounce-out);
}

/* ============================================
   PARTICLE EFFECTS
   ============================================ */

/* Mini particle burst for correct matches */
@keyframes particle-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--end-scale, 1));
        opacity: 0;
    }
}

.particle {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    animation: particle-burst var(--particle-duration, 500ms) var(--ease-bounce-out) forwards;
    animation-delay: var(--particle-delay, 0ms);
    box-shadow: 0 0 4px currentColor;
}

.particle.large {
    width: 14px;
    height: 14px;
}

.particle.star {
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none;
}

.particle.star::before {
    content: '★';
    font-size: var(--star-size, 16px);
    color: inherit;
    text-shadow: 0 0 6px currentColor;
}

/* Match flash effect on buttons */
@keyframes match-flash {
    0% {
        box-shadow: 0 0 0 0 var(--flash-color, rgba(76, 175, 80, 0.8));
    }
    50% {
        box-shadow: 0 0 20px 10px var(--flash-color, rgba(76, 175, 80, 0.4));
    }
    100% {
        box-shadow: 0 0 0 0 var(--flash-color, rgba(76, 175, 80, 0));
    }
}

.word-button.match-flash {
    animation: match-flash 0.4s ease-out;
}

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

/* Confetti Animation - Enhanced with physics */
@keyframes confetti-fall-bouncy {
    0% {
        transform: translateY(-20px) translateX(0) rotateZ(0deg) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(0) translateX(0) rotateZ(36deg) scale(1.2);
        opacity: 1;
    }
    20% {
        transform: translateY(10vh) translateX(var(--drift, 10px)) rotateZ(144deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) translateX(var(--drift-end, 30px)) rotateZ(720deg) scale(0.8);
        opacity: 0;
    }
}

/* Confetti Animation */
@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #f44336;
    animation: confetti-fall-bouncy var(--confetti-duration, 3s) var(--ease-squash) forwards;
    animation-delay: var(--confetti-delay, 0ms);
    z-index: 9999;
    pointer-events: none;
    --drift: 20px;
    --drift-end: 40px;
}

/* Confetti shape variations */
.confetti.shape-rect {
    width: 12px;
    height: 8px;
    border-radius: 2px;
}

.confetti.shape-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.confetti.shape-triangle {
    width: 0;
    height: 0;
    background: transparent !important;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--confetti-color, #f44336);
}

.confetti.shape-squiggle {
    width: 14px;
    height: 6px;
    border-radius: 3px;
    transform-origin: center;
}

/* Confetti color variations */
.confetti.color-0 { background-color: #f44336; --confetti-color: #f44336; } /* Red */
.confetti.color-1 { background-color: #e91e63; --confetti-color: #e91e63; } /* Pink */
.confetti.color-2 { background-color: #9c27b0; --confetti-color: #9c27b0; } /* Purple */
.confetti.color-3 { background-color: #673ab7; --confetti-color: #673ab7; } /* Deep Purple */
.confetti.color-4 { background-color: #3f51b5; --confetti-color: #3f51b5; } /* Indigo */
.confetti.color-5 { background-color: #2196f3; --confetti-color: #2196f3; } /* Blue */
.confetti.color-6 { background-color: #03a9f4; --confetti-color: #03a9f4; } /* Light Blue */
.confetti.color-7 { background-color: #00bcd4; --confetti-color: #00bcd4; } /* Cyan */
.confetti.color-8 { background-color: #009688; --confetti-color: #009688; } /* Teal */
.confetti.color-9 { background-color: #4caf50; --confetti-color: #4caf50; } /* Green */

/* Checkmark Animation */
.checkmark-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    pointer-events: none;
}

.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkmark-pop-bouncy var(--duration-medium) var(--ease-bounce-out);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.checkmark::after {
    content: '✓';
    color: white;
    font-size: 48px;
    font-weight: bold;
    animation: checkmark-draw-bouncy 0.3s var(--ease-spring) 0.15s both;
}

@keyframes checkmark-pop-bouncy {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
    70% {
        transform: scale(0.9);
    }
    85% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes checkmark-draw-bouncy {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Celebration container for mini-games */
.celebration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: bold;
    color: #4caf50;
    animation: celebration-bounce-bouncy var(--duration-long) var(--ease-bounce-out);
    z-index: 1000;
    text-align: center;
    pointer-events: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes celebration-bounce-bouncy {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }
    55% {
        transform: translate(-50%, -50%) scale(0.85) rotate(-3deg);
    }
    70% {
        transform: translate(-50%, -50%) scale(1.1) rotate(2deg);
    }
    85% {
        transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Success pulse animation for completed items */
@keyframes success-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

.success-pulse {
    animation: success-pulse 0.6s ease-out;
}

/* Sparkle effect */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.sparkle {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 9999;
}

.sparkle::before,
.sparkle::after {
    content: '✨';
    position: absolute;
    font-size: 20px;
    animation: sparkle 1s ease-out;
}

/* Fade out animation for removing elements */
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-out {
    animation: fade-out 0.5s ease-out forwards;
}

/* ============================================
   PAGE LOAD & STATE TRANSITIONS
   ============================================ */

/* Grid cascade animation - buttons pop in staggered */
@keyframes grid-item-enter {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    80% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.word-button.cascade-enter {
    animation: grid-item-enter var(--duration-short) var(--ease-bounce-out) both;
    animation-delay: var(--cascade-delay, 0ms);
}

/* Header drop-in animation */
@keyframes header-drop {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.header-animate {
    animation: header-drop var(--duration-medium) var(--ease-bounce-out);
}

/* Instructions fade in */
@keyframes instructions-fade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.instructions-animate {
    animation: instructions-fade var(--duration-short) ease-out;
    animation-delay: 200ms;
    animation-fill-mode: both;
}

/* ============================================
   NOTIFICATION & MODAL ANIMATIONS
   ============================================ */

/* Modal bounce-in from bottom */
@keyframes modal-bounce-in {
    0% {
        transform: translateY(100px) scale(0.9);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px) scale(1.02);
        opacity: 1;
    }
    70% {
        transform: translateY(8px) scale(0.99);
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Modal bounce-out to bottom */
@keyframes modal-bounce-out {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    30% {
        transform: translateY(-15px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(80px) scale(0.9);
        opacity: 0;
    }
}

.notification-content {
    animation: modal-bounce-in var(--duration-medium) var(--ease-bounce-out);
}

.notification-content.exiting {
    animation: modal-bounce-out var(--duration-short) var(--ease-bounce-in) forwards;
}

/* Letter pop animation for text */
@keyframes letter-pop {
    0% {
        transform: scale(0) translateY(20px);
        opacity: 0;
    }
    60% {
        transform: scale(1.2) translateY(-5px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.letter-pop {
    display: inline-block;
    animation: letter-pop var(--duration-short) var(--ease-bounce-out) both;
    animation-delay: var(--letter-delay, 0ms);
}

/* ============================================
   VICTORY SCREEN ANIMATIONS
   ============================================ */

/* Screen zoom pulse on victory */
@keyframes screen-zoom-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

body.victory-pulse {
    animation: screen-zoom-pulse 0.3s var(--ease-squash);
}

/* Victory screen slide up with heavy bounce */
@keyframes victory-slide-up {
    0% {
        transform: translateX(-50%) translateY(100vh);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) translateY(-30px);
        opacity: 1;
    }
    70% {
        transform: translateX(-50%) translateY(15px);
    }
    85% {
        transform: translateX(-50%) translateY(-5px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

#victory-screen.animate-in {
    animation: victory-slide-up var(--duration-long) var(--ease-bounce-out);
}

/* Category list staggered reveal */
@keyframes category-slide-in {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    60% {
        transform: translateX(5px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.victory-category.animate-in {
    animation: category-slide-in var(--duration-short) var(--ease-bounce-out) both;
    animation-delay: var(--category-delay, 0ms);
}

/* ============================================
   DEEP DIVE TRANSITIONS
   ============================================ */

/* Main grid zoom out */
@keyframes grid-zoom-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.85);
        opacity: 0;
    }
}

/* Deep dive grid zoom in */
@keyframes grid-zoom-in {
    0% {
        transform: scale(1.1);
        opacity: 0;
    }
    60% {
        transform: scale(0.98);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.grid.exiting {
    animation: grid-zoom-out var(--duration-short) var(--ease-squash) forwards;
}

.grid.entering {
    animation: grid-zoom-in var(--duration-short) var(--ease-bounce-out);
}

/* Deep dive header bounce */
@keyframes deep-dive-header-enter {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    60% {
        transform: translateY(8px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.deep-dive-header.animate-in {
    animation: deep-dive-header-enter var(--duration-medium) var(--ease-bounce-out);
}

/* ============================================
   DARK MODE TRANSITIONS
   ============================================ */

/* Circular wipe transition */
@keyframes theme-wipe {
    0% {
        clip-path: circle(0% at var(--wipe-x, 95%) var(--wipe-y, 5%));
    }
    100% {
        clip-path: circle(150% at var(--wipe-x, 95%) var(--wipe-y, 5%));
    }
}

body.theme-transitioning::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--theme-wipe-color, #1a1a1a);
    z-index: 10000;
    pointer-events: none;
    animation: theme-wipe 0.5s var(--ease-squash) forwards;
}

/* ============================================
   FLOATING SPARKLES (Victory)
   ============================================ */

@keyframes sparkle-float {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    20% {
        transform: translateY(-20px) scale(1);
        opacity: 1;
    }
    80% {
        transform: translateY(-80px) scale(0.8);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) scale(0.5);
        opacity: 0;
    }
}

.floating-sparkle {
    position: fixed;
    font-size: 20px;
    pointer-events: none;
    z-index: 9998;
    animation: sparkle-float 2s var(--ease-squash) forwards;
    animation-delay: var(--sparkle-delay, 0ms);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    .confetti,
    .checkmark,
    .checkmark::after,
    .celebration,
    .success-pulse,
    .sparkle,
    .sparkle::before,
    .sparkle::after,
    .word-button,
    .word-button.selected,
    .word-button.deselecting,
    .word-button.match-animation,
    .word-button.shake,
    .word-button.category-complete-pulse,
    .word-button.cascade-enter,
    .particle,
    .notification-content,
    .notification-content.exiting,
    .letter-pop,
    #victory-screen.animate-in,
    .victory-category.animate-in,
    .grid.exiting,
    .grid.entering,
    .deep-dive-header.animate-in,
    .floating-sparkle,
    body.victory-pulse,
    body.theme-transitioning::after {
        animation: none !important;
        transition: none !important;
    }

    /* Show static versions instead */
    .checkmark {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .checkmark::after {
        opacity: 1;
        transform: scale(1);
    }

    .celebration {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    .word-button.cascade-enter,
    .notification-content,
    .letter-pop,
    #victory-screen.animate-in,
    .victory-category.animate-in,
    .grid.entering,
    .deep-dive-header.animate-in {
        opacity: 1;
        transform: none;
    }

    /* Hide decorative elements entirely */
    .confetti,
    .particle,
    .floating-sparkle {
        display: none !important;
    }
}