/* ============================================================ DR AURORE LAFOSSE — motion.css v1.0 Adapté du kit Beauvoir « upgrade cinématographique » : sélecteurs du site (.hero / .section-title / .section-head), trait des titres en terracotta var(--accent), courbe var(--ease). Principe : les éléments restent VISIBLES par défaut. Les états initiaux d'animation ne s'appliquent que si porte la classe .has-motion (ajoutée par motion.js). => zéro contenu masqué sans JS, zéro impact lecteurs d'écran. Animations sur transform et opacity uniquement. ============================================================ */ /* ---------- Variables locales ---------- */ :root { --motion-distance: 24px; --motion-duration: 700ms; --motion-ease: var(--ease); --motion-stagger: 90ms; --motion-shadow-lift: 0 24px 50px -28px rgba(44, 38, 32, 0.35); } /* ============================================================ 1. REVEAL — fondu + translation (effet par défaut) ============================================================ */ .has-motion .reveal, .has-motion .reveal-stagger > * { opacity: 0; transform: translateY(var(--motion-distance)); transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease); will-change: opacity, transform; } .has-motion .reveal.is-visible, .has-motion .reveal-stagger.is-visible > * { opacity: 1; transform: none; will-change: auto; } /* ---------- 2. REVEAL-STAGGER — cascade sur grilles ---------- */ .has-motion .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .has-motion .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); } .has-motion .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); } .has-motion .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); } .has-motion .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); } .has-motion .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); } /* Au-delà de 6 : pas de délai supplémentaire (plafond spec) */ /* ============================================================ 3. REVEAL-LINE — titres de section : trait terracotta S'applique aux .section-title (H2). Origine centrée quand le titre vit dans un .section-head.center. ============================================================ */ .reveal-line { position: relative; } .reveal-line::before { content: ''; display: block; width: 48px; height: 1px; background: var(--accent); margin-bottom: 16px; transform-origin: left center; } .section-head.center .reveal-line::before { margin-left: auto; margin-right: auto; transform-origin: center; } .has-motion .reveal-line::before { transform: scaleX(0); transition: transform 900ms var(--motion-ease) 200ms; } .has-motion .reveal-line.is-visible::before { transform: scaleX(1); } /* ============================================================ 4. IMG-SETTLE — l'image « se pose » ============================================================ */ .has-motion .img-settle { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--motion-ease), transform 900ms var(--motion-ease); } .has-motion .img-settle.is-visible { opacity: 1; transform: scale(1); } /* ============================================================ 5. MICRO-INTERACTIONS (survol) — actives sans JS ============================================================ */ @media (hover: hover) { .lift { transition: transform 250ms var(--motion-ease), box-shadow 250ms var(--motion-ease); } .lift:hover { transform: translateY(-4px); box-shadow: var(--motion-shadow-lift); } /* Soulignement animé des liens de navigation. `color` repris de styles.css : cette transition remplace l'autre. */ .nav-menu a:not(.btn) { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1px; background-repeat: no-repeat; background-position: left calc(100% - 2px); transition: background-size 300ms var(--motion-ease), color 0.25s var(--ease); } .nav-menu a:not(.btn):hover { background-size: 100% 1px; } } /* ============================================================ 6. HERO — cascade d'entrée + Ken Burns Verrouillé derrière .hero--motion (classe posée sur la
à l'étape d'application) : rien ne bouge tant que la classe n'est pas dans le HTML. Cascade : badge (eyebrow) → titre → lead → actions → media, 1,2 s au total. Le badge « 18+ » vit dans .hero-media et entre avec la photo. Ken Burns : zoom 1.0 → 1.06 en 25 s, alternate — amplitude réduite, le visuel est un portrait. ============================================================ */ @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } .has-motion .hero--motion .hero-media img { animation: kenburns 25s var(--motion-ease) infinite alternate; will-change: transform; } @keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .has-motion .hero--motion .eyebrow { animation: hero-in 500ms var(--motion-ease) 100ms both; } .has-motion .hero--motion .hero-title { animation: hero-in 600ms var(--motion-ease) 250ms both; } .has-motion .hero--motion .hero-lead { animation: hero-in 600ms var(--motion-ease) 400ms both; } .has-motion .hero--motion .hero-actions { animation: hero-in 600ms var(--motion-ease) 500ms both; } .has-motion .hero--motion .hero-media { animation: hero-in 650ms var(--motion-ease) 550ms both; } /* ============================================================ 7. QUOTE-BANNER — reveal décalé de 150 ms sur la citation ============================================================ */ .has-motion .quote-banner blockquote.reveal { transition-delay: 150ms; } .has-motion .quote-banner cite.reveal { transition-delay: 300ms; } /* ============================================================ 8. ACCESSIBILITÉ — désactivation totale (motion.js n'ajoute déjà pas .has-motion en reduced-motion ; cette garde couvre un changement de préférence en cours de session et les micro-interactions sans JS.) ============================================================ */ @media (prefers-reduced-motion: reduce) { .has-motion .reveal, .has-motion .reveal-stagger > *, .has-motion .reveal-line::before, .has-motion .img-settle { opacity: 1 !important; transform: none !important; transition: none !important; } .has-motion .hero--motion .hero-media img, .has-motion .hero--motion .eyebrow, .has-motion .hero--motion .hero-title, .has-motion .hero--motion .hero-lead, .has-motion .hero--motion .hero-actions, .has-motion .hero--motion .hero-media { animation: none !important; } .lift, .lift:hover { transform: none; transition: none; box-shadow: none; } }