/* ========================================================= Featherline — Motion layer (micro-animations, transitions, keyframes) Keep this file LAST in . ========================================================= */ /* ============ Global kill-switch ============ 1) system preference (prefers-reduced-motion) 2) user setting (html[data-motion="off"]) =========================================== */ @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; } } html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ============ Keyframes ============ */ @keyframes fl-fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes fl-scaleIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .78; } } /* ============ Tasteful micro-interactions ============ */ @media (hover:hover) and (pointer:fine) { .card, .feed-card, .dialog-card, .note-card, .settings-card { transition: box-shadow var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing); } .card:hover, .feed-card:hover, .dialog-card:hover, .note-card:hover, .settings-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); border-color: var(--accent-border); } } /* Buttons: tiny lift + "press" feedback */ @media (hover:hover) and (pointer:fine) { .btn:hover, .btn-primary:hover, .btn-secondary:hover, .dialog-send-btn:hover { transform: translateY(-1px); } } /* Menus / popovers / modals: quick, soft entrance */ .dialog-menu, .note-menu, .fl-modal, .dropdown-menu, .popover, .menu { animation: fl-scaleIn 140ms var(--easing); } /* Notification dot: gentle pulse */ .has-dot::after { animation: fl-pulse 1.6s ease-in-out infinite; } /* Optional: smooth appearance for toast-like blocks */ .dialog-syscard, .toast, .alert { animation: fl-fadeUp 160ms var(--easing); }