/* Eagle Academy — Login legend slideshow background */

@keyframes loginLegendKen {
    0% {
        opacity: 0;
        transform: scale(1.12);
    }
    6% {
        opacity: 1;
        transform: scale(1.04);
    }
    14% {
        opacity: 1;
        transform: scale(1.07);
    }
    20%, 100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

@keyframes loginLegendCaption {
    0%, 19%, 100% {
        opacity: 0;
        transform: translateY(6px);
        visibility: hidden;
    }
    7%, 16% {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

.login-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #050608;
}

.login-legend-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #050608;
}

.login-legend-slide {
    position: absolute;
    inset: -4%;
    background-color: #1a1f28;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(0.82) contrast(1.08) saturate(1.18);
    opacity: 0;
    animation: loginLegendKen var(--login-legend-cycle, 42s) ease-in-out infinite;
    animation-delay: calc(var(--login-legend-cycle, 42s) * var(--slide-i) / var(--login-legend-count, 7) * -1);
    will-change: transform, opacity;
}

.login-legend-labels {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.login-legend-caption {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: min(240px, 55vw);
    animation: loginLegendCaption var(--login-legend-cycle, 42s) ease-out infinite;
    animation-delay: calc(var(--login-legend-cycle, 42s) * var(--slide-i) / var(--login-legend-count, 7) * -1);
    opacity: 0;
    visibility: hidden;
}

.login-legend-caption strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
    margin-bottom: 1px;
}

.login-legend-caption-match {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.58);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.login-arena-smoke {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 55% at 50% 100%, rgba(211, 47, 47, 0.1) 0%, transparent 60%),
        linear-gradient(180deg, rgba(4, 5, 8, 0.08) 0%, rgba(4, 5, 8, 0.22) 100%);
}

/* خفّيف حول الكارت بس — مش على الصورة كلها */
.login-bg-vignette {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(ellipse 42% 52% at 50% 50%, rgba(0, 0, 0, 0.32) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.28) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .login-legend-slide,
    .login-legend-caption {
        animation: none !important;
    }

    .login-legend-slide {
        opacity: 0 !important;
    }

    .login-legend-slide:first-child {
        opacity: 1 !important;
        transform: none !important;
    }

    .login-legend-caption:first-child {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}