/* ============================================================ Motion — scroll reveals, ambient float, reduced-motion Content is visible by default; JS opts in to the reveal. ============================================================ */ /* The hidden "from" state is applied ONLY under .anim (set in when the tab is visible and motion is allowed). Without .anim — headless renderers, background tabs, reduced-motion — content renders fully visible and is never gated behind a transition that could freeze. */ .anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); } .anim .reveal.is-in { opacity: 1; transform: none; } /* staggered children */ .anim .reveal-group > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); } .anim .reveal-group.is-in > * { opacity: 1; transform: none; } .anim .reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; } .anim .reveal-group.is-in > *:nth-child(2) { transition-delay: 55ms; } .anim .reveal-group.is-in > *:nth-child(3) { transition-delay: 110ms; } .anim .reveal-group.is-in > *:nth-child(4) { transition-delay: 165ms; } .anim .reveal-group.is-in > *:nth-child(5) { transition-delay: 205ms; } .anim .reveal-group.is-in > *:nth-child(6) { transition-delay: 245ms; } .anim .reveal-group.is-in > *:nth-child(7) { transition-delay: 285ms; } .anim .reveal-group.is-in > *:nth-child(n+8) { transition-delay: 320ms; } /* ambient float on hero emblem */ @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes pulse-core { 0%, 100% { box-shadow: 0 0 80px -6px var(--ember-glow), inset 0 0 40px oklch(0.3 0.1 40 / 0.6); } 50% { box-shadow: 0 0 110px 0px var(--ember-glow), inset 0 0 46px oklch(0.32 0.1 40 / 0.6); } } .emblem__ring.r3 { animation: spin-slow 48s linear infinite; } .emblem__core { animation: pulse-core 5.5s var(--ease-in-out) infinite; } .emblem__node { animation: float-soft 6s var(--ease-in-out) infinite; } .emblem__node.n2 { animation-delay: 0.8s; } .emblem__node.n3 { animation-delay: 1.6s; } .emblem__node.n4 { animation-delay: 2.4s; } .emblem__node.n5 { animation-delay: 3.2s; } /* twinkle for starfield dots (added by JS) */ @keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } } .star-dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--ink); animation: twinkle var(--tw, 4s) var(--ease-in-out) infinite; } /* shimmer sweep for primary CTA (subtle) */ @keyframes shimmer { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; } .emblem__ring.r3, .emblem__core, .emblem__node, .star-dot { animation: none !important; } * { scroll-behavior: auto !important; } }