/* BIAMA LOVE — animations. Aucune ne s'applique si « réduire les animations » est activé sur l'appareil. */
@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Premier écran ── */
  @keyframes fondu { from { opacity: 0; transform: translateY(10px); } }
  .hero-heading .eyebrow { animation: fondu .8s ease both; }
  .hero-heading .intro { animation: fondu .8s ease 1.1s both; }
  /* Filet de sécurité : sans le découpage JS, le titre apparaît d'un bloc */
  .hero-heading h1:not(.decoupe) { animation: fondu .8s ease .3s both; }
  .hero-heading .mot {
    display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(4px);
    animation: mot-entre .75s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(var(--i) * 75ms + 150ms);
  }
  @keyframes mot-entre { to { opacity: 1; transform: none; filter: none; } }

  /* Zoom lent façon travelling sur l'image de la bande-annonce */
  .video-cover img { animation: travelling 24s ease-in-out infinite alternate; transform-origin: 60% 45%; }
  @keyframes travelling { to { transform: scale(1.09); } }

  /* Le bouton lecture « respire » */
  .play-disc::before, .play-disc::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(255, 248, 238, .85); pointer-events: none;
    animation: halo 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
  }
  .play-disc::after { animation-delay: 1.3s; }
  @keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

  /* Écran de fin : les éléments arrivent l'un après l'autre */
  .end-screen:not([hidden]) > * { animation: fondu .6s ease both; }
  .end-screen:not([hidden]) > :nth-child(2) { animation-delay: .15s; }
  .end-screen:not([hidden]) > :nth-child(3) { animation-delay: .3s; }
  .end-screen:not([hidden]) > :nth-child(4) { animation-delay: .45s; }

  /* ── 2. Compteurs en direct ── */
  .plus-un {
    position: absolute; right: 20px; top: 12px; z-index: 2; pointer-events: none;
    font: 700 22px/1 var(--serif); color: var(--vote-color);
    animation: envol 1.4s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  @keyframes envol {
    0% { opacity: 0; transform: translateY(12px) scale(.6); }
    20% { opacity: 1; transform: translateY(0) scale(1.15); }
    100% { opacity: 0; transform: translateY(-48px) scale(1); }
  }
  .vote-card.eclat { animation: eclat-carte .8s ease; }
  @keyframes eclat-carte { 30% { box-shadow: 0 0 0 6px var(--vote-border), 0 10px 24px #34261920; } }

  /* La barre de rivalité s'ouvre depuis le centre, avec une étincelle au point de rencontre */
  .anime .vote-rivalry-track { clip-path: inset(0 50% 0 50% round 99px); transition: clip-path 1.2s cubic-bezier(.2, .8, .2, 1) .3s; }
  .anime .vote-rivalry.vu .vote-rivalry-track { clip-path: inset(0 0 0 0 round 99px); }
  .vote-rivalry-track > span { position: relative; }
  .vote-rivalry-track > span::after {
    content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #fffc, 0 0 18px 6px #ffd0e6;
    animation: etincelle 1.6s ease-in-out infinite;
  }
  @keyframes etincelle { 50% { transform: scale(.55); opacity: .65; } }

  /* ── 3. Apparitions au défilement ── */
  .anime .apparait {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .anime .apparait.vu { opacity: 1; transform: none; }

  /* L'affiche suit la souris (ordinateur) */
  .film-poster { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; will-change: transform; }
  .film-poster.incline { box-shadow: 0 22px 44px #29292038; }

  /* Le bouton mobile glisse depuis le bas */
  .mobile-interest.visible { animation: glisse-haut .45s cubic-bezier(.2, .8, .2, 1); }
  @keyframes glisse-haut { from { transform: translateY(100%); } }

  /* ── 4. Moments de victoire ── */
  #signup-form .choice { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), filter .3s, opacity .3s, border-color .2s, background .2s, box-shadow .2s; }
  #signup-form .choice:has(input:checked) { transform: scale(1.04); }
  #signup-form .choice:has(input:checked) img { animation: pop .45s ease; }
  #signup-form .choice-grid:has(input:checked) .choice:not(:has(input:checked)) { filter: grayscale(.85); opacity: .55; transform: scale(.97); }
  @keyframes pop { 40% { transform: scale(1.06); } }

  .pluie { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
  .pluie span {
    position: absolute; top: -48px; left: var(--x); font-size: var(--t); line-height: 1; color: var(--c); opacity: 0;
    animation: tombe var(--d) cubic-bezier(.3, .1, .6, 1) var(--r) forwards;
  }
  @keyframes tombe {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(108vh) rotate(var(--rot)); }
  }
  #thank-you.revele > * { animation: fondu .6s ease both; animation-delay: calc(var(--i) * 140ms + .2s); }
  #thank-you.revele .thank-heart { animation: coeur .9s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes coeur { 0% { opacity: 0; transform: scale(.3); } 60% { transform: scale(1.25); } 100% { opacity: 1; transform: none; } }
}