/* * RH-1 — Moteur scroll-reveal. Motion custom Lot 1 « Dynamisation ». * Child theme versionné (blocksy-child). Aucune couleur touchée (contraste AA intact). * * Modèle : * - `.rh-reveal` : élément animé seul (solo). * - `.rh-reveal-group` : conteneur observé ; ses `.rh-reveal-item` descendants * se révèlent en cascade quand le groupe porte `.is-visible`. * - Direction (vocabulaire FERMÉ) : `--up` (défaut, translateY) · `--left` / * `--right` (translateX) · `--fade` (opacité seule, médias). * - Séquence : `transition-delay = --rh-base (stagger inter-colonnes) + --rh-i * --rh-step`. * - REPLAY : `.is-visible` est posé à l'entrée dans le viewport et RETIRÉ quand * l'élément est entièrement hors viewport (piloté en JS) → l'anim rejoue. * * Anti-flash / anti-CLS : * - L'état masqué n'existe que sous `html.rh-js` (posé en si mouvement autorisé * + IntersectionObserver dispo). Sans JS / reduced-motion → rien n'est masqué. * - On n'anime que `opacity` + `transform` → zéro décalage de layout. * - reduced-motion : tout visible en permanence, jamais masqué (jamais de replay). */ :root { --rh-dur: 0.8s; --rh-ease: cubic-bezier(0.16, 1, 0.3, 1); --rh-shift: 40px; /* décalage vertical (fade-up) */ --rh-shift-x: 64px; /* décalage horizontal (fade-left / fade-right) */ --rh-step: 90ms; /* pas de séquence intra-bloc */ } /* Transition + délai séquencé (base inter-colonnes + index intra-bloc) */ html.rh-js .rh-reveal, html.rh-js .rh-reveal-group .rh-reveal-item { transition: opacity var(--rh-dur) var(--rh-ease), transform var(--rh-dur) var(--rh-ease); transition-delay: calc(var(--rh-base, 0ms) + var(--rh-i, 0) * var(--rh-step)); } /* État masqué (tant que non révélé) — opacité */ html.rh-js .rh-reveal:not(.is-visible), html.rh-js .rh-reveal-group:not(.is-visible) .rh-reveal-item { opacity: 0; } /* * Offsets directionnels (vocabulaire fermé). * ⚠️ La variante SOLO est scopée à `.rh-reveal` (les items de groupe portent * `.rh-reveal-item`, PAS `.rh-reveal`) : sinon `.rh-reveal--x:not(.is-visible)` * matcherait aussi les items — qui n'ont jamais `.is-visible` (c'est le groupe qui * l'a) — et leur offset ne serait jamais levé (bug « que du fade » + décentrage). * Un item révélé DOIT revenir à transform:none quand son groupe porte `.is-visible`. */ html.rh-js .rh-reveal.rh-reveal--up:not(.is-visible), html.rh-js .rh-reveal-group:not(.is-visible) .rh-reveal-item.rh-reveal--up { transform: translateY(var(--rh-shift)); } html.rh-js .rh-reveal.rh-reveal--left:not(.is-visible), html.rh-js .rh-reveal-group:not(.is-visible) .rh-reveal-item.rh-reveal--left { transform: translateX(calc(-1 * var(--rh-shift-x))); } html.rh-js .rh-reveal.rh-reveal--right:not(.is-visible), html.rh-js .rh-reveal-group:not(.is-visible) .rh-reveal-item.rh-reveal--right { transform: translateX(var(--rh-shift-x)); } html.rh-js .rh-reveal.rh-reveal--fade:not(.is-visible), html.rh-js .rh-reveal-group:not(.is-visible) .rh-reveal-item.rh-reveal--fade { transform: none; } /* * Respect strict de prefers-reduced-motion : tout visible, aucun mouvement, aucun * replay. Défense en profondeur — `rh-js` n'est de toute façon pas posé dans ce cas. */ @media (prefers-reduced-motion: reduce) { html .rh-reveal, html .rh-reveal-group .rh-reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; } }