/* ============================================================
 * Animations transverses — Madame's Home (ANIM-00).
 *
 * Reveals au scroll disponibles sur TOUT le site (l'observer est dans main.js :
 * .sfc-reveal[data-reveal] -> ajout de .is-visible). Convention par VALEUR
 * d'attribut, identique à la page d'accueil : data-reveal="up|left|right|zoom"
 * + nouvelles variantes "fade|clip|blur".
 *
 * Règles :
 *  - transform / opacity / clip-path / filter UNIQUEMENT (perf, pas de CLS).
 *  - état caché seulement si JS actif (html.sfc-js) → repli no-JS = visible.
 *  - on ne cible QUE les data-reveal AVEC valeur : les .sfc-reveal "valueless"
 *    (compte, fiche produit) gardent leurs définitions de module, intactes.
 *  - tout neutralisé sous prefers-reduced-motion.
 *
 * Valeurs alignées sur homepage-animations.css (28/36 px, .96, 650 ms) pour un
 * rendu homogène avec l'accueil.
 * ============================================================ */

html.sfc-js .sfc-reveal[data-reveal="up"],
html.sfc-js .sfc-reveal[data-reveal="left"],
html.sfc-js .sfc-reveal[data-reveal="right"],
html.sfc-js .sfc-reveal[data-reveal="zoom"],
html.sfc-js .sfc-reveal[data-reveal="fade"],
html.sfc-js .sfc-reveal[data-reveal="clip"],
html.sfc-js .sfc-reveal[data-reveal="blur"] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity   var(--duration-slower, 650ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
        transform var(--duration-slower, 650ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
        clip-path var(--duration-slower, 650ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
        filter    var(--duration-slower, 650ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}

/* État initial par variante */
html.sfc-js .sfc-reveal[data-reveal="up"]    { transform: translateY(28px); }
html.sfc-js .sfc-reveal[data-reveal="left"]  { transform: translateX(-36px); }
html.sfc-js .sfc-reveal[data-reveal="right"] { transform: translateX(36px); }
html.sfc-js .sfc-reveal[data-reveal="zoom"]  { transform: scale(.96); }
html.sfc-js .sfc-reveal[data-reveal="fade"]  { transform: none; }
html.sfc-js .sfc-reveal[data-reveal="clip"]  { clip-path: inset(0 0 16% 0); transform: translateY(14px); }
html.sfc-js .sfc-reveal[data-reveal="blur"]  { filter: blur(8px); transform: scale(1.01); }

/* "rise" : translation SEULE (pas de fondu d'opacité) → l'élément reste peint,
   ne retarde PAS le LCP. Pour titres/images critiques au-dessus du pli.
   Transition dédiée (rise n'est pas dans le bloc opacity:0 ci-dessus). */
html.sfc-js .sfc-reveal[data-reveal="rise"] {
    opacity: 1;
    transform: translateY(28px);
    will-change: transform;
    transition: transform var(--duration-slower, 650ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
html.sfc-js .sfc-reveal[data-reveal="rise"].is-visible { transform: none; will-change: auto; }

/* État révélé (ajouté par l'observer de main.js) */
html.sfc-js .sfc-reveal[data-reveal="up"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="left"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="right"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="zoom"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="fade"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="clip"].is-visible,
html.sfc-js .sfc-reveal[data-reveal="blur"].is-visible {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
    filter: none;
    /* ANIM-91 — l'animation est finie : on libère la couche compositeur
       (sinon ~15 hints will-change restent actifs en permanence par page). */
    will-change: auto;
}

/* Accessibilité : aucune animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
    html.sfc-js .sfc-reveal[data-reveal="up"],
    html.sfc-js .sfc-reveal[data-reveal="left"],
    html.sfc-js .sfc-reveal[data-reveal="right"],
    html.sfc-js .sfc-reveal[data-reveal="zoom"],
    html.sfc-js .sfc-reveal[data-reveal="fade"],
    html.sfc-js .sfc-reveal[data-reveal="rise"],
    html.sfc-js .sfc-reveal[data-reveal="clip"],
    html.sfc-js .sfc-reveal[data-reveal="blur"] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* ANIM-50 — Fondu doux des images lazy au chargement (classe posée par animations.js).
 * N'affecte jamais l'image LCP (eager). opacity uniquement → 0 CLS. */
html.sfc-js img.sfc-img-fade {
    opacity: 0;
    transition: opacity var(--duration-slow, 360ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
html.sfc-js img.sfc-img-fade.is-loaded {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    html.sfc-js img.sfc-img-fade {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ============================================================
 * ANIM-70 — Transition de page douce (View Transitions API, cross-document).
 * CSS-only, progressive enhancement : les navigateurs non compatibles
 * (Firefox, anciens Safari/Chrome) naviguent normalement, sans rien casser.
 * 0 JS, 0 impact SEO (pages rendues serveur). La VT garde l'ancienne page
 * jusqu'au rendu de la nouvelle PUIS fait le fondu → aucun délai ajouté vs une
 * nav classique. Désactivée sous prefers-reduced-motion.
 * ============================================================ */
@view-transition {
    navigation: auto;
}

/* Cross-fade racine, sobre, sur la courbe de la DA. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* ============================================================
 * ANIM-91 — Filet de sécurité accessibilité (global).
 * animations.css est chargé sur TOUTES les pages : ce bloc neutralise tout
 * mouvement résiduel des autres modules qui n'auraient pas leur propre garde
 * (hovers transform de woocommerce.css / error-404.css / legal.css, et tout
 * fichier futur). Durée quasi-nulle (0.01ms) plutôt que `none` → l'état final
 * s'applique instantanément MAIS les events `transitionend`/`animationend`
 * continuent de se déclencher → aucun JS fonctionnel (carrousels, drawers) cassé.
 * Les gardes spécifiques ci-dessus (transform:none, opacity:1) restent prioritaires.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}