/* =========================================================================
   Kaï Consulting — Design System v2 — MOTION
   - View Transitions API (transitions natives entre pages)
   - Scroll-driven animations (CSS pur, sans JS)
   - Stagger reveal pour les grids
   - Magnetic buttons (optionnel)
   - Form status messages (success / error)
   ========================================================================= */

/* =========================================================================
   1. VIEW TRANSITIONS API
   Active les transitions natives entre pages pour les browsers compatibles
   ========================================================================= */

@view-transition {
    navigation: auto;
}

/* Anime spécifiquement le hero (continuité visuelle d'une page à l'autre) */
.hero-editorial h1 {
    view-transition-name: hero-title;
}

::view-transition-old(hero-title),
::view-transition-new(hero-title) {
    animation-duration: var(--duration-fluid);
    animation-timing-function: var(--ease-out);
}

/* Pour les liens d'article — anime la card vers la pleine page */
.card-title a {
    view-transition-name: var(--vt-name, none);
}

/* =========================================================================
   2. STAGGER REVEAL — entrée séquentielle des éléments
   Utilisé pour les grids (bento, cards, articles)
   ========================================================================= */

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-on-scroll {
    opacity: 0;
    animation: reveal-up var(--duration-graceful) var(--ease-out) forwards;
    animation-play-state: paused;
}

.reveal-on-scroll.is-visible {
    animation-play-state: running;
}

/* Stagger : enfants successifs avec délai croissant */
.stagger > * {
    opacity: 0;
    animation: reveal-up var(--duration-graceful) var(--ease-out) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 320ms; }
.stagger > *:nth-child(6) { animation-delay: 400ms; }
.stagger > *:nth-child(7) { animation-delay: 480ms; }
.stagger > *:nth-child(8) { animation-delay: 560ms; }
.stagger > *:nth-child(9) { animation-delay: 640ms; }

/* =========================================================================
   3. SCROLL-DRIVEN ANIMATIONS — quand le browser le supporte
   ========================================================================= */

@supports (animation-timeline: view()) {
    .reveal-on-scroll {
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
        animation-play-state: running;
    }
}

/* =========================================================================
   4. FORM STATUS — messages success/error animés
   ========================================================================= */

.form-status {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
    text-align: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--duration-snappy) var(--ease-out), transform var(--duration-snappy) var(--ease-out);
    margin: 0;
}

.form-status:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}

.form-status.is-success {
    background: color-mix(in oklch, var(--success) 12%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in oklch, var(--success) 30%, transparent);
}

.form-status.is-error {
    background: color-mix(in oklch, var(--danger) 12%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
}

/* =========================================================================
   5. ANIMATION FADE-IN HERO (à l'arrivée sur la page)
   ========================================================================= */

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fade-in var(--duration-graceful) var(--ease-out) backwards;
}

.fade-in-delayed {
    animation-delay: 100ms;
}

/* =========================================================================
   6. RESPECT PREFERS-REDUCED-MOTION (override)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .stagger > *,
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    @view-transition {
        navigation: none;
    }
}