@layer components;

@layer components {
    .btn--glow {
        box-shadow: 0 0 24px var(--color-accent-glow), 0 4px 20px rgba(0, 0, 0, 0.45);
    }

    .tmdb-alert {
        margin: var(--space-4) var(--space-6);
        padding: var(--space-4) var(--space-6);
        border-radius: var(--radius-md);
        border: 1px solid var(--color-accent-soft);
        background: rgba(201, 169, 98, 0.08);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    /* ——— Hero cinéma ——— */
    .hero--cinema {
        min-height: min(92vh, 58rem);
        --hero-backdrop: none;
    }

    .hero--cinema .hero__backdrop {
        background-image: var(--hero-backdrop);
        background-size: cover;
        background-position: center 22%;
        transform: scale(1.06);
        filter: saturate(1.05) contrast(1.02);
        transition: opacity 1.2s var(--ease-out-soft), transform 8s linear;
    }

    .hero--cinema:hover .hero__backdrop {
        transform: scale(1.1);
    }

    .hero--cinema .hero__vignette {
        background:
            linear-gradient(to top, var(--color-bg) 4%, rgba(10, 10, 11, 0.15) 42%, rgba(10, 10, 11, 0.82) 100%),
            radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
    }

    .home-rows--cinema {
        padding-top: var(--space-4);
    }

    /* ——— Cartes premium ——— */
    .title-card--premium .title-card__poster--photo {
        background: var(--color-bg-card);
    }

    .title-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: var(--poster-ratio);
        transform: scale(1.001);
        transition: transform var(--duration-med) var(--ease-out-soft), filter var(--duration-med) var(--ease-out-soft);
    }

    .title-card--premium:hover .title-card__img {
        transform: scale(1.08);
        filter: brightness(1.06);
    }

    .title-card__shine {
        position: absolute;
        inset: 0;
        background: linear-gradient(125deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
        opacity: 0;
        transition: opacity var(--duration-med) var(--ease-out-soft);
        pointer-events: none;
    }

    .title-card--premium:hover .title-card__shine {
        opacity: 1;
    }

    .title-card--premium .title-card__details {
        opacity: 1;
    }

    /* ——— Fiche film ——— */
    .title-hero--film {
        min-height: 34rem;
        --film-backdrop: none;
    }

    .title-hero--film .title-hero__backdrop {
        background-image: var(--film-backdrop);
        background-size: cover;
        background-position: center 20%;
        filter: blur(0) saturate(1.08);
    }

    .title-hero--film .title-hero__vignette {
        background:
            linear-gradient(to top, var(--color-bg) 6%, rgba(10, 10, 11, 0.25) 45%, rgba(10, 10, 11, 0.88)),
            radial-gradient(circle at 70% 20%, rgba(201, 169, 98, 0.08), transparent 55%);
    }

    .cast-card__photo--img {
        object-fit: cover;
        border-radius: var(--radius-full);
    }

    /* ——— Lecteur bande-annonce ——— */
    .trailer-stage {
        position: relative;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .trailer-stage__backdrop {
        position: absolute;
        inset: -10%;
        background-size: cover;
        background-position: center;
        filter: blur(28px) brightness(0.35) saturate(1.2);
        transform: scale(1.1);
    }

    .trailer-stage__veil {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 40%, rgba(201, 169, 98, 0.08), transparent 55%),
            rgba(5, 5, 6, 0.72);
    }

    .trailer-stage__header {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-6);
    }

    .trailer-stage__title {
        font-size: var(--text-sm);
        font-weight: 500;
        opacity: 0.85;
    }

    .trailer-stage__player-wrap {
        position: relative;
        z-index: 2;
        flex: 1;
        display: grid;
        place-items: center;
        padding: var(--space-4) var(--space-6) var(--space-12);
    }

    .trailer-stage__iframe {
        width: min(1200px, 92vw);
        aspect-ratio: 16 / 9;
        border: none;
        border-radius: var(--radius-lg);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.08),
            0 30px 80px rgba(0, 0, 0, 0.75),
            0 0 60px rgba(201, 169, 98, 0.12);
    }

    .trailer-stage__empty {
        text-align: center;
        color: var(--color-text-muted);
        display: grid;
        gap: var(--space-4);
    }

    body.is-trailer {
        overflow: hidden;
    }

    .profiles-screen {
        animation: fade-up 1s var(--ease-out-soft);
    }

    @keyframes fade-up {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }
}