/* Tout le mouvement de la page, et seulement lui. Hors de ce bloc, la page est complète et immobile :
   « mouvement réduit » coupe tout par construction. On n'anime que transform, opacity, filter et --reg/--pos. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  :root { interpolate-size: allow-keywords; }

  /* 1. Ouverture : le titre tombe comme un tampon, les plaques CMJN se recalent. */
  .hero-title { animation: register 0.9s var(--out) 0.1s backwards; }
  .hero-title .slam { animation: slam 0.65s var(--slam) backwards; }
  .hero-title .slam-2 { animation-delay: 0.18s; }

  @keyframes slam { from { scale: 1.45; translate: 0 -0.15em; } }
  @keyframes register { from { --reg: 18px; } }

  /* La case du héros : l'ancien site encaisse le BAM, le nouveau entre en force. */
  .win-old { animation: hit 0.45s var(--out) 0.62s; }
  .burst-bam { animation: burst-in 0.6s var(--slam) 0.5s backwards; }
  .win-new { animation: enter-right 0.7s var(--slam) 0.85s backwards; }

  @keyframes hit {
    20% { translate: -10px 5px; }
    45% { translate: 8px -4px; }
    70% { translate: -4px 2px; }
  }
  @keyframes burst-in { from { scale: 0.3; rotate: -40deg; opacity: 0; } }
  @keyframes enter-right { from { translate: 125% 12%; } }

  /* 2. Bulles : elles gonflent au survol et éclatent au clic (effects.js pose les classes). */
  .pop { transition: scale 0.25s var(--slam); }
  .pop:hover { scale: 1.1; }
  .pop.is-popping { animation: pop-out 0.42s var(--out) forwards; }
  .pop.is-back { animation: pop-back 0.55s var(--slam) backwards; }

  @keyframes pop-out {
    35% { scale: 1.35; opacity: 1; filter: blur(0); }
    to { scale: 1.8; opacity: 0; filter: blur(4px); }
  }
  @keyframes pop-back { from { scale: 0.4; opacity: 0; } }

  .particles { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
  .particles i {
    position: absolute;
    width: 11px;
    height: 11px;
    border: 2px solid var(--ink);
    border-radius: 50%;
  }
  .particles i.sq { border-radius: 0; }

  /* 3. Trame Ben-Day qui suit le curseur (souris seulement). */
  @media (hover: hover) and (pointer: fine) {
    .trame {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
      width: 22rem;
      height: 22rem;
      margin: -11rem 0 0 -11rem;
      overflow: hidden;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: multiply;
      mask-image: radial-gradient(closest-side, #000 25%, transparent);
      transition: opacity 0.25s var(--out);
      translate: -50vw -50vh;
    }
    .trame.is-on { opacity: 0.9; }
    .trame-dots {
      position: absolute;
      top: 11rem;
      left: 11rem;
      width: 100vw;
      height: 100vh;
      background:
        radial-gradient(circle, var(--magenta) 30%, transparent 34%) 0 0 / 14px 14px,
        radial-gradient(circle, var(--magenta) 30%, transparent 34%) 7px 7px / 14px 14px;
    }
  }

  /* 4. Bandeau défilant, en pause au survol, au focus ou par son bouton. */
  .bandeau-track { width: max-content; animation: defile 32s linear infinite; }
  .bandeau-list { flex-wrap: nowrap; flex-shrink: 0; }
  .bandeau-list[aria-hidden="true"] { display: flex; }
  .bandeau-pause { display: grid; }
  .bandeau:hover .bandeau-track,
  .bandeau:focus-within .bandeau-track,
  .bandeau.is-paused .bandeau-track { animation-play-state: paused; }

  @keyframes defile { to { translate: -50% 0; } }

  /* 5. Bouton : il se soulève au survol et s'écrase au clic, sa trame glisse. */
  .btn { transition: translate var(--t), box-shadow var(--t), background-position 0.25s var(--out); }
  .btn:active { transition-duration: 0.05s; }
  .demande[data-state="sending"] .btn-go::after {
    content: "";
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.5em;
    border: 3px solid var(--ink);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { rotate: 1turn; } }

  .demande.is-shaking { animation: shake 0.4s var(--out); }
  @keyframes shake {
    20% { translate: -8px 0; }
    40% { translate: 7px 0; }
    60% { translate: -4px 0; }
    80% { translate: 2px 0; }
  }

  /* 6. Succès : KAPOW jaillit, le titre se recale. Les confettis viennent de particles.js. */
  .demande-ok:not([hidden]) .kapow { animation: burst-in 0.7s var(--slam) backwards; }
  .demande-ok:not([hidden]) .ok-title { animation: register 0.8s var(--out) 0.15s backwards; }

  /* 7. Avant/après : la poignée se dandine une fois pour montrer qu'elle bouge. */
  .compare-stage.is-hinting { animation: hint 1.8s var(--out); }
  @keyframes hint {
    30% { --pos: 72; }
    65% { --pos: 30; }
  }

  .caret { animation: blink 1s steps(2, jump-none) 4; }
  @keyframes blink { 50% { opacity: 0; } }

  /* 8. Questions : la réponse se déplie. */
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.25s var(--out), content-visibility 0.25s allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }

  /* 9. Au défilement : les titres se recalent, les cases se posent, les onomatopées gonflent. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .section-title {
      animation: register linear backwards;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    .case,
    .compare,
    .prix-burst,
    .prix-liste,
    .faq details,
    .verif-carte,
    .qui-photo,
    .bulle {
      animation: panel-in linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .onomato {
      animation: swell linear backwards;
      animation-timeline: view();
      animation-range: entry 50% cover 40%;
    }

    @keyframes panel-in { from { translate: 0 3rem; rotate: -2.5deg; scale: 0.96; } }
    @keyframes swell { from { scale: 0.4; } }
  }
}