/* ==========================================================================
   Bouton de lecture à ondes (2026-11-09)
   --------------------------------------------------------------------------
   Chargé par les pages cours et épisode des 4 thèmes (watch.blade.php de pages/movies/themes,
   episode.blade.php de pages/shows/themes), juste après le style du lecteur choisi dans
   l'admin (videojs_style1 à 4) : il remplace le gros bouton gris de video.js par
   un disque aux couleurs de l'exploitant, d'où partent deux ondes qui s'éloignent
   au rythme d'une respiration lente, jusqu'à la première lecture.

   Les styles du lecteur posent des !important (taille, marges sur .vjs-480) :
   les règles qui doivent les battre les reprennent. On ne touche ni à display,
   ni à visibility, ni à opacity du bouton : chaque style garde sa façon de le
   cacher pendant la lecture. Seuls transform et opacity s'animent.
   ========================================================================== */

.video-js .vjs-big-play-button {
    --lp-taille: 88px;
    --lp-couleur: var(--primary-color, #6b4bd8);
    --lp-courbe: cubic-bezier(0.22, 1, 0.36, 1);
    top: 50%;
    left: 50%;
    width: var(--lp-taille) !important;
    height: var(--lp-taille) !important;
    margin: calc(var(--lp-taille) / -2) 0 0 calc(var(--lp-taille) / -2) !important;
    padding: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.5 5.6v12.8a1 1 0 0 0 1.53.85l10.2-6.4a1 1 0 0 0 0-1.7l-10.2-6.4A1 1 0 0 0 8.5 5.6z'/%3E%3C/svg%3E") center / 46% no-repeat, rgba(0, 0, 0, .45) !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.5 5.6v12.8a1 1 0 0 0 1.53.85l10.2-6.4a1 1 0 0 0 0-1.7l-10.2-6.4A1 1 0 0 0 8.5 5.6z'/%3E%3C/svg%3E") center / 46% no-repeat, color-mix(in srgb, var(--lp-couleur) 84%, transparent) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), 0 14px 34px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: visible;
    animation: lp-apparait .52s var(--lp-courbe) backwards;
    transition: transform .2s var(--lp-courbe), box-shadow .2s var(--lp-courbe), opacity .3s ease-out;
}

/* L'icône de police de video.js ferait doublon avec le triangle dessiné ci-dessus. */
.video-js .vjs-big-play-button .vjs-icon-placeholder,
.video-js .vjs-big-play-button .vjs-svg-icon {
    display: none;
}

/* Les deux ondes : un anneau, puis un voile, décalés d'une demi-respiration. */
.video-js .vjs-big-play-button::before,
.video-js .vjs-big-play-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: lp-onde 2.8s var(--lp-courbe) 8;
}

.video-js .vjs-big-play-button::before {
    border: 2px solid rgba(255, 255, 255, .7);
    border-color: color-mix(in srgb, var(--lp-couleur) 72%, #fff);
}

.video-js .vjs-big-play-button::after {
    background: rgba(255, 255, 255, .25);
    background: color-mix(in srgb, var(--lp-couleur) 40%, transparent);
    animation-delay: 1.4s;
}

@keyframes lp-onde {
    0% { opacity: .65; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.95); }
}

@keyframes lp-apparait {
    from { opacity: 0; transform: scale(.82); }
}

/* Les ondes invitent à la première lecture, huit respirations (~22 s) au plus. Une fois la
   vidéo lancée, mise en pause comprise, le visiteur sait où relancer : plus d'onde. */
.video-js.vjs-has-started .vjs-big-play-button::before,
.video-js.vjs-has-started .vjs-big-play-button::after {
    animation: none;
}

/* Petit lecteur : bouton réduit (videojs_style* imposent 66 px en !important). */
.video-js.vjs-480 .vjs-big-play-button {
    --lp-taille: 64px;
}

@media (hover: hover) and (pointer: fine) {
    .video-js:hover .vjs-big-play-button {
        transform: scale(1.08);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 18px 42px rgba(0, 0, 0, .36);
    }
}

.video-js .vjs-big-play-button:active {
    transform: scale(.95);
    transition-duration: .1s;
}

.video-js .vjs-big-play-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* « Réduire les animations » : un seul halo fixe, ni onde, ni entrée, ni zoom. */
@media (prefers-reduced-motion: reduce) {
    .video-js .vjs-big-play-button,
    .video-js:hover .vjs-big-play-button,
    .video-js .vjs-big-play-button:active {
        animation: none;
        transition: none;
        transform: none;
    }

    .video-js .vjs-big-play-button::before {
        animation: none;
        opacity: .45;
        transform: scale(1.22);
    }

    .video-js .vjs-big-play-button::after {
        display: none;
    }
}