/* ------------------------- */
/* VARIABLES (from main site for consistency) */
/* ------------------------- */

:root {
    /* Colors */
    --sandy-beige: #F5F3F0;
    --sage-green: #A3B899;
    --walnut-brown: #4E443A;
    --deep-water-blue: #0A4D8B;
    --pure-white: #FFFFFF;
    --top-bar-green: #2A8754;
    /* Splash-specific colors */
    --soft-gray: #E0E2E7;
}

/* ------------------------- */
/* GLOBAL RESET & FONT       */
/* ------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--sandy-beige); /* Your earthy background */
    overflow: hidden; /* Hide scrollbars for the splash screen */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ------------------------- */
/* SPLASH CONTAINER          */
/* ------------------------- */
.splash-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, var(--pure-white) 0%, var(--sandy-beige) 80%);
    overflow: hidden;
}

/* ------------------------- */
/* BACKGROUND ANIMATED ELEMENTS */
/* ------------------------- */
.background-elements .bg-element {
    position: absolute;
    opacity: 0.6;
    animation: floatAndFade 15s infinite ease-in-out; /* Main animation for all */
    filter: brightness(1.5); /* Make them subtle and light */
    z-index: 1; /* Keep them behind the main content */
}

/* Specific positioning and animation delays for each element */
.leaf-1 {
    top: 10%; left: 15%; width: 80px; transform: rotate(20deg);
    animation-delay: 0s; animation-duration: 18s;
}
.pill-1 {
    bottom: 15%; right: 20%; width: 60px;
    animation-delay: 2s; animation-duration: 16s;
}
.leaf-2 {
    top: 30%; right: 10%; width: 70px; transform: rotate(-30deg);
    animation-delay: 4s; animation-duration: 17s;
}
.pill-2 {
    top: 20%; left: 30%; width: 50px;
    animation-delay: 6s; animation-duration: 19s;
}
.sparkle-1 {
    bottom: 5%; left: 5%; width: 40px;
    animation-delay: 8s; animation-duration: 15s;
}
.sparkle-2 {
    top: 50%; right: 5%; width: 35px;
    animation-delay: 10s; animation-duration: 14s;
}
.leaf-3 {
    bottom: 30%; left: 25%; width: 90px; transform: rotate(10deg);
    animation-delay: 12s; animation-duration: 20s;
}

@keyframes floatAndFade {
    0% { transform: translate(0, 0) scale(0.8) rotate(0deg); opacity: 0.2; }
    25% { transform: translate(20px, -20px) scale(0.9) rotate(5deg); opacity: 0.4; }
    50% { transform: translate(0, -40px) scale(1) rotate(0deg); opacity: 0.6; }
    75% { transform: translate(-20px, -20px) scale(0.9) rotate(-5deg); opacity: 0.4; }
    100% { transform: translate(0, 0) scale(0.8) rotate(0deg); opacity: 0.2; }
}


/* ------------------------- */
/* SPLASH CONTENT (LOGO & BUTTON) */
/* ------------------------- */
.splash-content {
    text-align: center;
    z-index: 2; /* Ensure content is above background elements */
    opacity: 0;
    animation: fadeInScale 1s ease-out forwards;
    animation-delay: 0.5s; /* Delay the content appearance slightly */
}

.main-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
}

.tagline {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--walnut-brown);
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
    animation-delay: 1s; /* Delay after logo */
}

.enter-button {
    background-color: var(--deep-water-blue);
    color: var(--pure-white);
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-family: sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(10, 77, 139, 0.2);
    opacity: 0;
    animation: fadeInSlideUp 0.8s ease-out forwards;
    animation-delay: 1.5s; /* Delay after tagline */
}

.enter-button:hover {
    background-color: #083c6f;
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(10, 77, 139, 0.4);
}

/* ------------------------- */
/* SPLASH CONTENT ANIMATIONS */
/* ------------------------- */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ------------------------- */
/* RESPONSIVE DESIGN         */
/* ------------------------- */
@media (max-width: 768px) {
    .main-logo {
        max-width: 200px;
    }
    .tagline {
        font-size: 1.2rem;
    }
    .enter-button {
        padding: 12px 30px;
        font-size: 1rem;
    }
    .background-elements .bg-element {
        width: 50px; /* Smaller elements on mobile */
    }
    /* Adjust specific element sizes for mobile */
    .leaf-1, .leaf-2, .leaf-3 { width: 60px; }
    .pill-1, .pill-2 { width: 40px; }
    .sparkle-1, .sparkle-2 { width: 30px; }
}