:root { 
    --bg-preloader: #030303; 
    --bg-main: #fafaf0; 
    --accent: #ceffff; 
    --font-main: 'Bebas Neue', sans-serif;
}

body.loading {
    overflow: hidden !important;
    height: 100vh;
}

#preloader-container {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 10000; 
    background: var(--bg-preloader); 
    display: flex;
    font-family: var(--font-main);
    will-change: transform;
}

#three-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.loader-ui {
    position: absolute; 
    bottom: 60px; 
    right: 60px; 
    z-index: 10100; 
    text-align: right; 
    pointer-events: none; 
    color: white;
}

.loader-percentage { 
    font-size: 8rem; 
    line-height: 0.8; 
    margin: 0; 
    font-weight: 400;
}

.loader-bar-wrapper {
    width: 300px; 
    height: 4px; 
    background: rgba(255,255,255,0.1);
    margin: 10px 0 10px auto; 
    overflow: hidden;
}

.loader-bar-fill {
    width: 0%; 
    height: 100%; 
    background: var(--accent);
}

.loader-subtext {
    letter-spacing: 4px; 
    font-size: 14px; 
    opacity: 0.7;
}


@media (max-width: 768px) {
    .loader-ui { right: 30px; bottom: 40px; }
    .loader-percentage { font-size: 5rem; }
    .loader-bar-wrapper { width: 200px; }
}
#preloader-container {
  will-change: opacity;
}

.loader-ui {
  will-change: transform, opacity;
}

.loader-bar-fill {
  will-change: width;
}