/* * Avanteria motion layer. * * CONTRACT (enforced by tests): * 1. Content is visible with no JavaScript and with no CSS animation support. * 2. Reveal animation is opt-in: it applies only once the enhancement script sets * [data-motion="ready"] on . If the script never runs, nothing is hidden. * 3. prefers-reduced-motion disables every decorative, ambient and parallax effect. * 4. No animation may change layout. Transform and opacity only. */ @keyframes av-spin { to { transform: rotate(360deg); } } @keyframes av-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @keyframes av-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } @keyframes av-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes av-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2.5%, -3%, 0) scale(1.06); } } @keyframes av-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes av-pulse-ring { 0% { opacity: 0.55; transform: scale(0.92); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } } @keyframes av-menu-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } } /* ---------- Scroll reveal ---------- */ [data-motion='ready'] [data-reveal] { opacity: 0; will-change: opacity, transform; } [data-motion='ready'] [data-reveal][data-revealed='true'] { animation: av-rise var(--duration-slower) var(--ease-entrance) both; } [data-motion='ready'] [data-reveal='fade'][data-revealed='true'] { animation-name: av-fade; } [data-stagger] > * { --stagger-index: 0; } [data-motion='ready'] [data-stagger] > [data-revealed='true'] { animation-delay: calc(var(--stagger-index, 0) * var(--stagger-base, 90ms)); } /* ---------- Ambient ---------- */ .hero__mesh { animation: av-drift var(--duration-ambient-slow) var(--ease-linear) infinite alternate; } .cta-banner::before { animation: av-drift var(--duration-ambient) var(--ease-linear) infinite alternate; } .cta-banner::after { animation: av-drift calc(var(--duration-ambient) * 1.4) var(--ease-linear) infinite alternate-reverse; } .hairline { background-size: 200% 100%; animation: av-sheen 12s var(--ease-linear) infinite; } .ecosystem__core::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--color-aqua); animation: av-pulse-ring 3.4s var(--ease-standard) infinite; pointer-events: none; } /* ---------- Navigation ---------- */ .mega:not([hidden]) { animation: av-menu-in var(--duration-base) var(--ease-entrance) both; } .mobile-nav:not([hidden]) { animation: av-fade var(--duration-fast) var(--ease-standard) both; } .mobile-nav__panel { overflow: hidden; } .mobile-nav__panel:not([hidden]) { animation: av-rise var(--duration-base) var(--ease-entrance) both; } .site-header__inner { transition: min-block-size var(--duration-base) var(--ease-standard); } @media (min-width: 68rem) { .site-header[data-scrolled='true'] .site-header__inner { min-block-size: 8rem; } } .toast { animation: av-rise var(--duration-base) var(--ease-spring) both; } .cookie-panel:not([hidden]) { animation: av-rise var(--duration-slow) var(--ease-entrance) both; } [data-count-to] { font-variant-numeric: tabular-nums; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } /* Content must never remain hidden when animation is suppressed. */ [data-motion='ready'] [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } .hero__mesh, .cta-banner::before, .cta-banner::after, .ecosystem__core::after, .hairline, .skeleton, .spinner { animation: none !important; } .ecosystem__core::after { opacity: 0.35; transform: none; } .btn:hover, .card--link:hover, .capability-chip:hover, .ecosystem__node:hover { transform: none; } } @media (hover: none) { .card--link:hover, .capability-chip:hover, .ecosystem__node:hover, .btn:hover { transform: none; } }