/* ========================================================================== Beautiful AFRIKA — animations.css Images clés, apparitions au défilement, intro des heros, transitions de page. Tout mouvement est conditionné à prefers-reduced-motion: no-preference. La classe .js est ajoutée dans : sans JavaScript, tout reste visible. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Images clés -------------------------------------------------------------------------- */ @keyframes ba-spin { to { transform: rotate(360deg); } } @keyframes ba-scroll-line { 0% { transform: translateY(-100%); } 65%, 100% { transform: translateY(240%); } } @keyframes ba-live-pulse { 0% { opacity: .6; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(2.8); } } @keyframes ba-vt-out { to { opacity: 0; } } @keyframes ba-vt-in { from { opacity: 0; } } /* -------------------------------------------------------------------------- 2. Défilement doux & transitions entre pages (navigateurs compatibles) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: .32s var(--ease-out) both ba-vt-out; } ::view-transition-new(root) { animation: .55s var(--ease-out) both ba-vt-in; } /* Point « en direct » et sceau de l'événement à la une */ .live-dot::after { animation: ba-live-pulse 2.2s var(--ease-out) infinite; } .featured__seal-ring { animation: ba-spin 32s linear infinite; } } /* Logo de l'en-tête : apparition, reflet qui parcourt les lettres, vague au survol */ @keyframes ba-brand-rise { from { opacity: 0; transform: translate3d(0, 22%, 0) scale(.9); } } @keyframes ba-brand-letter { from { opacity: 0; transform: translate3d(0, 45%, 0); } } @keyframes ba-brand-glint { 0%, 8%, 100% { opacity: 1; } 4% { opacity: .3; } } @keyframes ba-brand-lift { 45% { transform: translate3d(0, -16%, 0); } } @keyframes ba-brand-nod { 45% { transform: rotate(-7deg) scale(1.04); } } @media (prefers-reduced-motion: no-preference) { .brand-mark__monogram, .brand-mark__letter, .brand-mark path { transform-box: fill-box; transform-origin: 50% 100%; } .brand-mark__monogram { animation: ba-brand-rise 1.1s var(--ease-out) .1s both, ba-brand-glint 8s ease-in-out 3.5s infinite; } .brand-mark__letter { animation: ba-brand-letter .9s var(--ease-out) calc(.35s + var(--i) * .04s) both, ba-brand-glint 8s ease-in-out calc(3.5s + var(--i) * .07s) infinite; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) { .site-header__brand:hover .brand-mark__letter path { animation: ba-brand-lift .7s var(--ease-out) calc(var(--i) * .03s); } .site-header__brand:hover .brand-mark__monogram path { animation: ba-brand-nod .9s var(--ease-out); } } /* Orbite de la section Bienvenue : tracé du halo, satellites, texte, onde */ @keyframes ba-orbit-ripple { 0% { opacity: .6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.24); } } @media (prefers-reduced-motion: no-preference) { .js .orbit__halo { stroke-dasharray: 1245; stroke-dashoffset: 1245; transition: stroke-dashoffset 2.8s var(--ease-in-out) .2s; } .js .intro__ornament.is-revealed .orbit__halo, .reveal-off .orbit__halo { stroke-dashoffset: 0; } .orbit__spin--satellite { animation: ba-spin 26s linear infinite; } .orbit__spin--track { animation: ba-spin 80s linear infinite reverse; } .orbit__spin--words { animation: ba-spin 140s linear infinite; } .orbit__ripple { animation: ba-orbit-ripple 6s var(--ease-out) 1.5s infinite; } } /* Vagues entre les sections : dérive lente, sur grand écran uniquement */ @keyframes ba-wave-drift { to { -webkit-mask-position: -15rem 0, 0 0; mask-position: -15rem 0, 0 0; } } @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { main > section + section::before, .steps-band::before, .site-footer::before { animation: ba-wave-drift 40s linear infinite; } } /* -------------------------------------------------------------------------- 3. Apparitions au défilement : [data-reveal="up|fade|left|right|zoom|mask"] -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js [data-reveal] { opacity: 0; transform: translate3d(0, 2rem, 0); transition: opacity 1.1s var(--ease-out) var(--reveal-delay, 0s), transform 1.1s var(--ease-out) var(--reveal-delay, 0s); } .js [data-reveal="fade"] { transform: none; } .js [data-reveal="left"] { transform: translate3d(-2.5rem, 0, 0); } .js [data-reveal="right"] { transform: translate3d(2.5rem, 0, 0); } .js [data-reveal="zoom"] { transform: scale(.96); } /* Rideau sur les visuels */ .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-in-out) var(--reveal-delay, 0s); } .js [data-reveal="mask"] > img, .js [data-reveal="mask"] > picture > img { transform: scale(1.18); transition: transform 1.9s var(--ease-out) var(--reveal-delay, 0s); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } .js [data-reveal="mask"].is-revealed { clip-path: inset(0 0 0 0); } .js [data-reveal="mask"].is-revealed > img, .js [data-reveal="mask"].is-revealed > picture > img { transform: none; } /* Filet qui se dessine */ .js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-in-out) var(--reveal-delay, 0s); } .js [data-reveal="line"].is-revealed { transform: scaleX(1); } /* ---------------------------------------------------------------------- 4. Intro du hero d'accueil ---------------------------------------------------------------------- */ .js .hero__img { transform: scale(1.14); transition: transform 2.8s cubic-bezier(.22, .61, .36, 1); } .js .hero__line-inner { transform: translate3d(0, 108%, 0); transition: transform 1.3s var(--ease-out); } .js .hero__announce, .js .hero__kicker, .js .hero__subtitle, .js .hero__text, .js .hero__actions, .js .hero__aside, .js .hero__caption { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); } /* Le bandeau « À la une » glisse en dernier, comme une annonce */ .js .hero__announce { transform: translate3d(0, -.75rem, 0); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), border-color var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); } .js .hero__scroll { opacity: 0; transform: translate3d(-50%, 1rem, 0); transition: opacity 1.2s var(--ease-out) 1.4s, transform 1.2s var(--ease-out) 1.4s; } .js .hero.is-loaded .hero__img { transform: scale(1.02); } .js .hero.is-loaded .hero__line-inner, .js .hero.is-loaded .hero__announce, .js .hero.is-loaded .hero__kicker, .js .hero.is-loaded .hero__subtitle, .js .hero.is-loaded .hero__text, .js .hero.is-loaded .hero__actions, .js .hero.is-loaded .hero__aside, .js .hero.is-loaded .hero__caption { opacity: 1; transform: none; } .js .hero.is-loaded .hero__scroll { opacity: 1; transform: translate3d(-50%, 0, 0); } .js .hero.is-loaded .hero__kicker { transition-delay: .1s; } .js .hero.is-loaded .hero__line-inner { transition-delay: calc(.22s + var(--line, 0) * .14s); } .js .hero.is-loaded .hero__subtitle { transition-delay: .7s; } .js .hero.is-loaded .hero__text { transition-delay: .82s; } .js .hero.is-loaded .hero__actions { transition-delay: .94s; } .js .hero.is-loaded .hero__aside { transition-delay: 1.08s; } .js .hero.is-loaded .hero__caption { transition-delay: 1.3s; } .js .hero.is-loaded .hero__announce { transition-delay: 1.2s, 1.2s, 0s, 0s; } /* ---------------------------------------------------------------------- 5. Intro des en-têtes de pages ---------------------------------------------------------------------- */ .js .page-hero__img { transform: scale(1.1); transition: transform 2.4s cubic-bezier(.22, .61, .36, 1); } .js .page-hero [data-hero-item], .js .page-hero__caption { opacity: 0; transform: translate3d(0, 1.5rem, 0); transition: opacity 1.1s var(--ease-out) calc(.12s + var(--i, 0) * .11s), transform 1.1s var(--ease-out) calc(.12s + var(--i, 0) * .11s); } .js .page-hero.is-loaded .page-hero__img { transform: scale(1.02); } .js .page-hero.is-loaded [data-hero-item], .js .page-hero.is-loaded .page-hero__caption { opacity: 1; transform: none; } /* ---------------------------------------------------------------------- 6. Filet de sécurité : si les scripts ne se chargent pas, tout s'affiche ---------------------------------------------------------------------- */ .reveal-off [data-reveal], .reveal-off .hero__line-inner, .reveal-off .hero__announce, .reveal-off .hero__kicker, .reveal-off .hero__subtitle, .reveal-off .hero__text, .reveal-off .hero__actions, .reveal-off .hero__aside, .reveal-off .hero__caption, .reveal-off .page-hero [data-hero-item], .reveal-off .page-hero__caption { opacity: 1 !important; transform: none !important; clip-path: none !important; } .reveal-off .hero__scroll { opacity: 1 !important; transform: translate3d(-50%, 0, 0) !important; } .reveal-off [data-reveal] img, .reveal-off .hero__img, .reveal-off .page-hero__img { transform: none !important; } } /* -------------------------------------------------------------------------- 7. Pastilles d'icônes Apparition posée juste après le texte, onde qui s'échappe de la pastille, reflet régulier sur les trois expertises, rebond de l'icône au survol. Géométrie et couleurs : style.css (section 20). -------------------------------------------------------------------------- */ @keyframes ba-badge-in { from { transform: scale(.82); } 60% { transform: scale(1.05); } to { transform: scale(1); } } @keyframes ba-badge-wave { from { opacity: .5; transform: scale(.92); } to { opacity: 0; transform: scale(1.5); } } @keyframes ba-badge-beacon { 0% { opacity: .45; transform: scale(.95); } 45%, 100% { opacity: 0; transform: scale(1.5); } } @keyframes ba-badge-glint { 0%, 80% { opacity: 0; background-position: 190% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -70% 0; } } @keyframes ba-icon-nod { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-.16rem) scale(1.09); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: no-preference) { /* La pastille se pose quand sa carte apparaît */ .js .is-revealed .service-card__icon, .js .is-revealed .advantage__icon, .js .is-revealed .feature__icon, .js .is-revealed .logistics-item__icon, .js .is-revealed .timeline__marker, .js .is-revealed .pillar__icon, .js .is-revealed .value-card__icon, .js .is-revealed .intro__value .icon { animation: ba-badge-in .8s var(--ease-out) .1s backwards; } /* Une onde s'en échappe une fois */ .js .is-revealed .service-card__icon::before, .js .is-revealed .advantage__icon::before, .js .is-revealed .feature__icon::before, .js .is-revealed .logistics-item__icon::before, .js .is-revealed .timeline__marker::before { animation: ba-badge-wave 1.2s var(--ease-out) .28s backwards; } /* L'étape en cours de la frise garde un halo lent */ .timeline__item.is-active .timeline__marker::before { animation: ba-badge-beacon 3.6s var(--ease-out) infinite; } /* Reflet qui traverse les pastilles des trois expertises, comme le logo */ .service-card__icon::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: linear-gradient(105deg, transparent 40%, var(--badge-glint) 50%, transparent 60%) 190% 0 / 260% 100% no-repeat; opacity: 0; pointer-events: none; } .js .is-revealed .service-card__icon::after { animation: ba-badge-glint 9s var(--ease-in-out) 1.8s infinite; } } @media (prefers-reduced-motion: no-preference) and (hover: hover) { /* Au survol, l'icône acquiesce */ .service-card:hover .service-card__icon .icon, .advantage:hover .advantage__icon .icon, .feature:hover .feature__icon .icon, .logistics-item:hover .logistics-item__icon .icon, .contact-info__item:hover .contact-info__icon .icon, .event-card:hover .event-card__icon .icon, .featured__chips li:hover .icon, a.social-list__link:hover .icon, .pillar:hover .pillar__icon, .value-card:hover .value-card__icon, .intro__value:hover .icon, .slideshow-ui__toggle:hover .icon, .gallery-item__link:hover .gallery-item__zoom .icon, .featured__poster:hover .featured__poster-zoom .icon { animation: ba-icon-nod .6s var(--ease-out); } } /* -------------------------------------------------------------------------- 8. Mouvement réduit : expérience complète, sans animation -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .hero__scroll-line::after, .live-dot::after { display: none; } }