/* ============================================================ EMPIRE OS — Motion foundation (motion.css) ------------------------------------------------------------ A tasteful, GPU-cheap motion layer that sits ON TOP of the base design system. Pure CSS: transitions, keyframes, and linear() spring easings — NO runtime animation library. Loaded LAST (after layout.css) so it cascades over existing component styles without editing them. Everything here is: • additive (namespaced `--mo-*` tokens, `.mo-*` utilities) • transform/opacity/color/background/border only — never animating width/height/top/left/margin (no layout thrash) • fully neutralized under prefers-reduced-motion (bottom). How to apply on a surface (for later per-view polish passes): - Reveal a list/grid: add `.mo-stagger` to the container and `style="--i:N"` (0-based) to each child, OR just use the nth-child fallback (works up to 16 items with no --i). - Reveal one element: `.mo-enter` (slide-up+fade), `.mo-fade` (opacity only), or `.mo-pop` (scale-in). - Interactive affordance: add `.mo-tap` for a satisfying press, `.mo-lift` for a hover raise (both opt-in; core buttons/cards already get polish globally below). ============================================================ */ :root { /* ---- Duration scale (short by design) ---------------------------- */ --mo-dur-1: 120ms; /* micro: hover tint, icon color, tap feedback */ --mo-dur-2: 200ms; /* base: most interactions, focus ring */ --mo-dur-3: 320ms; /* entrance:card/list reveals, drawer/panel */ --mo-dur-4: 480ms; /* overlay: modal/backdrop, large emphasis moments */ --mo-stagger-step: 42ms; /* per-item offset for .mo-stagger cascades */ /* ---- Named easings ----------------------------------------------- */ /* Standard: quick, symmetric-ish ease for micro-interactions. */ --mo-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Emphasized / decelerate: enters fast, settles slow — for content arriving on screen (the house --ease-smooth, kept in sync). */ --mo-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1); /* ---- linear() SPRING curves (generated, damped oscillator) -------- */ /* SMOOTH spring — critically damped (ζ≈1.0, ω≈7), NO overshoot. Use for overlay/content entrances that should feel alive but calm. */ --mo-spring-smooth: linear( 0, 0.0487, 0.1558, 0.2826, 0.4082, 0.5221, 0.6204, 0.7023, 0.7689, 0.8222, 0.8641, 0.8968, 0.922, 0.9414, 0.9561, 0.9672, 0.9756, 0.9819, 0.9866, 0.9901, 1 ); /* SUBTLY BOUNCY spring — underdamped (ζ≈0.72, ω≈8), ~3.8% overshoot. Tasteful settle, not cartoonish. Use for pops / affirmative moments.*/ --mo-spring-bouncy: linear( 0, 0.0472, 0.1597, 0.3028, 0.4523, 0.5927, 0.7152, 0.8159, 0.8943, 0.9521, 0.992, 1.0174, 1.0316, 1.0376, 1.0381, 1.035, 1.0301, 1.0244, 1.0187, 1.0136, 1.0092, 1.0057, 1.003, 1.0011, 1 ); } /* ============================================================ 1. REUSABLE ENTER ANIMATIONS (keyframes + utility classes) Content-only opacity + transform. Safe to drop on any element. ============================================================ */ @keyframes mo-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mo-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mo-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } .mo-fade { animation: mo-fade-in var(--mo-dur-3) var(--mo-ease-emphasized) both; } .mo-enter { animation: mo-slide-up var(--mo-dur-3) var(--mo-spring-smooth) both; } .mo-pop { animation: mo-scale-in var(--mo-dur-3) var(--mo-spring-bouncy) both; } /* Index-based stagger helper. Preferred: set `style="--i:N"` (0-based) on each child so the cascade scales to any list length. Falls back to nth-child offsets (1..16) when --i is not provided. */ .mo-stagger > * { animation: mo-slide-up var(--mo-dur-3) var(--mo-ease-emphasized) both; animation-delay: calc(var(--i, 0) * var(--mo-stagger-step)); } .mo-stagger[data-i-auto] > *:nth-child(1) { --i: 0; } .mo-stagger[data-i-auto] > *:nth-child(2) { --i: 1; } .mo-stagger[data-i-auto] > *:nth-child(3) { --i: 2; } .mo-stagger[data-i-auto] > *:nth-child(4) { --i: 3; } .mo-stagger[data-i-auto] > *:nth-child(5) { --i: 4; } .mo-stagger[data-i-auto] > *:nth-child(6) { --i: 5; } .mo-stagger[data-i-auto] > *:nth-child(7) { --i: 6; } .mo-stagger[data-i-auto] > *:nth-child(8) { --i: 7; } .mo-stagger[data-i-auto] > *:nth-child(9) { --i: 8; } .mo-stagger[data-i-auto] > *:nth-child(10) { --i: 9; } .mo-stagger[data-i-auto] > *:nth-child(11) { --i: 10; } .mo-stagger[data-i-auto] > *:nth-child(12) { --i: 11; } .mo-stagger[data-i-auto] > *:nth-child(13) { --i: 12; } .mo-stagger[data-i-auto] > *:nth-child(14) { --i: 13; } .mo-stagger[data-i-auto] > *:nth-child(15) { --i: 14; } .mo-stagger[data-i-auto] > *:nth-child(16) { --i: 15; } /* ============================================================ 2. OPT-IN INTERACTION UTILITIES ============================================================ */ /* Satisfying press — firm, never a collapse. */ .mo-tap { transition: transform var(--mo-dur-1) var(--mo-ease-standard); } .mo-tap:active { transform: scale(0.97); } /* Hover raise — transform only (no layout, no heavy shadow animation). */ .mo-lift { transition: transform var(--mo-dur-2) var(--mo-spring-smooth); will-change: transform; } .mo-lift:hover { transform: translateY(-2px); } .mo-lift:active { transform: translateY(0) scale(0.995); } /* ============================================================ 3. GLOBAL INTERACTION POLISH on EXISTING selectors Layered on top so components.css / layout.css stay untouched. Only fills gaps (missing easing, missing press) and refines overlay entrances with the smooth spring. Restrained — Linear/ Vercel, not bouncy toys. ============================================================ */ /* Rail nav items: give the color/bg change the house easing (base uses the browser default `ease`) and add a barely-there press. */ .rail-item { transition: color var(--mo-dur-1) var(--mo-ease-standard), background-color var(--mo-dur-1) var(--mo-ease-standard); } .rail-item:active { transform: scale(0.985); } /* Buttons already transition + press; keep their timing but ensure the press reads as a spring-y settle on release for the primary CTA. */ .btn:active, .btn-icon:active { transform: scale(0.97); } /* Chips / tags used as interactive filters: smooth their color/bg swaps and add a press when they are actually clickable. */ .tag { transition: color var(--mo-dur-1) var(--mo-ease-standard), background-color var(--mo-dur-1) var(--mo-ease-standard), border-color var(--mo-dur-1) var(--mo-ease-standard); } .tag[role="button"]:active, button.tag:active, a.tag:active { transform: scale(0.96); } /* Inputs / selects / textareas: smooth focus-ring + border transitions (base declares the transition; this just aligns the easing globally). */ .input, .textarea, .select { transition: border-color var(--mo-dur-2) var(--mo-ease-standard), background-color var(--mo-dur-2) var(--mo-ease-standard), box-shadow var(--mo-dur-2) var(--mo-ease-standard); } /* Overlays — upgrade the entrance easing to the SMOOTH spring so modals and the shared right drawer arrive with life but no jank. Base already defines the transform/opacity transition + .in state; we only retime. */ .modal { transition: transform var(--mo-dur-4) var(--mo-spring-smooth), opacity var(--mo-dur-3) var(--mo-ease-emphasized); } .drawer { transition: transform var(--mo-dur-4) var(--mo-spring-smooth), opacity var(--mo-dur-3) var(--mo-ease-emphasized); } /* ============================================================ 4. ROUTE / VIEW TRANSITION The router already toggles `#view.view-enter` on real navigation (after `body.nav-ready`). Retime that single container entrance with the smooth spring + a gentle rise for a premium view swap. No router edit required — this only restyles the existing hook. A standalone `.mo-view-enter` class is also exposed for any other container that wants the same treatment. ============================================================ */ @keyframes mo-view-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } body.nav-ready #view.view-enter, .mo-view-enter { animation: mo-view-enter var(--mo-dur-3) var(--mo-spring-smooth) both; } /* ============================================================ 5. ACCESSIBILITY — prefers-reduced-motion (NON-NEGOTIABLE) Neutralize everything above: kill animations, remove transforms, collapse transition/animation timings to a hair. Opacity-only cross-fades are still allowed (they don't cause vestibular issues) but durations are minimized so the UI feels instant. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Global clamp (mirrors base.css / layout.css — kept here so motion.css is self-contained and safe even if loaded standalone). */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Strip motion from the utilities/enter animations entirely so nothing translates or scales — just render in place. */ .mo-fade, .mo-enter, .mo-pop, .mo-stagger > *, body.nav-ready #view.view-enter, .mo-view-enter { animation: none !important; } .mo-lift { will-change: auto; } .mo-lift:hover, .mo-tap:active, .mo-lift:active, .rail-item:active, .btn:active, .btn-icon:active, .tag[role="button"]:active, button.tag:active, a.tag:active { transform: none !important; } }