/* ===========================================
   ANIMATIONS.CSS - Keyframes & Animation Utilities
   ===========================================
   
   TABLE OF CONTENTS
   -----------------
   1. Button Ripple Effect
   2. Copy Success Animation
   3. Copy Failed Animation
   4. Skeleton Loading
   5. Slide In Animation
   6. Float Up Animations
   7. Score & Dot Animations
   8. Success Pulse Animation
   9. Animated Number Counters
   10. Particle Burst (CSS-only)
   11. Global Reduced Motion
   
   =========================================== */

/* -------------------------------------------
   BUTTON RIPPLE EFFECT
   ------------------------------------------- */
@keyframes btnRipple {
    0% {
        opacity: 0.15;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

/* -------------------------------------------
   COPY SUCCESS ANIMATION
   ------------------------------------------- */
.copy-success {
    animation: copySuccessPop var(--duration-entrance) var(--ease-out-expo);
}

@keyframes copySuccessPop {
    0% {
        transform: scale(0.95);
    }
    40% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* Checkmark draw animation */
.icon-check-animated polyline {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    /* 80ms delay is intentional stagger after parent animation */
    animation: checkDraw var(--duration-drawer) var(--ease-out-expo) 80ms forwards;
}

@keyframes checkDraw {
    to { 
        stroke-dashoffset: 0; 
    }
}

/* Reduced motion: skip the fancy bits */
@media (prefers-reduced-motion: reduce) {
    .copy-success,
    .copy-failed {
        animation: none;
    }
    
    .icon-check-animated polyline {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* -------------------------------------------
   COPY FAILED ANIMATION
   ------------------------------------------- */
.copy-failed {
    animation: copyFailedShake var(--duration-bounce) var(--ease-out-expo);
}

@keyframes copyFailedShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-4px); background: var(--risk-high-bg); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* -------------------------------------------
   SLIDE IN ANIMATION
   ------------------------------------------- */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-in,
.animate-in {
    animation: slideIn var(--duration-bounce) var(--ease-out-expo);
}

/* -------------------------------------------
   FLOAT UP ANIMATIONS
   ------------------------------------------- */
@keyframes floatUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

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

/* -------------------------------------------
   SCORE & DOT ANIMATIONS
   ------------------------------------------- */
@keyframes scorePop {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }       /* More pronounced peak */
    60% { transform: scale(0.95); }      /* Slight undershoot for bounce */
    100% { transform: scale(1); }
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.score-updating {
    animation: scorePop var(--duration-base) var(--ease-out-back);
}

.pulse-dot {
    animation: pulseDot var(--duration-pulse) ease-in-out infinite;
}

/* -------------------------------------------
   PARTICLE BURST (CSS-only, GPU-accelerated)
   ------------------------------------------- */
.particle-container {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    overflow: visible;
}

.particle {
    position: absolute;
    border-radius: 2px;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
}

.particle-container.burst .particle {
    /* 380ms is tuned for physics-based particle burst - synced with TIMING.BOUNCE (400ms) */
    animation: var(--p-anim) 380ms linear forwards;
}

/* 24 unique particle trajectories - peak at 35%, then gravity takes over */
@keyframes p1  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(55px,-40px) rotate(60deg) scale(0.85); } 100% { opacity:0; transform:translate(95px,20px) rotate(165deg) scale(0.3); }}
@keyframes p2  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(42px,15px) rotate(-70deg) scale(0.85); } 100% { opacity:0; transform:translate(75px,85px) rotate(-190deg) scale(0.3); }}
@keyframes p3  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-8px,30px) rotate(75deg) scale(0.85); } 100% { opacity:0; transform:translate(-20px,115px) rotate(210deg) scale(0.3); }}
@keyframes p4  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-50px,5px) rotate(-50deg) scale(0.85); } 100% { opacity:0; transform:translate(-90px,70px) rotate(-145deg) scale(0.3); }}
@keyframes p5  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-58px,-30px) rotate(65deg) scale(0.85); } 100% { opacity:0; transform:translate(-100px,25px) rotate(180deg) scale(0.3); }}
@keyframes p6  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-40px,-50px) rotate(-80deg) scale(0.85); } 100% { opacity:0; transform:translate(-70px,-15px) rotate(-220deg) scale(0.3); }}
@keyframes p7  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(10px,-62px) rotate(48deg) scale(0.85); } 100% { opacity:0; transform:translate(18px,-35px) rotate(135deg) scale(0.3); }}
@keyframes p8  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(48px,-45px) rotate(-65deg) scale(0.85); } 100% { opacity:0; transform:translate(88px,-5px) rotate(-175deg) scale(0.3); }}
@keyframes p9  { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(62px,-10px) rotate(72deg) scale(0.85); } 100% { opacity:0; transform:translate(115px,50px) rotate(200deg) scale(0.3); }}
@keyframes p10 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(35px,32px) rotate(-58deg) scale(0.85); } 100% { opacity:0; transform:translate(62px,110px) rotate(-160deg) scale(0.3); }}
@keyframes p11 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-18px,35px) rotate(55deg) scale(0.85); } 100% { opacity:0; transform:translate(-35px,120px) rotate(155deg) scale(0.3); }}
@keyframes p12 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-58px,0px) rotate(-70deg) scale(0.85); } 100% { opacity:0; transform:translate(-105px,60px) rotate(-195deg) scale(0.3); }}
@keyframes p13 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-62px,-28px) rotate(62deg) scale(0.85); } 100% { opacity:0; transform:translate(-110px,30px) rotate(170deg) scale(0.3); }}
@keyframes p14 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-32px,-55px) rotate(-50deg) scale(0.85); } 100% { opacity:0; transform:translate(-55px,-25px) rotate(-140deg) scale(0.3); }}
@keyframes p15 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(20px,-58px) rotate(68deg) scale(0.85); } 100% { opacity:0; transform:translate(38px,-32px) rotate(185deg) scale(0.3); }}
@keyframes p16 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(52px,-38px) rotate(-78deg) scale(0.85); } 100% { opacity:0; transform:translate(98px,10px) rotate(-210deg) scale(0.3); }}
@keyframes p17 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(58px,5px) rotate(55deg) scale(0.85); } 100% { opacity:0; transform:translate(108px,68px) rotate(150deg) scale(0.3); }}
@keyframes p18 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(25px,38px) rotate(-65deg) scale(0.85); } 100% { opacity:0; transform:translate(45px,125px) rotate(-180deg) scale(0.3); }}
@keyframes p19 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-30px,30px) rotate(70deg) scale(0.85); } 100% { opacity:0; transform:translate(-55px,110px) rotate(195deg) scale(0.3); }}
@keyframes p20 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-55px,-12px) rotate(-60deg) scale(0.85); } 100% { opacity:0; transform:translate(-98px,48px) rotate(-165deg) scale(0.3); }}
@keyframes p21 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-48px,-40px) rotate(75deg) scale(0.85); } 100% { opacity:0; transform:translate(-85px,5px) rotate(205deg) scale(0.3); }}
@keyframes p22 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(-5px,-65px) rotate(-55deg) scale(0.85); } 100% { opacity:0; transform:translate(-10px,-38px) rotate(-155deg) scale(0.3); }}
@keyframes p23 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(38px,-52px) rotate(62deg) scale(0.85); } 100% { opacity:0; transform:translate(68px,-12px) rotate(175deg) scale(0.3); }}
@keyframes p24 { 0% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); } 35% { opacity:0.9; transform:translate(60px,-15px) rotate(-68deg) scale(0.85); } 100% { opacity:0; transform:translate(112px,42px) rotate(-185deg) scale(0.3); }}

/* Particle assignments: animation, color, size, scattered starting positions, staggered delays */
.particle:nth-child(1)  { --p-anim:p1;  width:8px;  height:8px;  background:var(--theme-primary); top:35%; left:55%; animation-delay: 0ms; }
.particle:nth-child(2)  { --p-anim:p2;  width:5px;  height:5px;  background:var(--text-primary);  top:60%; left:40%; animation-delay: 12ms; }
.particle:nth-child(3)  { --p-anim:p3;  width:10px; height:10px; background:var(--text-muted);    top:45%; left:62%; animation-delay: 5ms; }
.particle:nth-child(4)  { --p-anim:p4;  width:6px;  height:6px;  background:var(--theme-primary); top:52%; left:35%; animation-delay: 18ms; }
.particle:nth-child(5)  { --p-anim:p5;  width:7px;  height:7px;  background:var(--text-primary);  top:48%; left:50%; animation-delay: 8ms; }
.particle:nth-child(6)  { --p-anim:p6;  width:11px; height:11px; background:var(--text-muted);    top:38%; left:58%; animation-delay: 22ms; }
.particle:nth-child(7)  { --p-anim:p7;  width:6px;  height:6px;  background:var(--theme-primary); top:62%; left:42%; animation-delay: 3ms; }
.particle:nth-child(8)  { --p-anim:p8;  width:8px;  height:8px;  background:var(--text-primary);  top:42%; left:52%; animation-delay: 15ms; }
.particle:nth-child(9)  { --p-anim:p9;  width:5px;  height:5px;  background:var(--text-muted);    top:55%; left:45%; animation-delay: 10ms; }
.particle:nth-child(10) { --p-anim:p10; width:9px;  height:9px;  background:var(--theme-primary); top:40%; left:60%; animation-delay: 25ms; }
.particle:nth-child(11) { --p-anim:p11; width:6px;  height:6px;  background:var(--text-primary);  top:58%; left:38%; animation-delay: 6ms; }
.particle:nth-child(12) { --p-anim:p12; width:8px;  height:8px;  background:var(--text-muted);    top:50%; left:50%; animation-delay: 20ms; }
.particle:nth-child(13) { --p-anim:p13; width:5px;  height:5px;  background:var(--theme-primary); top:32%; left:65%; animation-delay: 2ms; }
.particle:nth-child(14) { --p-anim:p14; width:11px; height:11px; background:var(--text-primary);  top:65%; left:32%; animation-delay: 16ms; }
.particle:nth-child(15) { --p-anim:p15; width:7px;  height:7px;  background:var(--text-muted);    top:44%; left:56%; animation-delay: 9ms; }
.particle:nth-child(16) { --p-anim:p16; width:8px;  height:8px;  background:var(--theme-primary); top:56%; left:44%; animation-delay: 24ms; }
.particle:nth-child(17) { --p-anim:p17; width:5px;  height:5px;  background:var(--text-primary);  top:38%; left:62%; animation-delay: 4ms; }
.particle:nth-child(18) { --p-anim:p18; width:10px; height:10px; background:var(--text-muted);    top:62%; left:38%; animation-delay: 14ms; }
.particle:nth-child(19) { --p-anim:p19; width:6px;  height:6px;  background:var(--theme-primary); top:46%; left:54%; animation-delay: 11ms; }
.particle:nth-child(20) { --p-anim:p20; width:8px;  height:8px;  background:var(--text-primary);  top:54%; left:46%; animation-delay: 21ms; }
.particle:nth-child(21) { --p-anim:p21; width:5px;  height:5px;  background:var(--text-muted);    top:42%; left:58%; animation-delay: 7ms; }
.particle:nth-child(22) { --p-anim:p22; width:11px; height:11px; background:var(--theme-primary); top:58%; left:42%; animation-delay: 19ms; }
.particle:nth-child(23) { --p-anim:p23; width:7px;  height:7px;  background:var(--text-primary);  top:48%; left:52%; animation-delay: 1ms; }
.particle:nth-child(24) { --p-anim:p24; width:9px;  height:9px;  background:var(--text-muted);    top:52%; left:48%; animation-delay: 13ms; }

/* -------------------------------------------
   SELECT POP ANIMATION
   ------------------------------------------- */
@keyframes selectPop {
    0% { transform: scale(1); }
    50% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

.just-selected {
    animation: selectPop var(--duration-normal) ease-out;
}

/* -------------------------------------------
   GLOBAL REDUCED MOTION
   ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
    
    .particle-container.burst .particle {
        animation: none;
    }
}