/* ============================================================ Moveza — Global animation & polish layer Shared across the whole app (base.html + admin/base_admin.html) Pure CSS, no external dependency, respects reduced-motion. ============================================================ */ :root { --mz-ease: cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Smooth page entrance */ body { animation: mzFadeIn 0.35s var(--mz-ease) both; } @keyframes mzFadeIn { from { opacity: 0; } to { opacity: 1; } } main, .page-content, .container, .container-fluid { /* fill-mode: backwards (not "both") — once the animation ends, the element must fall back to having no `transform` at all. A lingering `transform: translateY(0)` (even though visually a no-op) creates a new CSS stacking context, which traps any Bootstrap modal nested inside one of these containers below the modal-backdrop (backdrop is appended to , outside the trap) — the modal then renders but silently eats no clicks at all, including its own close button. Do not change back to "both" without re-testing every modal on a page using these classes. */ animation: mzRiseIn 0.45s var(--mz-ease) backwards; } @keyframes mzRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Cards lift gently on hover, never jarring */ .card, .feature-card, .stat-card, .kpi-card { transition: transform 0.22s var(--mz-ease), box-shadow 0.22s var(--mz-ease); } .card:hover, .stat-card:hover, .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1); } /* Buttons: subtle lift + press feedback, no layout shift */ .btn { transition: transform 0.18s var(--mz-ease), box-shadow 0.18s var(--mz-ease), filter 0.18s var(--mz-ease); } .btn:hover { transform: translateY(-1px); filter: brightness(1.04); } .btn:active { transform: translateY(0) scale(0.97); } /* Table rows: smooth hover, no reflow */ .table tbody tr { transition: background-color 0.15s ease; } /* Inputs: smooth focus ring */ .form-control, .form-select { transition: border-color 0.18s ease, box-shadow 0.18s ease; } /* Sidebar / nav links underline-on-hover, cheap GPU-friendly transform */ .nav-link, .top-navbar a { transition: color 0.18s ease, opacity 0.18s ease; } /* Alerts slide down in */ .alert { animation: mzAlertIn 0.3s var(--mz-ease) both; } @keyframes mzAlertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Modals: soften the default Bootstrap zoom for a calmer feel */ .modal.fade .modal-dialog { transition: transform 0.25s var(--mz-ease), opacity 0.25s var(--mz-ease); } /* Spinners already animate via Bootstrap; just keep them smooth on slow GPUs */ .spinner-border, .spinner-grow { animation-duration: 0.8s; } /* Lightweight skeleton loader utility, usable on any block while data loads */ .mz-skeleton { position: relative; overflow: hidden; background: #eef1f5; border-radius: 8px; } .mz-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: mzShimmer 1.3s ease-in-out infinite; } @keyframes mzShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Badges / status pills: gentle pop when value changes (toggle via JS if needed) */ .mz-pop { animation: mzPop 0.35s var(--mz-ease); } @keyframes mzPop { 0% { transform: scale(0.92); opacity: 0.6; } 100% { transform: scale(1); opacity: 1; } } /* Scroll-reveal utility for long pages/reports (opt-in via class="mz-reveal") */ .mz-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--mz-ease), transform 0.6s var(--mz-ease); } .mz-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Custom slim scrollbar for a more polished feel (WebKit + Firefox) */ * { scrollbar-width: thin; scrollbar-color: #b9c3d1 transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: #b9c3d1; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: #93a2b8; }