/* ------------------------------------------------------------------
   Titre du hero — se construit pendant que la pizza s'assemble.
   Toutes les valeurs animées arrivent en custom properties écrites
   par hero-title.js (une seule écriture par frame).

   z-index 15 : sous le header (z-50) et sous le panneau final (z-20),
   qui recouvre donc naturellement le titre quand il monte.
   ------------------------------------------------------------------ */

#hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: var(--ho-master, 0);
  visibility: var(--ho-vis, hidden);
  contain: layout style paint;
}

/* Le voile ne sert qu'à détacher le titre des ingrédients qui tombent.
   Une fois la pizza posée, le haut de l'image est vide : le voile s'efface
   pour rendre au visuel son contraste d'origine. */
#hero-overlay .ho-scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 64vh;
  opacity: var(--ho-scrim, 1);
  background: linear-gradient(
    to bottom,
    rgb(246 232 194 / 0.9) 0%,
    rgb(246 232 194 / 0.62) 38%,
    rgb(246 232 194 / 0.22) 70%,
    rgb(246 232 194 / 0) 100%
  );
}

#hero-overlay .ho-inner {
  position: absolute;
  inset-inline: 0;
  top: clamp(6rem, 15vh, 11rem);
  padding-inline: 1.5rem;
  text-align: center;
}

#hero-overlay .ho-eyebrow {
  font-size: clamp(0.625rem, 1vw, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-tomato);
  margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem);
  opacity: var(--ho-o1, 0);
  transform: translateY(var(--ho-y1, 24px));
}

#hero-overlay .ho-title {
  margin: 0;
  line-height: 0.88;
}

#hero-overlay .ho-line {
  display: block;
  white-space: nowrap;
  will-change: transform, opacity;
}

/* « La pizza napolitaine » : ligne 2,5× plus longue que l'ancien
   « La pizza » — tailles recalées pour tenir sur UNE ligne partout,
   du 320 px au grand écran (le titre reste sur 2 lignes). */
#hero-overlay .ho-l1 {
  font-family: var(--font-block);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(1.625rem, 7.6vw, 6.5rem);
  color: var(--color-tomato);
  opacity: var(--ho-o1, 0);
  transform: translateY(var(--ho-y1, 24px));
}

#hero-overlay .ho-l2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.375rem, 6vw, 5.25rem);
  color: var(--color-ink);
  margin-top: -0.02em;
  opacity: var(--ho-o2, 0);
  transform: translateY(var(--ho-y2, 24px));
}

#hero-overlay .ho-sub {
  margin: clamp(1rem, 2.4vh, 1.75rem) auto 0;
  max-width: 62ch;
  text-wrap: balance;
  font-size: clamp(0.75rem, 1.15vw, 0.9375rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-ink-soft);
  opacity: var(--ho-o3, 0);
  transform: translateY(var(--ho-y3, 20px));
}

/* La signature de la maison, sous la ligne de specs : italique display,
   même fenêtre d'apparition que .ho-sub (mêmes variables --ho-o3/y3). */
#hero-overlay .ho-tag {
  margin: clamp(0.6rem, 1.4vh, 1rem) auto 0;
  max-width: 40ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  letter-spacing: 0.01em;
  color: var(--color-tomato);
  opacity: var(--ho-o3, 0);
  transform: translateY(var(--ho-y3, 20px));
}

/* ------------------------------------------------------------------
   Correctif : dans ce build, les opacity pilotées par MotionValue ne
   sont jamais appliquées sur le panneau final (les transforms, si).
   Résultat : le titre du hero restait invisible. On reprend la main
   via des règles !important — un style inline sans priorité ne peut
   pas les écraser, donc aucune lutte frame par frame avec la lib.
   ------------------------------------------------------------------ */

[data-hero] > div > div:nth-child(2) {
  opacity: var(--fix-panel, 0) !important;
}
[data-hero] h1 {
  opacity: var(--fix-h1, 0) !important;
}
[data-hero] .container-x > p {
  opacity: var(--fix-p, 0) !important;
}
[data-hero] .container-x > div:last-child {
  opacity: var(--fix-cta, 0) !important;
}

/* Mobile : le hero bascule sur une carte vidéo centrée, le titre remonte
   au-dessus d'elle et se resserre. */
@media (max-width: 767px) {
  #hero-overlay .ho-inner {
    top: clamp(5rem, 12vh, 8rem);
  }
  #hero-overlay .ho-scrim {
    height: 52vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-overlay .ho-eyebrow,
  #hero-overlay .ho-l1,
  #hero-overlay .ho-l2,
  #hero-overlay .ho-sub,
  #hero-overlay .ho-tag {
    transform: none;
  }
}

/* Indicateur de scroll — badge bien visible, mobile et desktop.
   Disparaît définitivement au premier vrai scroll (latch en JS). */
#hero-overlay .ho-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 5vh, 3.5rem);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.15rem;
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 0 var(--color-ink);
  opacity: var(--ho-hint, 0);
  color: var(--color-ink);
  animation: ho-rebond 1.7s ease-in-out infinite;
}

#hero-overlay .ho-hint-txt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  /* compense visuellement le tracking du dernier caractère */
  margin-right: -0.24em;
}

#hero-overlay .ho-hint-fleche {
  color: var(--color-tomato);
  animation: ho-pointe 1.7s ease-in-out infinite;
}

@keyframes ho-rebond {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes ho-pointe {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  #hero-overlay .ho-hint,
  #hero-overlay .ho-hint-fleche {
    animation: none;
  }
}