/* * PageLoader — FONTE ÚNICA do estilo do overlay de navegação. * Consumido por: * - ASTWeb módulo React (fade-IN da saída): PageLoaderApp/AstroLoader via classNames * `.pageloader-overlay` (+ `--in`/`--leaving`) e `.pageloader-logo`. * - Legado (fade-OUT da chegada, crítico): markup em `_pageloader.php` com * `.pageloader-overlay--critical`, exibido via `html[data-pl-arrival]` (ver `_heads.php`). * Linkado render-blocking no `_heads.php` pra estar no 1º paint em toda página do legado. */ .pageloader-overlay { position: fixed; inset: 0; z-index: 2147483646; background: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; opacity: 1; transition: opacity 260ms ease-out; } .pageloader-overlay--in { animation: pageloaderFadeIn 260ms ease-out; } .pageloader-overlay--leaving { opacity: 0; } .pageloader-logo { width: 70px; height: 70px; background: url('/assets/images/neo-structure/utils/logo-ic/loading_al_4.png') center / contain no-repeat; transform-origin: center; animation: pageloaderBreathe 1.8s ease-in-out infinite; } /* * Overlay crítico do legado (fade-OUT da chegada): fica sempre no DOM (via _pageloader.php), * escondido, e só aparece quando o _heads.php sinaliza `data-pl-arrival` no — antes * do 1º paint. O `data-pl-leaving` (setado no load) dispara a saída suave. */ .pageloader-overlay--critical { display: none; } html[data-pl-arrival] .pageloader-overlay--critical { display: flex; } html[data-pl-arrival][data-pl-leaving] .pageloader-overlay--critical { opacity: 0; } @keyframes pageloaderFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageloaderBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(79, 22, 124, 0)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 7px rgba(132, 74, 176, 0.55)); } } @media (prefers-reduced-motion: reduce) { .pageloader-overlay { transition: none; animation: none; } .pageloader-logo { animation: none; } }