/* ========================================
   MOUVEMENT
   Lent et doux : apparitions de 1,4 à 1,8 s, survols de 0,4 à 1,2 s.
   Seulement transform et opacity. Tout s'arrête avec
   le réglage « réduire les animations » de l'appareil.
======================================== */

:root {
    --rise: 20px;
}


/* 1. Transition douce entre les pages (navigateurs compatibles) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) { animation: vtOut 0.25s ease both; }
::view-transition-new(root) { animation: vtIn 0.5s var(--ease) both; }

@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }

.site-header { view-transition-name: site-header; }


/* 2. Haut de page : le texte monte, l'un après l'autre */
@keyframes rise {
    from { opacity: 0; transform: translateY(var(--rise)); }
    to   { opacity: 1; transform: none; }
}

.hero-text > *,
.form-intro > *,
.success-page > *,
.legal-intro > * {
    animation: rise 1.4s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}

:is(.hero-text, .form-intro, .success-page, .legal-intro) > :nth-child(2) { --i: 1; }
:is(.hero-text, .form-intro, .success-page, .legal-intro) > :nth-child(3) { --i: 2; }
:is(.hero-text, .form-intro, .success-page, .legal-intro) > :nth-child(4) { --i: 3; }
:is(.hero-text, .form-intro, .success-page, .legal-intro) > :nth-child(5) { --i: 4; }


/* 3. Les couvertures s'ouvrent en éventail */
@keyframes fanLeft {
    from { opacity: 0; transform: translateY(80px) rotate(0deg); }
}

@keyframes fanCenter {
    from { opacity: 0; transform: translateY(100px); }
}

@keyframes fanRight {
    from { opacity: 0; transform: translateY(80px) rotate(0deg); }
}

.fan .fan-left   { animation: fanLeft 1.8s var(--ease-book) 0.55s backwards; }
.fan .fan-center { animation: fanCenter 1.8s var(--ease-book) 0.45s backwards; }
.fan .fan-right  { animation: fanRight 1.8s var(--ease-book) 0.65s backwards; }


/* 4. Apparition au défilement ([data-reveal], plus les blocs des formulaires).
   Garde la liste identique à celle de js/animations.js */
.js :is(
    [data-reveal],
    .form-section .section-header,
    .form-section .field,
    .form-section > .check,
    .form-section > .notice,
    .form-section > .form-actions
) {
    opacity: 0;
    transform: translateY(var(--rise));
    transition:
        opacity 1.2s var(--ease),
        transform 1.2s var(--ease);
}

.js :is(
    [data-reveal],
    .form-section .section-header,
    .form-section .field,
    .form-section > .check,
    .form-section > .notice,
    .form-section > .form-actions
).is-visible {
    opacity: 1;
    transform: none;
}


/* Réglage « réduire les animations » : rien ne bouge */
@media (prefers-reduced-motion: reduce) {

    :root { --rise: 0px; }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }

    .hero-text > *,
    .form-intro > *,
    .success-page > *,
    .legal-intro > *,
    .fan img {
        animation: none;
    }

    .js :is(
        [data-reveal],
        .form-section .section-header,
        .form-section .field,
        .form-section > .check,
        .form-section > .notice,
        .form-section > .form-actions
    ) {
        transition: opacity 0.3s ease;
    }
}