/* * Motion layer — scroll-reveal, hero entrance, the aurora canvas and a * gentle parallax. All gated behind , set only when * JS is on and prefers-reduced-motion is off; no-JS and reduced-motion * visitors get the full, static page. */ :root { --m-spring: var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)); --m-out: var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1)); } /* Scroll reveal */ html.motion .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--m-spring), transform 0.8s var(--m-spring); transition-delay: var(--reveal-d, 0ms); will-change: opacity, transform; } html.motion .reveal.reveal-left { transform: translateX(-40px); } html.motion .reveal.reveal-right { transform: translateX(40px); } html.motion .reveal.reveal-scale { transform: scale(0.92); } html.motion .reveal.reveal-fade { transform: translateY(14px); } html.motion .reveal.is-visible { opacity: 1; transform: none; } /* Hero load entrance (above the fold) */ html.motion .hero-enter { opacity: 0; transform: translateY(24px); animation: heroEnter 0.95s var(--m-spring) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); } @keyframes heroEnter { to { opacity: 1; transform: none; } } /* Animated hero "×" (canvas) */ .hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* focus the glow on the right-hand constellation, fade outward */ -webkit-mask-image: radial-gradient(125% 115% at 74% 42%, #000 48%, transparent 100%); mask-image: radial-gradient(125% 115% at 74% 42%, #000 48%, transparent 100%); } #hero-canvas { display: block; width: 100%; height: 100%; } /* With motion on, the static giant glyph yields to the live canvas */ html.motion .hero-x .glyph { opacity: 0; transition: opacity 0.6s var(--m-out); } /* Without motion, hide the (never-drawn) canvas layer entirely */ html:not(.motion) .hero-fx { display: none; } /* Floating product mocks (desktop only) */ html.motion .hero-mocks { transition: transform 0.5s var(--m-out); will-change: transform; } html.motion .hero-mocks .m { animation: floatY 9s ease-in-out infinite; } html.motion .hero-mocks .m1 { --rot: rotate(-2deg); animation-delay: 0s; } html.motion .hero-mocks .m2 { --rot: rotate( 2deg); animation-delay: -3s; } html.motion .hero-mocks .m3 { --rot: rotate(-1deg); animation-delay: -6s; } @keyframes floatY { 0%, 100% { transform: var(--rot, none) translateY(0); } 50% { transform: var(--rot, none) translateY(-14px); } } /* Safety net: never trap content if motion misbehaves */ @media (prefers-reduced-motion: reduce) { html.motion .reveal, html.motion .hero-enter, html.motion .hero-mocks .m { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } html.motion .hero-x .glyph { opacity: 0.12 !important; } html.motion .hero-fx { display: none !important; } }