/* ========================================================
   SCÈNE DU HERO
   ======================================================== */

.discovery-stage {
    position: relative;

    z-index: 0;

    isolation: isolate;

    overflow: visible;
}


/* ========================================================
   AMBILIGHT
   ======================================================== */

.hero-ambient {
    position: absolute;

    z-index: 0;

    inset: -22px;

    border-radius: 38px;

    background-size: cover;
    background-position: center;

    opacity: 0;

    pointer-events: none;

    filter:
        blur(32px)
        saturate(2)
        brightness(1.05);

    transform:
        scale(1.015);

    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .45s ease;
}


.discovery-stage
.discovery-hero {
    position: relative;

    z-index: 2;
}


body.trailer-active
.hero-ambient {
    opacity: .86;

    transform:
        scale(1.045);

    filter:
        blur(34px)
        saturate(2.25)
        brightness(1.12);

    animation:
        ambient-breathe
        5s
        ease-in-out
        infinite
        alternate;
}


@keyframes ambient-breathe {

    from {
        opacity: .72;

        transform:
            scale(1.035);
    }

    to {
        opacity: .94;

        transform:
            scale(1.06);
    }

}


/* ========================================================
   HERO EN MODE VIDÉO
   ======================================================== */

.discovery-hero.trailer-mode {
    border-color:
        transparent !important;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .65);
}


.discovery-hero.trailer-mode::before,
.discovery-hero.trailer-mode::after {
    opacity: 0;

    pointer-events: none;
}


/* ========================================================
   LECTEUR YOUTUBE
   ======================================================== */

.hero-trailer {
    position: absolute;

    z-index: 20;

    inset: 0;

    overflow: hidden;

    border-radius: inherit;

    background: #000;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .30s ease;
}


.hero-trailer.active {
    opacity: 1;

    pointer-events: auto;
}


/*
 * L'iframe reste non interactive.
 *
 * Sur desktop :
 * l'autoplay assure la lecture.
 *
 * Sur mobile :
 * notre propre bouton Play pilote YouTube.
 */

.hero-trailer iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 0;

    max-width: none;
    max-height: none;

    background: #000;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(1.06);

    transform-origin: center;

    transition:
        transform .3s ease;
}


/* ========================================================
   MASQUES CINÉMATOGRAPHIQUES
   ======================================================== */

.hero-trailer::before,
.hero-trailer::after {
    content: "";

    position: absolute;

    z-index: 25;

    left: 0;
    right: 0;

    height: 72px;

    pointer-events: none;
}


.hero-trailer::before {
    top: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .93) 0%,
            rgba(0, 0, 0, .52) 38%,
            rgba(0, 0, 0, 0) 100%
        );
}


.hero-trailer::after {
    bottom: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .93) 0%,
            rgba(0, 0, 0, .48) 38%,
            rgba(0, 0, 0, 0) 100%
        );
}


/* ========================================================
   BOUTON PLAY PLEX PORTAL
   ======================================================== */

.trailer-play {
    position: absolute;

    z-index: 50;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .28);

    border-radius: 50%;

    background:
        rgba(10, 10, 10, .78);

    color: white;

    cursor: pointer;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .55),

        0 0 30px
        rgba(229, 160, 13, .24);

    backdrop-filter:
        blur(10px);

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        opacity .20s ease,
        transform .20s ease,
        background .20s ease,
        box-shadow .20s ease;
}


.trailer-play:hover {
    background:
        var(--plex);

    color: #111;

    transform:
        translate(-50%, -50%)
        scale(1.06);

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .55),

        0 0 40px
        rgba(229, 160, 13, .50);
}


.trailer-play:disabled {
    cursor: default;

    opacity: .62;
}


.trailer-play-icon {
    display: block;

    margin-left: 5px;

    font-size: 2rem;

    line-height: 1;
}


.trailer-play.is-playing {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.82);

    pointer-events: none;
}


/* ========================================================
   BOUTON RETOUR
   ======================================================== */

.trailer-close {
    position: absolute;

    z-index: 60;

    top: 18px;
    right: 18px;

    padding:
        9px 14px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius: 999px;

    background:
        rgba(4, 4, 4, .56);

    color:
        rgba(255, 255, 255, .84);

    font-size: .78rem;

    font-weight: 650;

    cursor: pointer;

    opacity: .74;

    backdrop-filter:
        blur(12px);

    transition:
        opacity .18s ease,
        background .18s ease,
        color .18s ease;
}


.trailer-close:hover {
    opacity: 1;

    color: white;

    background:
        rgba(4, 4, 4, .90);
}


/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 700px) {

    .discovery-hero.trailer-mode {
        min-height:
            0 !important;

        height: auto;

        aspect-ratio:
            16 / 9;
    }


    .discovery-hero.trailer-mode
    .hero-content {
        position: absolute;

        inset: 0;

        width: auto;

        min-height: 0;

        padding: 0;
    }


    /*
     * Léger recadrage pour repousser autant que
     * possible les éléments YouTube vers l'extérieur.
     */

    .hero-trailer iframe {
        pointer-events: none;

        transform:
            translate(-50%, -50%)
            scale(1.11);
    }


    .hero-trailer::before,
    .hero-trailer::after {
        height: 54px;
    }


    .hero-trailer::before {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .97) 0%,
                rgba(0, 0, 0, .58) 45%,
                rgba(0, 0, 0, 0) 100%
            );
    }


    .hero-trailer::after {
        background:
            linear-gradient(
                to top,
                rgba(0, 0, 0, .97) 0%,
                rgba(0, 0, 0, .58) 45%,
                rgba(0, 0, 0, 0) 100%
            );
    }


    .hero-ambient {
        inset: -14px;

        border-radius: 28px;

        filter:
            blur(22px)
            saturate(1.9)
            brightness(.95);
    }


    body.trailer-active
    .hero-ambient {
        opacity: .70;

        transform:
            scale(1.035);

        filter:
            blur(24px)
            saturate(2.05)
            brightness(1.02);
    }


    .trailer-play {
        width: 66px;
        height: 66px;

        background:
            rgba(8, 8, 8, .84);

        box-shadow:
            0 8px 30px
            rgba(0, 0, 0, .65),

            0 0 25px
            rgba(229, 160, 13, .30);
    }


    .trailer-play-icon {
        font-size: 1.75rem;
    }


    .trailer-close {
        top: 10px;
        right: 10px;

        padding:
            7px 11px;

        font-size: .72rem;
    }

}


/* ========================================================
   ACCESSIBILITÉ
   ======================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    .hero-ambient {
        animation:
            none !important;

        transition:
            none;
    }


    .hero-trailer iframe,
    .trailer-play {
        transition:
            none;
    }

}