/* Full CSS - Restored Large Size + Precision Sticking */

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    overflow: hidden;
}

.intro-wrapper {
    position: relative;
    /* Restored large size (70% of screen width) */
    width: 70vw;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
}

.logo-part {
    /* Absolute keeps them large and layered correctly */
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
    pointer-events: none;
}

/* 1. d-main: Centered with a slight right shift to make room for driver */
.d-main {
    position: relative;
    opacity: 1;
    z-index: 1;
    transform: translateX(15%); 
}

/* 2. d-motor2: Slower pass-through */
.d-motor2 {
    z-index: 3;
    opacity: 0;
    animation: passThrough 2.5s ease-in-out forwards;
    animation-delay: 0.3s;
}

@keyframes passThrough {
    0% { transform: translateX(120vw); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateX(-120vw); opacity: 1; }
}

/* 3. d-motor: Large entrance from left, sticking to d-main */
.d-motor {
    z-index: 2;
    opacity: 0;
    animation: driveToMain 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
    animation-delay: 2.0s; 
}

@keyframes driveToMain {
    0% { 
        transform: translateX(-120vw) translateY(-30px); 
        opacity: 0; 
    }
    100% { 
        /* --- THE STICK VARIABLE --- */
        /* If there is a gap, make this number less negative (e.g., -65%) */
        /* If they overlap too much, make it more negative (e.g., -85%) */
        transform: translateX(-40%) translateY(-30px); 
        opacity: 1; 
    }
}

.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease;
}

/* Mobile: Keeps size large on small screens */
@media (max-width: 768px) {
    .intro-wrapper {
        width: 90vw;
        height: 30vh;
    }
    .d-main {
        transform: translateX(10%);
    }
}
