/* CSS GOES HERE */
/* hi eveyrone */

#splash-screen {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #000;
    display: flex; justify-content: center; align-items: center;
    z-index: 99999;
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s;
}

/* --- 2. buns wiggle (grouped) --- */
.wiggle-container {
    display: flex; justify-content: center; align-items: center;
    transform: translateX(-36px); /* Original Offset */
    transform-origin: center center;
    animation: bun-wiggle 0.8s ease-in-out infinite alternate;
}

@keyframes bun-wiggle {
    0% { transform: translateX(-36px) rotate(-1.5deg); }
    100% { transform: translateX(-36px) rotate(1.5deg); }
}

/* --- 3. FLY UP & ECLIPSE FIX --- */
.splash-logo {
    width: 2000px; max-width: 90vw; max-height: 85vh; height: auto;
    transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1) translateY(0);
}

/* Group tag ensures shapes don't drift apart */
#logo-content-group {
    transform-box: fill-box;
    transform-origin: center center;
}

.logo-drift {
    transform: scale(1.4) translateY(-150vh) !important;
}

/* --- 4. BLINKING EYES --- */
.eye {
    transform-origin: 50% 45%;
    animation: natural-blink 2s infinite ease-in-out;
}

@keyframes natural-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    93%, 97% { transform: scaleY(0.05); }
}

/* --- 5. FADE STATES --- */
.fade-out { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.enable-scroll { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }


/* ------------------------------------ */