/**
 * Animations d'ambiance — volontairement discrètes.
 *
 * Principes retenus :
 * - une seule idée : les sections se révèlent en montant légèrement à l'entrée
 *   dans le champ de vision, une fois, sans rejouer au défilement inverse ;
 * - aucun décalage de mise en page : on n'anime que l'opacité et translate ;
 * - rien ne dépend du JavaScript pour rester lisible : sans lui, tout est visible ;
 * - respect intégral de prefers-reduced-motion.
 */

/* Etat initial appliqué par le script uniquement (sinon contenu masqué si JS absent). */
.js-motion [data-motion] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.js-motion [data-motion].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Décalage léger entre éléments d'une même grille : l'oeil suit la lecture. */
.js-motion [data-motion][style*="--motion-delay"] {
    transition-delay: var(--motion-delay, 0ms);
}

/* Boutons : réponse tactile sobre. */
.btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, color 0.18s ease;
}

.btn:not(.btn-disabled):hover {
    transform: translateY(-1px);
}

.btn:not(.btn-disabled):active {
    transform: translateY(0);
}

/* Liens de navigation : soulignement qui se déploie plutôt qu'un simple survol. */
.navbar-menu-link {
    position: relative;
}

@media (min-width: 769px) {
    .navbar-menu-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -4px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .navbar-menu-item:hover > .navbar-menu-link::after,
    .navbar-menu-link:focus-visible::after {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-motion [data-motion],
    .js-motion [data-motion].is-revealed {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    .navbar-menu-link::after {
        transition: none;
    }

    .btn:not(.btn-disabled):hover {
        transform: none;
    }
}