.page-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-primary);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-text { font-size: 2.5rem; font-weight: 900; margin-bottom: 24px; }
.loader-bar { width: 200px; height: 3px; background: var(--bg-surface-light); border-radius: 3px; overflow: hidden; }
.loader-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; animation: loaderBar 1.5s ease-in-out infinite; }
@keyframes loaderBar {
    0% { width: 0%; transform: translateX(0); }
    50% { width: 100%; transform: translateX(0); }
    100% { width: 0%; transform: translateX(200px); }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

.stagger > * { opacity: 0; animation: fadeInUp 0.5s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.15s; }
.stagger > *:nth-child(3) { animation-delay: 0.25s; }
.stagger > *:nth-child(4) { animation-delay: 0.35s; }
.stagger > *:nth-child(5) { animation-delay: 0.45s; }
.stagger > *:nth-child(6) { animation-delay: 0.55s; }