/* ============================================================ Version dynamique — couche d'animations & d'interactions Activée uniquement via . Ne s'applique qu'aux pages portant (index.html). ============================================================ */ /* ---------- Barre de progression de lecture ---------- */ body.dynamic .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; background: transparent; } body.dynamic .scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); transition: transform 80ms linear; } /* ---------- En-tête : ombre au défilement ---------- */ body.dynamic .site-header { transition: box-shadow 300ms ease, background 300ms ease; } body.dynamic .site-header.scrolled { box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.4); } /* ---------- Neutralise l'apparition de base (script.js) ---------- */ /* On pilote nous-mêmes les apparitions, plus finement. */ body.dynamic .fade-in { opacity: 1; transform: none; transition: none; } /* ---------- Transitions douces pour les effets pilotés en JS ---------- */ body.dynamic .btn-primary { transition: transform 220ms cubic-bezier(.22, .61, .36, 1), background 220ms ease, box-shadow 220ms ease; } body.dynamic .motif { transition: transform 260ms cubic-bezier(.22, .61, .36, 1), background 200ms ease, box-shadow 260ms ease; transform-style: preserve-3d; will-change: transform; } body.dynamic .motif:hover { box-shadow: 0 26px 52px -30px color-mix(in oklab, var(--accent) 75%, transparent); } /* ============================================================ Tout le mouvement ci-dessous respecte la préférence système « réduire les animations ». ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* ---------- Apparition au défilement ---------- */ body.dynamic .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .6, .2, 1), transform .8s cubic-bezier(.2, .6, .2, 1); transition-delay: var(--d, 0ms); } body.dynamic .reveal.in { opacity: 1; transform: none; } /* ---------- Hero vivant ---------- */ /* Le blob « respire » lentement */ body.dynamic .blob { animation: blobBreathe 14s ease-in-out infinite; transform-origin: 55% 50%; } @keyframes blobBreathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.04) rotate(3deg); } } /* Les touches florales flottent doucement */ body.dynamic .floral { animation: floralFloat 7s ease-in-out infinite; } body.dynamic .floral.f2 { animation-duration: 9s; animation-delay: -2s; } body.dynamic .floral.f3 { animation-duration: 8s; animation-delay: -4s; } @keyframes floralFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.06); } } /* ---------- Pivoine des séparateurs : éclosion au défilement ---------- */ body.dynamic .section-divider .peony { opacity: 0; transform: scale(.5) rotate(-25deg); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1.4); } body.dynamic .section-divider.in .peony { opacity: .85; transform: none; animation: peonySway 9s ease-in-out 1s infinite; } @keyframes peonySway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } } /* ---------- Flèche « défiler » : rebond invitant ---------- */ body.dynamic .intro-arrow { animation: arrowBounce 2.2s ease-in-out infinite; } body.dynamic .intro-arrow:hover { animation: none; } @keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } }