/* ——— MOUVEMENT ———
   Le defilement reste celui du navigateur : aucune interception, aucun defilement
   "doux" impose. Les animations ne font qu'accompagner ce que la page montre deja --
   sans JavaScript, et sur la toute premiere image, elle est complete. */

@media (prefers-reduced-motion: no-preference) {

  /* le titre se pose : les lettres se resserrent, l'or monte */
  .js .ouverture h1 { animation: pose 1.4s cubic-bezier(.16,.84,.34,1) both; }
  @keyframes pose {
    from { opacity: 0; letter-spacing: .28em; transform: translateY(12px); }
    to   { opacity: 1; letter-spacing: .03em; transform: none; }
  }
  .js .sous     { animation: monte .9s ease-out .42s both; }
  .js .accroche { animation: monte .9s ease-out .56s both; }
  .js .actions  { animation: monte .9s ease-out .70s both; }
  .js .mention  { animation: monte .9s ease-out .80s both; }
  .ouverture .film { animation: paraitre 2.4s ease both; }
  @keyframes monte {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes paraitre {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: none; }
  }

  /* la fleche turquoise traverse une fois le bas de l'ouverture */
  .ouverture { position: relative; overflow: hidden; }
  .ouverture::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 38%, var(--turquoise) 50%, transparent 62%);
    opacity: .9;
    transform: translateX(-100%);
    animation: fleche 9s ease-in-out 1.6s infinite;
  }
  @keyframes fleche {
    0%   { transform: translateX(-100%); }
    40%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }

  /* les blocs montent en entrant dans le champ, depuis un etat visible par defaut */
  .js .leve { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.34,1); }
  .js .leve.vu { opacity: 1; transform: none; }
  .js .cartes .leve:nth-child(2n) { transition-delay: .07s; }

  /* le bouton : l'or balaie au survol */
  .bouton { position: relative; overflow: hidden; }
  .bouton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .6s ease;
  }
  .bouton:hover::after { transform: translateX(120%); }
}