/* ============================================================
   DAY SKY ANIMATED EFFECTS
   Per-variant: sun glow orb + wavy horizon haze
   Sits above WebGL canvas, below birds (DOM order stacking)
   ============================================================ */

/* ── Base overlay ── */
.day-sky-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;               /* hidden in night */
}

body[data-theme="light"] .day-sky-glow {
    display: block;
}

/* shared pseudo-element reset */
.day-sky-glow::before,
.day-sky-glow::after {
    content: '';
    position: absolute;
}


/* ══════════════════════════════════════════════════════════
   CREAM — warm golden morning light
   ══════════════════════════════════════════════════════════ */

body[data-theme="light"][data-day-variant="cream"] .day-sky-glow::before {
    /* Sun orb — upper right, soft diffused */
    top: 3%;
    right: 8%;
    width: 52%;
    height: 48%;
    background: radial-gradient(ellipse at center,
        rgba(230, 215, 185, 0.14) 0%,
        rgba(210, 200, 175, 0.06) 45%,
        transparent 72%
    );
    filter: blur(5px);
    animation: cream-sun-breathe 13s ease-in-out infinite;
}

body[data-theme="light"][data-day-variant="cream"] .day-sky-glow::after {
    /* Horizon warm haze — soft undulation */
    bottom: 0;
    left: -6%;
    right: -6%;
    height: 38%;
    background: linear-gradient(to top,
        rgba(200, 210, 215, 0.10) 0%,
        rgba(215, 218, 215, 0.04) 45%,
        transparent 100%
    );
    animation: cream-horizon-wave 20s ease-in-out infinite;
}

@keyframes cream-sun-breathe {
    0%, 100% { opacity: 0.60; transform: scale(1); }
    50%       { opacity: 0.90; transform: scale(1.07); }
}

@keyframes cream-horizon-wave {
    0%   { transform: translateX(0)    scaleX(1); }
    30%  { transform: translateX(-2%)  scaleX(1.02); }
    65%  { transform: translateX(2.5%) scaleX(1.01); }
    100% { transform: translateX(0)    scaleX(1); }
}


/* ══════════════════════════════════════════════════════════
   WHITE — clean crisp sky, cool shimmer
   ══════════════════════════════════════════════════════════ */

body[data-theme="light"][data-day-variant="white"] .day-sky-glow::before {
    /* Cool sun halo — upper center-right */
    top: 2%;
    right: 15%;
    width: 58%;
    height: 42%;
    background: radial-gradient(ellipse at center,
        rgba(215, 238, 255, 0.20) 0%,
        rgba(195, 225, 255, 0.08) 48%,
        transparent 72%
    );
    filter: blur(3px);
    animation: white-sun-breathe 14s ease-in-out infinite;
}

body[data-theme="light"][data-day-variant="white"] .day-sky-glow::after {
    /* Cool horizon haze — slow gentle drift */
    bottom: 0;
    left: -5%;
    right: -5%;
    height: 30%;
    background: linear-gradient(to top,
        rgba(190, 220, 255, 0.10) 0%,
        rgba(210, 235, 255, 0.04) 50%,
        transparent 100%
    );
    animation: white-horizon-wave 24s ease-in-out infinite;
}

@keyframes white-sun-breathe {
    0%, 100% { opacity: 0.60; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.05); }
}

@keyframes white-horizon-wave {
    0%   { transform: translateX(0)    scaleX(1); }
    50%  { transform: translateX(-2%)  scaleX(1.02); }
    100% { transform: translateX(0)    scaleX(1); }
}


/* ══════════════════════════════════════════════════════════
   SEPIA — warm dusty golden-hour amber
   ══════════════════════════════════════════════════════════ */

body[data-theme="light"][data-day-variant="sepia"] .day-sky-glow::before {
    /* Soft overcast glow — muted warm-grey, upper right */
    top: 3%;
    right: 6%;
    width: 58%;
    height: 54%;
    background: radial-gradient(ellipse at center,
        rgba(200, 190, 175, 0.14) 0%,
        rgba(180, 172, 160, 0.06) 42%,
        transparent 70%
    );
    filter: blur(6px);
    animation: sepia-sun-breathe 12s ease-in-out infinite;
}

body[data-theme="light"][data-day-variant="sepia"] .day-sky-glow::after {
    /* Hazy warm horizon — gentle drift */
    bottom: 0;
    left: -8%;
    right: -8%;
    height: 40%;
    background: linear-gradient(to top,
        rgba(185, 180, 168, 0.10) 0%,
        rgba(195, 190, 180, 0.04) 45%,
        transparent 100%
    );
    animation: sepia-horizon-wave 16s ease-in-out infinite;
}

@keyframes sepia-sun-breathe {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 0.85; transform: scale(1.08); }
}

@keyframes sepia-horizon-wave {
    0%   { transform: translateX(0)   scaleX(1.01); }
    35%  { transform: translateX(2.5%)  scaleX(1.03); }
    70%  { transform: translateX(-2%) scaleX(1.01); }
    100% { transform: translateX(0)   scaleX(1.01); }
}


/* ══════════════════════════════════════════════════════════
   SAGE — misty morning, diffused green-tinted light
   ══════════════════════════════════════════════════════════ */

body[data-theme="light"][data-day-variant="sage"] .day-sky-glow::before {
    /* Soft green-white light — upper left, like morning through leaves */
    top: 1%;
    left: 4%;
    width: 55%;
    height: 46%;
    background: radial-gradient(ellipse at center,
        rgba(130, 215, 170, 0.20) 0%,
        rgba(100, 188, 148, 0.08) 46%,
        transparent 72%
    );
    filter: blur(4px);
    animation: sage-sun-breathe 16s ease-in-out infinite;
}

body[data-theme="light"][data-day-variant="sage"] .day-sky-glow::after {
    /* Misty sage horizon — very slow, wide wave */
    bottom: 0;
    left: -6%;
    right: -6%;
    height: 36%;
    background: linear-gradient(to top,
        rgba(100, 180, 140, 0.13) 0%,
        rgba(130, 205, 162, 0.05) 45%,
        transparent 100%
    );
    animation: sage-horizon-wave 26s ease-in-out infinite;
}

@keyframes sage-sun-breathe {
    0%, 100% { opacity: 0.65; transform: scale(1) translateX(0); }
    50%       { opacity: 1;    transform: scale(1.07) translateX(1.5%); }
}

@keyframes sage-horizon-wave {
    0%   { transform: translateX(0)     scaleX(1); }
    33%  { transform: translateX(-3%)   scaleX(1.03); }
    66%  { transform: translateX(3%)    scaleX(1.01); }
    100% { transform: translateX(0)     scaleX(1); }
}

/* ══════════════════════════════════════════════════════════
   MOBILE — reduce glow size so it doesn't cover content
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Shrink all sun orbs */
    body[data-theme="light"] .day-sky-glow::before {
        width: 70% !important;
        height: 25% !important;
        top: 1% !important;
        opacity: 0.6;
    }

    /* Reduce horizon haze height so it doesn't cover page content */
    body[data-theme="light"] .day-sky-glow::after {
        height: 18% !important;
    }
}