/* Basic Reset & Body Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff; /* White background */
    color: #333;
    line-height: 1.6;
    adding-bottom: 70px;
}

/* Container for centering content */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center;      /* Horizontal centering */
    min-height: 100vh;        /* Ensure it takes full viewport height */
    text-align: center;
    padding: 20px;
}

/* Logo Styling & Initial Animation State */
#logo {
    max-width: 400px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 40px;
    opacity: 0; /* Start hidden for animation */
    transform: translateY(20px); /* Start slightly lower for animation */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Define transition for initial fade-in */
}

/* Heading Styling & Initial Animation State */
#coming-soon-text {
    font-size: 3em; /* Adjust size as needed */
    color: #5a8f8c; /* Teal color similar to logo text - Consider changing for Z2P DevOps */
    margin-bottom: 15px;
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in; /* Define transition for initial fade-in */
}

/* Paragraph Styling & Initial Animation State */
#message {
    font-size: 1.2em;
    color: #777;
    opacity: 0; /* Start hidden */
    transition: opacity 1s ease-in; /* Define transition for initial fade-in */
    margin-bottom: 15px; /* Added margin to push switcher down slightly */
}

/* --- Animation Trigger Styles (Higher Specificity) --- */
/* These rules combine the ID and the class to ensure they override the initial opacity */

@keyframes bobbing {
  0% {
    transform: translateY(0); /* Start at the final position */
  }
  50% {
    transform: translateY(-5px); /* Move up slightly (adjust px for more/less movement) */
  }
  100% {
    transform: translateY(0); /* Return to the starting position */
  }
}

#logo.visible {
    opacity: 1;
    transform: translateY(0); /* End state for initial transition */
    /* Apply the continuous bobbing animation after initial fade-in */
    animation: bobbing 3s ease-in-out 1.5s infinite;
}

#coming-soon-text.visible {
    opacity: 1;
}

#message.visible {
    opacity: 1;
}


/* --- Language Handling --- */
/* Hide non-active language text by default (JS will remove .hidden) */
.lang-text.hidden {
    display: none;
}

/* Language Switcher Styles */
.lang-switcher {
    margin-top: 30px; /* Add some space above the switcher */
    font-size: 0.9em;
    color: #666;
}

.lang-switcher button {
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
    font-size: 1em; /* Inherit size from parent */
    color: #5a8f8c; /* Use a distinct color, maybe link/heading color - Consider changing for Z2P DevOps */
    text-decoration: none;
    font-weight: normal;
    vertical-align: baseline; /* Align buttons better with the separator */
}

/* Style for the active language button */
.lang-switcher button.active {
    font-weight: bold;
    text-decoration: underline;
    cursor: default; /* Indicate it's already selected */
}

/* Optional: Hover effect for non-active buttons */
.lang-switcher button:not(.active):hover {
    text-decoration: underline;
}


/* --- Responsive adjustments --- */
@media (max-width: 600px) {
    #logo {
        max-width: 150px;
        margin-bottom: 30px;
    }
    #coming-soon-text {
        font-size: 2.2em;
    }
    #message {
        font-size: 1em;
    }
    .lang-switcher {
        margin-top: 20px; /* Slightly reduce space on mobile */
    }
}
/* Footer Styles */
footer {
    position: fixed; /* Make the footer stick to the viewport */
    bottom: 0;       /* Position it at the bottom of the viewport */
    left: 0;         /* Align it to the left edge */
    width: 100%;     /* Make it span the full width of the viewport */
    padding: 20px 0; /* Adjust padding if needed (e.g., 20px top/bottom, 0 left/right) */
    background-color: #f8f8f8; /* Light background for the footer */
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #666;
    text-align: center;
    z-index: 1000;   /* Ensure it's above other content if anything overlaps */
}

/* Ensure links within footer are styled correctly */
footer a {
    color: #5a8f8c; /* Use your existing brand color or a suitable link color */
    text-decoration: none;
    margin: 0 10px; /* Space between links */
}

footer a:hover {
    text-decoration: underline;
}