/* Generic cinematic hero styles (shared across pages) */
.cinematic-hero {
    position: relative;
    overflow: hidden;
}

/* Ensure direct content sits above the cinematic background */
.cinematic-hero > * { position: relative; z-index: 2; }

.cinematic-hero::before {
    content: '';
    position: absolute;
    inset: -18% -12% -12% -12%;
    z-index: 0;
    background: radial-gradient(circle at 30% 25%, rgba(0,150,255,0.24), rgba(0,60,150,0.12) 40%, rgba(3,15,30,0.0) 70%);
    filter: blur(52px) saturate(125%) contrast(1.02);
    opacity: 0.98;
    pointer-events: none;
    transform: translateZ(0);
    transition: filter 0.9s ease, opacity 0.9s ease, transform 0.9s ease;
    animation: roster-bg-cinematic 36s linear infinite;
}

.cinematic-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at var(--rad1-pos0, 20% 30%), rgba(0,200,255,var(--rad1-alpha,0.10)), transparent var(--rad1-falloff,35%)),
        radial-gradient(circle at var(--rad2-pos0, 80% 70%), rgba(0,110,255,var(--rad2-alpha,0.045)), transparent var(--rad2-falloff,45%)),
        linear-gradient(var(--vignette-angle, 180deg), rgba(0,0,0,0) var(--vignette-start, 24%), rgba(0,0,0,var(--vignette-opacity, 0.26)) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: var(--rad1-size0, 42% 42%), var(--rad2-size0, 36% 36%), 100% 100%;
    background-position: var(--rad1-pos0, 20% 30%), var(--rad2-pos0, 80% 70%), 0% 0%;
    filter: blur(var(--vignette-blur, 44px));
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: background-position, opacity, transform;
    transition: filter 0.9s ease, opacity 0.9s ease, background-position 1.2s ease, background-size 1.2s ease;
    animation: roster-sweep var(--sweep-duration, 20s) ease-in-out infinite, roster-radial-move var(--radial-duration, 18s) ease-in-out infinite;
}

.cinematic-hero .cinematic-sheen {
    position: absolute;
    inset: -10% -5% -30% -5%;
    z-index: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,120,255,0.06) 40%, rgba(255,255,255,0.00) 70%);
    filter: blur(36px);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.9;
    animation: roster-sheen 28s ease-in-out infinite;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .cinematic-hero:hover::before { filter: blur(60px) saturate(150%) contrast(1.08); }
    .cinematic-hero:hover::after { filter: blur(44px) saturate(120%); }
    .cinematic-hero:hover .cinematic-sheen { opacity: 1; transform: translateX(12%); }
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-hero::before,
    .cinematic-hero::after,
    .cinematic-hero .cinematic-sheen {
        animation: none;
        transition: none;
    }
}

@keyframes roster-bg-cinematic {
    0% { transform: translateY(0) scale(1); opacity: 0.98; }
    50% { transform: translateY(-6px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0.98; }
}

@keyframes roster-sweep {
    0% { opacity: 0.94; }
    35% { opacity: 1; }
    65% { opacity: 0.98; }
    100% { opacity: 0.94; }
}

@keyframes roster-radial-move {
    0% {
        background-position: var(--rad1-pos0, 18% 28%), var(--rad2-pos0, 82% 72%), 0% 0%;
        background-size: var(--rad1-size0, 42% 42%), var(--rad2-size0, 36% 36%), 100% 100%;
    }
    25% {
        background-position: var(--rad1-pos25, 28% 38%), var(--rad2-pos25, 72% 62%), 0% 0%;
        background-size: var(--rad1-size25, 46% 46%), var(--rad2-size25, 38% 38%), 100% 100%;
    }
    50% {
        background-position: var(--rad1-pos50, 22% 44%), var(--rad2-pos50, 68% 58%), 0% 0%;
        background-size: var(--rad1-size50, 50% 50%), var(--rad2-size50, 40% 40%), 100% 100%;
    }
    75% {
        background-position: var(--rad1-pos75, 12% 30%), var(--rad2-pos75, 78% 68%), 0% 0%;
        background-size: var(--rad1-size75, 44% 44%), var(--rad2-size75, 36% 36%), 100% 100%;
    }
    100% {
        background-position: var(--rad1-pos100, 18% 28%), var(--rad2-pos100, 82% 72%), 0% 0%;
        background-size: var(--rad1-size100, 42% 42%), var(--rad2-size100, 36% 36%), 100% 100%;
    }
}

@keyframes roster-sheen {
    0% { transform: translateX(-8%) scale(1); opacity: 0.9; }
    50% { transform: translateX(8%) scale(1.02); opacity: 1; }
    100% { transform: translateX(-8%) scale(1); opacity: 0.9; }
}