/**
 * Gamification Micro-Interactions — CSS Keyframes & Transitions
 * ==============================================================
 * Coin animation, progress bar transition, celebration overlay.
 * Uses will-change for GPU compositing, zero CLS.
 * All animations suppressed by prefers-reduced-motion: reduce
 * (global rule in design-system.css handles this).
 *
 * @package Efes\EmployeeHub
 * @requirements 10.1, 10.2, 10.3, 10.5, 10.6
 */

/* ==========================================================================
   1. COIN ANIMATION — Points Award Toast Enhancement
   Rotating + bouncing coin icon on success toasts that mention points.
   ========================================================================== */

@keyframes coin-spin {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    25% {
        transform: rotateY(90deg) scale(1.1);
    }
    50% {
        transform: rotateY(180deg) scale(1);
    }
    75% {
        transform: rotateY(270deg) scale(1.1);
    }
    100% {
        transform: rotateY(360deg) scale(1);
    }
}

@keyframes coin-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(-3px);
    }
}

.coin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    will-change: transform;
    animation: coin-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1,
               coin-bounce 0.6s ease-out 1.2s 2;
}

.coin-icon svg {
    width: 24px;
    height: 24px;
}

/* Static variant when animation completes or reduced motion */
.coin-icon--static {
    animation: none;
    will-change: auto;
}

/* ==========================================================================
   2. PROGRESS BAR — Onboarding Stage Completion
   CSS transition: width ease-out 600ms per requirement 10.2
   ========================================================================== */

.progress-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: var(--color-neutral-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(
        90deg,
        var(--color-primary-500),
        var(--color-primary-400)
    );
    will-change: width;
    transition: width 600ms ease-out;
    min-width: 0;
}

/* Subtle shimmer on the active fill to convey progress */
.progress-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: progress-shimmer 2s ease-in-out infinite;
    border-radius: var(--radius-full);
}

@keyframes progress-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Dark mode progress bar */
.dark .progress-bar {
    background-color: var(--color-neutral-200);
}

.dark .progress-bar__fill {
    background: linear-gradient(
        90deg,
        var(--color-primary-500),
        var(--color-primary-600)
    );
}

/* ==========================================================================
   3. CELEBRATION OVERLAY — Top-10 Leaderboard Entry
   Brief sparkle/confetti burst lasting max 2 seconds.
   Fixed positioning, zero CLS, GPU-composited.
   ========================================================================== */

.celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity;
    opacity: 0;
    transition: opacity 300ms ease-out;
}

.celebration-overlay--active {
    opacity: 1;
}

.celebration-overlay--leaving {
    opacity: 0;
    transition: opacity 400ms ease-in;
}

/* Sparkle particles — positioned absolutely within overlay */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    will-change: transform, opacity;
    animation: sparkle-burst 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes sparkle-burst {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    20% {
        transform: translate(var(--sparkle-x, 40px), var(--sparkle-y, -60px)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(var(--sparkle-x, 40px) * 1.5),
            calc(var(--sparkle-y, -60px) + 80px)
        ) scale(0.3);
        opacity: 0;
    }
}

/* Trophy/star animation in center */
@keyframes celebration-pop {
    0% {
        transform: scale(0) rotate(-15deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(5deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.95) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes celebration-fade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

.celebration-icon {
    will-change: transform, opacity;
    animation: celebration-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.celebration-icon--fading {
    animation: celebration-fade 0.4s ease-in forwards;
}

/* Celebration message text */
.celebration-message {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-500);
    text-align: center;
    max-width: calc(100vw - 2rem);
    white-space: normal;
    opacity: 0;
    animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

/* ==========================================================================
   4. REDUCED MOTION — Explicit overrides for gamification elements
   The global rule in design-system.css handles most cases, but we
   add specifics here for complete coverage.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .coin-icon {
        animation: none;
        will-change: auto;
    }

    .progress-bar__fill {
        transition: none;
        will-change: auto;
    }

    .progress-bar__fill::after {
        animation: none;
        display: none;
    }

    .celebration-overlay {
        transition: none;
        will-change: auto;
    }

    .sparkle {
        animation: none;
        display: none;
    }

    .celebration-icon {
        animation: none;
        will-change: auto;
    }

    .celebration-icon--fading {
        animation: none;
    }

    .celebration-message {
        animation: none;
        opacity: 1;
    }
}