/**
 * JavaESPORTS - eFootball Dynamic Theme
 * Professional Sport & Gaming Aesthetics
 * Vibrant, energetic colors inspired by eFootball and stadium atmosphere
 * @version 1.0
 * @date 2025
 */

/* ============================================================================
   eFootball COLOR VARIABLES
   ============================================================================ */

:root {
    /* Primary eFootball Colors */
    --efootball-electric-blue: #0099ff;
    --efootball-cyber-blue: #00d4ff;
    --efootball-energy-green: #00b894;
    --efootball-fresh-cyan: #00cec9;
    --efootball-victory-teal: #55efc4;
    
    /* Secondary Sport Colors */
    --sport-champion-yellow: #fdcb6e;
    --sport-trophy-gold: #ffeaa7;
    --sport-energy-orange: #ff9f43;
    --sport-victory-orange: #ffa502;
    
    /* Gaming Cyber Colors */
    --cyber-purple: #6c5ce7;
    --cyber-lavender: #a29bfe;
    --cyber-pink: #fd79a8;
    --cyber-rose: #fab1a0;
    
    /* Stadium Atmosphere */
    --stadium-night-dark: #0f192d;
    --stadium-night-medium: #14233c;
    --stadium-field-green: #00b894;
    --stadium-lights-glow: rgba(0, 212, 255, 0.15);
}

/* Light mode fresh colors */
[data-theme="light"] {
    --light-sky-blue: #e3f2fd;
    --light-ocean-blue: #b3e5fc;
    --light-mint-green: #e0f2f1;
    --light-fresh-cyan: #b2dfdb;
    --light-cream-white: #f8fcff;
}

/* ============================================================================
   DYNAMIC BODY BACKGROUNDS - Stadium Atmosphere
   ============================================================================ */

body {
    /* Dark mode: Night stadium atmosphere with dynamic glow */
    background: 
        radial-gradient(ellipse at top, rgba(0, 153, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(0, 206, 201, 0.12) 0%, transparent 50%),
        linear-gradient(180deg,
            var(--stadium-night-dark) 0%,
            var(--stadium-night-medium) 30%,
            rgba(15, 30, 50, 1) 60%,
            var(--stadium-night-dark) 100%
        );
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Animated stadium lights effect */
body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(0, 206, 201, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(108, 92, 231, 0.06) 0%, transparent 25%);
    animation: stadiumLights 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes stadiumLights {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translate(-5%, -5%) scale(1.05);
        opacity: 0.8;
    }
    66% {
        transform: translate(5%, 5%) scale(0.95);
        opacity: 0.7;
    }
}

/* Light mode: Fresh stadium day with sky atmosphere */
[data-theme="light"] body {
    background: 
        radial-gradient(ellipse at top, rgba(0, 153, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 184, 148, 0.1) 0%, transparent 50%),
        linear-gradient(180deg,
            #e3f7ff 0%,
            #f0f9ff 30%,
            #ffffff 60%,
            #f0fcff 100%
        );
}

[data-theme="light"] body::before {
    background: 
        radial-gradient(circle at 30% 20%, rgba(0, 153, 255, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 70% 60%, rgba(0, 206, 201, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(253, 203, 110, 0.06) 0%, transparent 30%);
    animation: dayStadiumLights 25s ease-in-out infinite;
}

@keyframes dayStadiumLights {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(3%, -3%) scale(1.03);
        opacity: 0.7;
    }
}

/* ============================================================================
   HERO SECTION - eFootball Energy
   ============================================================================ */

.hero {
    position: relative;
    background: transparent;
}

/* Dark mode hero glow */
.hero::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: 
        radial-gradient(ellipse at top right, rgba(0, 153, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 206, 201, 0.12) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: heroGlow 8s ease-in-out infinite;
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

[data-theme="light"] .hero::before {
    background: 
        radial-gradient(ellipse at top right, rgba(0, 153, 255, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0, 184, 148, 0.08) 0%, transparent 50%);
}

/* ============================================================================
   CARDS & SECTIONS - Dynamic Sport Theme
   ============================================================================ */

.card {
    background: linear-gradient(135deg,
        rgba(15, 25, 45, 0.8) 0%,
        rgba(20, 35, 60, 0.8) 100%);
    border: 1px solid rgba(0, 153, 255, 0.2);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 8px 32px rgba(0, 153, 255, 0.1),
                0 4px 16px rgba(0, 206, 201, 0.08);
    transition: all 0.3s ease;
}

.card:hover {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 12px 48px rgba(0, 153, 255, 0.2),
                0 6px 24px rgba(0, 206, 201, 0.15);
    transform: translateY(-4px);
}

[data-theme="light"] .card {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(248, 252, 255, 0.95) 100%);
    border-color: rgba(0, 153, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 153, 255, 0.12),
                0 4px 16px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .card:hover {
    border-color: rgba(0, 153, 255, 0.4);
    box-shadow: 0 12px 48px rgba(0, 153, 255, 0.18),
                0 6px 24px rgba(0, 206, 201, 0.1);
}

/* ============================================================================
   BUTTONS - eFootball Action Style
   ============================================================================ */

.btn-primary {
    background: linear-gradient(135deg, 
        var(--efootball-electric-blue) 0%, 
        var(--efootball-cyber-blue) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 153, 255, 0.4),
                0 2px 10px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover {
    background: linear-gradient(135deg, 
        var(--efootball-cyber-blue) 0%, 
        var(--efootball-fresh-cyan) 100%);
    box-shadow: 0 6px 28px rgba(0, 212, 255, 0.5),
                0 3px 14px rgba(0, 206, 201, 0.4);
    transform: translateY(-2px);
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 3px 14px rgba(0, 153, 255, 0.3),
                0 1px 7px rgba(0, 212, 255, 0.2);
}

/* Secondary button - Energy Green */
.btn-secondary {
    background: linear-gradient(135deg, 
        var(--efootball-energy-green) 0%, 
        var(--efootball-victory-teal) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 184, 148, 0.4);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, 
        var(--efootball-victory-teal) 0%, 
        var(--efootball-fresh-cyan) 100%);
    box-shadow: 0 6px 28px rgba(85, 239, 196, 0.5);
    transform: translateY(-2px);
}

/* Outline button - Cyber theme */
.btn-outline {
    background: transparent;
    color: var(--efootball-electric-blue);
    border: 2px solid var(--efootball-electric-blue);
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--efootball-electric-blue);
    color: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 153, 255, 0.4),
                0 0 40px rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

[data-theme="light"] .btn-outline {
    color: var(--efootball-electric-blue);
    border-color: var(--efootball-electric-blue);
}

/* ============================================================================
   SECTIONS - Dynamic Alternating Backgrounds
   ============================================================================ */

.section--alt {
    background: linear-gradient(135deg,
        rgba(0, 153, 255, 0.03) 0%,
        rgba(0, 206, 201, 0.03) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .section--alt {
    background: linear-gradient(135deg,
        rgba(0, 153, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(0, 206, 201, 0.05) 100%);
}

/* ============================================================================
   ACCENT ELEMENTS - Sport Energy
   ============================================================================ */

.stat__value {
    color: var(--efootball-cyber-blue);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

[data-theme="light"] .stat__value {
    color: var(--efootball-electric-blue);
    text-shadow: 0 2px 8px rgba(0, 153, 255, 0.3);
}

/* Links */
.link-arrow {
    color: var(--efootball-cyber-blue);
    transition: all 0.3s ease;
}

.link-arrow:hover {
    color: var(--efootball-fresh-cyan);
    text-shadow: 0 0 12px rgba(0, 206, 201, 0.6);
    transform: translateX(4px);
}

/* ============================================================================
   BADGES & LABELS - Championship Style
   ============================================================================ */

.badge {
    background: linear-gradient(135deg, 
        var(--sport-champion-yellow) 0%, 
        var(--sport-trophy-gold) 100%);
    color: #1e293b;
    font-weight: 700;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(253, 203, 110, 0.4),
                0 0 20px rgba(255, 234, 167, 0.3);
}

.badge--success {
    background: linear-gradient(135deg, 
        var(--efootball-energy-green) 0%, 
        var(--efootball-victory-teal) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 184, 148, 0.4);
}

.badge--info {
    background: linear-gradient(135deg, 
        var(--efootball-electric-blue) 0%, 
        var(--efootball-cyber-blue) 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 153, 255, 0.4);
}

/* ============================================================================
   MOBILE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
    body::before {
        animation-duration: 25s;
    }
    
    .hero::before {
        animation-duration: 10s;
    }
}

/* ============================================================================
   PERFORMANCE - Hardware Acceleration
   ============================================================================ */

body,
body::before,
.hero::before,
.card,
.btn-primary,
.btn-secondary,
.btn-outline {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================================================
   END OF eFootball DYNAMIC THEME
   ============================================================================ */