/* ============================================================================
   kids-sky-bg.css — dynamic, switchable sky backgrounds for Kids pages
   ----------------------------------------------------------------------------
   The single source of truth for the decorative sky on the kids home
   (kids.html) and the kids coloring page (coloring/kids-coloring.html). Markup
   is injected/managed by js/kids-sky-bg.js, which picks a theme from the time
   of day + weather and lets the child switch via the bottom-right picker.

   Themes (each a `body.sky-theme-*` class + element classes below):
     • day   — peach→blue→mint sky, bobbing sun, drifting clouds (the original)
     • night — deep indigo sky, glowing moon, a slowly-rotating starfield

   Link this LAST (after kids-home.css / kids-sky.css) so the night background
   override wins. New themes: add a `body.sky-theme-<x>` background + element
   styles here and register the renderer in kids-sky-bg.js.

   The `.kids-sky` container itself (fixed, inset:0, z-index:0) is defined in
   kids-home.css / kids-sky.css and reused here.
   ============================================================================ */

/* ---- Day: sun + clouds (page-independent copy of the original visuals) ----- */
.sky-sun {
    position: absolute;
    top: -36px;
    right: 6%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #FFF3C9 0%, #FFD86B 60%, #FFC83D 100%);
    box-shadow: 0 0 0 22px rgba(255, 233, 168, 0.45), 0 0 70px 30px rgba(255, 216, 107, 0.4);
    animation: skySunBob 7s ease-in-out infinite;
}
.sky-cloud {
    position: absolute;
    background: #ffffff;
    border-radius: 100px;
    opacity: 0.92;
    filter: drop-shadow(0 8px 14px rgba(120, 150, 190, 0.18));
}
.sky-cloud::before,
.sky-cloud::after {
    content: '';
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}
.sky-cloud::before { width: 56%; height: 150%; left: 14%; top: -55%; }
.sky-cloud::after  { width: 44%; height: 130%; right: 12%; top: -38%; }

@keyframes skyDrift { to { transform: translateX(calc(100vw + 400px)); } }
@keyframes skySunBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(10px) rotate(3deg); }
}

/* ---- Night: dark sky + moon + slowly rotating stars ----------------------- */
/* Equal specificity to body.kids-bg / body.kids-sky-theme; wins by being
   loaded last. Day keeps each page's existing gradient (no override here). */
body.sky-theme-night {
    background: linear-gradient(180deg, #0a0f24 0%, #141a3c 45%, #232149 78%, #2c2350 100%);
    background-attachment: fixed;
}

.sky-moon {
    position: absolute;
    top: -10px;
    right: 7%;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fdfbf1 0%, #eceefb 52%, #c7cce8 100%);
    box-shadow: 0 0 0 14px rgba(210, 220, 255, 0.10),
                0 0 60px 22px rgba(190, 205, 255, 0.28);
    animation: skySunBob 9s ease-in-out infinite;
}
/* Two soft craters for a touch of character. */
.sky-moon::before,
.sky-moon::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(180, 188, 220, 0.35);
}
.sky-moon::before { width: 26px; height: 26px; top: 30%; left: 28%; }
.sky-moon::after  { width: 16px; height: 16px; top: 58%; left: 56%; }

/* Big square centered on the viewport; rotating it sweeps every star around
   the screen center together — the "slow radial motion". */
.sky-stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160vmax;
    height: 160vmax;
    margin-top: -80vmax;
    margin-left: -80vmax;
    transform-origin: center center;
    animation: skyStarSpin 220s linear infinite;
}
.sky-star {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
    animation: skyTwinkle var(--tw, 4s) ease-in-out infinite;
}

/* ---- Night: legible text on the dark sky --------------------------------- */
/* Only text that sits DIRECTLY on the background (outside the white cards and
   panels) needs lightening; card/panel text keeps its dark ink on white. These
   override the day colors in kids-home.css / kids-sky.css by being loaded last
   and carrying the extra `body` element in the selector. */
body.sky-theme-night .kids-greeting {
    color: #EAF1FF;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
body.sky-theme-night .kids-cat-label,
body.sky-theme-night .kids-section-heading,
body.sky-theme-night .kids-shelf-title,
body.sky-theme-night .kids-end-message {
    color: #EAF1FF;
}
body.sky-theme-night .kids-greeting-sub,
body.sky-theme-night .kids-end-sub,
body.sky-theme-night .kids-loading {
    color: #C3CDEA;
}

@keyframes skyStarSpin { to { transform: rotate(360deg); } }
@keyframes skyTwinkle {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

/* ---- Background picker (bottom-right) ------------------------------------- */
/* The sky container is decorative (z-index:0, pointer-events:none); the picker
   is a separate interactive control that floats above the page. */
.sky-picker {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
}
.sky-picker select {
    appearance: none;
    -webkit-appearance: none;
    font-family: 'Baloo 2', 'Quicksand', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #34466B;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 100px;
    box-shadow: 0 8px 22px rgba(52, 70, 107, 0.20);
    padding: 8px 30px 8px 14px;
    cursor: pointer;
    /* Chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2334466B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.sky-picker select:focus-visible { outline: 2px solid #FFD86B; outline-offset: 2px; }
/* On a night sky the pill flips to a dark, legible treatment. */
body.sky-theme-night .sky-picker select {
    color: #EAF1FF;
    background-color: rgba(28, 34, 66, 0.78);
    border-color: rgba(150, 165, 220, 0.45);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23EAF1FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Native option list can't inherit the glass look; keep it readable. */
.sky-picker option { color: #34466B; background: #ffffff; }

/* Hide the picker when the coloring canvas takes over the screen. */
body.viewer-mode .sky-picker { display: none !important; }

/* ---- Reduced motion: everything renders static --------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sky-sun,
    .sky-cloud,
    .sky-moon,
    .sky-stars,
    .sky-star { animation: none !important; }
}