/* ═══════════════════════════════════════════════════════════════════════════ AXION IT — HERO COLLISION ENTRANCE Premium "arrival & impact" for .hero-logo and #hero-heading on page load. Pure transform + opacity (no layout thrash). Colors unchanged. ═══════════════════════════════════════════════════════════════════════════ */ /* Pre-hide the logo and H1 in their travel-start positions, so the JS timeline can begin without a single-frame flash. The element gets .ax-collision-pending set by the tiny inline script below. Desktop values: */ html.ax-collision-pending .hero-logo { opacity: 0; transform: translate3d(-72px, -28px, 0) scale(0.94); will-change: transform, opacity, filter; } html.ax-collision-pending #hero-heading { opacity: 0; transform: translate3d(72px, 28px, 0) scale(0.96); will-change: transform, opacity; } /* Mobile variant (Variant B): shorter travel distance, softer squash */ @media (max-width: 768px) { html.ax-collision-pending .hero-logo { transform: translate3d(-32px, -12px, 0) scale(0.96); } html.ax-collision-pending #hero-heading { transform: translate3d(32px, 14px, 0) scale(0.98); } } /* Impact flash — a brief, engineered glow on the logo & H1 at the moment of arrival. Intensities are driven by data-ax-impact="1" on .section--hero, which JS toggles for ~280ms. The actual filter chain is declared in hero-signature.css; we only flip the --ax-aura-op variable here. */ .section--hero[data-ax-impact="1"] .hero-logo { --ax-aura-op: 0.55; transition: filter 160ms cubic-bezier(0.4, 0, 0.2, 1); } /* Impact refraction flash on the H1 — piggy-backs on the sweep pseudo defined in hero-signature.css. If that file is absent, the selector silently does nothing. */ .section--hero[data-ax-impact="1"] #hero-heading::after { animation: ax-h1-impact-flash 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s 1 both; } @keyframes ax-h1-impact-flash { 0% { transform: translate3d(-20%, 0, 0); opacity: 0; } 35% { transform: translate3d( 45%, 0, 0); opacity: 1; } 100% { transform: translate3d(120%, 0, 0); opacity: 0; } } /* Reduced motion: do not run the collision. Show final state immediately. */ @media (prefers-reduced-motion: reduce) { html.ax-collision-pending .hero-logo, html.ax-collision-pending #hero-heading { opacity: 1 !important; transform: none !important; } .section--hero[data-ax-impact="1"] .hero-logo, .section--hero[data-ax-impact="1"] #hero-heading::after { animation: none !important; transition: none !important; } .section--hero .hero-logo { --ax-aura-op: 0.12; } }