/*
 * BarnOwl — thème Anthracite : animations (transitions de page, entrée du hero,
 * apparition au défilement, micro-interactions).
 *
 * Tout est sous prefers-reduced-motion: no-preference. Aucun transform sur un ancêtre
 * d'élément sticky ou fixed (.site-header, .page-aside, .news-year__title, panneau mobile).
 */

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

    /* ---------- Transitions de page ---------- */

    /* Rechargements complets (pages en turbo_visit_control = "reload") */
    @view-transition { navigation: auto; }

    ::view-transition-old(root) { animation: motion-fade-out .18s ease both; }
    ::view-transition-new(root) { animation: motion-page-in .25s cubic-bezier(.2, .7, .2, 1) both; }

    /* Nommé seulement pendant la transition : le header est sticky, son panneau mobile fixed */
    html:active-view-transition .site-header { view-transition-name: site-header; }
    ::view-transition-group(site-header) { animation-duration: .25s; }

    /* ---------- Entrée du hero ---------- */

    .hero { overflow: hidden; isolation: isolate; }
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: inherit;
        animation: motion-hero-zoom 2.4s cubic-bezier(.2, .7, .2, 1) both;
    }
    .hero__shade, .hero__content { z-index: 1; }

    .hero__title, .hero__lead, .hero__content .btn-accent {
        animation: motion-rise .9s cubic-bezier(.2, .7, .2, 1) both;
    }
    .hero__title { animation-delay: .1s; }
    .hero__lead { animation-delay: .25s; }
    .hero__content .btn-accent { animation-delay: .4s; }

    .page-hero > * { animation: motion-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
    .page-hero > :nth-child(2) { animation-delay: .06s; }
    .page-hero > :nth-child(3) { animation-delay: .12s; }
    .page-hero > :nth-child(n+4) { animation-delay: .18s; }

    /* ---------- Apparition au défilement (posé par motion.js sous la ligne de flottaison) ---------- */

    html.motion-ready [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
        transition-delay: var(--reveal-delay, 0s);
    }
    html.motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

    /* ---------- Micro-interactions ---------- */

    .news-card, .prose .link-card, .prose .prose-steps__item {
        transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s;
    }
    .news-card:hover, .prose .link-card:hover, .prose .prose-steps__item:hover { transform: translateY(-3px); }
    .news-card .media-frame { transition: box-shadow .35s ease; }
    .news-card:hover .media-frame { box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }

    .btn-accent .icon { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
    .btn-accent:hover .icon, .btn-accent:focus-visible .icon { transform: translate(2px, -2px); }
    .link-accent .icon { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
    .link-accent:hover .icon { transform: translate(2px, -2px); }

    @media (min-width: 992px) {
        .site-header .main-nav__item > a { position: relative; }
        .site-header .main-nav__item > a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: .3rem;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform .3s cubic-bezier(.2, .7, .2, 1);
        }
        .site-header .main-nav__item > a:hover::after,
        .site-header .main-nav__item.is-active > a::after { transform: scaleX(1); transform-origin: left; }
    }

    .search-panel:not([hidden]) .search-panel__form { animation: motion-drop .3s cubic-bezier(.2, .7, .2, 1) both; }

    .lightbox[open] { animation: motion-fade-in .25s ease both; }
    .lightbox[open]::backdrop { animation: motion-fade-in .25s ease both; }
    .lightbox[open] .lightbox__stage img { animation: motion-zoom-in .4s cubic-bezier(.2, .7, .2, 1) both; }
}

@keyframes motion-fade-in { from { opacity: 0; } }
@keyframes motion-fade-out { to { opacity: 0; } }
@keyframes motion-page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes motion-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes motion-drop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes motion-zoom-in { from { opacity: 0; transform: scale(.97); } }
@keyframes motion-hero-zoom { from { transform: scale(1.06); } }