/* ============================================================================ vNotes — motion.css ---------------------------------------------------------------------------- A single, app-wide micro-animation layer that makes the UI "flow" instead of popping in. Design goals & safety: • The MOTION TOKENS + the prefers-reduced-motion guard are GLOBAL (harmless to every theme — the guard only ever REMOVES motion). • All actual motion is scoped to html[data-theme="editorial"] so the default "original" theme (the live Tru Vida customer) is byte-for-byte unchanged, and Twilight is untouched. • Motion is transform/opacity-only (GPU-composited, no layout thrash). Every entrance keyframe uses fill-mode `both` and ends at opacity:1 / transform: none, so the resting state is always fully visible even if an animation is interrupted or reduced-motion collapses it to ~1ms. • CSS animations re-run when a node is inserted (innerHTML renders) and when an element goes display:none -> visible (.hidden toggles). That's how this file fixes the bulk of the app's pop-ins with zero JS changes. Load AFTER the theme stylesheets so equal-specificity rules win by order. ============================================================================ */ /* ─── Motion tokens (global) ──────────────────────────────────────────────── */ :root { --motion-instant: 90ms; /* press/active feedback */ --motion-fast: 140ms; /* hover, focus, menus */ --motion-base: 200ms; /* tab/card/toast enters */ --motion-emphasis: 280ms; /* modals, drawers, steps */ --motion-slow: 420ms; /* fills, count-ups */ --motion-exit: 120ms; /* all exits — leave faster than you enter */ --ease-standard: cubic-bezier(0.2, 0.9, 0.25, 1); /* house easing (= --ds-ease) */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate into place */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exits only */ --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* reversible moves */ --motion-focus-ring: rgba(91, 107, 201, 0.30); /* editorial indigo */ } /* ─── Keyframes (global, inert until referenced) ──────────────────────────── */ @keyframes vn-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vn-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes vn-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes vn-content-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes vn-dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } } @keyframes vn-menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes vn-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes vn-banner-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* ========================================================================== EDITORIAL MOTION ========================================================================== */ /* ─── Buttons: unified hover + press + keyboard focus ─────────────────────── */ html[data-theme="editorial"] button, html[data-theme="editorial"] .btn, html[data-theme="editorial"] [role="button"], html[data-theme="editorial"] .ed-btn { transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard); } html[data-theme="editorial"] button:not(.auth-tile):active, html[data-theme="editorial"] .btn:active, html[data-theme="editorial"] [role="button"]:active, html[data-theme="editorial"] .ed-btn:active { transform: scale(0.97); } html[data-theme="editorial"] button:focus-visible, html[data-theme="editorial"] .btn:focus-visible, html[data-theme="editorial"] [role="button"]:focus-visible, html[data-theme="editorial"] a.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--motion-focus-ring); } /* ─── Form controls: focus ring + border ease in together ─────────────────── */ html[data-theme="editorial"] input, html[data-theme="editorial"] textarea, html[data-theme="editorial"] select { transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); } html[data-theme="editorial"] input:focus-visible, html[data-theme="editorial"] textarea:focus-visible, html[data-theme="editorial"] select:focus-visible { box-shadow: 0 0 0 3px var(--motion-focus-ring); } /* ─── Cards / list rows: entrance cascade + unified hover lift ─────────────── */ html[data-theme="editorial"] .patient-card, html[data-theme="editorial"] .patient-card-compact, html[data-theme="editorial"] .patient-result-card, html[data-theme="editorial"] .appointment-card, html[data-theme="editorial"] .encounter-card, html[data-theme="editorial"] .review-note-card, html[data-theme="editorial"] .metric-card, html[data-theme="editorial"] .pending-item, html[data-theme="editorial"] .history-item, html[data-theme="editorial"] .order-item, html[data-theme="editorial"] .vital-item, html[data-theme="editorial"] .extracted-item, html[data-theme="editorial"] .pa-patient-row, html[data-theme="editorial"] .pa-recent-row, html[data-theme="editorial"] .pa-review-row, html[data-theme="editorial"] .pa-suggest-item, html[data-theme="editorial"] .pa-type-card, html[data-theme="editorial"] [class*="-card"]:not([class*="-card-label"]):not([class*="-card-desc"]):not([class*="-card-top"]):not([class*="-card-check"]):not([class*="-card-header"]):not([class*="-card-footer"]), html[data-theme="editorial"] #dashboardKpis > * { animation: vn-card-in var(--motion-base) var(--ease-out) both; } /* Gentle, capped stagger for siblings (first 6, then everything settles at 160ms). */ html[data-theme="editorial"] .patient-card:nth-child(2), html[data-theme="editorial"] .pending-item:nth-child(2), html[data-theme="editorial"] .history-item:nth-child(2), html[data-theme="editorial"] .pa-recent-row:nth-child(2), html[data-theme="editorial"] .pa-patient-row:nth-child(2), html[data-theme="editorial"] .pa-review-row:nth-child(2), html[data-theme="editorial"] [class*="-card"]:nth-child(2), html[data-theme="editorial"] #dashboardKpis > *:nth-child(2) { animation-delay: 34ms; } html[data-theme="editorial"] .patient-card:nth-child(3), html[data-theme="editorial"] .pending-item:nth-child(3), html[data-theme="editorial"] .history-item:nth-child(3), html[data-theme="editorial"] .pa-recent-row:nth-child(3), html[data-theme="editorial"] .pa-patient-row:nth-child(3), html[data-theme="editorial"] .pa-review-row:nth-child(3), html[data-theme="editorial"] [class*="-card"]:nth-child(3), html[data-theme="editorial"] #dashboardKpis > *:nth-child(3) { animation-delay: 68ms; } html[data-theme="editorial"] .patient-card:nth-child(4), html[data-theme="editorial"] .pending-item:nth-child(4), html[data-theme="editorial"] .history-item:nth-child(4), html[data-theme="editorial"] .pa-recent-row:nth-child(4), html[data-theme="editorial"] .pa-patient-row:nth-child(4), html[data-theme="editorial"] .pa-review-row:nth-child(4), html[data-theme="editorial"] [class*="-card"]:nth-child(4), html[data-theme="editorial"] #dashboardKpis > *:nth-child(4) { animation-delay: 102ms; } html[data-theme="editorial"] .patient-card:nth-child(5), html[data-theme="editorial"] .pending-item:nth-child(5), html[data-theme="editorial"] .pa-recent-row:nth-child(5), html[data-theme="editorial"] .pa-patient-row:nth-child(5), html[data-theme="editorial"] .pa-review-row:nth-child(5), html[data-theme="editorial"] [class*="-card"]:nth-child(5) { animation-delay: 136ms; } html[data-theme="editorial"] .patient-card:nth-child(n+6), html[data-theme="editorial"] .pending-item:nth-child(n+6), html[data-theme="editorial"] .pa-recent-row:nth-child(n+6), html[data-theme="editorial"] .pa-patient-row:nth-child(n+6), html[data-theme="editorial"] .pa-review-row:nth-child(n+6), html[data-theme="editorial"] [class*="-card"]:nth-child(n+6) { animation-delay: 160ms; } /* Unified hover lift (single -2px, one duration). */ html[data-theme="editorial"] .patient-card, html[data-theme="editorial"] .patient-result-card, html[data-theme="editorial"] .appointment-card, html[data-theme="editorial"] .encounter-card, html[data-theme="editorial"] .review-note-card, html[data-theme="editorial"] .metric-card, html[data-theme="editorial"] .pending-item, html[data-theme="editorial"] .history-item, html[data-theme="editorial"] .order-item, html[data-theme="editorial"] .pa-patient-row, html[data-theme="editorial"] .pa-recent-row { transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } html[data-theme="editorial"] .patient-card:hover, html[data-theme="editorial"] .patient-result-card:hover, html[data-theme="editorial"] .appointment-card:hover, html[data-theme="editorial"] .encounter-card:hover, html[data-theme="editorial"] .review-note-card:hover, html[data-theme="editorial"] .metric-card:hover, html[data-theme="editorial"] .pending-item:hover, html[data-theme="editorial"] .history-item:hover, html[data-theme="editorial"] .order-item:hover { transform: translateY(-2px); } /* ─── Tab / section / view content: crossfade when un-hidden ──────────────── */ /* [id$="Content"] excludes: the whole-page patient-chart wrapper, the full-viewport workflow stage layers (they own a fadeIn), inline card sub-sections inside the workflow, and profile sub-panels that would double-animate under their already-animating .profile-tab-content parent. [data-view]/[data-section] add :not(button) — on encounter-review those attributes sit on toggle/pill BUTTONS, not panels. */ html[data-theme="editorial"] [id$="Content"]:not(.hidden):not(#patientChartContent):not([id^="stage"]):not([class~="stage-content"]):not(#vitalsContent):not(#prevVisitContent):not(#saveResultContent):not(#pushResultsContent):not(#profileLabsContent):not(#profileEncountersContent):not(#profileNotesContent), html[data-theme="editorial"] .profile-tab-content:not(.hidden), html[data-theme="editorial"] .tab-content:not(.hidden), html[data-theme="editorial"] .settings-section:not(.hidden), html[data-theme="editorial"] [data-settings-section]:not(.hidden), html[data-theme="editorial"] [data-panel]:not(.hidden), html[data-theme="editorial"] [data-view]:not(button):not(.hidden), html[data-theme="editorial"] [data-section]:not(button):not(.hidden) { animation: vn-panel-in var(--motion-base) var(--ease-out) both; } /* ─── Modal / overlay / drawer: fade the scrim, scale the dialog ──────────── */ /* Drag-and-drop overlays (#wfDropOverlay, #dropOverlay) are toggled via style.display (not .hidden) and re-fire on every dragenter/leave, so they are excluded here — drop feedback must be instant. */ html[data-theme="editorial"] [id$="Modal"]:not(button):not(.hidden), html[data-theme="editorial"] [id$="Popup"]:not(button):not(.hidden), html[data-theme="editorial"] [id$="Overlay"]:not(button):not(.hidden):not(#wfDropOverlay):not(#dropOverlay), html[data-theme="editorial"] [id$="Sheet"]:not(button):not(.hidden), html[data-theme="editorial"] .workflow-modal-backdrop:not(.hidden), html[data-theme="editorial"] .modal-backdrop:not(.hidden), html[data-theme="editorial"] .close-confirm-overlay:not(.hidden) { animation: vn-fade-in var(--motion-base) var(--ease-standard) both; } /* Inner dialog scales up — but only for CENTERED dialog cards. Excluded: the full-screen workflow editor (#workflowModal, child is a
) and the full-bleed editor/drop overlays whose direct child is a layout layer, not a dialog (scaling those slides the whole viewport-sized panel inward). */ html[data-theme="editorial"] [id$="Modal"]:not(button):not(.hidden):not(#workflowModal) > div, html[data-theme="editorial"] [id$="Popup"]:not(button):not(.hidden) > div, html[data-theme="editorial"] [id$="Overlay"]:not(button):not(.hidden):not(#letterEditorOverlay):not(#wfDropOverlay):not(#dropOverlay) > div { animation: vn-dialog-in var(--motion-emphasis) var(--ease-out) both; } /* ─── Dropdown / menu / popover: grow from trigger when shown ─────────────── */ html[data-theme="editorial"] .history-dropdown:not(.hidden), html[data-theme="editorial"] [id$="Menu"]:not(button):not(.hidden):not(#userMenu), html[data-theme="editorial"] [id$="Popover"]:not(button):not(.hidden), html[data-theme="editorial"] [role="menu"]:not(.hidden) { animation: vn-menu-in var(--motion-fast) var(--ease-out) both; transform-origin: top center; } /* ─── Toasts / banners: real slide + fade on appear ──────────────────────── */ html[data-theme="editorial"] .notification-toast, html[data-theme="editorial"] .pwa-offline-toast { animation: vn-toast-in var(--motion-base) var(--ease-out) both; } html[data-theme="editorial"] .pa-review-banner, html[data-theme="editorial"] .no-vitals-banner, html[data-theme="editorial"] .pwa-update-banner, html[data-theme="editorial"] #impersonationBanner { animation: vn-banner-in var(--motion-base) var(--ease-out) both; } /* ─── Step / stage indicators: state changes should ease, not snap ───────── */ html[data-theme="editorial"] .stage-circle, html[data-theme="editorial"] .pa-stepper-item, html[data-theme="editorial"] .step-node, html[data-theme="editorial"] .stepper-node { transition: transform var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); } /* ─── Accordion bodies: fade/rise when revealed (chevron already rotates) ─── */ html[data-theme="editorial"] .pa-notes-panel:not(.hidden), html[data-theme="editorial"] .extracted-item .extracted-body:not(.hidden), html[data-theme="editorial"] [data-accordion-body]:not(.hidden) { animation: vn-content-in var(--motion-base) var(--ease-out) both; } /* ─── Global prefers-reduced-motion guard (must win — placed last) ────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }