/* ========================================================================= scroll-anim.css — Animations au scroll (Itinéraire Immobilier) Vanilla, sans dépendance. transform / opacity / clip-path uniquement (60 fps). Anti-FOUC : tous les éléments animables sont pré-masqués AVANT le rendu, via la classe .js-anim posée en (sauf prefers-reduced-motion). Le JS ne fait qu'AJOUTER .is-visible (à l'arrivée si déjà à l'écran, au scroll sinon) — il ne masque jamais après coup, donc aucun élément ne « clignote ». Sans JS ou en reduced-motion : tout le contenu reste visible. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { /* ---------- États masqués (pré-rendu) : fondu + montée ---------- */ html.js-anim .ii-eyebrow, html.js-anim .ii-subtitle, html.js-anim .ii-page-intro, html.js-anim .ii-rich, html.js-anim .detail-text, html.js-anim .estim-note, html.js-anim .ii-texte-agence, html.js-anim .ii-btn, html.js-anim .ii-map-wrap, html.js-anim .ii-check, html.js-anim .ii-form-sep, html.js-anim .search-field, html.js-anim .detail-section__title, html.js-anim .annonce, html.js-anim .ii-review, html.js-anim .ii-carousel-foot, html.js-anim .ii-stat, html.js-anim .detail-feature, html.js-anim .ii-seo-links li, html.js-anim .ii-search-tab, html.js-anim .ii-hero__rating, html.js-anim [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } /* ---------- Titres : cascade mot à mot (héro inclus) ---------- */ html.js-anim .ii-title, html.js-anim .ii-hero__title { opacity: 0; } html.js-anim .ii-title.words-ready, html.js-anim .ii-hero__title.words-ready { opacity: 1; } html.js-anim .ii-title .word, html.js-anim .ii-hero__title .word { display: inline-block; opacity: 0; transform: translateY(.85em); transition: opacity .55s ease, transform .65s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--i, 0) * 55ms); will-change: opacity, transform; } /* ---------- Photos : masque clip-path + léger zoom ---------- */ html.js-anim .ii-photo-portrait, html.js-anim [data-reveal="image"] { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.05); transition: opacity .8s ease, clip-path .95s cubic-bezier(.22, .61, .36, 1), transform 1s cubic-bezier(.22, .61, .36, 1); will-change: opacity, clip-path, transform; } /* ---------- Variantes directionnelles (manuel) ---------- */ html.js-anim [data-reveal="left"] { transform: translateX(-40px); } html.js-anim [data-reveal="right"] { transform: translateX(40px); } html.js-anim [data-reveal="zoom"] { transform: scale(.94); } /* ---------- Révélation (classe .is-visible posée par le JS) ---------- Placée APRÈS les états masqués : à spécificité égale, l'ordre source gagne. */ html.js-anim .is-visible { opacity: 1; transform: none; } /* .ii-seo-links li a une spécificité (0,2,2) supérieure à .is-visible (0,2,1) : on rétablit explicitement sa révélation, sinon les liens restent à opacity:0. */ html.js-anim .ii-seo-links li.is-visible { opacity: 1; transform: none; } html.js-anim .ii-photo-portrait.is-visible, html.js-anim [data-reveal="image"].is-visible { clip-path: inset(0 0 0 0); } html.js-anim .ii-title.is-visible .word, html.js-anim .ii-hero__title.is-visible .word { opacity: 1; transform: none; } }