/* Starlight site theme — the default night sky with moving stars.
   Linked by tarot_app.apply_site_theme() when SITE_THEME=starlight.
   Keeps the default background; two star layers drift at different speeds (parallax)
   and twinkle out of phase, and a shooting star crosses now and then.
   Decoration layers sit at z-index -1: above the page background, below every page's content. */

/* Far layer: small, dim stars drifting slowly up and to the left */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 70px 110px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 130px 60px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 180px 160px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 100px 190px, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 40px 170px, rgba(200, 220, 255, 0.8), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
    animation:
        site-theme-drift-far 120s linear infinite,
        site-theme-twinkle 4s ease-in-out infinite alternate;
}

/* Near layer: larger gold and white stars drifting faster, twinkling out of phase */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(2px 2px at 40px 50px, #ffd700, transparent),
        radial-gradient(2.5px 2.5px at 210px 120px, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2px 2px at 120px 250px, rgba(255, 215, 0, 0.85), transparent),
        radial-gradient(3px 3px at 280px 220px, rgba(255, 236, 160, 0.9), transparent),
        radial-gradient(2px 2px at 300px 40px, rgba(200, 220, 255, 0.9), transparent);
    background-size: 340px 300px;
    background-repeat: repeat;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.6));
    animation:
        site-theme-drift-near 60s linear infinite,
        site-theme-twinkle 2.6s ease-in-out -1.3s infinite alternate;
}

/* Shooting star: a thin gold streak that crosses the upper sky once per cycle */
html::after {
    content: '';
    position: fixed;
    top: 12vh;
    left: 70vw;
    width: 140px;
    height: 2px;
    pointer-events: none;
    z-index: -1;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 236, 160, 0.95), rgba(255, 215, 0, 0.4) 40%, transparent);
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.8));
    opacity: 0;
    transform: rotate(-35deg) translateX(0);
    transform-origin: left center;
    animation: site-theme-shooting-star 11s ease-in 3s infinite;
}

@keyframes site-theme-drift-far {
    from { background-position: 0 0; }
    to { background-position: -200px -200px; }
}

@keyframes site-theme-drift-near {
    from { background-position: 0 0; }
    to { background-position: -340px -300px; }
}

@keyframes site-theme-twinkle {
    from { opacity: 0.35; }
    to { opacity: 0.9; }
}

@keyframes site-theme-shooting-star {
    0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
    2% { opacity: 1; }
    9% { opacity: 0; transform: rotate(-35deg) translateX(-45vw); }
    100% { opacity: 0; transform: rotate(-35deg) translateX(-45vw); }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none;
        opacity: 0.7;
    }

    html::after {
        display: none;
    }
}