/* ══════════════════════════════════════════════════════════════════ ATARprepAI shared motion layer — token-agnostic, progressive. Pair with motion.js. Safe-by-default: nothing is hidden unless motion.js adds `m-js` to , so a JS failure can never blank a section. Everything is disabled under prefers-reduced-motion. Accent resolves through whichever token the page defines. ══════════════════════════════════════════════════════════════════ */ :root { --m-accent: var(--violet, var(--indigo, #5b50e8)); --m-ease: cubic-bezier(.22, .61, .21, 1); } /* ── Scroll reveal (opt-in via .m-reveal / [data-m-stagger]) ── */ html.m-js .m-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--m-ease), transform .5s var(--m-ease); } html.m-js .m-reveal.m-in { opacity: 1; transform: none; } html.m-js [data-m-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--m-ease), transform .45s var(--m-ease); transition-delay: calc(var(--m-i, 0) * 70ms); } html.m-js [data-m-stagger].m-in > * { opacity: 1; transform: none; } /* scale variant: add alongside .m-reveal */ html.m-js .m-reveal.m-scale { transform: translateY(10px) scale(.97); } /* ── Hover lift for cards (opt-in via .m-lift) ── */ .m-lift { transition: transform .22s var(--m-ease), box-shadow .22s var(--m-ease); } .m-lift:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26, 26, 62, .13); } [data-dark] .m-lift:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); } /* ── Press feedback for buttons/links (opt-in via .m-press) ── */ .m-press { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .m-press:hover { filter: brightness(1.04); } .m-press:active { transform: translateY(1px) scale(.985); } /* ── Click ripple (opt-in via data-m-ripple; span injected by JS) ── */ [data-m-ripple] { position: relative; overflow: hidden; } .m-ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; background: rgba(255, 255, 255, .38); animation: mRipple .55s ease-out forwards; } .m-ripple.m-ripple-ink { background: rgba(91, 80, 232, .16); } @keyframes mRipple { to { transform: scale(2.6); opacity: 0; } } /* ── Cursor tilt + glow for feature cards (opt-in via .m-tilt) ── */ .m-tilt { position: relative; transform-style: preserve-3d; will-change: transform; } .m-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 124, 248, .13), transparent 65%); } .m-tilt:hover::after { opacity: 1; } /* ── Sticky-nav hide/show (opt-in via [data-m-nav], fixed/sticky bars only) ── */ [data-m-nav] { transition: transform .35s cubic-bezier(.4, 0, .2, 1); } [data-m-nav].m-nav-hidden { transform: translateY(-105%); } /* keyboard users tabbing into a hidden bar must see where focus went */ [data-m-nav].m-nav-hidden:focus-within { transform: translateY(0); } /* ── Kill switch ── */ @media (prefers-reduced-motion: reduce) { html.m-js .m-reveal, html.m-js [data-m-stagger] > * { opacity: 1; transform: none; transition: none; } .m-lift, .m-lift:hover, .m-press, .m-press:active, [data-m-nav], [data-m-nav].m-nav-hidden { transition: none; transform: none; } .m-ripple { display: none; } .m-tilt::after { display: none; } }