/* =========================================
= SOUS-COMPOSANT — VIDÉO DE LA SECTION ATELIER (.nl-story-video--*)
= Interne à front-page/home-story/, extrait de la section en 1.2.288.
= Markup : story-video.php · JS : story-video.js · enqueue : inc-story-video.php
=
= ⚠️ La HAUTEUR vient de la section hôte : .nl-home-story porte le
=   min-height: calc(100vh - 5rem), que le wrap reprend par héritage. Changer
=   la hauteur de la vidéo se fait donc dans home-story.css, pas ici.
========================================= */
.nl-story-video--wrap {
  position: relative;
  height: 100%;
  min-height: inherit;   /* = le min-height de .nl-home-story */
  overflow: hidden;
  /* Skeleton shimmer pendant le chargement de la vidéo (recouvert par elle),
     repris de wc-card-sug (1.2.290). Keyframe propre → composant autonome.
     Remplace le fond --primary, qui affichait un grand rectangle sombre inerte
     le temps que la vidéo arrive. */
  background: linear-gradient(100deg,
    var(--secondary-c) 25%,
    var(--secondary) 50%,
    var(--secondary-c) 75%
  );
  background-size: 300% 100%;
  animation: nl-story-video-shimmer 1.5s ease-in-out infinite;
}
/* Vidéo prête → shimmer coupé (classe posée par story-video.js) */
.nl-story-video--wrap.is-loaded {
  animation: none;
  background: var(--secondary-c);
}
@keyframes nl-story-video-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-story-video--wrap { animation: none; background: var(--secondary-c); }
}

.nl-story-video--media {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
/* Masquée tant que la vidéo n'est pas prête. Gated « scripting: enabled » :
   sans JS, aucune classe .is-loaded n'est posée — la vidéo resterait invisible. */
@media (scripting: enabled) {
  .nl-story-video--media { opacity: 0; }
  .nl-story-video--wrap.is-loaded .nl-story-video--media { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-story-video--media { transition: none; opacity: 1; }
}

/* Mobile : la vidéo passe en portrait plutôt que de garder la hauteur d'écran.
   Le min-height de la section est levé au même seuil (cf. home-story.css). */
@media (max-width: 48rem) {
  .nl-story-video--wrap { aspect-ratio: 3 / 4; }
}

/* Reveal au scroll (story-video.js) : la vidéo est masquée AVANT le JS,
   uniquement si scripting actif ET animations autorisées → aucun flash.
   Sans JS / GSAP absent / reduced-motion → visible (le JS révèle en fallback). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nl-story-video--wrap { opacity: 0; }
}