/* ─────────────────────────────────────────────────────────────────────────── The Lab Trading — shared micro-interactions Linked LAST in on every page. Subtle, premium, brand-calm. Base easings use :where() (0 specificity) so a page's own styles ALWAYS win — this can only *add* smoothness, never override/break existing animations. Fully disabled under prefers-reduced-motion. ─────────────────────────────────────────────────────────────────────────── */ /* Accessible focus ring everywhere (kept even with reduced motion) */ :focus-visible { outline: 2px solid rgba(52, 207, 73, 0.7); outline-offset: 2px; } /* Smooth in-page scrolling */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } @media (prefers-reduced-motion: no-preference) { /* ── Low-priority default easings (page styles override these) ── */ :where(a, .btn, button, [role="button"], .btn-lime, .btn-ghost, .btn-solid, .social-btn, .pill, .verified-pill, .theme-switch, summary) { transition: transform .16s cubic-bezier(.22, 1, .36, 1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .2s ease, opacity .2s ease; } :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .field) { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } :where(.card) { transition: box-shadow .25s ease, border-color .2s ease; } :where(.review-card) { transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease; } /* ── Interactive states (normal specificity → these apply) ── */ /* Buttons: a soft press on click */ .btn:active:not(:disabled), button:active:not(:disabled), [role="button"]:active, .btn-lime:active, .btn-ghost:active, .btn-solid:active:not(:disabled), .social-btn:active { transform: scale(.97); } /* Arrow/icon inside a button nudges forward on hover — tiny premium touch */ .btn:hover svg, .btn-lime:hover svg, .btn-solid:hover svg { transform: translateX(1.5px); transition: transform .2s cubic-bezier(.22, 1, .36, 1); } /* Cards: shadow-only hover (no transform → safe with scroll reveals) */ .card:hover { box-shadow: 0 18px 46px -28px rgba(2, 12, 4, 0.45); } /* Marketing testimonial cards: a gentle lift (they aren't scroll-revealed) */ .review-card:hover { transform: translateY(-3px); box-shadow: 0 22px 54px -32px rgba(0, 0, 0, 0.5); } /* ── Touch devices: kill sticky-hover flicker ── Phones fire :hover on tap and it STICKS until the next tap elsewhere, so every hover lift/scale below reads as a glitchy flick on mobile. Neutralize the shared hover transforms here; :active press feedback stays (it releases on lift, so it isn't the problem). !important is deliberate: a page's own `.foo:hover { transform: ... }` is a single class + pseudo-class (specificity 0,2,0), which beats a 0-specificity :where() reset regardless of source order — CSS resolves by specificity BEFORE source order. A prior version of this rule used :where() and silently lost to every page's own hover rule, so the touch-flicker fix never actually applied anywhere. !important is the correct tool for a narrow, deliberate "always win" override like this. Page-specific hover classes not listed here still need their own matching guard in the page's own