/* =========================================================
   Hero cinématographique — JLPDécryptage
   Deux couches vidéo superposées pour un fondu enchaîné
   sans coupure ni image noire. Sobre et premium.
   ========================================================= */

/* Fondu d'apparition de la vidéo au chargement */
.jlp-hero-cine{opacity:0;animation:jlpHeroVideoIn 1.6s ease forwards}
@keyframes jlpHeroVideoIn{to{opacity:1}}

/* Chaque couche vidéo occupe tout le cadre, recadrage élégant */
.jlp-cine-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:opacity .9s ease-in-out;will-change:opacity;
}

/* ---------------------------------------------------------
   Séquence d'ouverture — apparition orchestrée (~5 s)
   1. JLP DÉCRYPTAGE  2. Julien Laurenceau Porte
   3. Cinq lignes une par une (fade + légère montée)
   4. Boutons
   --------------------------------------------------------- */
.jlp-hero-content .hero-seq{
  opacity:0;transform:translateY(16px);
  animation:jlpHeroRise 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}
.jlp-hero-content .hs-logo{animation-delay:.25s;animation-duration:1.5s}
.jlp-hero-content .hs-name{animation-delay:1.05s}
.jlp-hero-content .hs-l1{animation-delay:1.70s}
.jlp-hero-content .hs-l2{animation-delay:2.50s}
.jlp-hero-content .hs-l3{animation-delay:3.30s}
.jlp-hero-content .hs-l4{animation-delay:4.10s}
.jlp-hero-content .hs-l5{animation-delay:4.90s}
.jlp-hero-content .hs-cta{animation-delay:5.60s}
@keyframes jlpHeroRise{to{opacity:1;transform:none}}

/* ---------------------------------------------------------
   Révélation lente des sections au défilement
   (classe posée par hero-cine.js via IntersectionObserver)
   --------------------------------------------------------- */
.jlp-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 1.25s ease, transform 1.25s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.jlp-reveal.jlp-reveal-in{opacity:1;transform:none}

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  .jlp-hero-cine,
  .jlp-hero-content .hero-seq{animation:none;opacity:1;transform:none}
  .jlp-cine-layer{transition:none}
  .jlp-reveal{opacity:1;transform:none;transition:none}
}