/* --- 1. General & Typography --- */
:root {
    --color-primary: #0077c2; /* Deep Icy Blue */
    --color-secondary: #00aaff; /* Lighter Frost Blue */
    --color-text: #e0f7fa; /* Light Snow White */
    --color-dark-bg: #031e3d; /* Very Dark Blue/Navy */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-dark-bg);
    color: var(--color-text);
    min-height: 100vh;
    overflow: hidden; /* Hide scrollbar caused by snow effect */
}

/* --- 2. Content Layout & Responsiveness --- */
.content-wrapper {
    position: relative;
    z-index: 10; /* Keep content above the snow layer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 20px;
}

.main-content {
    max-width: 800px;
    width: 100%;
    padding: 40px 20px;
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent overlay for contrast */
    border-radius: 15px;
    backdrop-filter: blur(5px); /* Icy/Frosty effect on the main box */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
}

/* --- 3. Headings & Tagline --- */
.logo {
    font-family: var(--font-heading);
    font-size: 1.5em;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 20px;
    color: var(--color-secondary);
}

.coming-soon {
    font-family: var(--font-heading);
    font-size: 6vw; /* Responsive font size */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 15px;
    margin: 20px 0 40px;
    color: var(--color-text);
    text-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-primary); /* Cool glow effect */
}

.tagline {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 10px;
    color: var(--color-secondary);
}

/* --- 4. Notify Me Form --- */
.notify-me p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.notify-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.notify-form input[type="email"] {
    flex-grow: 1;
    padding: 15px;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1em;
}

.notify-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.notify-button {
    background-color: var(--color-primary);
    color: white;
    padding: 15px 25px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.notify-button:hover {
    background-color: var(--color-secondary);
}

/* --- 5. Footer --- */
footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.5);
}

/* --- 6. Responsive Adjustments --- */
@media (max-width: 600px) {
    .coming-soon {
        font-size: 10vw;
        letter-spacing: 10px;
    }

    .notify-form {
        flex-direction: column;
        border-radius: 10px;
        background: transparent;
    }

    .notify-form input[type="email"] {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        margin-bottom: 10px;
    }
}


/* --- 7. Snow/Frost Animation Effect --- */

/* Keyframe for the falling effect */
@keyframes snowfall {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

/* Create the initial snow particles using a large box-shadow list */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Define the snow layers with different sizes, speeds, and colors for depth */
.snow-container::before,
.snow-container::after {
    content: "";
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background: transparent;
}

/* Layer 1: Closest, larger, faster snowflakes (using ::before) */
.snow-container::before {
    box-shadow: 
        100px 200px 5px 0px rgba(255, 255, 255, 0.8),
        300px 50px 3px 0px rgba(255, 255, 255, 0.8),
        500px 150px 4px 0px rgba(255, 255, 255, 0.8),
        700px 300px 5px 0px rgba(255, 255, 255, 0.8),
        900px 450px 3px 0px rgba(255, 255, 255, 0.8),
        100px 700px 4px 0px rgba(255, 255, 255, 0.8),
        /* ... Add many more random x,y coordinates and blur values for a dense effect ... */
        1000px 100px 3px 0px rgba(255, 255, 255, 0.8);
    
    animation: snowfall 15s linear infinite;
}

/* Layer 2: Further, smaller, slower snowflakes (using ::after) */
.snow-container::after {
    box-shadow: 
        250px 100px 2px 0px rgba(255, 255, 255, 0.5),
        450px 400px 1px 0px rgba(255, 255, 255, 0.5),
        650px 600px 2px 0px rgba(255, 255, 255, 0.5),
        850px 200px 1px 0px rgba(255, 255, 255, 0.5),
        /* ... Add many more random x,y coordinates and blur values for a dense effect ... */
        50px 50px 1px 0px rgba(255, 255, 255, 0.5);

    animation: snowfall 25s linear infinite reverse; /* Reverse for a slightly different flow */
}