/*
 * WestWood Dairies - Coming Soon Page CSS
 * Modern, Full-Page Layout with Subtle Floating Animation
 */

/* --- 1. Full Page Setup --- */

/* Ensure the root element takes up the full screen height */
html {
    height: 100%;
}

/* Set the body to fill the entire visible viewport (100vh/100vw) */
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    
    /* Modern, clean background color */
    background-color: #f0f0f0; 
    
    /* Clean, widely available modern font stack */
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    color: #333; 
    
    /* Center all content vertically and horizontally on the screen */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Smoother rendering for text and elements */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Layout and Text Styling --- */

.page-container {
    /* Prevents content from being too wide on massive screens */
    max-width: 900px; 
    width: 90%;
    /* Added padding for a little breathing room on the top/bottom */
    padding: 20px 0; 
}

/* Header / Logo Styling */
.logo {
    font-size: 2em;
    font-weight: 300; /* Lighter weight for a sleek, modern look */
    margin-bottom: 2.5em; /* Creates separation from the image */
    color: #4CAF50; /* A fresh green color for a "dairy" brand pop */
}

/* Coming Soon Headline */
.coming-soon-text {
    font-weight: 800; /* Extra bold for impact */
    letter-spacing: 2px;
    font-size: clamp(2em, 8vw, 3.5em); /* Responsive sizing for all screens */
    margin-bottom: 0.1em;
    color: #2c3e50; /* A dark, deep color for contrast */
}

/* Tagline */
.tagline {
    font-size: clamp(1em, 3vw, 1.2em); /* Responsive sizing */
    font-weight: 400;
    color: #666; /* Subtle, muted text */
}


/* --- 3. The Floating Animation --- */

/* 3A. Define the Keyframes: The actual movement path */
@keyframes float {
    0% {
        /* Start position (or reset) */
        transform: translateY(0px); 
    }
    50% {
        /* Halfway point: Move the image up 8 pixels for a noticeable lift */
        transform: translateY(-8px); 
    }
    100% {
        /* End position: back to start */
        transform: translateY(0px); 
    }
}

/* 3B. Apply the Animation to the Image */
.floating-cups {
    /* Ensures the image is responsive */
    max-width: 100%; 
    height: auto;
    
    /* This makes the animation smoother and prevents visual hiccups */
    will-change: transform; 
    
    /* Apply the animation here */
    animation: 
        /* Animation Name | Duration | Timing Function | Loop Count */