/* * Falcon UI motion — sleek, subtle, and safe. * * Progressive enhancement: the reveal styles only apply under `.falcon-anim`, * a class that app-animations.js adds to ONLY when JavaScript runs AND * the user has not requested reduced motion. So with JS disabled, or with * `prefers-reduced-motion: reduce`, content is always fully visible — nothing * here can hide it. Hover affordances are interaction feedback (not autoplay) * and stay on, but are neutralized under reduced motion. */ :root { --falcon-ease: cubic-bezier(0.22, 1, 0.36, 1); } html { scroll-behavior: smooth; } /* ── Entrance / scroll reveal (only when JS opted in via .falcon-anim) ── */ @keyframes falcon-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .falcon-anim .falcon-reveal { opacity: 0; transform: translateY(14px); } .falcon-anim .falcon-reveal.falcon-in { opacity: 1; transform: none; transition: opacity 0.5s var(--falcon-ease), transform 0.5s var(--falcon-ease); } /* Content swapped in by HTMX eases in rather than popping. */ .falcon-anim .falcon-swap-in { animation: falcon-rise 0.35s var(--falcon-ease) both; } /* ── Hover / interaction affordances (always on) ── */ .card { transition: transform 0.18s var(--falcon-ease), box-shadow 0.18s var(--falcon-ease); } .card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12); } .btn { transition: transform 0.12s var(--falcon-ease), box-shadow 0.12s var(--falcon-ease), filter 0.12s var(--falcon-ease); } .btn:active { transform: translateY(1px); } .nav-link, .dropdown-item { transition: background-color 0.15s var(--falcon-ease), color 0.15s var(--falcon-ease); } .table-hover tbody tr { transition: background-color 0.12s var(--falcon-ease); } /* ── Respect reduced motion: strip every transition/animation/transform ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card:hover, .btn:active { transform: none; } /* Drop the sliding width animation on the nav progress bar (JS also skips the trickle); keep only the opacity fade so it appears/clears calmly. */ #nav-progress { transition: opacity 0.25s ease; } } /* --- SPA navigation polish ------------------------------------------------ */ /* Cross-document view transitions: full page loads cross-fade like an SPA (Chromium 126+; harmless no-op elsewhere). Boosted swaps get the same via htmx globalViewTransitions. */ @view-transition { navigation: auto; } /* Thin top progress bar shown during boosted navigation (see app-widgets.js) */ #nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #f0883b, #fd7e14); z-index: 2050; opacity: 0; pointer-events: none; transition: width 0.3s ease, opacity 0.25s ease; }