/** * Splash — antes do Angular. * Tema: `localStorage.temaPreferido` → atributo `data-splash-theme` no (ver index.html). */ /* —— Variáveis tema escuro (padrão se script não rodar) —— */ :root { --splash-bg-deep: #030712; --splash-bg-mid: #0f172a; --splash-teal: #14b8a6; --splash-teal-bright: #2dd4bf; --splash-emerald: #10b981; --splash-text: #e2e8f0; --splash-muted: #94a3b8; --splash-pill-bg: rgba(51, 65, 85, 0.88); --splash-pill-border: rgba(148, 163, 184, 0.22); --splash-pill-text: #f8fafc; --splash-grid-line: rgba(148, 163, 184, 0.06); --splash-vignette: rgba(0, 0, 0, 0.45); --splash-logo-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); --splash-footer-fade: rgba(3, 7, 18, 0.94); --splash-particle: rgba(45, 212, 191, 0.55); } html[data-splash-theme='light'] { --splash-bg-deep: #f1f5f9; --splash-bg-mid: #e2e8f0; --splash-text: #0f172a; --splash-muted: #64748b; --splash-pill-bg: rgba(255, 255, 255, 0.92); --splash-pill-border: rgba(15, 118, 110, 0.18); --splash-pill-text: #0f766e; --splash-grid-line: rgba(15, 23, 42, 0.06); --splash-vignette: rgba(255, 255, 255, 0.25); --splash-logo-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.75) 100%); --splash-footer-fade: rgba(241, 245, 249, 0.97); --splash-particle: rgba(13, 148, 136, 0.45); } body fuse-splash-screen { position: fixed; inset: 0; z-index: 999999; display: block; margin: 0; padding: 0; overflow: hidden; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; opacity: 1; visibility: visible; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; pointer-events: none; } body fuse-splash-screen .splash { position: relative; min-height: 100%; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--splash-text); background: var(--splash-bg-deep); } body fuse-splash-screen .splash__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } body fuse-splash-screen .splash__gradient { position: absolute; inset: -45%; background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(20, 184, 166, 0.22), transparent 55%), radial-gradient(ellipse 60% 45% at 100% 60%, rgba(16, 185, 129, 0.12), transparent 50%), radial-gradient(ellipse 50% 40% at 0% 80%, rgba(45, 212, 191, 0.08), transparent 45%), linear-gradient(165deg, var(--splash-bg-mid) 0%, var(--splash-bg-deep) 48%, var(--splash-bg-deep) 100%); } html[data-splash-theme='light'] body fuse-splash-screen .splash__gradient { background: radial-gradient(ellipse 75% 50% at 50% 0%, rgba(20, 184, 166, 0.18), transparent 55%), radial-gradient(ellipse 55% 40% at 100% 70%, rgba(16, 185, 129, 0.1), transparent 50%), radial-gradient(ellipse 45% 35% at 0% 85%, rgba(45, 212, 191, 0.08), transparent 45%), linear-gradient(168deg, #ffffff 0%, var(--splash-bg-deep) 55%, #cbd5e1 100%); } body fuse-splash-screen .splash__gradient::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(20, 184, 166, 0.12), transparent 55%); opacity: 0.55; animation: splash-aurora-pulse 7s ease-in-out infinite; pointer-events: none; } html[data-splash-theme='light'] body fuse-splash-screen .splash__gradient::after { background: radial-gradient(ellipse 90% 70% at 50% 110%, rgba(13, 148, 136, 0.14), transparent 50%); opacity: 0.7; } body fuse-splash-screen .splash__orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.55; animation: splash-orb-float 14s ease-in-out infinite; } html[data-splash-theme='light'] body fuse-splash-screen .splash__orb { opacity: 0.35; filter: blur(64px); } body fuse-splash-screen .splash__orb--1 { width: min(55vw, 420px); height: min(55vw, 420px); top: -8%; left: calc(50% - min(27.5vw, 210px)); background: radial-gradient(circle, rgba(45, 212, 191, 0.35) 0%, transparent 70%); animation-delay: 0s; } body fuse-splash-screen .splash__orb--2 { width: min(70vw, 520px); height: min(70vw, 520px); bottom: -25%; right: -15%; background: radial-gradient(circle, rgba(20, 184, 166, 0.2) 0%, transparent 65%); animation-delay: -4s; } body fuse-splash-screen .splash__orb--3 { width: min(45vw, 320px); height: min(45vw, 320px); bottom: 10%; left: -10%; background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 68%); animation-delay: -7s; } body fuse-splash-screen .splash__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--splash-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--splash-grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 88% 72% at 50% 45%, black 18%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 45%, black 18%, transparent 72%); animation: splash-grid-drift 22s linear infinite; } body fuse-splash-screen .splash__vignette { position: absolute; inset: 0; box-shadow: inset 0 0 140px var(--splash-vignette); pointer-events: none; } body fuse-splash-screen .splash__particles { position: absolute; inset: 0; overflow: hidden; } body fuse-splash-screen .splash__particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--splash-particle); box-shadow: 0 0 12px var(--splash-teal-bright); opacity: 0; animation: splash-particle-float 5.5s ease-in-out infinite; } body fuse-splash-screen .splash__particle:nth-child(1) { left: 12%; top: 22%; animation-delay: 0s; } body fuse-splash-screen .splash__particle:nth-child(2) { left: 78%; top: 18%; animation-delay: 0.7s; } body fuse-splash-screen .splash__particle:nth-child(3) { left: 88%; top: 55%; animation-delay: 1.4s; } body fuse-splash-screen .splash__particle:nth-child(4) { left: 8%; top: 62%; animation-delay: 2.1s; } body fuse-splash-screen .splash__particle:nth-child(5) { left: 52%; top: 12%; animation-delay: 0.35s; } body fuse-splash-screen .splash__particle:nth-child(6) { left: 32%; top: 78%; animation-delay: 1.8s; } body fuse-splash-screen .splash__particle:nth-child(7) { left: 65%; top: 68%; animation-delay: 2.8s; } body fuse-splash-screen .splash__particle:nth-child(8) { left: 42%; top: 38%; animation-delay: 3.2s; } body fuse-splash-screen .splash__main { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem 8rem; animation: splash-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } body fuse-splash-screen .splash__logo-ring { position: relative; padding: 1.25rem; border-radius: 1.75rem; background: var(--splash-logo-glass); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 80px rgba(20, 184, 166, 0.12); margin-bottom: 1.5rem; animation: splash-logo-bob 4s ease-in-out infinite; } html[data-splash-theme='dark'] body fuse-splash-screen .splash__logo-ring { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 24px 48px rgba(0, 0, 0, 0.35), 0 0 80px rgba(20, 184, 166, 0.15); } body fuse-splash-screen .splash__logo-ring::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 120deg, rgba(45, 212, 191, 0.55), rgba(20, 184, 166, 0.08), rgba(16, 185, 129, 0.45), rgba(45, 212, 191, 0.35) ); background-size: 300% 300%; animation: splash-border-flow 6s ease infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } body fuse-splash-screen .splash__logo-ring::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%); background-size: 200% 100%; animation: splash-shine 3.5s ease-in-out infinite; pointer-events: none; } body fuse-splash-screen .splash__logo-ring img { display: block; width: clamp(100px, 22vw, 140px); height: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.22)); animation: splash-logo-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; } html[data-splash-theme='light'] body fuse-splash-screen .splash__logo-ring { background: linear-gradient(145deg, #10b981 0%, #0d9488 55%, #14b8a6 100%); border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 24px 48px rgba(13, 148, 136, 0.28), 0 0 80px rgba(20, 184, 166, 0.2); } html[data-splash-theme='light'] body fuse-splash-screen .splash__logo-ring::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%); background-size: 200% 100%; } html[data-splash-theme='dark'] body fuse-splash-screen .splash__logo-ring img { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); } body fuse-splash-screen .splash__title { margin: 0 0 0.35rem; font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 700; letter-spacing: -0.03em; background: linear-gradient( 120deg, var(--splash-text) 0%, var(--splash-muted) 35%, var(--splash-teal-bright) 55%, var(--splash-teal) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: splash-title-shimmer 4s ease-in-out infinite; } html[data-splash-theme='light'] body fuse-splash-screen .splash__title { background: linear-gradient(120deg, #0f172a 0%, #334155 40%, #0d9488 70%, #14b8a6 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; } body fuse-splash-screen .splash__tagline { margin: 0 0 2rem; font-size: 0.8125rem; font-weight: 600; color: var(--splash-muted); letter-spacing: 0.06em; text-transform: uppercase; animation: splash-tagline-fade 2.4s ease-in-out infinite; } body fuse-splash-screen .splash__loader { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } body fuse-splash-screen .splash__loader-rings { position: relative; width: 52px; height: 52px; } body fuse-splash-screen .splash__loader-ring { position: absolute; border-radius: 50%; border-style: solid; border-color: transparent; } body fuse-splash-screen .splash__loader-ring--outer { inset: 0; border-width: 3px; border-top-color: var(--splash-teal-bright); border-right-color: rgba(20, 184, 166, 0.25); animation: splash-spin 1s linear infinite; } body fuse-splash-screen .splash__loader-ring--inner { inset: 8px; border-width: 2px; border-bottom-color: var(--splash-emerald); border-left-color: rgba(16, 185, 129, 0.2); animation: splash-spin-reverse 0.75s linear infinite; } body fuse-splash-screen .splash__loader-dots { display: flex; gap: 0.45rem; align-items: center; } body fuse-splash-screen .splash__loader-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--splash-teal); opacity: 0.35; animation: splash-dot 1.2s ease-in-out infinite; } body fuse-splash-screen .splash__loader-dots span:nth-child(1) { animation-delay: 0s; } body fuse-splash-screen .splash__loader-dots span:nth-child(2) { animation-delay: 0.15s; } body fuse-splash-screen .splash__loader-dots span:nth-child(3) { animation-delay: 0.3s; } body fuse-splash-screen .splash__footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1rem 1rem 1.5rem; text-align: center; pointer-events: none; background: linear-gradient(to top, var(--splash-footer-fade) 0%, transparent 100%); } body fuse-splash-screen .splash__version-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.1rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--splash-pill-text); background: var(--splash-pill-bg); border: 1px solid var(--splash-pill-border); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); animation: splash-pill-glow 2.8s ease-in-out infinite; } html[data-splash-theme='dark'] body fuse-splash-screen .splash__version-pill { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } body:not(.fuse-splash-screen-hidden) { overflow: hidden; } body.fuse-splash-screen-hidden fuse-splash-screen { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 500ms; } @keyframes splash-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes splash-aurora-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.04); } } @keyframes splash-grid-drift { from { transform: translate(0, 0); } to { transform: translate(48px, 48px); } } @keyframes splash-orb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(2%, 3%) scale(1.04); } 66% { transform: translate(-2%, -2%) scale(0.98); } } @keyframes splash-particle-float { 0%, 100% { opacity: 0; transform: translate(0, 8px) scale(0.6); } 15% { opacity: 1; } 50% { opacity: 0.85; transform: translate(6px, -28px) scale(1); } 85% { opacity: 0.4; transform: translate(-4px, -48px) scale(0.8); } } @keyframes splash-logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes splash-logo-pop { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes splash-border-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes splash-shine { 0%, 100% { background-position: 200% 0; opacity: 0.35; } 45% { opacity: 0.9; } 50% { background-position: -200% 0; opacity: 0.9; } } @keyframes splash-title-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes splash-tagline-fade { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @keyframes splash-pill-glow { 0%, 100% { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12); } 50% { box-shadow: 0 4px 22px rgba(20, 184, 166, 0.2), 0 0 0 1px rgba(45, 212, 191, 0.15); } } html[data-splash-theme='dark'] body fuse-splash-screen .splash__version-pill { animation-name: splash-pill-glow-dark; } @keyframes splash-pill-glow-dark { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); } 50% { box-shadow: 0 4px 20px rgba(20, 184, 166, 0.18), 0 0 24px rgba(45, 212, 191, 0.08); } } @keyframes splash-spin { to { transform: rotate(360deg); } } @keyframes splash-spin-reverse { to { transform: rotate(-360deg); } } @keyframes splash-dot { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { body fuse-splash-screen .splash__main, body fuse-splash-screen .splash__orb, body fuse-splash-screen .splash__gradient::after, body fuse-splash-screen .splash__grid, body fuse-splash-screen .splash__particle, body fuse-splash-screen .splash__logo-ring, body fuse-splash-screen .splash__logo-ring::before, body fuse-splash-screen .splash__logo-ring::after, body fuse-splash-screen .splash__logo-ring img, body fuse-splash-screen .splash__title, body fuse-splash-screen .splash__tagline, body fuse-splash-screen .splash__version-pill { animation: none !important; } body fuse-splash-screen .splash__loader-ring--outer { animation: none; border-right-color: rgba(20, 184, 166, 0.35); } body fuse-splash-screen .splash__loader-ring--inner { animation: none; border-left-color: rgba(16, 185, 129, 0.35); } body fuse-splash-screen .splash__loader-dots span { animation: none; opacity: 0.75; } }