/* * Boot splash — réplica do CinematicLoader (src/components/cinematic-loader) * em CSS puro, exibido antes do Vue montar para evitar o flash branco no boot. * As cores (--aawz-boot-bg / --aawz-boot-primary) e a logo vêm do localStorage * via public/boot-splash.js (gravados no bootstrap em src/main.js). * Manter em sincronia visual com cinematic-loader.vue. */ .aawzBoot { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; color: var(--aawz-boot-primary, #56af79); background: var(--aawz-boot-bg, #fff); opacity: 1; transition: opacity 0.45s ease; } .aawzBootLeaving { pointer-events: none; opacity: 0; } /* A aurora só aparece quando há cor de marca cacheada (.aawzBootBranded no * , setado por boot-splash.js). Na 1a visita (sem cache) fica oculta * para não "chutar" uma cor — o splash mostra só o fundo neutro. */ .aawzBootAurora { position: absolute; display: none; background: radial-gradient(circle at center, currentColor 0%, transparent 70%); filter: blur(110px); border-radius: 50%; will-change: transform, opacity; } .aawzBootBranded .aawzBootAurora { display: block; } .aawzBootAuroraA { top: -10vw; left: -8vw; width: 42vw; height: 42vw; opacity: 0.32; animation: aawzBootDriftA 18s ease-in-out infinite; } .aawzBootAuroraB { right: -10vw; bottom: -12vw; width: 38vw; height: 38vw; opacity: 0.24; animation: aawzBootDriftB 22s ease-in-out infinite; } .aawzBootLogoWrap { position: relative; z-index: 1; display: inline-flex; max-width: 62vw; } .aawzBootLogo { display: block; width: 240px; max-width: 62vw; height: auto; max-height: 30vh; object-fit: contain; } .aawzBootLogoGhost { opacity: 0.16; } .aawzBootLogoFill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; animation: aawzBootFill 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes aawzBootFill { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 60% { clip-path: inset(0 0 0 0); opacity: 1; } 80% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } } @keyframes aawzBootDriftA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7vw, 5vw) scale(1.12); } } @keyframes aawzBootDriftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vw, -4vw) scale(1.15); } } @media (prefers-reduced-motion: reduce) { .aawzBootAurora, .aawzBootLogoFill { animation: none; } .aawzBootLogoFill { clip-path: none; opacity: 1; } }