* { margin: 0; padding: 0; box-sizing: border-box; cursor: auto; }
body { background: #000; overflow: hidden; font-family: "Arial Black", sans-serif; color: white; }

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#splash {
    position: fixed; inset: 0; z-index: 999; background: black;
    display: flex; justify-content: center; align-items: center; cursor: pointer;
}

#loading-screen { display: none; width: 100vw; height: 100vh; position: relative; }

#art-container { position: absolute; inset: 0; z-index: 1; }
.slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.5s ease-in-out;
}

.zoom-in { animation: zoomIn 8s forwards linear; }
.zoom-out { animation: zoomOut 8s forwards linear; }

@keyframes zoomIn { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes zoomOut { from { transform: scale(1.1); } to { transform: scale(1); } }

.vignette {
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.8) 100%);
}

.ui-layer { 
    position: relative; 
    z-index: 3; 
    height: 100%; 
    padding: 4rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

#logo-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gta-logo {
    max-width: 600px; 
    opacity: 0; 
    transition: opacity 0.8s ease-in-out;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
    position: absolute;
}

.menu {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.gta-btn {
    display: block; color: white; text-decoration: none; font-size: 1.5rem;
    margin-bottom: 10px; border-left: 4px solid transparent; padding-left: 10px;
    transition: 0.2s;
}
.gta-btn:hover { border-left: 4px solid #fff; background: rgba(255,255,255,0.1); }