/**
 * ALGA ARENA — Premium Dashboard CSS Modules
 * Refined glass-dark surfaces, volumetric sweeps, and depth layouts (PNG fallback versions)
 */

:root {
    --arena-gradient-glow: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 92, 252, 0.08));
}

/* Base visual depth layers */
.dashboard-background-ambience {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(12, 14, 25, 0.25) 0%, rgba(5, 7, 12, 0.98) 100%);
    z-index: -1;
}

/* Glass-dark surfaces with edge highlights & inner shadows */
.card-arena, .card-console {
    background: rgba(11, 13, 22, 0.65) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 15px 35px rgba(0, 0, 0, 0.65) !important;
}

/* Radial light sweep follows pointer */
.card-console {
    position: relative;
    overflow: hidden;
    background-size: 110% 110% !important;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), background-position 0.25s, box-shadow 0.25s;
}

.card-console::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 120px at var(--x, 0px) var(--y, 0px), rgba(0, 212, 255, 0.06), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.card-console:hover {
    background-position: 50% 55% !important;
}

.card-console:hover::after {
    opacity: 1;
}

/* Button soft glow sweep inside console cards */
.card-console .btn-arena {
    position: relative;
    overflow: hidden;
}
.card-console .btn-arena::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-25deg);
    transition: left 0.5s;
}
.card-console:hover .btn-arena::before {
    left: 150%;
}

/* Slow animated CTA pulse */
.btn-glow-pulse {
    position: relative;
    overflow: hidden;
    animation: ctaPulse 3s infinite alternate ease-in-out;
}

@keyframes ctaPulse {
    0% { box-shadow: 0 0 10px rgba(0, 212, 255, 0.15), 0 0 0 1px rgba(0, 212, 255, 0.2); }
    100% { box-shadow: 0 0 25px rgba(0, 212, 255, 0.45), 0 0 0 2px rgba(0, 212, 255, 0.4); }
}

/* Multi-layer Hero container and placement */
.hero-banner-container {
    perspective: 1000px;
    background: #04060a !important;
}

/* Volumetric light sweep across hero */
.hero-banner-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 40%, rgba(0, 212, 255, 0.05) 50%, transparent 60%);
    background-size: 200% 200%;
    animation: lightSweep 8s infinite linear;
    pointer-events: none;
    z-index: 6;
}

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

.hero-layer {
    transition: transform 0.1s ease-out;
    will-change: transform;
    pointer-events: none;
}

.hero-layer-bg {
    filter: brightness(0.4) contrast(1.1) blur(1px);
}

.hero-glow-back {
    position: absolute;
    right: 12%;
    top: 15%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, rgba(124, 92, 252, 0.05) 50%, transparent 70%);
    z-index: 2;
    pointer-events: none;
}

/* Specific player position and filter styles */
.hero-layer-player1 img, .hero-layer-player2 img {
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.9)) contrast(1.05) brightness(0.95);
}

@keyframes trophyPulse {
    0% { filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.25)) drop-shadow(0 10px 20px rgba(0,0,0,0.85)); }
    100% { filter: drop-shadow(0 0 45px rgba(0, 212, 255, 0.55)) drop-shadow(0 10px 25px rgba(0,0,0,0.95)); }
}

.hero-layer-trophy img {
    animation: trophyPulse 4s infinite alternate ease-in-out;
}

/* Active sidebar item glow rail */
.sidebar-item.active {
    position: relative;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.08) 0%, transparent 100%) !important;
}
.sidebar-item.active::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--arena-broadcast-blue);
    box-shadow: 0 0 10px var(--arena-broadcast-blue);
}

/* Ambient particle vectors */
@keyframes floatDust {
    0% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { transform: translateY(-40px) scale(0.9); opacity: 0.1; }
}

.dust-particle {
    animation: floatDust 8s infinite ease-in-out;
}
.dust-particle:nth-child(2) {
    animation-delay: 2.5s;
    animation-duration: 10s;
}
.dust-particle:nth-child(3) {
    animation-delay: 5s;
    animation-duration: 12s;
}

/* Responsive adjustments to hide absolute layers on small screens to prevent overflow */
@media (max-width: 991px) {
    .hero-layer-player1, .hero-layer-player2, .hero-layer-trophy, .hero-glow-back {
        display: none !important;
    }
    .hero-layer-bg {
        filter: brightness(0.25) blur(2px) !important;
        opacity: 0.8 !important;
    }
}

/* ============================================================
   RELATIVE IMAGE PATH CONFIGURATIONS (PNG Failsafes)
   ============================================================ */
.hero-layer-bg-stadium {
    background-image: url('../../images/cinematic/hero/stadium_arena_hero.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.card-lft {
    background: linear-gradient(135deg, rgba(15,17,23,0.95), rgba(15,17,23,0.75)), url('../../images/cinematic/players/lft_cinematic.png') no-repeat center/cover !important;
    background-blend-mode: overlay !important;
}

.card-lfp {
    background: linear-gradient(135deg, rgba(15,17,23,0.95), rgba(15,17,23,0.75)), url('../../images/cinematic/teams/team_nodes.png') no-repeat center/cover !important;
    background-blend-mode: overlay !important;
}

.card-scrim {
    background: linear-gradient(135deg, rgba(15,17,23,0.95), rgba(15,17,23,0.75)), url('../../images/cinematic/training/scrim_arena.png') no-repeat center/cover !important;
    background-blend-mode: overlay !important;
}

.card-transfer {
    background: linear-gradient(135deg, rgba(15,17,23,0.95), rgba(15,17,23,0.75)), url('../../images/cinematic/transfers/transfer_tokens.png') no-repeat center/cover !important;
    background-blend-mode: overlay !important;
}
