/* ========================================================================== Mancers — Motion system ("Signal & Momentum") The logo is a gradient swoosh in motion around a bolt-shaped M. The site's motion language echoes that literally: things arrive with a small burst of energy, gradients drift rather than sit static, and data/signal lines pulse through the AI and case-study sections. Every rule here is guarded by prefers-reduced-motion. ========================================================================== */ @keyframes gradient-drift{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes signal-dash{ to{ stroke-dashoffset: 0; } } @keyframes pulse-node{ 0%, 100%{ transform: scale(1); opacity: 0.55; } 50%{ transform: scale(1.6); opacity: 1; } } @keyframes rise-in{ from{ opacity: 0; transform: translateY(18px); } to{ opacity: 1; transform: translateY(0); } } @keyframes fade-in{ from{ opacity: 0; } to{ opacity: 1; } } @keyframes bolt-flicker{ 0%, 100%{ opacity: 1; } 92%{ opacity: 1; } 94%{ opacity: 0.4; } 96%{ opacity: 1; } } /* ---- scroll reveal ---- Scoped under html.js (set by an inline script at the top of ) so content is only ever hidden-then-revealed when JS is actually running and able to reveal it. With JS disabled, [data-reveal] content is visible by default — see main.js for the belt-and-suspenders timeout fallback too. */ .js [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } [data-reveal-group] > *{ transition-delay: calc(var(--reveal-index, 0) * 70ms); } /* ---- hover micro-interactions ---- */ .btn, .card, .nav-link{ transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .btn-primary{ background-size: 220% 220%; background-image: var(--brand-gradient); animation: gradient-drift 8s ease infinite; } .btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } /* animated gradient surfaces (used sparingly — hero accent bar, tags) */ .gradient-anim{ background-size: 220% 220%; background-image: var(--brand-gradient); animation: gradient-drift 12s ease infinite; } .signal-line{ fill: none; stroke-linecap: round; stroke-dasharray: 6 10; animation: signal-dash 18s linear infinite; } .pulse-dot{ animation: pulse-node 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1; transform: none; transition: none; } .btn-primary, .gradient-anim{ animation: none; background-position: 0% 50%; } .signal-line{ animation: none; stroke-dashoffset: 0; } .pulse-dot{ animation: none; } *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }