/* Shared motion: content is visible by default, even without JavaScript. */
.motion-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
body.motion-enabled { isolation: isolate; }
.motion-ambient::before, .motion-ambient::after { content: ''; position: absolute; width: min(75vw, 850px); height: min(75vw, 850px); border-radius: 50%; background: radial-gradient(circle, #278cf51c, transparent 68%); top: -280px; left: -180px; animation: ambient-drift 18s ease-in-out infinite alternate; }
.motion-ambient::after { background: radial-gradient(circle, #9872ff19, transparent 68%); left: auto; right: -220px; top: 20%; animation-delay: -9s; }
@keyframes ambient-drift { to { transform: translate(90px, 100px) scale(1.15); } }
.motion-enabled .nav { transition: box-shadow .3s ease, border-color .3s ease; }
.motion-enabled.motion-scrolled .nav { border-bottom-color: #4dc8f540; box-shadow: 0 8px 32px #0005; }
.motion-enabled .nav-links a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.motion-enabled .nav-links a:hover { transform: translateY(-2px); }
.motion-enabled .hero h1 { animation: motion-title .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes motion-title { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.motion-enabled .hero h1 span { background-size: 200% 100%; animation: title-light 8s ease-in-out infinite alternate; }
@keyframes title-light { to { background-position: 100% 50%; } }
.motion-card { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s !important; }
.motion-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(360px circle at var(--mx) var(--my), #7acbff20, transparent 70%); opacity: 0; transition: opacity .35s; }
.motion-card .icon, .motion-card .go { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.motion-card:focus-visible { box-shadow: 0 0 0 3px #4dc8f54d; }
@media (hover: hover) and (pointer: fine) {
 .motion-card:hover { transform: perspective(900px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry)); border-color: #6bcfff80; box-shadow: 0 20px 45px #0005; }
 .motion-card:hover::after { opacity: 1; }
 .motion-card:hover .icon { transform: translateY(-3px) rotate(-5deg); }
 .motion-card:hover .go { transform: translateX(5px); }
}
.motion-card:active { transform: scale(.985); }
.motion-enabled .tool-box.show { animation: motion-title .4s cubic-bezier(.16,1,.3,1) both; }
.motion-enabled .tab { transition: background-color .2s, color .2s, box-shadow .2s; }
.motion-enabled .tab:hover { box-shadow: inset 0 -2px #4dc8f580; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (max-width: 600px) { .motion-ambient::after { display: none; } .motion-ambient::before { animation: none; } }
@media (prefers-reduced-motion: reduce) {
 .motion-enabled *, .motion-enabled *::before, .motion-enabled *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .motion-card:hover, .motion-card:active, .motion-enabled .nav-links a:hover { transform: none !important; }
}