/** * Gale Default Transition Styles * * These classes are automatically applied during DOM swap/settle phases * to enable smooth CSS transitions between content updates. * * Based on HTMX's proven swap/settle timing model: * @see https://htmx.org/docs/ * @see https://htmx.org/examples/animations/ * * Override these in your application CSS for custom transitions. * * Timeline: * 1. gale-swapping: Applied to OLD elements before update * 2. [swap delay] - default 0ms * 3. DOM manipulation occurs * 4. gale-settling + gale-added: Applied to NEW elements after insertion * 5. [settle delay] - default 20ms * 6. gale-settling removed, gale-added removed after addedDuration (100ms) */ /* ============================================ SWAP PHASE - Applied to OLD elements before update Use this for fade-out effects on content being updated ============================================ */ .gale-swapping { opacity: 0.5; transition: opacity 0.1s ease-out; } /* ============================================ SETTLE PHASE - Applied to NEW elements after insertion Use this for fade-in effects on new content ============================================ */ /* * New content transitions from slightly transparent to fully opaque. * We don't start at opacity: 0 because that causes a flash when * gale-settling is removed before gale-added. */ .gale-added { /* New content marker - no opacity change by default */ } /* During settle phase, ensure content is visible and transitioning */ .gale-settling { opacity: 1; transition: opacity 0.15s ease-in; } /* Combined selector for elements that are both added and settling */ .gale-added.gale-settling { opacity: 1; } /* ============================================ VIEW TRANSITIONS INTEGRATION Modern browsers support the View Transitions API for native smooth animations ============================================ */ @supports (view-transition-name: gale) { .gale-settling { view-transition-name: gale-settle; } } ::view-transition-old(gale-settle) { animation: gale-fade-out 0.15s ease-out; } ::view-transition-new(gale-settle) { animation: gale-fade-in 0.15s ease-in; } @keyframes gale-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes gale-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================ REDUCED MOTION SUPPORT Respect user preferences for reduced motion ============================================ */ @media (prefers-reduced-motion: reduce) { .gale-swapping, .gale-settling, .gale-added { transition: none !important; animation: none !important; } ::view-transition-old(gale-settle), ::view-transition-new(gale-settle) { animation: none !important; } } /* ============================================ PAGE NAVIGATION TRANSITIONS Applied by the View Transitions API during x-navigate / $navigate. navigate.js calls document.startViewTransition() at click time, so the browser captures the old page before the SSE request and the new page after the DOM update — producing a proper cross-fade between pages. Override ::view-transition-old/new(root) in your app CSS for custom effects. ============================================ */ ::view-transition-old(root) { animation: gale-page-exit 0.2s ease-in forwards; } ::view-transition-new(root) { animation: gale-page-enter 0.25s ease-out forwards; } @keyframes gale-page-exit { from { opacity: 1; } to { opacity: 0; } } @keyframes gale-page-enter { from { opacity: 0; } to { opacity: 1; } } /* Applied to while the SSE navigation request is in flight. Shows a progress indicator and wait cursor (F-075: FOUC Prevention). */ html.gale-navigating { cursor: progress; } /* Navigation progress bar — thin animated bar at top of viewport (BR-F075-09). Visible during SPA navigation while stylesheet loading / DOM swap is in progress. Override in your app CSS to customize the color or animation. */ html.gale-navigating::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 99999; background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%); color: #6366f1; /* Indigo — matches typical primary color */ animation: gale-progress 1.5s ease-in-out infinite; pointer-events: none; } @keyframes gale-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } html.gale-navigating::before { animation: none !important; } } /* ============================================ DEBUG PANEL (F-071) Fixed positioning for the debug overlay panel. Defined in CSS so Alpine's x-show cannot strip position/z-index. ============================================ */ /* Panel structural styles use !important to survive Alpine's :style binding resets. display is intentionally omitted — x-show manages show/hide via inline display:none. flex-direction, background, etc. work correctly alongside x-show's inline display:none because !important on non-display properties does not interfere with x-show. */ #gale-debug-panel { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; flex-direction: column; background: #0f172a; border-top: 1px solid #1e293b; font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; font-size: 12px; color: #94a3b8; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6); user-select: none; } /* ============================================ UTILITY CLASSES Optional classes for custom transition effects ============================================ */ /* Slide transitions */ .gale-slide-in { transform: translateY(-10px); opacity: 0; } .gale-slide-in.gale-settling { transform: translateY(0); opacity: 1; transition: transform 0.2s ease-out, opacity 0.2s ease-out; } /* ============================================ OPTIMISTIC UI UPDATES (F-042) Applied to components with unconfirmed (optimistic) state. BR-042.5: elements with optimistic state MUST have a visual indicator. BR-042.6: indicator MUST be removed on confirmation or rollback. ============================================ */ /** * Subtle opacity reduction to indicate the element is in an unconfirmed * optimistic state. The pulse animation draws attention without being jarring. * Override in your app CSS for a custom optimistic visual indicator. */ .gale-optimistic { opacity: 0.75; animation: gale-optimistic-pulse 1.5s ease-in-out infinite; } @keyframes gale-optimistic-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.90; } } @media (prefers-reduced-motion: reduce) { .gale-optimistic { animation: none !important; opacity: 0.8; } } /* Scale transitions */ .gale-scale-in { transform: scale(0.95); opacity: 0; } .gale-scale-in.gale-settling { transform: scale(1); opacity: 1; transition: transform 0.15s ease-out, opacity 0.15s ease-out; }