/* ═══════════════════════════════════════════════════════════════ ANIMATIONS — animations.css ─────────────────────────────────────────────────────────────── All transitions and animations live here. Nothing else. TOGGLE SYSTEM: - Master toggle: [data-animations="off"] kills ALL motion - Per-feature toggles: [data-anim-cards="off"], etc. - User preferences stored in cookie alongside theme RULES: - Keep animations simple and subtle (construction industry UI) - No heavy CSS keyframe animations or JS-driven motion - Everything must feel snappy, not decorative - Respect prefers-reduced-motion for accessibility ═══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ MASTER KILL SWITCH [data-animations="off"] on disables ALL motion instantly. ════════════════════════════════════════════════════════════════ */ [data-animations="off"] *, [data-animations="off"] *::before, [data-animations="off"] *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* ════════════════════════════════════════════════════════════════ ACCESSIBILITY: prefers-reduced-motion Respects OS-level motion preferences automatically. ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════ PER-FEATURE TOGGLES Each feature area can be individually disabled. Set data attributes on : data-anim-cards="off", etc. ════════════════════════════════════════════════════════════════ */ /* Cards — hover lift effect */ [data-anim-cards="off"] .card { transition: none !important; } [data-anim-cards="off"] .card:hover { transform: none !important; box-shadow: var(--card-shadow) !important; } /* Sidebar — expand/collapse transition */ [data-anim-sidebar="off"] .sidebar { transition: none !important; } [data-anim-sidebar="off"] .nav-item { transition: none !important; } /* Hover effects — all hover transitions */ [data-anim-hover="off"] *:hover { transition: none !important; } /* Modals & dropdowns — open/close transitions */ [data-anim-modals="off"] .modal, [data-anim-modals="off"] .dropdown-menu, [data-anim-modals="off"] .modal-overlay { transition: none !important; animation: none !important; } /* ════════════════════════════════════════════════════════════════ BASE TRANSITIONS Reusable transition utility classes. Apply these to elements that need simple motion. ════════════════════════════════════════════════════════════════ */ /* Opacity fade */ .anim-fade { transition: opacity 0.2s ease; } /* Slide (transform) */ .anim-slide { transition: transform 0.2s ease; } /* Color change */ .anim-color { transition: color 0.15s ease, background-color 0.15s ease; } /* All common properties at once */ .anim-all { transition: all 0.2s ease; } /* ════════════════════════════════════════════════════════════════ COMPONENT-SPECIFIC TRANSITIONS These are applied to specific UI components. ════════════════════════════════════════════════════════════════ */ /* Card hover lift — very subtle */ .card { transition: box-shadow 0.15s ease, transform 0.15s ease; } .card:hover { transform: translateY(-1px); } /* Navigation items */ .nav-item { transition: background-color 0.12s ease, color 0.12s ease; } /* Sidebar expand/collapse */ .sidebar { transition: width 0.2s ease; } /* Button press feedback */ .btn-press { transition: transform 0.1s ease; } .btn-press:active { transform: scale(0.97); } /* Input focus glow */ .input-focus-anim { transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Badge/pill appear */ .badge-anim { transition: opacity 0.15s ease, transform 0.15s ease; } /* Dropdown menu */ .dropdown-anim { transition: opacity 0.15s ease, transform 0.1s ease; } /* Toast notification slide-in */ .toast-anim { transition: transform 0.25s ease, opacity 0.25s ease; } /* Tooltip */ .tooltip-anim { transition: opacity 0.1s ease; } /* ════════════════════════════════════════════════════════════════ KEYFRAME ANIMATIONS Used sparingly — only for things that truly need keyframes. ════════════════════════════════════════════════════════════════ */ /* Spinner — for loading states */ @keyframes spin { to { transform: rotate(360deg); } } .anim-spin { animation: spin 0.8s linear infinite; } /* Pulse — for notification dots */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .anim-pulse { animation: pulse 2s ease-in-out infinite; } /* Skeleton loading shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .anim-skeleton { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-hover) 50%, var(--bg-surface) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } /* Fade in — for page content appearing */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .anim-fade-in { animation: fadeIn 0.2s ease forwards; } /* Slide down — for dropdowns, alerts */ @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .anim-slide-down { animation: slideDown 0.15s ease forwards; } /* Scale in — for modals, popovers */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .anim-scale-in { animation: scaleIn 0.15s ease forwards; }