/* Bavisco — hero néon « s'allume au scroll ».
   Piste haute + scène épinglée (sticky). Le JS pose --p/--veil/--reveal/--dissolve.
   Le glow vit ici (intro nuit) ; il ne déborde JAMAIS sur les sections kraft. */

.hero {
  --p: 0;          /* progression du scrub 0→1            */
  --veil: 1;       /* opacité du voile sombre 1→0          */
  --reveal: 0;     /* révélation du titre 0→1              */
  --dissolve: 0;   /* fondu vers le kraft 0→1 (toute fin)  */

  position: relative;
  height: 250vh;                 /* piste de scroll : 100vh épinglés + 150vh de scrub */
  background: var(--bv-nuit-profond);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 116%, #15131b 0%, var(--bv-nuit) 42%, var(--bv-nuit-profond) 100%);
  isolation: isolate;
}

/* Mur en bois flou : remplit le letterbox 9:16 (au lieu des barres noires),
   sans agrandir/rogner la vidéo nette. Statique : les bords haut/bas du mur
   bougent peu pendant l'allumage, donc aucun décalage visible. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-color: var(--bv-nuit-profond);
  /* Desktop / paysage : mur de bois NET pleine largeur. Image dérivée du mur du clip
     (néons retirés par inpainting), planches à l'échelle de la vidéo centrée, et
     COULEUR calée ligne à ligne sur l'INTÉRIEUR de la frame TELLE QUE RENDUE par le
     navigateur (la vidéo BT.709 s'affiche ~15 % plus claire que ses valeurs de fichier ;
     idem poster/still, réétalonnés). Le vignettage du clip se dissout sous le fondu
     large (voir --hero-feather) : le mur reprend au niveau du mur DANS la vidéo, pas
     au niveau de son bord assombri. Hauteur = scène, tuilé en largeur. */
  background-image: url("../assets/neon-wood-wide.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
}
/* Prolongation du vignettage : DANS la vidéo, la lumière tombe radialement vers les
   bords ; l'image de mur (calée sur la valeur du bord) resterait PLATE au-delà — l'œil
   voit ce « coude ». On continue donc la chute vers les bords de l'écran, par-dessus le
   mur seulement (z0, sous la vidéo) : le dégradé est nul sur toute la largeur de la
   vidéo (50% ± 28.125vh) et fonce ensuite doucement. Géométrie viewport, jamais tuilée. */
.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(8, 6, 4, .24) 0%,
      transparent calc(50% - 28.125vh),
      transparent calc(50% + 28.125vh),
      rgba(8, 6, 4, .24) 100%);
}
/* Écran plus étroit que la vidéo (téléphones → letterbox haut/bas) : on prolonge le VRAI
   bois vertical (calé sur la largeur comme la vidéo `contain` centrée). */
@media (max-aspect-ratio: 720 / 1280) {
  .hero__backdrop {
    background-image: url("../assets/neon-wood-tall.webp");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  /* même prolongation, sur l'axe vertical (letterbox haut/bas) */
  .hero__backdrop::after {
    background: linear-gradient(to bottom,
        rgba(8, 6, 4, .24) 0%,
        transparent calc(50% - 88.889vw),
        transparent calc(50% + 88.889vw),
        rgba(8, 6, 4, .24) 100%);
  }
}

/* Halo chaud derrière le panneau : la nuit qui se réchauffe à l'allumage */
.hero__glow {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 52%,
      rgba(255, 196, 120, 0.55) 0%,
      rgba(240, 162, 58, 0.22) 38%,
      transparent 72%);
  opacity: calc(var(--p) * 0.85);
  mix-blend-mode: screen;
  transition: opacity .05s linear;
}

/* La vidéo des vrais néons (9:16). L'enseigne « Bavisco HC » doit rester ENTIÈRE :
   on la « contain » partout (jamais rognée) ; la nuit remplit le letterbox. */
.hero__video,
.hero__still {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;       /* centré : le bois de fond peut s'aligner pile */

  /* Fondu des bords vers le mur de fond : le mur est calé sur l'INTÉRIEUR de la frame
     (voir .hero__backdrop) ; le bord de la vidéo, lui, est VIGNETTÉ (plus sombre). Le
     fondu est donc LARGE : l'anneau sombre du vignettage passe sous une alpha faible et
     c'est le mur — au bon niveau — qui prend sa place. Trop étroit, l'anneau ressort en
     bande sombre ; large, la transition se lit comme la lumière qui tombe.
     --vid-pad-* = letterbox/pillarbox du `contain` ; les % d'un dégradé se mesurent sur
     la boîte de l'élément (pas le viewport) → juste même avec une barre de défilement
     classique → le fondu démarre pile sur le bord PEINT, pas sur le bord de la scène. */
  --vid-pad-x: max(0px, calc(50% - 28.125vh));    /* défaut paysage : barres latérales */
  --vid-pad-y: 0px;
  --hero-feather: clamp(72px, 9vmin, 128px);
  /* On ne fond QUE l'axe qui a un letterbox (là où le mur de fond doit prendre le
     relais). L'autre axe : la vidéo touche déjà le bord (plein cadre) → fondu 0, sinon
     on révélerait les bords plus sombres du fond et on créerait des bandes. */
  --feather-x: var(--hero-feather);   /* paysage : fondu des côtés (pillarbox)        */
  --feather-y: 0px;                    /* haut/bas plein cadre : aucun fondu            */
  -webkit-mask-image:
    linear-gradient(to bottom, #0000 var(--vid-pad-y),
      #000 calc(var(--vid-pad-y) + var(--feather-y)),
      #000 calc(100% - var(--vid-pad-y) - var(--feather-y)),
      #0000 calc(100% - var(--vid-pad-y))),
    linear-gradient(to right, #0000 var(--vid-pad-x),
      #000 calc(var(--vid-pad-x) + var(--feather-x)),
      #000 calc(100% - var(--vid-pad-x) - var(--feather-x)),
      #0000 calc(100% - var(--vid-pad-x)));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #0000 var(--vid-pad-y),
      #000 calc(var(--vid-pad-y) + var(--feather-y)),
      #000 calc(100% - var(--vid-pad-y) - var(--feather-y)),
      #0000 calc(100% - var(--vid-pad-y))),
    linear-gradient(to right, #0000 var(--vid-pad-x),
      #000 calc(var(--vid-pad-x) + var(--feather-x)),
      #000 calc(100% - var(--vid-pad-x) - var(--feather-x)),
      #0000 calc(100% - var(--vid-pad-x)));
  mask-composite: intersect;
}
.hero__still { display: none; } /* image fixe allumée : fallback no-js / reduced-motion */

/* Portrait (téléphone) : la vidéo remplit la largeur → letterbox haut/bas (plus de
   barres latérales). On bascule le calcul du fondu sur l'axe vertical. Même point de
   bascule que le backdrop bois plus bas. */
@media (max-aspect-ratio: 720 / 1280) {
  .hero__video,
  .hero__still {
    --vid-pad-x: 0px;
    --vid-pad-y: max(0px, calc(50% - 88.889vw));
    --feather-x: 0px;                  /* plein largeur : aucun fondu latéral          */
    --feather-y: var(--hero-feather);  /* letterbox haut/bas : on fond ici             */
  }
}

/* (Ancien `.hero__lift` retiré : un dégradé chaud en `screen` relevait les bords
   vignettés de la frame, mais laissait une couture ~40 de luminance trop sombre et
   un peu orangée. Le fondu des bords — voir `.hero__video, .hero__still` — dissout
   directement la vidéo dans le mur de fond aligné : plus de relève nécessaire.) */

/* Voile sombre : garde l'état « éteint » bien nocturne, se lève à l'allumage */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,5,7,.55) 0%, rgba(5,5,7,0) 26%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(5,5,7,.7) 100%);
  background-color: rgba(5, 5, 7, 0.62);
  opacity: var(--veil);
  transition: opacity .05s linear;
}

/* Grain de sérigraphie, très discret, pour la continuité de marque */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--bv-grain);
  opacity: .10;
  mix-blend-mode: overlay;
}

/* — Bloc d'intro (wordmark + tagline + CTA + hint) — */
.hero__intro {
  position: relative;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;            /* le contenu vit SOUS l'enseigne, pas dessus */
  gap: var(--bv-space-sm);
  padding: var(--bv-space-xl) var(--bv-space-md) 14vh;
  text-align: center;
  /* plus de scrim bas : il rassombrissait le bord inférieur (les « barres »).
     La lisibilité du texte passe par l'ombre portée du tagline + le fond du CTA. */
  pointer-events: none;                  /* laisse passer le scroll ; le CTA le réactive */
}
.hero__intro > * { pointer-events: auto; }

/* h1 SEO non visible : l'enseigne au néon EST le logotype */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.hero__tagline {
  font-family: var(--bv-font-script);
  font-size: clamp(1.4rem, 5.5vw, 2.4rem);   /* script : plus présent qu'un label mono */
  letter-spacing: 0;
  color: rgba(246, 234, 210, .92);
  /* le tagline se révèle sur le mur éclairé (clair) : ombre portée pour le détacher */
  text-shadow: 0 1px 2px rgba(10, 7, 4, .9), 0 0 14px rgba(10, 7, 4, .5);
  opacity: var(--reveal);
  transform: translateY(calc((1 - var(--reveal)) * 10px));
  transition: opacity .06s linear, transform .06s linear;
}

.hero__cta {
  margin-top: var(--bv-space-sm);
  opacity: clamp(0, calc((var(--reveal) - .25) * 1.6), 1);
  transform: translateY(calc((1 - var(--reveal)) * 14px));
  transition: opacity .06s linear, transform .06s linear;
}

/* Indice de scroll : visible à l'état éteint, disparaît dès qu'on commence */
.hero__hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bv-space-lg) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--bv-space-2xs);
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  letter-spacing: var(--bv-tracking-wide);
  text-transform: uppercase;
  color: rgba(246, 234, 210, .7);
  opacity: clamp(0, calc(1 - var(--p) * 8), 1);
  transition: opacity .08s linear;
}
.hero__hint::after { content: "↓"; animation: bv-bob 1.6s var(--bv-ease) infinite; }
@keyframes bv-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* CTA néon (variante claire sur fond nuit) : tampon crème, ombre ambre (accent DS) */
.hero__cta.stamp {
  color: var(--bv-encre);
  background-color: var(--bv-kraft-clair);
  border-color: var(--bv-kraft-clair);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--bv-vermillon) 90%, transparent);
}

/* Raccord bas vers le papier kraft (nuit → atelier).
   AVANT : un aplat kraft PLEIN ÉCRAN (z6) recouvrait toute la scène en fin de scrub ;
   comme la scène épinglée fait 100vh, ce bloc kraft opaque devait ensuite défiler sur
   ~100vh avant que le contenu monte → d'où le grand « vide beige ».
   MAINTENANT : l'enseigne reste ALLUMÉE ; on ne pose qu'un « sol » kraft dégradé en bas
   de la scène, SOUS le bloc d'intro (z3). Le mur chaud se raccorde au papier, l'enseigne
   s'efface en défilant — plus de pleine page beige, plus de vide. */
.hero__dissolve {
  position: absolute;
  inset: 0;
  z-index: 3;                 /* sous l'intro : le tagline/CTA restent nets par-dessus */
  pointer-events: none;
  background: linear-gradient(to bottom,
      transparent 58%,
      var(--bv-surface) 92%); /* fond vers la couleur EXACTE de la 1re section (surface),
                                 et la tient pleine sur le dernier ruban → les deux parties
                                 se rejoignent sur le même crème : aucune ligne de couture */
  opacity: var(--dissolve);
}

/* — Fallbacks : pas de JS, ou mouvement réduit → on montre l'enseigne ALLUMÉE, fixe — */
.no-js .hero,
.reduced .hero { height: 100vh; }
.no-js .hero__video,
.reduced .hero__video { display: none; }
.no-js .hero__still,
.reduced .hero__still { display: block; }
.no-js .hero__veil,
.reduced .hero__veil { opacity: 0; }
.no-js .hero__glow,
.reduced .hero__glow { opacity: .7; }
.no-js .hero__hint,
.reduced .hero__hint { display: none; }
.no-js .hero,
.reduced .hero { --reveal: 1; }