/* ============================================================ Animations layer — smooths transitions across the app. Loaded after the rest so it can layer on top of component CSS. Respects prefers-reduced-motion via the [data-motion] flag in tokens.css (animations replaced with 0.01ms in those modes). ============================================================ */ /* ---- Cross-document view transitions ---- Chrome 126+ / Edge 126+ — fades content on every navigation (back, forward, link click). Browsers without support degrade to no-animation. Free smoothness, no JS needed. ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } ::view-transition-old(root) { animation-name: app-view-out; } ::view-transition-new(root) { animation-name: app-view-in; } @keyframes app-view-out { from { opacity: 1; } to { opacity: 0; } } @keyframes app-view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ---- Page entrance ---- Subtle fade-up for the main content on every full-document load. Keeps the feel of forward/back navigation consistent even when the View Transitions API isn't supported. ============================================================ */ main { animation: page-enter var(--motion-slow) var(--ease-emphasized); } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Theme switch crossfade ---- When toggling theme, JS adds .theme-switching to for ~360ms. During that window, every chrome surface transitions colors smoothly instead of snapping. Outside that window we keep the default fast per-element transitions (no global cost). ============================================================ */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), fill var(--motion-base) var(--ease-standard), stroke var(--motion-base) var(--ease-standard) !important; } /* ---- Button & control press feedback ---- Subtle 1px depth + tiny scale for tactile feel without breaking layout. Disabled buttons stay still. ============================================================ */ .btn:not(:disabled):active, .cluster__btn:not(:disabled):active, .btn--icon:not(:disabled):active, .nav-toggle:not(:disabled):active, .chat__send:not(:disabled):active, .proposal-action-btn:not(:disabled):active { transform: translateY(1px); } /* ---- Smooth focus ring ---- Animate the box-shadow ring in/out so :focus-visible doesn't snap. ============================================================ */ :focus-visible { transition: box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } /* ---- Card hover lift (reusable) ---- Apply a uniform lift+shadow ramp to any card-like surface that marks itself with .is-interactive or already has hover styles. Existing inline hover declarations still take precedence. ============================================================ */ .card, .process-card, .upload-card, .kpi { transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); } /* ---- Status-pip color transitions ---- When a process status changes between renders, fade the dot color to feel less abrupt. ============================================================ */ .status-pip__dot, .steps__step, .steps__line, .wizard-step__pip, .sidebar-wizard__pip { transition: background-color var(--motion-base) var(--ease-emphasized), border-color var(--motion-base) var(--ease-emphasized), color var(--motion-base) var(--ease-emphasized), box-shadow var(--motion-base) var(--ease-emphasized); } /* ---- Tab content fade ---- Used by JS to mark a tab pane as freshly active. ============================================================ */ .entity-table { animation: tab-pane-in var(--motion-base) var(--ease-emphasized); } @keyframes tab-pane-in { from { opacity: 0; } to { opacity: 1; } } /* ---- Table row fade-in ---- When the JS rebuilds a table body (after a proposal is published), the new rows materialize instead of snapping in. ============================================================ */ .review-table tbody tr { animation: row-fade var(--motion-base) var(--ease-standard) backwards; } @keyframes row-fade { from { opacity: 0; } to { opacity: 1; } } /* ---- Drawer (settings) handle smoothing ---- The settings drawer panel and backdrop transitions are already tuned in settings.css. Add the missing backdrop transition to match the panel timing. ============================================================ */ .drawer__backdrop { transition: opacity 320ms var(--ease-emphasized) !important; } /* ---- Scroll behavior ---- Smooth in-page anchor scrolls (e.g. scrollToProposalCard). ============================================================ */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ---- Reduced motion safety net ---- Anything in this file that uses keyframes is killed when the user has prefers-reduced-motion or [data-motion="reduced|off"]. The base selectors in tokens.css already do this; the lines below add an extra guarantee for the page-enter and view-transition animations. ============================================================ */ @media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) main { animation: none; } html:not([data-motion="full"]) ::view-transition-old(root), html:not([data-motion="full"]) ::view-transition-new(root) { animation-duration: 0.01ms; } } html[data-motion="reduced"] main, html[data-motion="off"] main { animation: none; }