body, html { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #000000; /* Pure black background */
    perspective: 1000px;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.4);
    z-index: 10000;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #010103;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.75s ease-in-out, visibility 0.75s linear;
}

#preloader-logo {
    width: 120px;
    animation: pulseLogo 1.5s ease-in-out infinite alternate;
}

@keyframes pulseLogo {
    0% { transform: scale(0.8); opacity: 0.5; filter: drop-shadow(0 0 10px rgba(255,255,255,0.1)); }
    100% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 25px rgba(255,255,255,0.6)); }
}

body.loading #preloader {
    opacity: 1;
    visibility: visible;
}

body:not(.loading) #preloader {
    opacity: 0;
    visibility: hidden;
}

body:not(.loading) {
    background-color: #000000;
}

body.loading > *:not(#preloader) {
    opacity: 0;
}

#parallax-scene {
    position: relative;
    width: 105vw;
    height: 105vh;
    top: -2.5vh;
    left: -2.5vw;
    overflow: hidden;
}

.layer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.layer-bg-plate {
    background-image: url('../bappeda_assets/landing_components/plate-adv-tr.png');
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2.5s ease 4s, transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body:not(.loading) .layer-bg-plate {
    opacity: 1;
}

/* Animasi Scratch Line untuk gambar vector (plate-line.png) */
.layer-line-plate {
    background-image: url('../bappeda_assets/landing_components/plate-line.png');
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 0;
}

body:not(.loading) .layer-line-plate {
    animation: scratchReveal 3.5s ease-out 0.5s forwards, fadeOutLine 2s ease-in 4s forwards;
}

@keyframes scratchReveal {
    0% { clip-path: polygon(0 0, 0 0, 0 10%, 0 10%, 0 20%, 0 20%, 0 30%, 0 30%, 0 40%, 0 40%, 0 50%, 0 50%, 0 60%, 0 60%, 0 70%, 0 70%, 0 80%, 0 80%, 0 90%, 0 90%, 0 100%, 0 100%); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)) brightness(0.5); opacity: 0; transform: scale(0.98); }
    15% { clip-path: polygon(0 0, 15% 0, 15% 10%, 25% 10%, 25% 20%, 5% 20%, 5% 30%, 30% 30%, 30% 40%, 20% 40%, 20% 50%, 40% 50%, 40% 60%, 10% 60%, 10% 70%, 35% 70%, 35% 80%, 15% 80%, 15% 90%, 25% 90%, 25% 100%, 0 100%); opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) brightness(2); }
    20% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)) brightness(0.8); }
    25% { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) brightness(2.2); }
    30% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)) brightness(1.2); }
    60% { clip-path: polygon(0 0, 60% 0, 60% 10%, 80% 10%, 80% 20%, 50% 20%, 50% 30%, 90% 30%, 90% 40%, 70% 40%, 70% 50%, 95% 50%, 95% 60%, 55% 60%, 55% 70%, 85% 70%, 85% 80%, 65% 80%, 65% 90%, 90% 90%, 90% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 10%, 100% 10%, 100% 20%, 100% 20%, 100% 30%, 100% 30%, 100% 40%, 100% 40%, 100% 50%, 100% 50%, 100% 60%, 100% 60%, 100% 70%, 100% 70%, 100% 80%, 100% 80%, 100% 90%, 100% 90%, 100% 100%, 0 100%); filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) brightness(1.5); opacity: 1; transform: scale(1.02); }
}

@keyframes fadeOutLine {
    0% { opacity: 1; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) brightness(1.5) blur(0px); transform: scale(1.02); }
    40% { opacity: 1; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1)) brightness(2.5) blur(1px); transform: scale(1.03); }
    100% { opacity: 0; filter: drop-shadow(0 0 50px rgba(255, 255, 255, 1)) brightness(3) blur(4px); transform: scale(1.05); }
}

.text-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    text-align: center;
}

.text-bappeda {
    color: #b5b5d5;
    font-family: 'Montserrat', sans-serif;
    font-size: 6vw;
    font-weight: 900;
    letter-spacing: 1.5vw;
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9), -3px -3px 8px rgba(255, 255, 255, 0.08);
    opacity: 0;
}

.text-subtitle {
    color: #d1d5db;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5vw;
    font-weight: 400;
    letter-spacing: 0.2vw;
    margin-top: 10px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

body:not(.loading) .text-bappeda { 
    animation: textNeonFlicker 3.5s ease-out 0.5s forwards; 
}

@keyframes textNeonFlicker {
    0%, 14% { opacity: 0; transform: scale(0.98); text-shadow: none; color: #333; }
    15% { opacity: 1; text-shadow: 0 0 20px rgba(255, 255, 255, 1); color: #fff; }
    18% { opacity: 0; text-shadow: none; }
    22% { opacity: 0.6; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); color: #e2e8f0; }
    25% { opacity: 0; text-shadow: none; }
    30% { opacity: 1; text-shadow: 0 0 40px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.8); color: #fff; transform: scale(1.02); }
    35% { opacity: 0.4; text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); }
    40% { opacity: 1; text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); color: #f8fafc; }
    100% { opacity: 1; text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9), -3px -3px 8px rgba(255, 255, 255, 0.08); transform: scale(1); color: #b5b5d5; }
}
body:not(.loading) .text-subtitle { opacity: 1; transition-delay: 6s; }

.greeting-container { margin-top: 25px; height: 30px; opacity: 0; transition: opacity 2s ease-in-out; }
body:not(.loading) .greeting-container { opacity: 1; transition-delay: 7s; }

#animated-greeting { color: #a1a1aa; font-family: 'Montserrat', sans-serif; font-size: 1vw; font-weight: 400; letter-spacing: 0.1vw; transition: opacity 0.5s ease-in-out; }

.btn-enter-container { margin-top: 35px; opacity: 0; transform: translateY(20px); transition: opacity 2s ease-in-out, transform 2s ease-out; pointer-events: auto; }
body:not(.loading) .btn-enter-container { opacity: 1; transform: translateY(0); transition-delay: 8s; }

.btn-enter { display: inline-flex; justify-content: center; align-items: center; min-width: 260px; padding: 14px 40px; font-family: 'Montserrat', sans-serif; font-size: 1.1vw; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
.btn-enter:hover { background: rgba(255, 255, 255, 0.15); box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3); transform: translateY(-3px); }

#animated-btn-text { transition: opacity 0.5s ease-in-out; }

.moon { position: absolute; top: 12%; right: 18%; width: 70px; height: 70px; border-radius: 50%; box-shadow: -15px 15px 0 0 #fff; filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); opacity: 0; transition: opacity 2.5s ease-in-out 5s; }
body:not(.loading) .moon { opacity: 1; }

.dust-particle { position: absolute; width: 4px; height: 4px; background-color: #fde68a; border-radius: 50%; box-shadow: 0 0 12px 3px rgba(253, 230, 138, 0.8); opacity: 0; pointer-events: none; }
body:not(.loading) .dust-particle { animation: floatDust 2.5s ease-out forwards; }

@keyframes floatDust { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 30% { opacity: 1; transform: translateY(-30px) scale(1.2); } 100% { transform: translateY(-120px) scale(0); opacity: 0; } }

.depth-1 { z-index: 1; }
.depth-2 { z-index: 10; }

.star { position: absolute; background-color: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff, 0 0 10px #fff; animation: twinkle ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

.cloud { position: absolute; top: 10%; left: -30vw; width: 15vw; height: 10vh; background-image: url('../bappeda_assets/landing_components/cloud.png'); background-size: contain; background-repeat: no-repeat; --max-opacity: 0.3; animation: floatCloud 60s linear infinite; z-index: 1; }
@keyframes floatCloud { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: var(--max-opacity); } 85% { opacity: var(--max-opacity); } 100% { transform: translateX(130vw); opacity: 0; } }

.footer-text { position: absolute; bottom: 25px; left: 30px; color: rgba(255, 255, 255, 0.5); font-family: 'Montserrat', sans-serif; font-size: 0.9vw; letter-spacing: 0.05vw; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 2s ease-in-out; }
body:not(.loading) .footer-text { opacity: 1; transition-delay: 9s; }

@media (max-width: 768px) {
    .text-bappeda { font-size: 14vw; letter-spacing: 2vw; }
    .text-subtitle { font-size: 3.5vw; letter-spacing: 0.5vw; margin-top: 15px; padding: 0 10px; line-height: 1.4; }
    .greeting-container { height: 45px; margin-top: 15px; }
    #animated-greeting { font-size: 3.5vw; padding: 0 15px; line-height: 1.4; }
    .btn-enter-container { margin-top: 25px; }
    .btn-enter { font-size: 4vw; padding: 12px 25px; min-width: 200px; }
    .footer-text { font-size: 3vw; bottom: 15px; left: 15px; }
}