/* ========================================================= VENTURI DECO — ANIMATIONS Activées progressivement par animations.js ========================================================= */ /* * Les éléments restent visibles lorsque JavaScript est désactivé. * Ils sont masqués uniquement si la classe "js" existe sur . */ /* Base commune */ .js [data-reveal] { opacity: 0; transition: opacity 800ms ease, transform var(--transition-slow); } /* Apparition depuis le bas */ .js [data-reveal="up"] { transform: translateY(45px); } /* Apparition depuis la gauche */ .js [data-reveal="left"] { transform: translateX(-45px); } /* Apparition depuis la droite */ .js [data-reveal="right"] { transform: translateX(45px); } /* Apparition avec zoom */ .js [data-reveal="scale"] { transform: scale(0.94); } /* Apparition simple */ .js [data-reveal="fade"] { transform: none; } /* État visible */ .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Délais */ .js [data-delay="1"] { transition-delay: 100ms; } .js [data-delay="2"] { transition-delay: 200ms; } .js [data-delay="3"] { transition-delay: 300ms; } .js [data-delay="4"] { transition-delay: 400ms; } .js [data-delay="5"] { transition-delay: 500ms; } /* ========================================================= ANIMATION DU HERO AU CHARGEMENT ========================================================= */ .js .hero__label, .js .hero__title, .js .hero__description, .js .hero__actions, .js .hero__breadcrumb { opacity: 0; transform: translateY(28px); } .js .hero.is-loaded .hero__label { animation: hero-content-in 700ms 100ms forwards; } .js .hero.is-loaded .hero__title { animation: hero-content-in 900ms 220ms forwards; } .js .hero.is-loaded .hero__description, .js .hero.is-loaded .hero__breadcrumb { animation: hero-content-in 800ms 400ms forwards; } .js .hero.is-loaded .hero__actions { animation: hero-content-in 800ms 550ms forwards; } .js .hero__image { transform: scale(1.08); transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1); } .js .hero.is-loaded .hero__image { transform: scale(1.02); } @keyframes hero-content-in { to { opacity: 1; transform: translateY(0); } } /* ========================================================= ANIMATIONS DÉCORATIVES ========================================================= */ /* Ligne animée */ .animated-line { position: relative; overflow: hidden; } .animated-line::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient( to right, transparent, var(--color-orange), transparent ); transform: translateX(-100%); animation: line-movement 4s ease-in-out infinite; } @keyframes line-movement { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } /* Mouvement léger d’un élément décoratif */ .floating-element { animation: floating-element 5s ease-in-out infinite; } @keyframes floating-element { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* Indication de défilement */ .hero__scroll::after { background-size: 200% 100%; animation: scroll-indicator 2.5s linear infinite; } @keyframes scroll-indicator { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ========================================================= CHARGEMENT DES IMAGES ========================================================= */ .image-loading { background: linear-gradient( 100deg, var(--color-surface) 20%, var(--color-surface-light) 40%, var(--color-surface) 60% ); background-size: 200% 100%; animation: image-loading 1.5s infinite; } @keyframes image-loading { to { background-position-x: -200%; } } /* ========================================================= ACCESSIBILITÉ ========================================================= */ @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js .hero__label, .js .hero__title, .js .hero__description, .js .hero__actions, .js .hero__breadcrumb { opacity: 1; transform: none; } .animated-line::after, .floating-element, .hero__scroll::after, .image-loading { animation: none; } .js .hero__image { transform: scale(1.02); } }