/* =================================== TEAMSTERX LOADER Logo-centric, brand-token-driven, reduced-motion aware. Replaces the old decorative bubble-burst loader. Tokens fall back to brand values so the very first paint is correct before styles.css (:root) has downloaded. =================================== */ .teamsterx-loader { position: fixed; inset: 0; background: var(--bg-body, #F5F5F7); display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.45s ease-out, visibility 0.45s ease-out; } /* Theme: dark-mode is applied to by the boot script, but support too. */ html.dark-mode .teamsterx-loader, body.dark-mode .teamsterx-loader, .teamsterx-loader.lock-dark { background: var(--bg-body, #000000); } .teamsterx-loader.lock-light { background: var(--bg-body, #F5F5F7); } .teamsterx-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Vertical stack: orb + label */ .loader-stack { display: flex; flex-direction: column; align-items: center; gap: 22px; } /* The orb holds the glow, the spinning ring, and the logo — all centered. */ .loader-orb { position: relative; width: 116px; height: 116px; display: flex; align-items: center; justify-content: center; } /* Soft accent glow that breathes behind the logo — the "fluid" feel, monochrome. */ .loader-glow { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at center, var(--accent-soft, rgba(0, 112, 243, 0.12)) 0%, transparent 68%); animation: loaderGlow 2.4s ease-in-out infinite; } /* Thin conic-gradient ring sweeping smoothly around the logo. The mask carves out the centre so only a hairline ring shows — clean, not a chunky spinner. */ .loader-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, var(--accent-soft, rgba(0, 112, 243, 0.12)) 35%, var(--accent, #0070F3) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: loaderSpin 1.05s linear infinite; } /* Logo, centred above ring + glow; gentle one-time entrance. */ .loader-logo { position: relative; width: 60px; height: 60px; object-fit: contain; z-index: 2; animation: loaderLogoIn 0.5s ease-out both; } .loader-text { font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-muted, #6E6E73); } html.dark-mode .loader-text, body.dark-mode .loader-text, .teamsterx-loader.lock-dark .loader-text { color: var(--text-muted, #98989D); } /* Animated ellipsis — fixed-width so the label doesn't shift. */ .loader-text::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: loaderDots 1.5s steps(4, end) infinite; } @keyframes loaderSpin { to { transform: rotate(360deg); } } @keyframes loaderGlow { 0%, 100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 0.95; } } @keyframes loaderLogoIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes loaderDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* Reduced motion: the global *-rule freezes animations to their end frame, so every element above is designed to remain fully legible when static. Here we only swap non-animated properties to make the still state look intentional. */ @media (prefers-reduced-motion: reduce) { .loader-ring { background: conic-gradient(from 0deg, var(--accent, #0070F3) 0% 25%, var(--accent-soft, rgba(0, 112, 243, 0.12)) 25% 100%); } .loader-glow { opacity: 0.8; } .loader-text::after { content: '\2026'; width: auto; } } /* Mobile */ @media (max-width: 480px) { .loader-orb { width: 96px; height: 96px; } .loader-logo { width: 50px; height: 50px; } }