/* anim.css — animations « sobre premium » du site DMS Réunion. Chargé APRÈS style.css (qui reste la maquette figée, jamais modifiée). Principe : l'état masqué ne s'applique que si porte la classe `anim`, posée par un script inline avant le premier paint (pas de flash). Si le JS ne tourne pas, la classe est retirée par sécurité → contenu visible sans JS. On anime uniquement `opacity` et `transform` (composités GPU). Les révélations utilisent `animation` (et non `transition`) pour ne pas écraser les transitions de survol déjà définies dans style.css ; anim.js retire l'animation une fois terminée (classe `done`) afin que les hover `translateY` restent opérationnels. */ :root { --anim-ease: cubic-bezier(.22, .61, .36, 1); --anim-dur: .48s; --anim-rise: 14px; } @keyframes dms-rise { from { opacity: 0; transform: translateY(var(--anim-rise)); } to { opacity: 1; transform: none; } } @keyframes dms-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dms-slide-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } } /* Halo rouge du hero : respiration très lente, à peine perceptible. */ @keyframes dms-halo { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Dérive du mot fantôme en filigrane. */ @keyframes dms-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---------------------------------------------------------- 1. RÉVÉLATIONS Blocs de contenu révélés au scroll par anim.js (IntersectionObserver). */ html.anim .sec-head:not(.in), html.anim .grid > .card:not(.in), html.anim .brands > .bc:not(.in), html.anim .stats > .stat:not(.in), html.anim .contact-grid > .cc:not(.in), html.anim .gal > .g:not(.in), html.anim .two > div:not(.in), html.anim .cgrid > :not(.in), html.anim .lbody:not(.in), html.anim .band:not(.in) { opacity: 0; } html.anim .sec-head.in, html.anim .grid > .card.in, html.anim .brands > .bc.in, html.anim .stats > .stat.in, html.anim .contact-grid > .cc.in, html.anim .gal > .g.in, html.anim .two > div.in, html.anim .cgrid > .in, html.anim .lbody.in, html.anim .band.in { animation: dms-rise var(--anim-dur) var(--anim-ease) var(--d, 0ms) both; } /* Animation terminée : on rend la main au CSS de base (hover, etc.). `!important` volontaire — cette règle de nettoyage doit l'emporter sur toutes les règles de révélation ci-dessus, qui sont plus spécifiques. Sans elle, l'état figé de l'animation écraserait les `transform` de survol de style.css. */ html.anim .done { animation: none !important; } /* ---------------------------------------------------------- 2. HEROS Séquence au chargement (haut de page : pas d'observer nécessaire). L'image du hero est le LCP → opacité seule, sans délai. */ html.anim .hero-copy > *, html.anim .bhero-grid > div:first-child > *, html.anim .mhero-grid > div:first-child > * { animation: dms-rise .5s var(--anim-ease) both; } html.anim .hero-copy > :nth-child(2), html.anim .bhero-grid > div:first-child > :nth-child(2), html.anim .mhero-grid > div:first-child > :nth-child(2) { animation-delay: .07s; } html.anim .hero-copy > :nth-child(3), html.anim .bhero-grid > div:first-child > :nth-child(3), html.anim .mhero-grid > div:first-child > :nth-child(3) { animation-delay: .14s; } html.anim .hero-copy > :nth-child(4), html.anim .bhero-grid > div:first-child > :nth-child(4), html.anim .mhero-grid > div:first-child > :nth-child(4) { animation-delay: .21s; } html.anim .hero-copy > :nth-child(n + 5), html.anim .bhero-grid > div:first-child > :nth-child(n + 5), html.anim .mhero-grid > div:first-child > :nth-child(n + 5) { animation-delay: .28s; } /* Visuels : la moto s'installe (opacité seule pour ne pas retarder le LCP). */ html.anim .hero-img img, html.anim .bhero-img img, html.anim .mhero-img img { animation: dms-fade .7s ease-out both; } html.anim .hero-img .hero-badge { animation: dms-slide-in .5s var(--anim-ease) .34s both; } html.anim .crumb { animation: dms-fade .5s ease-out both; } /* Fonds animés en continu. */ html.anim .waves { animation: dms-halo 10s ease-in-out infinite; } html.anim .hero .ghost, html.anim .bhero .ghost, html.anim .mhero .ghost { animation: dms-drift 16s ease-in-out infinite; } /* ---------------------------------------------------------- 3. DÉTAILS Lignes de la fiche technique et points forts : arrivée en cascade. */ html.anim .spectab tr:not(.in), html.anim .plist li:not(.in) { opacity: 0; } html.anim .spectab tr.in, html.anim .plist li.in { animation: dms-rise .4s var(--anim-ease) var(--d, 0ms) both; } /* Le point du bouton du stagiaire : pulsation discrète (il attend une question). */ html.anim .stg-launch .dot { animation: dms-halo 2.6s ease-in-out infinite; } /* ---------------------------------------------------------- 4. PAGES Fondu natif entre les pages (Chrome/Edge/Safari ; ignoré ailleurs). */ @view-transition { navigation: auto; } /* ---------------------------------------------------------- 5. EN-TÊTE Le header se condense dès que la page défile (classe posée par anim.js). */ /* Le logo garde sa taille au défilement (choix retenu) : seule l'ombre apparaît. */ html.anim header { transition: box-shadow .25s ease, background-color .25s ease; } html.anim.scrolled header { box-shadow: 0 6px 24px rgba(0, 0, 0, .10); } /* Soulignement qui se dessine sous les liens de navigation. */ html.anim nav ul li a { position: relative; } html.anim nav ul li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--anim-ease); } html.anim nav ul li a:hover::after, html.anim nav ul li a.on::after { transform: scaleX(1); } /* ---------------------------------------------------------- 6. PANNEAU CHAT Ouverture glissée plutôt qu'apparition sèche. */ @keyframes dms-panel { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } html.anim .stg-panel.open { animation: dms-panel .28s var(--anim-ease) both; } html.anim .stg-m { animation: dms-rise .32s var(--anim-ease) both; } html.anim .stg-launch { animation: dms-rise .4s var(--anim-ease) .5s both; } /* ---------------------------------------------------------- 7. PARALLAXE Décalage très léger du visuel et du filigrane (anim.js pilote --p). Désactivé sous 860 px, là où les visuels de hero sont déjà masqués. */ @media (min-width: 861px) { /* Amplitudes réglables. Elles sont différenciées car les heros n'ont pas la même hauteur utile : la home fait 86vh (large marge), la page modèle est compacte (20 px de padding) et rognerait le visuel si on poussait autant. Seuls ~60 % de l'amplitude sont réellement vus : au-delà, le hero a quitté l'écran. */ html.anim { --par-hero: 110px; --par-brand: 70px; --par-model: 45px; --par-ghost: -90px; } html.anim .hero-img { transform: translateY(calc(var(--p, 0) * var(--par-hero))); } html.anim .bhero-img { transform: translateY(calc(var(--p, 0) * var(--par-brand))); } html.anim .mhero-img { transform: translateY(calc(var(--p, 0) * var(--par-model))); } html.anim .hero .ghost, html.anim .bhero .ghost, html.anim .mhero .ghost { transform: translateY(calc(var(--p, 0) * var(--par-ghost))); } /* La dérive continue du filigrane cède la place au parallaxe. */ html.anim.parallax .hero .ghost, html.anim.parallax .bhero .ghost, html.anim.parallax .mhero .ghost { animation: none; } } /* ---------------------------------------------------------- ACCESSIBILITÉ Mouvement réduit : tout est neutralisé, rien ne reste masqué. */ @media (prefers-reduced-motion: reduce) { html.anim *, html.anim *::before, html.anim *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } @view-transition { navigation: none; } } /* ---------------------------------------------------------- IMPRESSION Un bloc pas encore révélé ne doit jamais sortir blanc sur le papier (fiche technique imprimée depuis une page modèle, par exemple). */ @media print { html.anim *, html.anim *::before, html.anim *::after { animation: none !important; opacity: 1 !important; transform: none !important; } }