/* ==========================================
   TIERLIST HISPANA - ANIMATIONS ENHANCED
   Ultra-smooth animations with 60fps optimization
   Author: Vayju & Bigcuts
   Date: 2025-10-11
   ========================================== */

/* ==========================================
   CSS VARIABLES & ROOT CONFIGURATION
   ========================================== */
:root {
    --tlh-ready: true;
    
    /* Animation Timings */
    --anim-fast: 0.2s;
    --anim-normal: 0.3s;
    --anim-slow: 0.5s;
    --anim-ultra-slow: 0.8s;
    
    /* Easing Functions */
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    
    /* Colors for animations */
    --glow-blue: #1F6FEB;
    --glow-purple: #8B5CF6;
    --glow-gold: #F59E0B;
    --glow-red: #EF4444;
    
    /* Performance optimization */
    --gpu-hack: translateZ(0);
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   Force GPU acceleration for smooth animations
   ========================================== */
.reveal,
.fade-in,
.slide-up,
.scale-in,
.glass,
.card,
.player-card,
.tier-badge,
.stat-card,
.nav-link,
.btn,
button,
.modal-content {
    will-change: transform, opacity;
    transform: var(--gpu-hack);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================
   ENTRANCE ANIMATIONS
   ========================================== */

/* Reveal Animation - Base */
.reveal {
    animation: reveal 0.6s var(--ease-smooth) forwards;
    opacity: 0;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(20px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* Fade In */
.fade-in {
    animation: fadeIn var(--anim-normal) var(--ease-smooth) forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide Up */
.slide-up {
    animation: slideUp var(--anim-slow) var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateY(30px) var(--gpu-hack);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* Slide Down */
.slide-down {
    animation: slideDown var(--anim-slow) var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateY(-30px) var(--gpu-hack);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* Slide In from Left */
.slide-in-left {
    animation: slideInLeft var(--anim-slow) var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateX(-50px) var(--gpu-hack);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateX(0) var(--gpu-hack);
    }
}

/* Slide In from Right */
.slide-in-right {
    animation: slideInRight var(--anim-slow) var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateX(50px) var(--gpu-hack);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateX(0) var(--gpu-hack);
    }
}

/* Scale In */
.scale-in {
    animation: scaleIn var(--anim-slow) var(--ease-bounce) forwards;
    opacity: 0;
    transform: scale(0.8) var(--gpu-hack);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: scale(1) var(--gpu-hack);
    }
}

/* Zoom In */
.zoom-in {
    animation: zoomIn var(--anim-normal) var(--ease-smooth) forwards;
    opacity: 0;
    transform: scale(0.95) var(--gpu-hack);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: scale(1) var(--gpu-hack);
    }
}

/* Bounce In */
.bounce-in {
    animation: bounceIn var(--anim-ultra-slow) var(--ease-bounce) forwards;
    opacity: 0;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) var(--gpu-hack);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) var(--gpu-hack);
    }
    70% {
        transform: scale(0.9) var(--gpu-hack);
    }
    100% {
        transform: scale(1) var(--gpu-hack);
    }
}

/* Rotate In */
.rotate-in {
    animation: rotateIn var(--anim-ultra-slow) var(--ease-smooth) forwards;
    opacity: 0;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.8) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1) var(--gpu-hack);
    }
}

/* Flip In */
.flip-in {
    animation: flipIn var(--anim-ultra-slow) var(--ease-smooth) forwards;
    opacity: 0;
    transform-style: preserve-3d;
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(-90deg) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0) var(--gpu-hack);
    }
}

/* ==========================================
   STAGGERED ANIMATIONS
   For lists and multiple elements
   ========================================== */
.stagger-item {
    animation: staggerReveal 0.6s var(--ease-smooth) forwards;
    opacity: 0;
    /* IMPORTANTE: Mantener visible después de animación */
    animation-fill-mode: forwards !important;
}

@keyframes staggerReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) var(--gpu-hack);
    }
    100% {
        opacity: 1 !important;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* CRITICAL FIX: Elementos que ya animaron DEBEN permanecer visibles */
.stagger-item.animated,
.stagger-item:not([style*="opacity: 0"]) {
    opacity: 1 !important;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }
.stagger-item:nth-child(7) { animation-delay: 0.35s; }
.stagger-item:nth-child(8) { animation-delay: 0.4s; }
.stagger-item:nth-child(9) { animation-delay: 0.45s; }
.stagger-item:nth-child(10) { animation-delay: 0.5s; }

/* For more than 10 items */
.stagger-item:nth-child(n+11) {
    animation-delay: 0.55s;
}

/* ==========================================
   HOVER ANIMATIONS
   ========================================== */

/* Lift on Hover */
.hover-lift {
    transition: transform var(--anim-fast) var(--ease-smooth),
                box-shadow var(--anim-fast) var(--ease-smooth);
}

.hover-lift:hover {
    transform: translateY(-5px) var(--gpu-hack);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Scale on Hover */
.hover-scale {
    transition: transform var(--anim-fast) var(--ease-smooth);
}

.hover-scale:hover {
    transform: scale(1.05) var(--gpu-hack);
}

/* Glow on Hover */
.hover-glow {
    transition: box-shadow var(--anim-normal) var(--ease-smooth),
                filter var(--anim-normal) var(--ease-smooth);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(31, 111, 235, 0.5),
                0 0 40px rgba(31, 111, 235, 0.3);
    filter: brightness(1.1);
}

/* Bounce on Hover */
.hover-bounce {
    transition: transform var(--anim-fast) var(--ease-bounce);
}

.hover-bounce:hover {
    transform: scale(1.1) var(--gpu-hack);
}

/* Rotate on Hover */
.hover-rotate {
    transition: transform var(--anim-normal) var(--ease-smooth);
}

.hover-rotate:hover {
    transform: rotate(5deg) var(--gpu-hack);
}

/* Shine Effect on Hover */
.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transition: left var(--anim-slow) var(--ease-smooth);
}

.hover-shine:hover::before {
    left: 100%;
}

/* ==========================================
   LOADING ANIMATIONS
   ========================================== */

/* Spinner */
.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg) var(--gpu-hack); }
    to { transform: rotate(360deg) var(--gpu-hack); }
}

/* Pulse */
.pulse {
    animation: pulse 2s var(--ease-smooth) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1) var(--gpu-hack);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95) var(--gpu-hack);
    }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dots Loading */
.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */

/* Parallax Effect */
.parallax {
    transition: transform 0.5s var(--ease-smooth);
}

/* Reveal on Scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px) var(--gpu-hack);
    transition: opacity 0.6s var(--ease-smooth),
                transform 0.6s var(--ease-smooth);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0) var(--gpu-hack);
}

/* ==========================================
   MODAL & OVERLAY ANIMATIONS
   ========================================== */

/* Modal Fade In */
.modal-fade-in {
    animation: modalFadeIn var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: scale(1) var(--gpu-hack);
    }
}

/* Modal Slide Up */
.modal-slide-up {
    animation: modalSlideUp var(--anim-slow) var(--ease-smooth) forwards;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(100px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* Overlay Fade */
.overlay-fade {
    animation: overlayFade var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes overlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   BUTTON ANIMATIONS
   ========================================== */

/* Button Press Effect */
.btn-press {
    transition: transform 0.1s var(--ease-smooth);
}

.btn-press:active {
    transform: scale(0.95) var(--gpu-hack);
}

/* Button Ripple Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ==========================================
   NOTIFICATION ANIMATIONS
   ========================================== */

/* Notification Slide In */
.notification-slide-in {
    animation: notificationSlideIn var(--anim-slow) var(--ease-smooth) forwards;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(400px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateX(0) var(--gpu-hack);
    }
}

/* Notification Slide Out */
.notification-slide-out {
    animation: notificationSlideOut var(--anim-slow) var(--ease-smooth) forwards;
}

@keyframes notificationSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) var(--gpu-hack);
    }
    to {
        opacity: 0;
        transform: translateX(400px) var(--gpu-hack);
    }
}

/* ==========================================
   CARD ANIMATIONS
   ========================================== */

/* Card Flip */
.card-flip {
    perspective: 1000px;
}

.card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform var(--anim-ultra-slow) var(--ease-smooth);
    transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg) var(--gpu-hack);
}

.card-flip-front,
.card-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-flip-back {
    transform: rotateY(180deg) var(--gpu-hack);
}

/* Card Expand */
.card-expand {
    transition: all var(--anim-slow) var(--ease-smooth);
}

.card-expand:hover {
    transform: scale(1.05) var(--gpu-hack);
    z-index: 10;
}

/* ==========================================
   TEXT ANIMATIONS
   ========================================== */

/* Text Gradient Animation */
.text-gradient-animate {
    background: linear-gradient(
        90deg,
        var(--glow-blue),
        var(--glow-purple),
        var(--glow-gold),
        var(--glow-blue)
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradientShift 3s ease infinite;
}

@keyframes textGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Text Typing Effect */
.text-typing {
    overflow: hidden;
    border-right: 2px solid var(--glow-blue);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end),
               blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--glow-blue); }
}

/* Text Glow Pulse */
.text-glow-pulse {
    animation: textGlowPulse 2s ease-in-out infinite;
}

@keyframes textGlowPulse {
    0%, 100% {
        text-shadow: 0 0 5px var(--glow-blue),
                     0 0 10px var(--glow-blue);
    }
    50% {
        text-shadow: 0 0 20px var(--glow-blue),
                     0 0 30px var(--glow-blue),
                     0 0 40px var(--glow-blue);
    }
}

/* ==========================================
   GLASSMORPHISM ANIMATIONS
   ========================================== */

.glass-hover {
    transition: all var(--anim-normal) var(--ease-smooth);
}

.glass-hover:hover {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   BORDER ANIMATIONS
   ========================================== */

/* Border Glow */
.border-glow {
    position: relative;
}

.border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, 
        var(--glow-blue), 
        var(--glow-purple), 
        var(--glow-gold)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--anim-normal) var(--ease-smooth);
}

.border-glow:hover::before {
    opacity: 1;
}

/* Border Spin */
.border-spin {
    position: relative;
}

.border-spin::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent,
        var(--glow-blue),
        transparent 100%
    );
    animation: borderSpin 3s linear infinite;
    opacity: 0;
    transition: opacity var(--anim-normal);
}

.border-spin:hover::before {
    opacity: 1;
}

@keyframes borderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================
   PARTICLE ANIMATIONS
   ========================================== */

/* Floating Particles */
.particle-float {
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) var(--gpu-hack);
    }
    50% {
        transform: translateY(-20px) var(--gpu-hack);
    }
}

/* Particle Drift */
.particle-drift {
    animation: particleDrift 5s linear infinite;
}

@keyframes particleDrift {
    from {
        transform: translate(0, 0) var(--gpu-hack);
    }
    to {
        transform: translate(100px, 100px) var(--gpu-hack);
    }
}

/* ==========================================
   NAVBAR ANIMATIONS
   ========================================== */

/* Navbar Slide Down */
.navbar-slide-down {
    animation: navbarSlideDown var(--anim-slow) var(--ease-smooth) forwards;
}

@keyframes navbarSlideDown {
    from {
        transform: translateY(-100%) var(--gpu-hack);
        opacity: 0;
    }
    to {
        transform: translateY(0) var(--gpu-hack);
        opacity: 1;
    }
}

/* Navbar Scrolled Effect */
.navbar.scrolled {
    animation: navbarScrolled var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes navbarScrolled {
    from {
        background: transparent;
        backdrop-filter: blur(0);
    }
    to {
        background: rgba(10, 10, 10, 0.9);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }
}

/* ==========================================
   DROPDOWN ANIMATIONS
   ========================================== */

/* Dropdown Expand */
.dropdown-expand {
    animation: dropdownExpand var(--anim-normal) var(--ease-smooth) forwards;
    transform-origin: top center;
}

@keyframes dropdownExpand {
    from {
        opacity: 0;
        transform: scaleY(0) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: scaleY(1) var(--gpu-hack);
    }
}

/* Dropdown Fade */
.dropdown-fade {
    animation: dropdownFade var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* ==========================================
   TIER BADGE ANIMATIONS
   ========================================== */

/* Tier Badge Shine */
.tier-badge-shine {
    position: relative;
    overflow: hidden;
}

.tier-badge-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: tierBadgeShine 3s infinite;
}

@keyframes tierBadgeShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Tier Badge Glow */
.tier-badge-glow {
    animation: tierBadgeGlow 2s ease-in-out infinite alternate;
}

@keyframes tierBadgeGlow {
    from {
        box-shadow: 0 0 10px currentColor,
                    inset 0 0 10px currentColor;
    }
    to {
        box-shadow: 0 0 20px currentColor,
                    0 0 30px currentColor,
                    inset 0 0 20px currentColor;
    }
}

/* ==========================================
   SEARCH ANIMATIONS
   ========================================== */

/* Search Bar Expand */
.search-expand {
    transition: width var(--anim-normal) var(--ease-smooth);
}

.search-expand:focus {
    width: 100%;
}

/* Search Results Fade */
.search-results-fade {
    animation: searchResultsFade var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes searchResultsFade {
    from {
        opacity: 0;
        transform: translateY(-10px) var(--gpu-hack);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
        max-height: 500px;
    }
}

/* ==========================================
   FILTER ANIMATIONS
   ========================================== */

/* Filter Slide */
.filter-slide {
    animation: filterSlide var(--anim-normal) var(--ease-smooth) forwards;
}

@keyframes filterSlide {
    from {
        opacity: 0;
        transform: translateX(-20px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateX(0) var(--gpu-hack);
    }
}

/* Filter Active Pulse */
.filter-active {
    animation: filterActivePulse 1s var(--ease-smooth);
}

@keyframes filterActivePulse {
    0% { transform: scale(1) var(--gpu-hack); }
    50% { transform: scale(1.1) var(--gpu-hack); }
    100% { transform: scale(1) var(--gpu-hack); }
}

/* ==========================================
   STAT CARD ANIMATIONS
   ========================================== */

/* Stat Counter Animation */
.stat-counter {
    animation: statCounter 2s var(--ease-smooth) forwards;
}

@keyframes statCounter {
    from {
        opacity: 0;
        transform: translateY(20px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* Stat Card Hover */
.stat-card-hover {
    transition: all var(--anim-normal) var(--ease-smooth);
}

.stat-card-hover:hover {
    transform: translateY(-10px) var(--gpu-hack);
    box-shadow: 0 20px 40px rgba(31, 111, 235, 0.3);
}

/* ==========================================
   TOOLTIP ANIMATIONS
   ========================================== */

/* Tooltip Fade */
.tooltip-fade {
    animation: tooltipFade var(--anim-fast) var(--ease-smooth) forwards;
}

@keyframes tooltipFade {
    from {
        opacity: 0;
        transform: translateY(-5px) var(--gpu-hack);
    }
    to {
        opacity: 1;
        transform: translateY(0) var(--gpu-hack);
    }
}

/* ==========================================
   SCROLL INDICATOR ANIMATIONS
   ========================================== */

/* Scroll Down Arrow */
.scroll-indicator {
    animation: scrollIndicator 2s ease-in-out infinite;
}

@keyframes scrollIndicator {
    0%, 100% {
        transform: translateY(0) var(--gpu-hack);
        opacity: 1;
    }
    50% {
        transform: translateY(10px) var(--gpu-hack);
        opacity: 0.5;
    }
}

/* ==========================================
   PROGRESS BAR ANIMATIONS
   ========================================== */

/* Progress Fill */
.progress-fill {
    animation: progressFill 1.5s var(--ease-smooth) forwards;
}

@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-value, 100%);
    }
}

/* Progress Glow */
.progress-glow {
    animation: progressGlow 2s ease-in-out infinite;
}

@keyframes progressGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--glow-blue);
    }
    50% {
        box-shadow: 0 0 20px var(--glow-blue),
                    0 0 30px var(--glow-blue);
    }
}

/* ==========================================
   BADGE ANIMATIONS
   ========================================== */

/* Badge Pop */
.badge-pop {
    animation: badgePop var(--anim-slow) var(--ease-bounce) forwards;
}

@keyframes badgePop {
    0% {
        transform: scale(0) var(--gpu-hack);
    }
    50% {
        transform: scale(1.2) var(--gpu-hack);
    }
    100% {
        transform: scale(1) var(--gpu-hack);
    }
}

/* Badge Pulse */
.badge-pulse {
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1) var(--gpu-hack);
        opacity: 1;
    }
    50% {
        transform: scale(1.1) var(--gpu-hack);
        opacity: 0.8;
    }
}