/* core/liquid-engine.css * Liquid UI — Apple-style fluid motion, compositor-only + tier-gated. * * Everything here animates only `scale` / `translate` (independent properties * that COMPOSE with existing `transform`, so we never clobber it), `opacity`, * `box-shadow`, and `filter` — all cheap for the GPU compositor. No layout. * * Gating: rules apply only when is present (set by * core/liquid-engine.js when the Liquid UI setting is on, animations aren't * disabled, and reduced-motion isn't requested). Tier lives in * — `full` adds inertia scroll + * magnetic (driven by JS), everything below runs on both full and lite. */ :root { /* Springy overshoot for presses/hovers; smooth settle for reveals/route. */ --lq-spring: cubic-bezier(.34, 1.56, .64, 1); --lq-settle: cubic-bezier(.22, 1, .36, 1); --lq-glass: cubic-bezier(.4, 0, .2, 1); } /* ---- Hover / press spring (every clickable) ------------------------------ */ /* :where() keeps specificity at 0 so existing styles always win. */ html[data-liquid-on] :where(button, [role="button"], .btn, .u-btn, .u-x, .chip, [data-liquid]):not(:disabled):not([aria-disabled="true"]) { transition: scale .42s var(--lq-spring), translate .5s var(--lq-spring), box-shadow .4s var(--lq-glass); } html[data-liquid-on] :where(button, [role="button"], .btn, .u-btn, .chip, [data-liquid]):not(:disabled):not([aria-disabled="true"]):hover { scale: 1.025; } html[data-liquid-on] :where(button, [role="button"], .btn, .u-btn, .u-x, .chip, [data-liquid]):not(:disabled):not([aria-disabled="true"]):active { scale: .95; transition-duration: .12s, .12s, .2s; } /* Opt-in card lift. */ html[data-liquid-on] :where([data-liquid="card"], .liquid-card) { transition: scale .5s var(--lq-spring), translate .55s var(--lq-spring), box-shadow .45s var(--lq-glass); } html[data-liquid-on] :where([data-liquid="card"], .liquid-card):hover { scale: 1.012; box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .35); } /* ---- Press ripple -------------------------------------------------------- */ #lq-ripple-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; /* above app chrome, below nothing critical */ contain: strict; overflow: hidden; } .lq-ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 40%, transparent 70%); opacity: .9; will-change: transform, opacity; animation: lq-ripple-out .62s var(--lq-settle) forwards; } .lq-ripple.is-dark { background: radial-gradient(circle, rgba(20, 22, 30, .28) 0%, rgba(20, 22, 30, .12) 45%, transparent 70%); } @keyframes lq-ripple-out { from { transform: scale(1); opacity: .85; } to { transform: scale(26); opacity: 0; } } /* ---- Scroll reveal ------------------------------------------------------- */ /* JS only adds .lq-reveal to elements currently BELOW the fold, so nothing * visible is ever hidden; a failsafe reveals stragglers after ~1.5s. */ html[data-liquid-on] .lq-reveal { opacity: 0; translate: 0 16px; scale: .985; transition: opacity .6s var(--lq-settle), translate .7s var(--lq-settle), scale .7s var(--lq-settle); will-change: transform, opacity; } html[data-liquid-on] .lq-reveal.lq-revealed { opacity: 1; translate: 0 0; scale: 1; } /* ---- Route settle (whole content area eases in) -------------------------- */ html[data-liquid-on] .lq-route-enter { animation: lq-route-in .5s var(--lq-settle) both; } @keyframes lq-route-in { from { opacity: 0; translate: 0 10px; scale: .992; } to { opacity: 1; translate: 0 0; scale: 1; } } /* ---- Modal / sheet fluidity (layer onto the existing morph) -------------- */ html[data-liquid-on] .u-modal .u-card, html[data-liquid-on] .sheet-panel, html[data-liquid-on] .drawer-panel { transition: scale .5s var(--lq-spring), translate .5s var(--lq-spring), opacity .35s var(--lq-glass); } /* ---- Gooey (special moments only, via LiquidUI.goo / data-liquid-goo) ---- */ html[data-liquid-tier="full"] [data-liquid-goo] { filter: url(#lq-goo); } #lq-goo-defs { position: absolute; width: 0; height: 0; pointer-events: none; } /* ---- Magnetic elements get a snappier translate transition when released - */ html[data-liquid-tier="full"] :where([data-liquid-magnetic], .btn.primary, .u-btn.primary) { transition: scale .42s var(--lq-spring), translate .45s var(--lq-spring), box-shadow .4s var(--lq-glass); } /* ---- Per-element opt-out ------------------------------------------------- */ html[data-liquid-on] :where([data-liquid="none"], [data-no-ripple]) { scale: 1 !important; translate: 0 !important; } /* ---- Absolute safety: never let liquidity fight accessibility ------------ */ @media (prefers-reduced-motion: reduce) { html[data-liquid-on] * { transition: none !important; animation: none !important; } html[data-liquid-on] .lq-reveal { opacity: 1 !important; translate: 0 !important; scale: 1 !important; } }