/* bada.day — Watercolor Day Cycle
   Full palette from DESIGN.md:
   #FCE4D6  pale peach (dawn bg)
   #D4A5A5  dusty rose (dawn accent)
   #E8F4F8  morning mist (morning bg)
   #7BB8C9  coastal blue (morning accent)
   #F7F4E9  warm cream (noon bg)
   #D4C472  golden (noon accent)
   #E8E2D0  warm sand (afternoon bg)
   #B89B6A  amber (afternoon accent)
   #F5C9A8  coral glow (sunset bg)
   #C75B3E  deep coral (sunset accent)
   #3A3660  dusk violet (dusk bg)
   #8B7AAD  lavender (dusk accent)
   #141230  midnight (night bg)
   #4A5899  night blue (night accent)
   #D8D4E0  moonlight (light text)
   #2C2C2C  dark text
*/

:root {
    /* Dawn */
    --dawn-bg: #FCE4D6;
    --dawn-accent: #D4A5A5;
    /* Morning */
    --morning-bg: #E8F4F8;
    --morning-accent: #7BB8C9;
    /* Noon */
    --noon-bg: #F7F4E9;
    --noon-accent: #D4C472;
    /* Afternoon */
    --afternoon-bg: #E8E2D0;
    --afternoon-accent: #B89B6A;
    /* Sunset */
    --sunset-bg: #F5C9A8;
    --sunset-accent: #C75B3E;
    /* Dusk */
    --dusk-bg: #3A3660;
    --dusk-accent: #8B7AAD;
    /* Night */
    --night-bg: #141230;
    --night-accent: #4A5899;
    /* Text */
    --text-dark: #2C2C2C;
    --text-light: #D8D4E0;
    /* Current phase (updated by JS) */
    --bg: #FCE4D6;
    --accent: #D4A5A5;
    --text: #2C2C2C;
    --horizon-color: #D4A5A5;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Spectral', serif;
    font-weight: 300;
    line-height: 1.85;
    overflow-x: hidden;
    transition: background-color 0.4s ease;
}

/* ==========================================
   HORIZON LINE — persistent at 60vh
   ========================================== */
.horizon {
    position: fixed;
    top: 60vh;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--horizon-color);
    opacity: 0.3;
    z-index: 5;
    pointer-events: none;
    transition: background 0.4s ease, opacity 0.4s ease;
}

/* ==========================================
   SEA TEXTURE — below horizon
   ========================================== */
.sea-texture {
    position: fixed;
    top: 60vh;
    left: 0;
    width: 100%;
    height: 40vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 6px,
            rgba(123, 184, 201, 0.04) 6px,
            rgba(123, 184, 201, 0.04) 7px
        ),
        repeating-linear-gradient(
            2deg,
            transparent,
            transparent 12px,
            rgba(123, 184, 201, 0.025) 12px,
            rgba(123, 184, 201, 0.025) 13px
        );
    animation: seaShift 12s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

@keyframes seaShift {
    0%, 100% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(8px) translateY(1px); }
    66% { transform: translateX(-5px) translateY(-1px); }
}

/* ==========================================
   CELESTIAL BODY — Sun / Moon arc
   ========================================== */
.celestial {
    position: fixed;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #D4C472;
    box-shadow: 0 0 24px rgba(212, 196, 114, 0.45);
    z-index: 4;
    pointer-events: none;
    transition: background 0.5s ease, box-shadow 0.5s ease, width 0.5s ease, height 0.5s ease;
    left: 10vw;
    top: 55vh;
}

.celestial-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 196, 114, 0.2), transparent 70%);
    pointer-events: none;
    transition: background 0.5s ease;
}

/* ==========================================
   LIGHT PARTICLES
   ========================================== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(212, 196, 114, 0.5);
    pointer-events: none;
    animation: particleDrift 14s ease-in-out infinite;
    transition: background 0.5s ease, opacity 0.5s ease;
}

.p1 { top: 15%; left: 12%; animation-duration: 16s; }
.p2 { top: 28%; left: 38%; animation-duration: 13s; animation-delay: 1.5s; }
.p3 { top: 22%; left: 62%; animation-duration: 18s; animation-delay: 3s; }
.p4 { top: 40%; left: 78%; animation-duration: 15s; animation-delay: 0.5s; }
.p5 { top: 48%; left: 25%; animation-duration: 17s; animation-delay: 2.5s; }
.p6 { top: 12%; left: 85%; animation-duration: 14s; animation-delay: 4s; }
.p7 { top: 35%; left: 50%; animation-duration: 19s; animation-delay: 1s; }
.p8 { top: 55%; left: 70%; animation-duration: 16s; animation-delay: 3.5s; }

@keyframes particleDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.2; }
    20% { transform: translate(15px, -12px); opacity: 0.55; }
    40% { transform: translate(-8px, 8px); opacity: 0.15; }
    60% { transform: translate(20px, -5px); opacity: 0.5; }
    80% { transform: translate(-12px, 15px); opacity: 0.3; }
}

/* ==========================================
   STARS FIELD — visible during dusk / night
   ========================================== */
.stars-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease;
}

.star-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #D8D4E0;
    animation: starTwinkle 4s ease-in-out infinite;
}

.sd1  { top: 8%;  left: 15%; animation-delay: 0s; }
.sd2  { top: 12%; left: 35%; animation-delay: 1.2s; }
.sd3  { top: 5%;  left: 55%; animation-delay: 0.5s; }
.sd4  { top: 18%; left: 72%; animation-delay: 2.1s; }
.sd5  { top: 25%; left: 88%; animation-delay: 0.8s; }
.sd6  { top: 32%; left: 10%; animation-delay: 1.7s; }
.sd7  { top: 38%; left: 42%; animation-delay: 3.0s; }
.sd8  { top: 15%; left: 92%; animation-delay: 0.3s; }
.sd9  { top: 42%; left: 60%; animation-delay: 2.5s; }
.sd10 { top: 50%; left: 28%; animation-delay: 1.1s; }
.sd11 { top: 7%;  left: 78%; animation-delay: 3.3s; }
.sd12 { top: 20%; left: 48%; animation-delay: 0.7s; }
.sd13 { top: 35%; left: 82%; animation-delay: 2.8s; }
.sd14 { top: 45%; left: 18%; animation-delay: 1.5s; }
.sd15 { top: 10%; left: 5%;  animation-delay: 3.7s; }
.sd16 { top: 28%; left: 65%; animation-delay: 0.2s; }
.sd17 { top: 55%; left: 45%; animation-delay: 2.0s; }
.sd18 { top: 3%;  left: 30%; animation-delay: 1.8s; }
.sd19 { top: 48%; left: 75%; animation-delay: 3.5s; }
.sd20 { top: 22%; left: 20%; animation-delay: 0.9s; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.3); }
}

/* ==========================================
   DAY SECTIONS
   ========================================== */
.day-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    z-index: 6;
}

/* ==========================================
   WATERCOLOR WASHES — soft gradient blobs
   ========================================== */
.wash {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Dawn washes */
.wash-a {
    width: 65vw;
    height: 65vw;
    background: radial-gradient(ellipse at center, rgba(212, 165, 165, 0.22), transparent 60%);
    top: 5%;
    left: 8%;
}

.wash-b {
    width: 55vw;
    height: 50vw;
    background: radial-gradient(ellipse at center, rgba(139, 122, 173, 0.15), transparent 55%);
    top: 25%;
    right: 0;
}

.wash-c {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(ellipse at center, rgba(252, 228, 214, 0.3), transparent 60%);
    bottom: 10%;
    left: 25%;
}

/* Morning washes */
.wash-d {
    width: 70vw;
    height: 55vw;
    background: radial-gradient(ellipse at center, rgba(123, 184, 201, 0.18), transparent 60%);
    top: 5%;
    left: 10%;
}

.wash-e {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(ellipse at center, rgba(232, 244, 248, 0.25), transparent 60%);
    bottom: 15%;
    right: 5%;
}

/* Noon washes */
.wash-f {
    width: 65vw;
    height: 55vw;
    background: radial-gradient(ellipse at center, rgba(212, 196, 114, 0.18), transparent 60%);
    top: 8%;
    left: 15%;
}

.wash-g {
    width: 50vw;
    height: 45vw;
    background: radial-gradient(ellipse at center, rgba(247, 244, 233, 0.3), transparent 60%);
    bottom: 10%;
    right: 10%;
}

/* Afternoon washes */
.wash-h {
    width: 55vw;
    height: 55vw;
    background: radial-gradient(ellipse at center, rgba(184, 155, 106, 0.2), transparent 60%);
    top: 10%;
    right: 0;
}

.wash-i {
    width: 45vw;
    height: 45vw;
    background: radial-gradient(ellipse at center, rgba(245, 201, 168, 0.18), transparent 60%);
    bottom: 15%;
    left: 5%;
}

.wash-j {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(ellipse at center, rgba(232, 226, 208, 0.25), transparent 60%);
    top: 30%;
    left: 30%;
}

/* Sunset washes */
.wash-k {
    width: 65vw;
    height: 55vw;
    background: radial-gradient(ellipse at center, rgba(199, 91, 62, 0.18), transparent 60%);
    top: 8%;
    left: 10%;
}

.wash-l {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(ellipse at center, rgba(245, 201, 168, 0.22), transparent 60%);
    bottom: 15%;
    right: 5%;
}

.wash-m {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(ellipse at center, rgba(212, 196, 114, 0.15), transparent 60%);
    top: 25%;
    right: 20%;
}

/* Dusk washes */
.wash-n {
    width: 65vw;
    height: 60vw;
    background: radial-gradient(ellipse at center, rgba(139, 122, 173, 0.2), transparent 60%);
    top: 8%;
    left: 15%;
}

.wash-o {
    width: 50vw;
    height: 50vw;
    background: radial-gradient(ellipse at center, rgba(58, 54, 96, 0.15), transparent 60%);
    bottom: 10%;
    right: 10%;
}

/* Night washes */
.wash-p {
    width: 75vw;
    height: 65vw;
    background: radial-gradient(ellipse at center, rgba(74, 88, 153, 0.12), transparent 60%);
    top: 5%;
    left: 10%;
}

/* ==========================================
   SECTION CONTENT
   ========================================== */
.section-content {
    position: relative;
    z-index: 8;
    text-align: center;
    max-width: 560px;
}

/* Brand Name */
.brand-name {
    font-family: 'Cormorant Infant', serif;
    font-weight: 300;
    font-size: clamp(3.5rem, 10vw, 6.5rem);
    letter-spacing: 0.03em;
    opacity: 0.55;
    color: var(--text-dark);
    transition: color 0.5s ease;
}

.brand-tagline {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--dawn-accent);
    margin-top: 0.6rem;
    opacity: 0.7;
}

/* Time Markers */
.time-marker {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--accent);
    margin-bottom: 2rem;
    transition: color 0.4s ease;
}

.time-marker-light {
    color: #D8D4E0;
    opacity: 0.5;
}

/* Text Blocks — watercolor edge mask */
.text-block {
    -webkit-mask-image: radial-gradient(ellipse, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse, black 55%, transparent 100%);
    padding: 2.5rem 1.5rem;
}

/* Section Headings */
.section-heading {
    font-family: 'Cormorant Infant', serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin-bottom: 1.2rem;
    color: var(--text-dark);
    transition: color 0.4s ease;
}

.section-heading-light {
    color: #D8D4E0;
}

/* Section Body Text */
.section-body {
    font-family: 'Spectral', serif;
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(44, 44, 44, 0.72);
    transition: color 0.4s ease;
}

.section-body-light {
    color: rgba(216, 212, 224, 0.72);
}

/* ==========================================
   SEABIRDS
   ========================================== */
.seabird {
    position: absolute;
    width: 22px;
    height: 8px;
    z-index: 7;
    animation: seabirdFloat 8s ease-in-out infinite;
}

.seabird::before,
.seabird::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 3px;
    border-top: 1.5px solid rgba(44, 44, 44, 0.25);
    border-radius: 50% 50% 0 0;
}

.seabird::before { left: 0; transform: rotate(-15deg); }
.seabird::after { right: 0; transform: rotate(15deg); }

.seabird-1 { top: 28%; right: 18%; animation-delay: 0s; }
.seabird-2 { top: 22%; right: 30%; animation-delay: 2s; animation-duration: 10s; }

@keyframes seabirdFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-8px, -4px); }
    50% { transform: translate(5px, 2px); }
    75% { transform: translate(-3px, -6px); }
}

/* ==========================================
   CONSTELLATION
   ========================================== */
.constellation {
    position: absolute;
    top: 18%;
    left: 28%;
    width: 120px;
    height: 80px;
    z-index: 7;
    opacity: 0;
    transition: opacity 1s ease;
}

.const-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #D8D4E0;
    opacity: 0.7;
}

.cs1 { top: 18px; left: 12px; }
.cs2 { top: 10px; left: 50px; }
.cs3 { top: 22px; left: 90px; }
.cs4 { top: 58px; left: 70px; }
.cs5 { top: 65px; left: 40px; }

.const-lines {
    position: absolute;
    top: 0;
    left: 0;
}

/* ==========================================
   SECTION-SPECIFIC BACKGROUNDS
   ========================================== */
.dawn-section { background: transparent; }
.morning-section { background: transparent; }
.noon-section { background: transparent; }
.afternoon-section { background: transparent; }
.sunset-section { background: transparent; }
.dusk-section { background: transparent; }
.night-section { background: transparent; }

/* ==========================================
   SCROLL-TRIGGERED VISIBILITY
   ========================================== */
.day-section .wash {
    opacity: 1;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .text-block {
        -webkit-mask-image: none;
        mask-image: none;
        padding: 2rem 1rem;
    }

    .wash {
        opacity: 0.5;
    }

    .section-content {
        max-width: 90vw;
    }

    .brand-name {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .seabird-2 {
        display: none;
    }
}

@media (max-width: 480px) {
    .day-section {
        padding: 4rem 1.5rem;
    }

    .time-marker {
        font-size: 0.6rem;
    }

    .section-body {
        font-size: 0.88rem;
    }
}