/* --- Global Styles & Resets --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
    color: #e0e0e0; /* Default light text */
    position: relative;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: color 1s ease-in-out;

    /* Apply sky animation directly to body */
    --cycle-duration: 120s;
    animation: dayNightCycle var(--cycle-duration) linear infinite;
}

a { color:inherit; }

h2 { line-height: 3 }

.menu {
    list-style-type: none;
    display: flex;
    justify-content: center;
}

header .menu li {
    padding: calc(1vh + 1vw) calc(1vh + 1vw) 0 calc(1vh + 1vw);
}

footer .menu li {
    padding: 0 calc(1vh + 1vw) calc(1vh + 1vw) calc(1vh + 1vw);
}

.video-container, .contact-container {
    height: 95%;
    width: 100%;
    position: relative;
}

.form-group textarea  {
    height: 40vh;
}

.video-wrapper {
    text-align: center;
}

iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
}

/* --- Background Containers --- */
.sky-background-container,
.clouds-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* Prevent interference */
}

.sky-background-container {
    z-index: -3; /* Furthest back layer */
}

.clouds-container {
    z-index: -2; /* Clouds layer, above sky/sun, below content */
}


/* --- Day/Night Sky Background Animation --- */
@keyframes dayNightCycle {
    0%   {
        background: linear-gradient(to bottom, #00001a, #1a1a2a);
        color: #e0e0e0; /* Midnight - Light text */
    }
    15%  {
        background: linear-gradient(to bottom, #1a1a3a, #4d3a5f);
        color: #e0e0e0; /* Pre-dawn */
    }
    25%  {
        background: linear-gradient(to bottom, #ff7e5f, #feb47b);
        color: #333; /* Dawn / Sunrise - Dark text*/
    }
    35%  {
        background: linear-gradient(to bottom, #87CEEB, #ADD8E6);
        color: #333; /* Morning Sky - Dark text*/
    }
    50%  {
        background: linear-gradient(to bottom, #5c9be0, #87CEFA);
        color: #333; /* Midday - Dark text*/
    }
    65%  {
        background: linear-gradient(to bottom, #87CEEB, #ADD8E6);
        color: #333; /* Afternoon Sky - Dark text*/
    }
    75%  {
        background: linear-gradient(to bottom, #ff6a00, #ee0979);
        color: #e0e0e0; /* Sunset - Light text */
    }
    85%  {
        background: linear-gradient(to bottom, #4a2a6c, #2a1a3a);
        color: #e0e0e0; /* Dusk - Light text */
    }
    100% {
        background: linear-gradient(to bottom, #00001a, #1a1a2a);
        color: #e0e0e0; /* Midnight - Light text */
    }
}
/* Text color (and other elements) should adapt */
/* We need a way to signal the time of day. Since we can't use JS to add classes, */
/* we rely on the text color being adaptable, or make elements adapt based */
/* on perceived brightness. Let's stick to light text as default */
/* and make content box/inputs adapt */


/* --- Stars Layer --- */
.stars {
    position: absolute; /* Positioned within sky-background-container */
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    opacity: 0;
    z-index: -1; /* Above sky gradient, below sun/moon within this container */
    will-change: opacity;
    animation: starsFade var(--cycle-duration) linear infinite;
}
.stars-layer-1 {
    box-shadow: /* Paste pre-generated stars */;
    animation: starsFade var(--cycle-duration) linear infinite, twinkle 4s linear infinite alternate;
}
.stars-layer-2 {
    box-shadow: /* Paste different pre-generated stars */;
    animation: starsFade var(--cycle-duration) linear infinite, twinkle 6s linear infinite alternate;
    animation-delay: 1s;
}
@keyframes starsFade { /* Same as before */
    0% { opacity: 0.9; } 20% { opacity: 0; } 80% { opacity: 0; } 100% { opacity: 0.9; }
}
@keyframes twinkle { /* Same as before */
    0% { opacity: 0.6; } 50% { opacity: 0.9; } 100% { opacity: 0.6; }
}

/* --- Sun/Moon SVG Styling & Animation (within sky-background-container) --- */
#sun-moon-svg {
position: absolute; /* Positioned within sky-background-container */
width: 15vmin; height: 15vmin; max-width: 120px; max-height: 120px;
z-index: 0; /* Above stars within this container */
will-change: transform;
animation: sunPath var(--cycle-duration) linear infinite;
}
#sun-moon {
animation: sunMoonTransform var(--cycle-duration) linear infinite;
transform-origin: center center;
}
.sun-body, .moon-body, .face {
    transition: opacity 0.8s ease-in-out, fill 0.8s ease-in-out;
    will-change: opacity, fill;
}
.moon-body { opacity: 0; fill: #d5e0f0; }
@keyframes sunPath { /* Same as before */
    0% { transform: translate(-20vw, 100vh) rotate(-90deg); }
    25% { transform: translate(15vw, 15vh) rotate(0deg); }
    50% { transform: translate(50vw, 5vh) rotate(90deg); }
    75% { transform: translate(85vw, 15vh) rotate(180deg); }
    100% { transform: translate(120vw, 100vh) rotate(270deg); }
}
@keyframes sunMoonTransform {
    /* Night Time: 0-20% and 80-100% */
    0%, 20% { /* Moon visible */
        opacity: 1;
    }
    0%   { /* Midnight - Moon phase */
        transform: scale(0.5) rotate(-30deg); /* Rotate to keep face upright */
    }
    15% { /* Moon settings*/
        opacity: 1;
    }
    20% { /* Moon faded just before dawn */
        opacity: 0;
    }
    /* ---- Transition Dawn ---- */
    21% { /* Sun starts appearing */
        opacity: 0; /* Start sun hidden */
    }
    25% { /* Sun visible */
        opacity: 1;
        transform: scale(1.0) rotate(-90deg); /* Keep rotation for face alignment*/
    }
    /* Day Time: 25% - 75% */
    25%, 75% {
        opacity: 1; /* Sun stays visible */
    }
    /* ---- Transition Dusk ---- */
    78% { /* Sun starts setting/fading */
        opacity: 1;
    }
    80% { /* Sun faded */
        opacity: 0;
    }
    /* Moon appears after dusk */
    81% {
        opacity: 0; /* Start moon hidden */
    }
    85%, 100% { /* Moon visible for night */
        opacity: 1;
        transform: scale(0.5) rotate(-90deg); /* Keep rotation */
    }

}
/* Individual part animations (sunBodyTransform, moonBodyTransform, faceTransform) same as before */
@keyframes sunBodyTransform { 0%, 20% { opacity: 0; } 25%, 75% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes moonBodyTransform { 0%, 15% { opacity: 0.8; } 20%, 80% { opacity: 0; } 85%, 100% { opacity: 0.8; } }
@keyframes faceTransform { 0%, 15% { fill: #bbb; transform: translate(0px, 2px); } 20%, 80% { fill: #333; transform: translate(0px, 0px); } 85%, 100% { fill: #bbb; transform: translate(0px, 2px); } }

/* Apply animations */
#sun-moon .sun-body { animation: sunBodyTransform var(--cycle-duration) linear infinite; }
#sun-moon .moon-body { animation: moonBodyTransform var(--cycle-duration) linear infinite; }
#sun-moon .face { animation: faceTransform var(--cycle-duration) linear infinite; }


/* --- SVG Clouds Styling & Animation (within clouds-container) --- */
.clouds-svg {
    width: 100%;
    height: 100%;
    position: absolute; /* Make positioning work within container */
    top: 0;
    left: 0;
}

.cloud {
    opacity: 0.65; /* Slightly less opaque clouds */
    fill: #f0f8ff; /* Alice blue - slightly blueish white */
    will-change: transform;
    /* Add subtle filter for softer edges? Optional */
    /* filter: url(#cloudSoftBlur); */ /* Requires adding filter definition */
    /* Define filter in clouds-svg's <defs> if used: */
    /* <filter id="cloudSoftBlur"><feGaussianBlur stdDeviation="1"/></filter> */
    /* Ensure initial transform starts off-screen */
    transform: translateX(-200%); /* Default start */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Re-introduce cloud movement keyframes */
@keyframes moveCloudLeftToRight {
    from { transform: translateX(-150%) translateY(var(--cloud-y-pos)) scale(var(--cloud-scale)); }
    to   { transform: translateX(150vw) translateY(var(--cloud-y-pos)) scale(var(--cloud-scale)); }
}
@keyframes moveCloudRightToLeft {
    from { transform: translateX(150vw) translateY(var(--cloud-y-pos)) scale(var(--cloud-scale)); }
    to   { transform: translateX(-150%) translateY(var(--cloud-y-pos)) scale(var(--cloud-scale)); }
}

/* Re-apply individual cloud animations (adjust duration/delay as needed) */
#cloud1 {
--cloud-y-pos: 15vh; --cloud-scale: 1.0;
animation-name: moveCloudLeftToRight;
animation-duration: 70s; animation-delay: 1s;
opacity: 0.6;
}
#cloud2 {
--cloud-y-pos: 50vh; --cloud-scale: 0.9;
animation-name: moveCloudLeftToRight;
animation-duration: 90s; animation-delay: 8s;
opacity: 0.7;
}
#cloud3 {
--cloud-y-pos: 75vh; --cloud-scale: 1.0;
animation-name: moveCloudRightToLeft;
animation-duration: 60s; animation-delay: 3s;
opacity: 0.75;
}
#cloud4 {
--cloud-y-pos: 30vh; --cloud-scale: 1.1;
animation-name: moveCloudRightToLeft;
animation-duration: 80s; animation-delay: 12s;
opacity: 0.7;
}
#cloud5 {
--cloud-y-pos: 8vh; --cloud-scale: 0.8;
animation-name: moveCloudLeftToRight;
animation-duration: 100s; animation-delay: 5s;
opacity: 0.55; /* Wispiest */
}

/* Cloud opacity change during night? Optional */
/* This requires syncing with the main cycle */
.cloud {
    animation: cloudFade var(--cycle-duration) linear infinite, /* Movement animation added below */ ;
}
#cloud1 { animation: cloudFade var(--cycle-duration) linear infinite, moveCloudLeftToRight 70s linear infinite 1s; }
#cloud2 { animation: cloudFade var(--cycle-duration) linear infinite, moveCloudLeftToRight 90s linear infinite 8s; }
#cloud3 { animation: cloudFade var(--cycle-duration) linear infinite, moveCloudRightToLeft 60s linear infinite 3s; }
#cloud4 { animation: cloudFade var(--cycle-duration) linear infinite, moveCloudRightToLeft 80s linear infinite 12s; }
#cloud5 { animation: cloudFade var(--cycle-duration) linear infinite, moveCloudLeftToRight 100s linear infinite 5s; }


@keyframes cloudFade {
    /* Fade clouds slightly at night */
    0%   { opacity: 0.4; } /* Midnight base */
    15%  { opacity: 0.45; } /* Pre-dawn */
    25%  { opacity: 0.6; }  /* Dawn */
    35%, 65% { opacity: 0.7; } /* Day */
    75%  { opacity: 0.6; }  /* Sunset */
    85%  { opacity: 0.45; } /* Dusk */
    100% { opacity: 0.4; } /* Midnight */
}


/* --- Header, Main, Footer, Content Box Styling --- */
/* Crucially, ensure these have z-index >= 1 */

.page-header, .page-footer, .content-main {
    position: relative; /* Needed for z-index */
    z-index: 1; /* Above all background layers */
}

/* Rest of the styles for header, footer, main, content-box, forms */
/* remain the same as the previous step. */




/* --- Header --- */
.page-header {
    padding: 0 5%;
    text-align: center;
    position: relative; /* Changed from fixed to relative */
    z-index: 1; /* Ensure header is above SVG */
    flex-shrink: 0;
    /* Optional: subtle background to help text readability over clouds */
    /* background-color: rgba(92, 155, 224, 0.1); */
    /* backdrop-filter: blur(1px); */
    /* -webkit-backdrop-filter: blur(1px); */
}
/* Styles for h1, tagline, .menu remain the same as previous cloud version... */
.page-header h1 {
    font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
    margin-bottom:  calc(1vh + 1vw);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6); /* Readability shadow */
}
.page-header .tagline {
    font-size: clamp(0.9rem, 2vw + 0.5rem, 1.1rem);
    font-style: italic;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.menu-item,
.page-header .menu a,
.page-footer .menu a {
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    background-color: rgba(255, 255, 255, 0.15); /* Slight background */
    text-shadow: none;
    color: inherit;
}
.page-header .menu a:hover,
.page-header .menu button[type="submit"],
.page-footer .menu a:hover,
.page-header .menu a:focus,
.page-footer .menu a:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

.logo {
    height:10vh;
    position: relative;
    top:4vh;
}

/* --- Main Content Area --- */
.content-main {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 5%;
    position: relative; /* Changed from fixed to relative */
    z-index: 1; /* Ensure main is above SVG */
    width: 100%;
    overflow: hidden;
}

/* --- Content Box (Video & Form Sections) --- */
.content-box {
    /* Make background slightly less opaque maybe */
    background-color: rgba(10, 20, 40, 0.8); /* Darker blue tint */
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px); /* Slightly more blur */
    -webkit-backdrop-filter: blur(6px);
    max-width: 1800px;
    width: 75%;
    min-width:300px;
    max-height: 85vh;
    min-height: 200px;
    overflow: hidden;
    border: 1px solid rgba(200, 220, 255, 0.2); /* Lighter border */
    position: relative; /* Ensure stacking context if needed */
    z-index: 2; /* Ensure content box is above SVG */
}
/* Styles for .video-container, .video-wrapper, .contact-container, form elements */
/* remain largely the same as the previous cloud version. Adjust colors if needed. */
/* Example color adjustments: */
.contact-container {
    max-heigh.t: calc(80vh - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6a9ce5 rgba(10, 20, 40, 0.8); /* Adjust scrollbar */
}
.contact-container::-webkit-scrollbar { width: 8px; }
.contact-container::-webkit-scrollbar-track { background: rgba(10, 20, 40, 0.5); border-radius: 4px; }
.contact-container::-webkit-scrollbar-thumb { background-color: #6a9ce5; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }

.contact-container h2 {
    font-size: clamp(1.3rem, 3vw + 0.5rem, 1.8rem);
    border-bottom: 1px solid #6a9ce5; /* Match sky color */
    text-align: center;
}
#contact-form { display: flex; flex-direction: column; gap: 0.8rem; }
.form-group { margin-bottom: 0; }
.form-group label { display: block; margin-bottom: 0.3rem; font-weight: bold; color: #d0e0f0; font-size: clamp(0.85rem, 1.5vw + 0.5rem, 1rem); }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%; padding: 0.5rem 0.8rem;
    border: 1px solid #6a9ce5; /* Match sky color */
    border-radius: 4px;
    background-color: rgba(30, 60, 100, 0.8); /* Adjust input background */
    color: #e8f0ff; font-size: clamp(0.9rem, 1.5vw + 0.5rem, 1rem);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none; border-color: #aaccff;
    box-shadow: 0 0 0 2px rgba(170, 204, 255, 0.4); /* Lighter focus ring */
}
.form-group textarea { resize: none; min-height: 60px; line-height: 1.4; }
button[type="submit"] {
    display: inline-block; padding: 0.6rem 1.5rem;
    background-color: #3a7bd5; /* Match darker sky blue */
    color: #ffffff; border: none; border-radius: 4px;
    font-size: clamp(0.9rem, 1.5vw + 0.5rem, 1rem); font-weight: bold; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase; letter-spacing: 0.5px; margin-top: 0.5rem; align-self: center;
}
button[type="submit"]:hover, button[type="submit"]:focus { background-color: #4a8be0; outline: none; transform: translateY(-1px); }
button[type="submit"]:active { transform: translateY(0); }


/* --- Footer --- */
.page-footer {
    padding: clamp(0.5rem, 1.5vh, 1rem) 5%;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Lighter separator */
    position: relative; /* Changed from fixed to relative */
    z-index: 1; /* Ensure footer is above SVG */
    flex-shrink: 0;
    /* Optional background/blur */
    /* background-color: rgba(92, 155, 224, 0.1); */
    /* backdrop-filter: blur(1px); */
    /* -webkit-backdrop-filter: blur(1px); */
}
.page-footer .menu { margin-bottom: 0.3rem; }
.page-footer p { margin-bottom: 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); }





/* Ensure text color is consistently readable (e.g., light default) */
/* and content box/inputs adapt their background/borders */

/* Example reminder for content box adaptation: */
.content-box {
    background-color: rgba(0, 0, 0, 0.4); /* Darker base for light text */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e0e0e0; /* Ensure text color is light */
    /* ... other styles ... */
    transition: background-color 1s ease-in-out, border-color 1s ease-in-out;
}
/* Lighten content box during day */
body:not(.is-night):not(.is-dawn):not(.is-dusk) .content-box {
    /* This approach requires JS classes. Reverting to a static style */
    /* that works reasonably well across phases. */
    /* Or use mix-blend-mode if desperate, but tricky */
    background-color: rgba(30, 40, 60, 0.6); /* Neutral dark blueish */
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 220, 255, 0.2);
}

/* Input styling needs to be consistent */
.form-group input, .form-group textarea {
    color: #e0e0e0;
    background-color: rgba(10, 20, 40, 0.7);
    border: 1px solid rgba(180, 200, 230, 0.3);
    /* ... other styles ... */
}
.form-group input {
    text-align:center;
}
button[type="submit"] {
    background-color: rgba(200, 220, 255, 0.2);
    color: #e0e0e0;
    border: 1px solid rgba(200, 220, 255, 0.4);
    /* ... other styles ... */
}


/* --- Responsive Adjustments --- */
/* Apply previous media queries, potentially adjusting cloud variables too */
@media (max-height: 600px) and (orientation: landscape) {
    /* Adjust sunPath keyframes */
    @keyframes sunPath { /* Copied from previous step */
        0% { transform: translate(-20vw, 100vh) rotate(-90deg); }
        25% { transform: translate(15vw, 25vh) rotate(0deg); }
        50% { transform: translate(50vw, 10vh) rotate(90deg); }
        75% { transform: translate(85vw, 25vh) rotate(180deg); }
        100% { transform: translate(120vw, 100vh) rotate(270deg); }
    }
    /* Maybe reduce cloud scale/opacity */
    #cloud1 { --cloud-scale: 0.8; }
    #cloud3 { --cloud-scale: 0.9; }
    /* Other responsive styles... */
}
@media (orientation: portrait) {
    .menu { flex-direction: column; }
}
/* ... other media queries ... */
@media (max-height: 600px) and (orientation: landscape) {
    /* Shrink text, padding etc. */
    .page-header { padding: 0.5rem 5%; }
    .page-header h1 { font-size: clamp(1.5rem, 3vw + 1rem, 1.8rem); }
    .page-header .tagline { font-size: clamp(0.8rem, 1.5vw + 0.5rem, 0.9rem); margin-bottom: 0.3rem;}
    .page-header .menu a, .page-footer .menu a { padding: 0.1rem 0.4rem; margin: 0 0.3rem;}
    .content-main { padding: 0.5rem 5%; }
    .content-box { padding: clamp(0.8rem, 2vw, 1.2rem); max-height: 90vh; }
    .video-wrapper { max-height: calc(80vh - 3rem); }
    .contact-container { max-height: calc(90vh - 3rem); }
    .contact-container h2 { font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.4rem); margin-bottom: 0.5rem;}
    #contact-form { gap: 0.5rem; }
    .form-group label { font-size: clamp(0.8rem, 1.2vw + 0.5rem, 0.9rem); margin-bottom: 0.1rem;}
    .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { padding: 0.4rem 0.6rem; font-size: clamp(0.8rem, 1.2vw + 0.5rem, 0.9rem);}
    button[type="submit"] { padding: 0.5rem 1rem; font-size: clamp(0.8rem, 1.2vw + 0.5rem, 0.9rem); }
    .page-footer { padding: 0.3rem 5%; font-size: 0.7rem; }

    /* Adjust cloud density/size for landscape? */
    #cloud1 { --cloud-y-pos: 5vh; --cloud-scale: 0.9; }
    #cloud2 { --cloud-y-pos: 30vh; }
    #cloud3 { --cloud-y-pos: 60vh; --cloud-scale: 0.8; }
    #cloud4 { --cloud-y-pos: 15vh; --cloud-scale: 1.0; }
    #cloud5 { --cloud-y-pos: 75vh; animation-duration: 120s; } /* Make slowest cloud slower */
}

@media (max-height: 450px) {
    .page-header h1 { font-size: clamp(1.4rem, 3vw + 1rem, 1.6rem); }
    button[type="submit"] { padding: 0.4rem 0.8rem; }
    /* Maybe hide tagline or further reduce cloud opacity/number */
    /* .page-header .tagline { display: none; } */
    #cloud5 { display: none; } /* Hide one cloud on very small screens */
}


/* --- Accessibility --- */
.sr-only { /* Screen Reader Only */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a:focus, button:focus, input:focus, textarea:focus, iframe:focus {
    outline: 2px solid #ffffff; /* White focus outline */
    outline-offset: 1px;
}
.contact-container:focus-within { /* Optional focus indication for scrollable form */ }
.content-box { padding-top:0px; }