/* ═══════════════════════════════════════════════════════════════════════ Global page loader — sitewide, tiny. Critical positioning/background rules are ALSO inlined in header.php's so the overlay is guaranteed to paint correctly even before this stylesheet finishes loading; this file fills in the rest (card, logo, bar, cat) which can wait a few extra ms. ═══════════════════════════════════════════════════════════════════════ */ .eg-page-loader { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(124, 92, 255, 0.18), transparent 34%), rgba(7, 6, 14, 0.96); opacity: 1; visibility: visible; transition: opacity 0.42s ease, visibility 0.42s ease; } .eg-page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .eg-page-loader__card { display: grid; justify-items: center; gap: 16px; padding: 26px 30px; border-radius: 28px; border: 1px solid rgba(190, 170, 255, 0.20); background: rgba(18, 15, 32, 0.74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .eg-page-loader__cat { position: relative; width: 64px; height: auto; display: block; image-rendering: pixelated; filter: drop-shadow(0 0 14px rgba(150, 100, 255, 0.36)); } .eg-page-loader__cat-frame { display: block; width: 100%; height: auto; image-rendering: pixelated; user-select: none; pointer-events: none; } .eg-page-loader__cat-frame--tail { position: absolute; inset: 0; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .eg-page-loader__cat--idle { animation: egLoaderCatBody 3.4s ease-in-out infinite; } .eg-page-loader__cat-frame--tail { animation: egLoaderCatTail 2.1s steps(1, end) infinite; } } .eg-page-loader__logo { font-weight: 950; letter-spacing: 0.08em; font-size: 13px; color: rgba(230, 220, 255, 0.86); } .eg-page-loader__bar { width: 150px; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); } .eg-page-loader__bar span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #735cff, #b48cff); } @media (prefers-reduced-motion: no-preference) { .eg-page-loader__bar span { animation: egLoaderBar 1.15s ease-in-out infinite; } } @keyframes egLoaderBar { 0% { transform: translateX(-115%); } 100% { transform: translateX(255%); } } @keyframes egLoaderCatBody { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -3px, 0); } } @keyframes egLoaderCatTail { 0%, 36%, 100% { opacity: 0; } 44%, 72% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .eg-page-loader, .eg-page-loader * { animation: none !important; transition: none !important; } .eg-page-loader__cat-frame--tail { opacity: 0 !important; } }