/* § Origin — le scroll pilote le temps du film.
 *
 * Le verrou est celui de product-cabinet-scroll-cinema.js : classes .is-locked
 * et .is-after, position fixed. Pas de position:sticky — html et body portent
 * overflow-x:hidden (styles.css:19 et :831) et la section voisine emploie deja
 * ce mecanisme. Deux blocs qui se ressemblent doivent se comporter pareil.
 */

.product-origin {
  padding: clamp(40px, 6vw, 88px) 0 0;
}

.product-origin__head {
  width: min(var(--max), calc(100% - 36px));
  margin-inline: auto;
}

.product-origin__head h2 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(2.18rem, 3.75vw, 3.72rem);
  line-height: 1.02;
  /* Le crenage se resserre quand le corps grandit. */
  letter-spacing: -.024em;
  font-weight: 500;
  text-wrap: balance;
}

/* 13,00 s de film x 46 vh par seconde : assez de course pour lire une ligne
   sans avoir l'impression de ramer. */
.product-origin__scroll {
  position: relative;
  height: clamp(3800px, 598vh, 6400px);
  margin-top: clamp(20px, 3vw, 40px);
}

/* Une seule hauteur, declaree une seule fois : le cadre ne change jamais de
   taille pendant le defilement. Une boite qui grandit puis retrecit se lit
   comme un defaut, pas comme un effet. */
.product-origin__sticky {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.product-origin__scroll.is-locked .product-origin__sticky {
  position: fixed;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
}

.product-origin__scroll.is-after .product-origin__sticky {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.product-origin__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* Effet de bord de defilement, pas un filet : le texte se detache du film
   sans qu'une ligne vienne couper l'image. */
.product-origin__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .58) 46%, rgba(0, 0, 0, .88) 100%);
}

.product-origin__line {
  position: absolute;
  left: clamp(20px, 4vw, 56px);
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(30px, 5vh, 62px);
  margin: 0;
  max-width: 20ch;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.72rem, 3.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-weight: 500;
  text-wrap: balance;
  /* Entree : opacite, montee, nettete. Uniquement des proprietes compositeur. */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 260ms cubic-bezier(.16, 1, .3, 1),
    transform 260ms cubic-bezier(.16, 1, .3, 1),
    filter 260ms cubic-bezier(.16, 1, .3, 1);
}

.product-origin__line.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* La sortie est plus discrete que l'entree, et plus courte. */
.product-origin__line.is-out {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(3px);
  transition-duration: 180ms;
}

/* Le nom est un nom, pas une phrase : capitales et crenage positif. */
.product-origin__line--name {
  letter-spacing: .14em;
  font-size: clamp(1.5rem, 3vw, 2.7rem);
  font-weight: 600;
}

@media (max-width: 980px) {
  .product-origin__scroll {
    height: clamp(3200px, 520vh, 5200px);
  }

}

@media (max-width: 620px) {
  .product-origin {
    padding-top: 32px;
  }

  .product-origin__head h2 {
    font-size: clamp(2rem, 8.3vw, 2.8rem);
    max-width: 14ch;
  }

  .product-origin__scroll {
    height: clamp(2600px, 460vh, 4200px);
  }

  .product-origin__line {
    max-width: none;
    font-size: clamp(1.5rem, 7.4vw, 2.2rem);
    bottom: clamp(26px, 6vh, 48px);
  }

  .product-origin__line--name {
    font-size: clamp(1.3rem, 6vw, 1.9rem);
  }
}

/* Mouvement reduit : pas de scrub, pas de verrou. La derniere image du film
   et les quatre lignes empilees, lisibles d'un coup. */
@media (prefers-reduced-motion: reduce) {
  .product-origin__scroll {
    height: auto;
    margin-top: clamp(16px, 2.4vw, 28px);
  }

  .product-origin__sticky {
    height: auto;
    padding-bottom: clamp(24px, 4vw, 40px);
  }

  .product-origin__video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .product-origin__floor {
    display: none;
  }

  .product-origin__line {
    position: static;
    max-width: 34ch;
    margin: clamp(14px, 2vw, 22px) clamp(20px, 4vw, 56px) 0;
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .product-origin__floor {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .86) 38%, #000 100%);
  }
}