html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars from full-screen elements */
    font-family: 'Nunito', sans-serif;
    background-color: #FFE082; /* Fallback page background */
}

.coming-soon-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #FFF9C4; /* Light yellow background */
    overflow: hidden; /* Important for wave effects and absolute elements */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vmin; /* Use viewport units for padding */
    box-sizing: border-box;
}

/* Noise Texture Overlay */
.coming-soon-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.07' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 70vmin; /* Max width relative to viewport */
    padding: 2vmin;
}

.app-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 8vmin; /* Scaled font size */
    color: #388E3C;
    margin: 0 0 0.5vmin 0;
    line-height: 1.1;
}

.coming-soon-text {
    font-family: 'Fredoka One', cursive;
    font-size: 7vmin; /* Scaled font size */
    color: #E64A19;
    margin: 0 0 2vmin 0;
    letter-spacing: 0.1vmin;
}

.tagline {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 3.2vmin; /* Scaled font size */
    color: #388E3C;
    margin: 0 0 4vmin 0;
    line-height: 1.4;
}

.email-form {
    display: flex;
    border: 0.6vmin solid #FBC02D; /* Scaled border */
    border-radius: 10vmin; /* Scaled border radius */
    overflow: hidden;
    background-color: #FFFDE7;
    box-shadow: 0 0.4vmin 1vmin rgba(0,0,0,0.1);
    max-width: 60vmin; /* Scaled max width */
    margin: 0 auto;
}

.email-form input[type="email"] {
    flex-grow: 1;
    border: none;
    padding: 2.5vmin 3.5vmin; /* Scaled padding */
    font-size: 2.2vmin; /* Scaled font size */
    font-family: 'Nunito', sans-serif;
    background: transparent;
    outline: none;
    color: #757575;
}
.email-form input[type="email"]::placeholder {
    color: #A1887F;
}

.email-form button {
    background-color: #FF7043;
    color: white;
    border: none;
    padding: 2.5vmin 4.5vmin; /* Scaled padding */
    font-size: 2.2vmin; /* Scaled font size */
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.email-form button:hover {
    background-color: #F4511E;
}

.success-message {
    font-family: 'Fredoka One', cursive;
    font-size: 3.5vmin;
    color: #388E3C; /* Green for success */
    margin-top: 3vmin;
    animation: fadeInMessage 0.5s ease-out;
}

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


/* Decorative Waves - Adjusted for full screen */
.wave {
    position: absolute;
    width: 150%; /* Wider than container */
    z-index: 1;
    animation: gentleDrift 20s infinite alternate ease-in-out;
}
.orange-wave-top {
    background-color: #FB8C00;
    height: 30vh; /* Relative to viewport height */
    top: -10vh;
    left: -25%;
    border-bottom-left-radius: 50% 15vh;
    border-bottom-right-radius: 50% 15vh;
}
.orange-wave-bottom {
    background-color: #FFA726;
    height: 35vh;
    bottom: -15vh;
    left: -25%;
    border-top-left-radius: 50% 20vh;
    border-top-right-radius: 50% 20vh;
    animation-delay: -5s; /* Offset animation */
}
.green-wave-left {
    background-color: #66BB6A;
    width: 35vw; /* Relative to viewport width */
    height: 150%;
    top: -25%;
    left: -18vw;
    border-top-right-radius: 20vw 50%;
    border-bottom-right-radius: 20vw 50%;
    animation-delay: -10s;
}
.green-wave-right-bottom {
    background-color: #4CAF50;
    width: 30vw;
    height: 30vh;
    bottom: -10vh;
    right: -10vw;
    border-top-left-radius: 50% 100%;
    animation-delay: -15s;
}

@keyframes gentleDrift {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(2vw) translateY(1vh); }
}


/* Sun - Scaled and Animated */
.sun {
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: 12vmin; /* Scaled */
    height: 12vmin; /* Scaled */
    background-color: #FFCA28;
    border-radius: 50%;
    z-index: 5;
    animation: sunPulse 4s infinite ease-in-out;
}
@keyframes sunPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 2vmin #FFCA28; }
    50% { transform: scale(1.05); box-shadow: 0 0 3.5vmin #FFE082; }
}
.sun .ray {
    position: absolute;
    width: 2vmin; /* Scaled */
    height: 4.5vmin; /* Scaled */
    background-color: #FFCA28;
    border-radius: 1.5vmin;
    top: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    animation: rayShine 2s infinite alternate;
}
/* Ray positioning: translateY value adjusted for new ray height */
.sun .ray1 { transform: translate(-50%, -100%) rotate(0deg)   translateY(-5.5vmin); animation-delay: 0s; }
.sun .ray2 { transform: translate(-50%, -100%) rotate(45deg)  translateY(-5.5vmin); animation-delay: 0.2s; }
.sun .ray3 { transform: translate(-50%, -100%) rotate(90deg)  translateY(-5.5vmin); animation-delay: 0.4s; }
.sun .ray4 { transform: translate(-50%, -100%) rotate(135deg) translateY(-5.5vmin); animation-delay: 0.6s; }
.sun .ray5 { transform: translate(-50%, -100%) rotate(180deg) translateY(-5.5vmin); animation-delay: 0.8s; }
.sun .ray6 { transform: translate(-50%, -100%) rotate(225deg) translateY(-5.5vmin); animation-delay: 1s; }
.sun .ray7 { transform: translate(-50%, -100%) rotate(270deg) translateY(-5.5vmin); animation-delay: 1.2s; }
.sun .ray8 { transform: translate(-50%, -100%) rotate(315deg) translateY(-5.5vmin); animation-delay: 1.4s; }

@keyframes rayShine {
    0% { opacity: 0.6; transform: translate(-50%, -100%) scaleY(0.95) rotate(var(--angle, 0deg)) translateY(-5.5vmin); }
    100% { opacity: 1; transform: translate(-50%, -100%) scaleY(1.05) rotate(var(--angle, 0deg)) translateY(-5.5vmin); }
}
/* Need to set --angle for each ray if using this simplified keyframe */
/* For simplicity, I'll keep individual transform in .rayN and just animate opacity/scale for shine */
@keyframes simpleRayShine {
    0% { opacity: 0.7; transform-origin: 50% 100%; transform: scale(0.95) translate(-50%, -100%) rotate(var(--original-rotate)) translateY(var(--original-translateY));}
    100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1.05) translate(-50%, -100%) rotate(var(--original-rotate)) translateY(var(--original-translateY));}
}
/* Reverting to simpler ray animation to avoid complexity for now */
.sun .ray {
    /* ... existing styles ... */
    animation: pulseOpacity 1.5s infinite alternate;
}
.sun .ray:nth-child(odd) { animation-delay: 0.25s; }

@keyframes pulseOpacity {
    from { opacity: 0.6; }
    to { opacity: 1; }
}


/* Cloud - Scaled and Animated */
.cloud {
    position: absolute;
    top: 7vh;
    right: 8vw;
    width: 18vmin; /* Scaled */
    height: 7vmin; /* Scaled */
    z-index: 5;
    animation: cloudDrift 25s infinite linear alternate;
}
@keyframes cloudDrift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-3vw); }
}
.cloud .cloud-puff {
    position: absolute;
    background-color: #90CAF9;
    border-radius: 50%;
    animation: puffPulse 5s infinite ease-in-out;
}
.cloud .puff1 { width: 9vmin; height: 9vmin; top: -3vmin; left: 0; animation-delay: 0s;}
.cloud .puff2 { width: 10vmin; height: 10vmin; top: -2vmin; left: 5vmin; animation-delay: -1s;}
.cloud .puff3 { width: 8vmin; height: 8vmin; top: 0vmin; left: 3vmin; animation-delay: -2s;}

@keyframes puffPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}


/* Carrot - Scaled and Animated */
.carrot {
    position: absolute;
    bottom: 22vh; /* Adjusted for full screen */
    left: 7vw;    /* Adjusted for full screen */
    width: 7vmin;
    height: 16vmin;
    z-index: 15;
    animation: gentleSway 7s infinite alternate ease-in-out;
}
.carrot-body {
    width: 100%;
    height: 12vmin; /* Scaled */
    background-color: #FF8A65;
    border-radius: 50% 50% 3vmin 3vmin / 80% 80% 4vmin 4vmin;
    position: absolute;
    bottom: 0;
}
.carrot-leaf {
    position: absolute;
    background-color: #66BB6A;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform-origin: bottom center;
}
.carrot .cl1 { width: 2.5vmin; height: 5.5vmin; top: -0.5vmin; left: 2vmin; transform: rotate(-10deg); animation: leafRustle 4s infinite alternate ease-in-out -0.5s;}
.carrot .cl2 { width: 2.8vmin; height: 6vmin; top: -1.5vmin; left: 3.5vmin; transform: rotate(15deg); animation: leafRustle 4s infinite alternate ease-in-out;}
.carrot .cl3 { width: 2vmin; height: 5vmin; top: 0vmin; left: 0.5vmin; transform: rotate(-30deg); animation: leafRustle 4s infinite alternate ease-in-out -1s;}


/* Potted Plant - Scaled and Animated */
.potted-plant {
    position: absolute;
    bottom: 8vh; /* Adjusted */
    right: 15vw; /* Adjusted */
    width: 16vmin;
    height: 20vmin;
    z-index: 15;
    animation: gentleBob 8s infinite alternate ease-in-out;
}
.potted-plant .pot {
    width: 100%;
    height: 12vmin; /* Scaled */
    background-color: #FF7043;
    border-radius: 0 0 3vmin 3vmin;
    position: absolute;
    bottom: 0;
}
.potted-plant .plant {
    position: absolute;
    width: 100%;
    height: 13vmin;
    bottom: 9.5vmin;
    left: 0;
}
.potted-plant .stem {
    position: absolute;
    width: 1.8vmin;
    height: 8vmin;
    background-color: #4CAF50;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0.7vmin 0.7vmin 0 0;
}
.potted-plant .stem-base {
    position: absolute;
    width: 4vmin;
    height: 2vmin;
    background-color: #4CAF50;
    bottom: -0.5vmin;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}
.potted-plant .leaf {
    position: absolute;
    background-color: #66BB6A;
    border-radius: 50% 0 50% 0;
    transform-origin: bottom left;
    animation: leafRustle 5s infinite alternate ease-in-out;
}
.potted-plant .leaf1 { width: 7vmin; height: 9vmin; top: -3vmin; left: 0.5vmin; transform: rotate(-30deg); animation-delay: -0.2s;}
.potted-plant .leaf2 { width: 8vmin; height: 10.5vmin; top: -4vmin; left: 5vmin; transform: rotate(20deg); animation-delay: -0.8s;}
.potted-plant .leaf3 { width: 6vmin; height: 8.5vmin; top: -1.5vmin; left: 3.5vmin; transform: rotate(0deg); animation-delay: -0.5s;}


/* Small Plant near form - Scaled and Animated */
.small-plant-form {
    position: absolute;
    bottom: 25vh; /* Relative to form area */
    right: 28vw;  /* Relative to form area */
    width: 7vmin;
    height: 9vmin;
    z-index: 15;
    animation: gentleSway 6s infinite alternate ease-in-out -1s;
}
.small-plant-form .spf-leaf {
    position: absolute;
    background-color: #66BB6A;
    border-radius: 50% 0;
    transform-origin: bottom center;
    animation: leafRustleSmall 3.5s infinite alternate ease-in-out;
}
.small-plant-form .spf1 { width: 3vmin; height: 5vmin; bottom: 1.5vmin; left: 1.5vmin; transform: rotate(-40deg); animation-delay: -0.3s;}
.small-plant-form .spf2 { width: 3.5vmin; height: 5.5vmin; bottom: 2vmin; left: 3vmin; transform: rotate(20deg); animation-delay: 0s;}
.small-plant-form .spf3 { width: 2.5vmin; height: 4.5vmin; bottom: 0.5vmin; left: 3.5vmin; transform: rotate(50deg); animation-delay: -0.6s;}
.small-plant-form .spf-corn {
    position: absolute;
    width: 2vmin;
    height: 3.5vmin;
    background-color: #FFEB3B;
    border-radius: 50% 50% 1vmin 1vmin / 70% 70% 0.5vmin 0.5vmin;
    bottom: 5.5vmin;
    left: 2.5vmin;
    border: 0.3vmin solid #C8B900;
}

/* Leafy plant bottom left - Scaled and Animated */
.leafy-plant-bl {
    position: absolute;
    bottom: 3vh;
    left: 3vw;
    width: 11vmin;
    height: 13vmin;
    z-index: 20;
    animation: gentleSway 9s infinite alternate ease-in-out -0.5s;
}
.leafy-plant-bl .lpbl-leaf {
    position: absolute;
    background-color: #388E3C;
    border-radius: 50% 0 50% 0;
    transform-origin: bottom center;
    animation: leafRustle 6s infinite alternate ease-in-out;
}
.lpbl1 { width: 4vmin; height: 7vmin; bottom: 0; left: 3vmin; transform: rotate(-20deg); animation-delay: -0.1s;}
.lpbl2 { width: 4.5vmin; height: 8vmin; bottom: 1.5vmin; left: 0; transform: rotate(-60deg); animation-delay: -1s;}
.lpbl3 { width: 3.5vmin; height: 6vmin; bottom: 0.5vmin; left: 5.5vmin; transform: rotate(30deg); animation-delay: -0.5s;}
.lpbl4 { width: 3.8vmin; height: 6.5vmin; bottom: 3vmin; left: 1.5vmin; transform: rotate(-40deg); animation-delay: -0.8s;}


/* Leafy plant bottom right - Scaled and Animated */
.leafy-plant-br {
    position: absolute;
    bottom: 1.5vh;
    right: 3vw;
    width: 13vmin;
    height: 15vmin;
    z-index: 20;
    animation: gentleSway 7.5s infinite alternate ease-in-out -1.5s;
}
.leafy-plant-br .lpbr-leaf {
    position: absolute;
    background-color: #388E3C;
    border-radius: 50% 0 50% 0;
    transform-origin: bottom center;
    animation: leafRustle 5.5s infinite alternate ease-in-out;
}
.lpbr1 { width: 4vmin; height: 8vmin; bottom: 0; right: 4vmin; transform: rotate(25deg); animation-delay: -0.4s;}
.lpbr2 { width: 4.5vmin; height: 9vmin; bottom: 1.5vmin; right: 0px; transform: rotate(70deg); animation-delay: -1.2s;}
.lpbr3 { width: 3.5vmin; height: 7vmin; bottom: 0.5vmin; right: 7.5vmin; transform: rotate(-15deg); animation-delay: -0.7s;}
.lpbr4 { width: 3.8vmin; height: 7.5vmin; bottom: 3vmin; right: 2vmin; transform: rotate(45deg); animation-delay: 0s;}
.lpbr5 { width: 3vmin; height: 6vmin; bottom: 4vmin; right: 5.5vmin; transform: rotate(0deg); animation-delay: -0.9s;}
.lpbr6 { width: 2.8vmin; height: 5.5vmin; bottom: 0vmin; right: 0vmin; transform: rotate(90deg); animation-delay: -0.2s;}


.signature {
    font-family: 'Pacifico', cursive;
    font-size: 4vmin; /* Scaled */
    color: white;
    position: absolute;
    bottom: 4vh; /* Adjusted for full screen */
    right: 8vw; /* Adjusted for full screen */
    transform: rotate(-5deg);
    z-index: 15;
    text-shadow: 0.1vmin 0.1vmin 0.3vmin rgba(0,0,0,0.2);
    animation: gentleBob 10s infinite alternate ease-in-out -2s;
}

/* General Animations for Plants */
@keyframes gentleSway {
    0% { transform: rotate(-1.5deg) translateX(-0.5vmin); }
    100% { transform: rotate(1.5deg) translateX(0.5vmin); }
}
@keyframes gentleBob { /* For less sway, more up-down */
    0% { transform: translateY(0); }
    100% { transform: translateY(-0.7vmin); }
}
@keyframes leafRustle {
    0% { transform: rotate(-2deg) scale(0.98); }
    100% { transform: rotate(2deg) scale(1.02); }
}
@keyframes leafRustleSmall {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}


/* Responsive Adjustments for very small or portrait screens */
@media (max-width: 480px), (max-aspect-ratio: 1/1) {
    .content-wrapper { max-width: 85vmin; }
    .app-title { font-size: 9vmin; }
    .coming-soon-text { font-size: 8vmin; }
    .tagline { font-size: 3.8vmin; }
    .email-form { flex-direction: column; border-radius: 3vmin; border-width: 0.5vmin; max-width: 70vmin; }
    .email-form input[type="email"] { border-bottom: 0.3vmin solid #FBC02D; border-radius: 2.5vmin 2.5vmin 0 0; text-align: center; padding: 3vmin;}
    .email-form button { border-radius: 0 0 2.5vmin 2.5vmin; width: 100%; padding: 3vmin;}
    .success-message {font-size: 4vmin;}

    /* Adjust positions of some elements if they look too cramped */
    .sun { top: 3vh; left: 3vw; width: 10vmin; height: 10vmin;}
    .cloud { top: 4vh; right: 5vw; width: 15vmin; }
    .carrot { bottom: 18vh; left: 4vw; width: 6vmin; height: 14vmin; }
    .potted-plant { bottom: 5vh; right: 7vw; width: 14vmin; height: 18vmin; }
    .small-plant-form { display: none; } /* Hide if too cluttered */
    .signature { font-size: 3.5vmin; bottom: 2vh; right: 5vw;}
}