/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * Layer 62 ULTRA - Cinematic Depth & Visual Grading
 * Football Stadium Aesthetics | Night-Match Glow | Motion Cinema
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══ CINEMATIC COLOR GRADING ═══ */
:root {
    --ultra-stadium-night: #0a1128;
    --ultra-floodlight-glow: #ffd700;
    --ultra-pitch-green: #1b5e20;
    --ultra-crowd-energy: #ff6b35;
    --ultra-motion-blur-white: rgba(255, 255, 255, 0.05);
    --ultra-depth-shadow: rgba(0, 0, 0, 0.6);
}

/* ═══ CINEMATIC FILTERS ═══ */
.ultra-cinematic-slider {
    /* Stadium lighting color correction - Enhanced for 4K Pop */
    filter: contrast(1.2) saturate(1.3) brightness(0.95);
}

.slide-image {
    /* Night-match cinematic grading - Deep & Vivid */
    filter:
        brightness(0.92) contrast(1.25) saturate(1.4) hue-rotate(-2deg);
}

.slider-ultra-slide[data-category="Stadium"] .slide-image {
    filter:
        brightness(0.85) contrast(1.3) saturate(1.2) sepia(0.05);
}

.slider-ultra-slide[data-category="Action"] .slide-image {
    filter:
        brightness(0.9) contrast(1.35) saturate(1.4) hue-rotate(-3deg);
}

.slider-ultra-slide[data-category="Crowd"] .slide-image {
    filter:
        brightness(0.92) contrast(1.2) saturate(1.45) hue-rotate(2deg);
}

/* ═══ DEPTH-OF-FIELD EFFECT ═══ */
.slide-bg-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 50% 40%,
            transparent 0%,
            transparent 40%,
            rgba(0, 0, 0, 0.1) 60%,
            rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

/* ═══ STADIUM LIGHTING GLOW ═══ */
.slider-ultra-slide.active .slide-image::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40%;
    background: radial-gradient(ellipse at center,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 215, 0, 0.08) 25%,
            transparent 60%);
    animation: floodlightPulse 8s ease-in-out infinite;
}

@keyframes floodlightPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1.1);
    }
}

/* ═══ MOTION BLUR ENHANCED ═══ */
.slider-ultra-slide.blurring {
    animation: motionBlurTransition 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes motionBlurTransition {
    0% {
        filter: blur(0px);
    }

    50% {
        filter: blur(8px);
    }

    100% {
        filter: blur(0px);
    }
}

/* ═══ LIGHT STREAK EFFECTS ═══ */
.motion-blur-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 40%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.08) 60%,
            transparent 100%);
}

.slider-ultra-slide.blurring .motion-blur-layer::before {
    animation: lightStreak 600ms ease-out;
}

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

    100% {
        left: 100%;
    }
}

/* ═══ ATMOSPHERIC FOG LAYER ═══ */
.slide-overlay {
    background: linear-gradient(to top,
            rgba(10, 17, 40, 0.98) 0%,
            rgba(10, 17, 40, 0.85) 20%,
            rgba(10, 17, 40, 0.6) 40%,
            rgba(15, 48, 96, 0.35) 60%,
            rgba(20, 60, 120, 0.15) 80%,
            transparent 100%);
}

/* ═══ CHROME ABERRATION (CINEMATIC) ═══ */
.slider-ultra-slide.active .slide-title {
    position: relative;
    text-shadow:
        2px 2px 0 rgba(255, 0, 80, 0.15),
        -2px -2px 0 rgba(0, 200, 255, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ═══ GOLD ACCENT SHIMMER ═══ */
.slide-category,
.slider-ultra-indicators .indicator.active,
.category-badge {
    position: relative;
    overflow: hidden;
}

.slide-category::before,
.indicator.active::before,
.category-badge::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(120deg,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 60%,
            transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(30deg);
    }

    100% {
        transform: translateX(100%) rotate(30deg);
    }
}

/* ═══ NAVIGATION GLOW ═══ */
.slider-ultra-nav::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0), rgba(255, 215, 0, 0.5));
    -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 400ms ease;
}

.slider-ultra-nav:hover::before {
    opacity: 1;
    animation: rotateGlow 2s linear infinite;
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ═══ PARTICLE EFFECTS ENHANCED ═══ */
#particles-canvas {
    mix-blend-mode: screen;
    opacity: 0.5;
}

/* ═══ DEPTH LAYER SHADOWS ═══ */
.slide-bg-layer {
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.3),
        inset 0 0 200px rgba(0, 0, 0, 0.2);
}

/* ═══ CONTENT EMERGENCE EFFECT ═══ */
.slider-ultra-slide.active .slide-content {
    animation: contentEmerge 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contentEmerge {
    0% {
        transform: translateY(80px) scale(0.95);
        opacity: 0;
        filter: blur(10px);
    }

    60% {
        transform: translateY(-5px) scale(1.02);
        opacity: 0.8;
        filter: blur(2px);
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* ═══ INDICATOR PULSE ═══ */
.indicator.active {
    animation: indicatorPulse 5s ease-in-out infinite;
}

@keyframes indicatorPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    }
}

/* ═══ EDGE VIGNETTE ═══ */
.ultra-cinematic-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.3) 90%,
            rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 50;
}

/* ═══ SCAN LINES (CINEMA AESTHETIC) ═══ */
.ultra-cinematic-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.03) 0px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) 2px);
    pointer-events: none;
    z-index: 60;
    opacity: 0.3;
}

/* ═══ PERFORMANCE OPTIMIZATIONS ═══ */
.slider-ultra-slide {
    will-change: opacity, transform;
}

.slide-bg-layer {
    will-change: transform;
}

.motion-blur-layer {
    will-change: opacity, transform;
}

/* ═══ HARDWARE ACCELERATION ═══ */
.slider-ultra-slide,
.slide-bg-layer,
.slide-image,
.motion-blur-layer,
.parallax-layer {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ═══ MOBILE OPTIMIZATIONS ═══ */
@media (max-width: 768px) {

    /* Reduce effects on mobile for performance */
    .slide-image {
        filter: brightness(0.9) contrast(1.15) saturate(1.2);
    }

    .ultra-cinematic-slider::after {
        display: none;
        /* Remove scan lines on mobile */
    }

    #particles-canvas {
        opacity: 0.3;
        /* Reduce particle opacity */
    }
}

/* ═══ PREFERS REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {

    .slider-ultra-slide,
    .slide-bg-layer,
    .slide-content,
    .motion-blur-layer {
        animation: none !important;
        transition: opacity 400ms ease !important;
    }

    .slide-image::before {
        animation: none !important;
    }
}

/* ═══ HIGH CONTRAST MODE ═══ */
@media (prefers-contrast: high) {
    .slide-overlay {
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(0, 0, 0, 0.7) 50%,
                transparent 100%);
    }

    .slide-title {
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    }
}