* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000; /* Instant black background */
}

/* Full-Screen Spline 3D Viewer (Framed purely by cameras inside Spline) */
spline-viewer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border: none;
    outline: none;
    z-index: 1;
    opacity: 0; /* Hidden on load */
    transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade in smoothly once Spline reports load-complete */
spline-viewer.loaded {
    opacity: 1;
}

/* Invisible click overlay positioned exactly over the 3D button */
.invisible-contact-btn {
    position: fixed;
    bottom: 11.5vh; /* Aligned with your centered 3D button's native position */
    left: 50%; /* Centered horizontally since everything is centered inside Spline */
    transform: translateX(-50%);
    width: 160px; /* Increased size to match your new larger 3D contact button */
    height: 48px;
    z-index: 999; /* Floats above the 3D canvas for instant clicking */
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0); /* Completely transparent */
    border-radius: 24px; /* Matches rounded corners of larger button */
    outline: none;
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .invisible-contact-btn {
        bottom: 14.2vh; /* Adjusted vertical height for mobile camera framing */
        width: 130px; /* Increased mobile size */
        height: 40px;
    }
}