/* Le passage: the fly-through from the hero into Notre valeur (see sections/flight.js) */
.hero__flight { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; background: #0b0f14; }
/* the Valeur film's shade, carried by the stage so the two sections share it */
.hero__veil {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 8, 6, 0.74) 0%, rgba(10, 8, 6, 0.5) 42%, rgba(10, 8, 6, 0.16) 78%, rgba(10, 8, 6, 0.08) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.32) 0%, rgba(10, 8, 6, 0) 22%, rgba(10, 8, 6, 0) 70%, rgba(10, 8, 6, 0.4) 100%);
}
.hero__veil::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.07; }
html[dir="rtl"] .hero__veil { scale: -1 1; }

.flight__words {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: clamp(6rem, 17vw, 20rem);
  padding-inline: var(--gutter);
}
.flight__w {
  font-family: var(--f-display); font-weight: 400; line-height: 1; white-space: nowrap;
  font-size: clamp(3rem, 7vw, 9.5rem); letter-spacing: -0.03em;
  color: #f6efe3; text-shadow: 0 8px 46px rgba(6, 9, 13, 0.6);
  opacity: 0; visibility: hidden; will-change: transform, opacity;
}
.flight__w--b { font-style: italic; color: var(--champagne); }
@media (max-aspect-ratio: 4/5) {
  .flight__words { flex-direction: column; gap: 34vh; }
  .flight__w { font-size: clamp(2.6rem, 13vw, 5rem); }
}

/* ---- running: the hero is a scroll track, its media a stage fixed behind the page ----
   content-box keeps every min-height the hero already has for its first screen;
   the run is added below it as padding. Nothing is pinned, so nothing can jump
   when a pin starts or ends (iOS momentum scrolling included). */
.hero.has-flight {
  box-sizing: content-box;
  padding-bottom: calc(var(--flight-run, 2.5) * 100vh);
  padding-bottom: calc(var(--flight-run, 2.5) * 100svh);
  isolation: auto;
  background: transparent;
}
.hero.has-flight .hero__media,
.hero.has-flight .flight__words {
  position: fixed; top: 0; right: 0; bottom: auto; left: 0;
  height: 100vh; height: 100lvh;
}
.hero.has-flight .hero__media { z-index: -1; transform: none; }
.hero.has-flight .hero__inner { will-change: transform, opacity; }
.hero.flight-off .hero__media, .hero.flight-off .flight__words { visibility: hidden; }

/* the Valeur section lets the same stage play behind its words */
.valeur.valeur--staged { background: transparent; }
.valeur.valeur--staged::before, .valeur.valeur--staged .valeur__film { display: none; }
/* frame set without the Valeur film: that section keeps its own film and comes up
   over the stage with a feathered top edge instead of a hard line */
.valeur.valeur--feather {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 min(24vh, 210px));
  mask-image: linear-gradient(180deg, transparent 0, #000 min(24vh, 210px));
}
.valeur.valeur--staged::after {
  content: ""; position: absolute; inset: auto 0 0; height: min(42%, 70vh); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0), rgba(10, 8, 6, 0.9));
}

.no-js .hero__flight, .no-js .flight__words, .no-js .hero__veil { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__flight, .flight__words, .hero__veil { display: none; } }
@media print {
  .hero__flight, .flight__words, .hero__veil { display: none !important; }
  .hero.has-flight { padding-bottom: 0; }
}

/* ---- Pourquoi: the room scene plays once, framed whole so the agenda stays in shot ---- */
.why__frame.is-cinema .pourquoi__film video { scale: 1; }