/* ============================================================ MOTION Every shared animation in the app, in one file, and the three levels of the Animations setting (). Tune the whole feel from here: --stagger gap between cards when a screen opens Remove all shared animation: delete this file and its . Nothing else depends on it. Rules that keep it smooth: · only transform and opacity move · entrance animations use `backwards` fill, so no leftover transform is left behind on the element afterwards ============================================================ */ :root { --stagger: 55ms; } /* ── Screens: cards rise in one after another ──────────────── Opt-in with class="page stagger" on a screen's root. Screens that re-render their children constantly (chat) stay off it. */ .view.is-active .stagger > * { animation: rise var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); } .stagger > :nth-child(1) { --i: 0; } .stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; } .stagger > :nth-child(4) { --i: 3; } .stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; } .stagger > :nth-child(7) { --i: 6; } .stagger > :nth-child(n+8) { --i: 7; } @keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } /* ── Touch feedback ────────────────────────────────────────── Everything tappable gives a little under the finger. */ .btn-primary, .btn-ghost, .btn-danger, .icon-btn, .nav-item, .set-btn, .seg-btn, .theme-row { -webkit-tap-highlight-color: transparent; } .btn-ghost, .btn-danger, .icon-btn, .set-btn { transition-property: transform, color, background, border-color, opacity; transition-duration: var(--dur-fast); transition-timing-function: var(--ease); } .btn-primary:active, .btn-ghost:active, .btn-danger:active, .set-btn:active { transform: scale(0.97); } .icon-btn:active { transform: scale(0.88); } /* ── Bottom nav ────────────────────────────────────────────── The active icon pops, and the dot beneath it grows in. */ .nav-item svg { transition: transform var(--dur) var(--ease-out); } .nav-item:active svg { transform: scale(0.82); } .nav-item.is-active svg { animation: navPop 380ms var(--ease-out); } .nav-item.is-active::after { animation: dotIn var(--dur) var(--ease-out); } @keyframes navPop { 0% { transform: scale(0.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes dotIn { from { transform: translateX(-50%) scale(0); } to { transform: translateX(-50%) scale(1); } } /* ── Settings gear ─────────────────────────────────────────── Turns as it's pressed. */ .settings-gear svg { transition: transform var(--dur-slow) var(--ease-out); } .settings-gear:hover svg { transform: rotate(45deg); } .settings-gear:active svg { transform: rotate(90deg); } /* ── Settings sheet ────────────────────────────────────────── Sections settle in a beat after the panel does. Scoped to this sheet: the coach's messages must not be delayed by it. */ .sheet--settings.is-open .sheet-body > * { animation: rise var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--dur) * 0.5 + var(--i, 0) * var(--stagger)); } .sheet--settings .sheet-body > :nth-child(2) { --i: 1; } .sheet--settings .sheet-body > :nth-child(3) { --i: 2; } .sheet--settings .sheet-body > :nth-child(4) { --i: 3; } /* ── Level: CALM ───────────────────────────────────────────── Quick, quiet transitions; the background holds still. */ :root[data-motion="reduced"] { --dur-fast: 80ms; --dur: 120ms; --dur-slow: 180ms; --theme-swap: 1ms; --float-amp: 0px; --stagger: 0ms; } :root[data-motion="reduced"] .glow, :root[data-motion="reduced"] .p, :root[data-motion="reduced"] .atmos-scanlines, :root[data-motion="reduced"] .atmos-vignette { animation: none !important; } :root[data-motion="reduced"] .p { opacity: var(--p-opacity); } :root[data-motion="reduced"] .stagger > *, :root[data-motion="reduced"] .sheet--settings .sheet-body > *, :root[data-motion="reduced"] .nav-item svg, :root[data-motion="reduced"] .nav-item::after { animation: none !important; } /* ── Level: OFF ────────────────────────────────────────────── Durations collapse to 1ms rather than `animation: none`, so any code waiting on an animationend still hears it. */ :root[data-motion="off"] { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --theme-swap: 1ms; --float-amp: 0px; --stagger: 0ms; } :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } :root[data-motion="off"] .glow { animation: none !important; } :root[data-motion="off"] .particles { display: none; } /* The phone's own "reduce motion" switch behaves like Calm. */ @media (prefers-reduced-motion: reduce) { .stagger > *, .sheet--settings .sheet-body > *, .nav-item svg, .nav-item::after { animation: none !important; } :root { --stagger: 0ms; } }