/* ============================================================ MXPracto Premium Animations & Micro-Interactions Layer Loaded AFTER components_mx.css - additive only, no existing rules removed. Honors prefers-reduced-motion. ============================================================ */ /* ============================================================ KEYFRAMES LIBRARY ============================================================ */ @keyframes mx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes mx-fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes mx-fade-in-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes mx-shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes mx-slide-in-right { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes mx-slide-in-top-right { 0% { opacity: 0; transform: translateX(40px) translateY(-20px); } 60% { opacity: 1; transform: translateX(-4px) translateY(2px); } 80% { transform: translateX(2px) translateY(0); } 100% { opacity: 1; transform: translateX(0) translateY(0); } } @keyframes mx-modal-enter { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mx-dropdown-enter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes mx-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--mx-primary-glow); } 50% { box-shadow: 0 0 0 5px transparent; } } @keyframes mx-spin { to { transform: rotate(360deg); } } /* ============================================================ A) CARD HOVER EFFECTS Enhances .mx-card and Bootstrap .card with subtle lift. ============================================================ */ .card, .mx-card { transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms ease; } .card:hover, .mx-card:hover { box-shadow: var(--mx-shadow-md); } .card:active, .mx-card:active { transform: translateY(0); transition-duration: 90ms; } /* ============================================================ B) BUTTON MICRO-INTERACTIONS Active scale on .btn and .mx-btn, smooth color transitions. ============================================================ */ .btn, .mx-btn { transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 120ms cubic-bezier(0.4, 0, 0.2, 1), filter 200ms ease; } .btn:active, .mx-btn:active { transform: scale(0.98); transition-duration: 80ms; } .btn:not(:disabled):not(.disabled):hover, .mx-btn:not(:disabled):hover { filter: brightness(1.03); } .btn:not(:disabled):not(.disabled):active, .mx-btn:not(:disabled):active { transform: translateY(0) scale(0.98); } /* ============================================================ C) PAGE FADE-IN ON LOAD Add class "mx-page-enter" to for a subtle fade-in. ============================================================ */ .mx-page-enter { animation: mx-fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* ============================================================ D) SKELETON SHIMMER UTILITY Apply .mx-shimmer to placeholder elements during loading. ============================================================ */ .mx-shimmer { background: var(--mx-gray-100); animation: mx-shimmer-opacity 1.6s infinite ease-in-out; border-radius: var(--mx-radius-sm); } @keyframes mx-shimmer-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ============================================================ E) MODAL & DRAWER TRANSITIONS Slide-in for modals, dropdowns, drawers. ============================================================ */ .mx-modal-card, .modal-content { animation: mx-modal-enter 280ms cubic-bezier(0.4, 0, 0.2, 1) both; } .dropdown-menu, .mx-dropdown { animation: mx-dropdown-enter 180ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* ============================================================ F) TOAST NOTIFICATIONS Slide-in from top-right with a smooth deceleration. ============================================================ */ .mx-toast { animation: mx-slide-in-top-right 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* ============================================================ G) NAVIGATION UNDERLINE ANIMATION Add .mx-nav-underline to parent; underline scales from left. ============================================================ */ .mx-nav-underline { position: relative; } .mx-nav-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--mx-primary); transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); } .mx-nav-underline:hover::after, .mx-nav-underline:focus-visible::after { transform: scaleX(1); } /* ============================================================ H) FORM INPUT FOCUS RING Smooth border-color + box-shadow transition on focus. ============================================================ */ .form-control, .form-select, .mx-input, select.mx-input { transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms ease; } .form-control:focus, .form-select:focus, .mx-input:focus, select.mx-input:focus { border-color: var(--mx-primary); box-shadow: 0 0 0 4px var(--mx-primary-glow); outline: none; } /* ============================================================ UTILITY: FADE-IN-UP (scroll reveal helper) Add .mx-reveal to elements; they fade in on next paint. ============================================================ */ .mx-reveal { animation: mx-fade-in-up 420ms cubic-bezier(0.4, 0, 0.2, 1) both; } .mx-reveal-delay-1 { animation-delay: 80ms; } .mx-reveal-delay-2 { animation-delay: 160ms; } .mx-reveal-delay-3 { animation-delay: 240ms; } .mx-reveal-delay-4 { animation-delay: 320ms; } /* ============================================================ UTILITY: SPINNER ============================================================ */ .mx-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--mx-border); border-top-color: var(--mx-primary); border-radius: 50%; animation: mx-spin 600ms linear infinite; } /* ============================================================ PREFERS-REDUCED-MOTION GUARD Disables all animations and most transitions for users who request reduced motion. Reaffirms the guard in tokens.css. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .mx-page-enter, .mx-reveal, .mx-shimmer, .mx-toast, .mx-modal-card, .modal-content, .dropdown-menu, .mx-dropdown, .mx-spinner { animation: none !important; } .card:hover, .mx-card:hover, .btn:hover, .mx-btn:hover { transform: none !important; } .mx-nav-underline::after { transition: none !important; } }