/* ============================================================
   LE FILM DU CLUB, en une minute. Lecteur de l'accueil, piloté
   par vsl.js.

   La section n'est PAS un .act : home-3d.css alterne crème et
   forêt en repli 2D par :nth-child(even of .act), et un acte de
   plus inverserait la couleur de toutes les sections en dessous.
   Elle reprend donc à la main ce que .act lui aurait donné : passer
   au-dessus de la scène, se centrer, parler en crème.

   Le nom .film est déjà pris (home-3d.css, la citation en
   italique) : tout ici s'appelle .vsl.
   ============================================================ */

/* Le rembourrage vertical vient de lux.css, en !important, comme
   pour tous les actes : la section garde leur respiration. */
[data-stage3d] .vsl-acte{
  position:relative; z-index:2;
  padding-inline:clamp(16px,4vw,60px);
  color:var(--lbc-cream); text-align:center;
}
html.no-3d [data-stage3d] .vsl-acte{ background:var(--lbc-forest-900,#041F1C); }
[data-stage3d] .vsl-acte .eyebrow{ color:var(--lbc-gold); margin:0 auto clamp(18px,3vh,28px); }
html.is-3d [data-stage3d] .vsl-acte .eyebrow{
  text-shadow:0 1px 2px rgba(4,20,17,.55), 0 4px 26px rgba(4,20,17,.75);
}

/* L'écran épouse le format exact du film : le bouton se place en
   pourcentage de sa hauteur, il doit tomber sur l'image et non sur
   une bande noire. La largeur est bornée par la hauteur de fenêtre :
   le film entier tient dans un écran. */
.vsl{
  position:relative; margin:0 auto;
  width:min(100%, 1040px, calc((100svh - 200px) * 16 / 9));
  aspect-ratio:16 / 9;
  background:#000; border-radius:12px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(184,150,63,.35), 0 40px 120px -50px rgba(0,0,0,.9);
}
.vsl[data-format="9x16"]{
  width:min(100%, 420px, calc((100svh - 170px) * 9 / 16));
  aspect-ratio:9 / 16;
}
.vsl__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }

/* Une ligne de hauteur nulle, posée à 69 % (65 % en vertical) : le
   bouton s'y centre par flex, sans transform. pierre.css anime déjà
   transform au survol et lux.js écrit translate au passage du
   pointeur, un centrage par l'un ou l'autre sauterait. */
.vsl__fin{
  position:absolute; left:0; right:0; top:69%; height:0;
  display:flex; justify-content:center; align-items:center;
  pointer-events:none;
}
.vsl[data-format="9x16"] .vsl__fin{ top:65%; }

/* La pierre du site, en filet clair : sur l'image, le grenat se
   perdait dans les noirs du film. Mêmes mesures, même typographie. */
[data-stage3d] .vsl .vsl__cta{
  pointer-events:auto;
  color:var(--pierre-ivoire,#F2EDE3);
  background:rgba(4,20,17,.38);
  box-shadow:
    inset 0 0 0 1.5px rgba(242,237,227,.9),
    0 10px 26px -12px rgba(0,0,0,.75);
  opacity:0; visibility:hidden;
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .7s,
    background .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s cubic-bezier(.22,.61,.36,1),
    transform .2s cubic-bezier(.22,.61,.36,1);
}
[data-stage3d] .vsl.is-fin .vsl__cta{ opacity:1; visibility:visible; transition-delay:0s; }
[data-stage3d] .vsl .vsl__cta:hover{
  background:rgba(242,237,227,.16);
  box-shadow:
    inset 0 0 0 2px var(--pierre-ivoire,#F2EDE3),
    0 14px 30px -12px rgba(0,0,0,.8);
}
[data-stage3d] .vsl .vsl__cta:focus-visible{ outline:2px solid var(--pierre-ivoire,#F2EDE3); outline-offset:3px; }

/* 09/10/2026 : l'entrée du film, au cinéma. Tout suit le défilement,
   à la molette comme pendant la dérive du couloir : le lecteur monte
   incliné, se redresse, se pose avec une légère respiration, et la
   salle s'assombrit autour de lui le temps qu'il tient le centre,
   puis se rallume quand il s'en va. La salle passe par ::after, le
   ::before des sections portant déjà le halo de finish.css. Seuls
   opacity et transform s'animent, la dérive reste fluide. Sans prise
   en charge, ou pour qui a demandé moins d'animations, rien ne change. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-stage3d] .vsl-acte{ view-timeline: --vsl-acte block; }
    [data-stage3d] .vsl-acte::after{
      content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
      background:radial-gradient(ellipse 75% 70% at 50% 52%, rgba(2,10,9,.35), rgba(2,10,9,.86));
      opacity:0;
      animation:vsl-salle linear both; animation-timeline:--vsl-acte;
      animation-range:cover 12% cover 92%;
    }
    [data-stage3d] .vsl-acte .eyebrow{
      animation:vsl-titre linear both; animation-timeline:--vsl-acte;
      animation-range:entry 0% entry 35%;
    }
    [data-stage3d] .vsl{
      transform-origin:50% 100%;
      animation:vsl-ecran linear both; animation-timeline:--vsl-acte;
      animation-range:entry 5% cover 45%;
    }
    [data-lbc-lux] .vsl.lux-r.lux-armed{ transition:none; }
    /* La mention attend que le lecteur soit posé : pendant sa montée,
       il la recouvrirait. */
    [data-stage3d] .vsl-acte .vsl__note{
      animation:vsl-titre linear both; animation-timeline:--vsl-acte;
      animation-range:cover 44% cover 52%;
    }
  }
}
@keyframes vsl-salle{ 0%{ opacity:0; } 32%,68%{ opacity:1; } 100%{ opacity:0; } }
@keyframes vsl-titre{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes vsl-ecran{
  0%{ opacity:0; transform:perspective(1600px) translateY(90px) rotateX(16deg) scale(.8); }
  45%{ opacity:1; }
  78%{ transform:perspective(1600px) translateY(0) rotateX(0) scale(1.015); }
  100%{ opacity:1; transform:none; }
}

/* 09/10/2026 : condition de Kassios, une image générée se dit telle.
   Même voix que « Ambiance d'illustration » : présente, jamais lue
   avant le film. */
[data-stage3d] .vsl-acte .vsl__note{
  margin:14px auto 0; max-width:min(100%,1040px);
  font:600 9.5px/1.5 Inter,system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,232,214,.42);
}