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

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: rgb(40, 35, 29)/* A dark, deep sky color */
}

/* Create the 3D perspective for our scene */
.sky-container {
    position: relative;
    height: 100%;
    width: 100%;
    perspective: 800px; /* This is the "camera" distance */
    transform-style: preserve-3d;
}
    
/* Style for all layers that will be animated */
.cloud, .content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* The cloud layers */
#cloud-layer-1 {
    background-image: url('clouds1.png'); /* You'll need to find/create these images */
    background-size: cover;
    animation: splitClouds1 12s ease-out forwards;
}

#cloud-layer-2 {
    background-image: url('clouds2.png'); /* A different cloud image for a parallax effect */
    background-size: cover;
    animation: splitClouds2 12s ease-out forwards;
}

/* The text styles */
.content {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Times New Roman', Times, serif;
    transform: translateZ(-1000px); /* Start the text very far away */
    animation: floatText 15s ease-out forwards;
}

.content h1 {
    font-size: 2rem;
    font-weight: 300;
    opacity: 0; /* Start invisible */
    animation: fadeIn 10s 4s forwards; /* Fade in after a delay */
}

.content p {
    font-size: 0.9rem;
    font-weight: 300;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.4);
    opacity: 0; /* Start invisible */
    animation: fadeIn 10s 5s forwards; /* Fade in a bit later */
}

/* THE ANIMATIONS */

@keyframes splitClouds1 {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; } /* Moves left and fades */
}

@keyframes splitClouds2 {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; } /* Moves right and fades */
}

@keyframes floatText {
    from { transform: translateZ(-1000px); }
    to { transform: translateZ(0); } /* Moves the text from the distance to the screen */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- Add this at the very end --- */

/* Responsive adjustments for vertical/mobile screens */
@media (max-width: 600px) {
    .content h1 {
        font-size: 1.2rem; /* Slightly smaller, more intimate for a small screen */
        padding: 0 20px; /* Ensures text doesn't touch the very edges of the screen */
    }

    .content p {
        font-size: 0.7rem; /* A proportional adjustment */
    }
}