/* * Animations d'apparition au scroll — TEA Logistic Group. * Progressive enhancement stricte : tant que le n'a pas la classe * .reveal-ready (ajoutée par reveal.js une fois l'observateur prêt), tout * reste parfaitement visible. Si JS échoue ou est bloqué, rien n'est jamais * caché — voir reveal.js pour le détail du contrat. */ html.reveal-ready [data-reveal] { opacity: 0; transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); transition-delay: calc(min(var(--reveal-i, 0), 6) * var(--reveal-stagger)); will-change: opacity, transform; } html.reveal-ready [data-reveal="up"] { transform: translateY(38px); } html.reveal-ready [data-reveal="down"] { transform: translateY(-30px); } html.reveal-ready [data-reveal="left"] { transform: translateX(-52px); } html.reveal-ready [data-reveal="right"] { transform: translateX(52px); } html.reveal-ready [data-reveal="zoom"] { transform: scale(0.88); } html.reveal-ready [data-reveal="fade"] { transform: none; } /* Variante "3D" signature : légère bascule en perspective, comme si la carte se redressait vers le visiteur. Le parent porte la perspective (voir .reveal-grid) pour que l'effet reste discret et cohérent. */ html.reveal-ready [data-reveal="tilt"] { transform: perspective(1000px) rotateX(12deg) translateY(30px) scale(0.96); transform-origin: 50% 100%; } html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } .reveal-grid { perspective: 1400px; } /* ---------- Entrée du hero (au chargement, pas au scroll) ---------- */ /* Colonne de texte : montée + léger flou qui se résorbe, plus "cinéma" qu'un simple fondu. La carte de devis, elle, arrive distinctement de la droite avec un zoom d'installation — pour bien lire les deux colonnes (texte à gauche, devis à droite) comme deux temps d'une même entrée. */ @keyframes reveal-hero-up { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes reveal-hero-in-right { from { opacity: 0; transform: translateX(50px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes reveal-hero-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero__eyebrow, .hero__title, .hero__lead, .hero__actions, .page-hero__eyebrow, .page-hero__title { animation: reveal-hero-up 950ms var(--reveal-ease) both; } .hero__quickform { animation: reveal-hero-in-right 950ms var(--reveal-ease) both; } .hero__eyebrow, .page-hero__eyebrow { animation-delay: 80ms; } .hero__title, .page-hero__title { animation-delay: 220ms; } .hero__lead { animation-delay: 360ms; } .hero__actions { animation-delay: 480ms; } .hero__quickform { animation-delay: 320ms; } .hero__eyebrow::after, .page-hero__eyebrow::after { transform-origin: left; animation: reveal-hero-line 600ms var(--reveal-ease) both; animation-delay: 620ms; } /* Bouton principal du hero : un léger anneau doré "respire" toutes les 10 secondes pour attirer l'œil, sans jamais gêner le survol (l'anneau vit sur un ::after décoratif, pas sur la transform du bouton lui-même). */ .hero__actions .btn--primary { position: relative; } .hero__actions .btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(231, 185, 62, 0.55); animation: cta-pulse-ring 10s ease-out infinite; animation-delay: 1.6s; pointer-events: none; } @keyframes cta-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(231, 185, 62, 0.55); } 8% { box-shadow: 0 0 0 16px rgba(231, 185, 62, 0); } 100% { box-shadow: 0 0 0 16px rgba(231, 185, 62, 0); } } /* Léger effet de profondeur (parallaxe) sur l'image de fond du hero, piloté par reveal.js via une variable custom mise à jour au scroll. --reveal-parallax est posée sur .hero/.page-hero et hérite naturellement jusqu'aux calques .hero__slide (voir hero-slideshow.js). */ .hero__slide, .page-hero { background-position: center calc(50% + var(--reveal-parallax, 0px)) !important; } @media (prefers-reduced-motion: reduce) { html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__eyebrow, .hero__title, .hero__lead, .hero__actions, .hero__quickform, .page-hero__eyebrow, .page-hero__title { animation: none !important; } .hero__eyebrow::after, .page-hero__eyebrow::after { animation: none !important; } .hero__actions .btn--primary::after { animation: none !important; } .hero__slide, .page-hero { background-position: center !important; } }