/* Performance Enhancement Styles */

/* Smooth animations and transitions */
* {
    box-sizing: border-box;
}

/* Optimize font loading */
@font-face {
    font-family: 'Roboto';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
}

/* Smooth scrolling for better UX */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

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

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

/* Enhanced loading container */
.loading-container {
    animation: fadeIn 0.3s ease-in-out;
}

/* Skeleton loading for player cards */
.player-card.loading {
    background: linear-gradient(90deg, #33363B 25%, #3A3D42 50%, #33363B 75%);
    background-size: 200% 100%;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Enhanced card animations */
.player-card {
    animation: slideIn 0.3s ease-out;
    animation-fill-mode: both;
}

/* Stagger animation for multiple cards */
.player-card:nth-child(1) { animation-delay: 0ms; }
.player-card:nth-child(2) { animation-delay: 50ms; }
.player-card:nth-child(3) { animation-delay: 100ms; }
.player-card:nth-child(4) { animation-delay: 150ms; }
.player-card:nth-child(5) { animation-delay: 200ms; }
.player-card:nth-child(6) { animation-delay: 250ms; }
.player-card:nth-child(7) { animation-delay: 300ms; }
.player-card:nth-child(8) { animation-delay: 350ms; }
.player-card:nth-child(9) { animation-delay: 400ms; }
.player-card:nth-child(10) { animation-delay: 450ms; }

/* Enhanced focus states for accessibility */
.player-name:focus-visible {
    outline: 2px solid #01AB7A;
    outline-offset: 2px;
    border-radius: 4px;
}

.search-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 171, 122, 0.3);
}

#studioName:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(1, 171, 122, 0.3);
}

/* Progress bar enhancement */
.progress-bar-inner {
    transition: width 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.progress-bar-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Tournament timer enhancement */
.tournament-timer {
    transition: color 0.3s ease;
}

.tournament-timer.expired {
    color: #F44336;
    font-weight: bold;
}

/* Enhanced banner loading */
.leaderboard-banner img {
    transition: opacity 0.3s ease;
}

.leaderboard-banner img[loading="lazy"] {
    opacity: 0;
}

.leaderboard-banner img[loading="lazy"].loaded {
    opacity: 0.85;
}

/* Performance optimizations for low-end devices */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Reduced animations for better performance on slower devices */
@media (max-width: 480px) {
    .player-card {
        animation: none;
    }
    
    .player-card:hover {
        transform: none;
    }
    
    .progress-bar-inner::after {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .player-card {
        border: 2px solid #fff;
    }
    
    .search-input {
        border: 2px solid #fff;
    }
    
    #studioName {
        border: 2px solid #fff;
    }
}

/* Dark mode enhancements (already in dark mode but for consistency) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #22252B;
        color: #FFFFFF;
    }
}

/* Print styles for better printability */
@media print {
    .main-header,
    .toolbar,
    .filters,
    .snooker-champions,
    .loading-container {
        display: none !important;
    }
    
    .player-card {
        break-inside: avoid;
        margin-bottom: 10px;
        border: 1px solid #000;
        background: #fff !important;
        color: #000 !important;
    }
    
    main {
        padding: 0 !important;
        max-width: none !important;
    }
}

/* Enhanced error states */
.alert {
    border-radius: 8px;
    border: 1px solid;
    animation: slideIn 0.3s ease-out;
}

.alert-danger {
    background-color: rgba(244, 67, 54, 0.1);
    border-color: #F44336;
    color: #F44336;
}

/* Loading spinner enhancement */
.spinner-border {
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
}

/* WebP support with fallbacks */
.modern-image {
    background-image: url('fallback.png');
    background-image: 
        -webkit-image-set(
            url('image.webp') 1x,
            url('image@2x.webp') 2x
        );
    background-image: 
        image-set(
            url('image.webp') 1x,
            url('image@2x.webp') 2x
        );
}

/* Container query support for future enhancement */
@supports (container-type: inline-size) {
    .player-container {
        container-type: inline-size;
    }
    
    @container (min-width: 600px) {
        .player-card {
            padding: 20px;
        }
    }
}