/* Subtle twinkles behind content, every page. */
.home-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-stars__star {
    position: absolute;
    width: var(--star-size, 1px);
    height: var(--star-size, 1px);
    margin: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fg) 55%, white);
    box-shadow:
        0 0 5px color-mix(in srgb, var(--fg) 45%, transparent),
        0 0 10px color-mix(in srgb, var(--muted) 25%, transparent);
    opacity: 0;
    animation: home-star-twinkle var(--star-duration, 7s) ease-in-out infinite;
    animation-delay: var(--star-delay, 0s);
}

.home-stars__star.is-bright {
    background: color-mix(in srgb, var(--highlight) 45%, white);
    box-shadow:
        0 0 5px color-mix(in srgb, var(--highlight) 40%, transparent),
        0 0 10px color-mix(in srgb, var(--fg) 25%, transparent);
    animation-name: home-star-twinkle-bright;
}

/* Cleared when a cloud sits over this star (home.js). */
.home-stars__star.is-cloud-void,
.home-stars__ascii-star.is-cloud-void,
/* Cleared behind article bodies on inner pages (stars.js). */
.home-stars__star.is-reading-void,
.home-stars__ascii-star.is-reading-void {
    visibility: hidden !important;
    animation: none !important;
    opacity: 0 !important;
}

/* Sparse Joan G. Stark–style ASCII stars in quiet gaps (credit in docs/resources.md). */
.home-stars__ascii-star {
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    transform: translate(-50%, -50%) scale(var(--glyph-scale, 1));
    transform-origin: center;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    font-size: 0.55rem;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: pre;
    color: color-mix(in srgb, #fff1c2 60%, var(--highlight));
    text-shadow: 0 0 8px color-mix(in srgb, #ffd27a 35%, transparent);
    opacity: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    animation: home-ascii-star-twinkle var(--glyph-duration, 8s) ease-in-out infinite;
    animation-delay: var(--glyph-delay, 0s);
}

@keyframes home-ascii-star-twinkle {
    0%,
    100% {
        opacity: 0.05;
    }
    22% {
        opacity: var(--glyph-opacity, 0.35);
    }
    48% {
        opacity: 0.08;
    }
    70% {
        opacity: calc(var(--glyph-opacity, 0.35) * 0.7);
    }
}

@keyframes home-star-twinkle {
    0%,
    100% {
        opacity: 0.05;
        transform: scale(0.55);
    }
    18% {
        opacity: var(--star-opacity, 0.5);
        transform: scale(1.15);
    }
    36% {
        opacity: 0.12;
        transform: scale(0.7);
    }
    55% {
        opacity: calc(var(--star-opacity, 0.5) * 0.85);
        transform: scale(1.05);
    }
    72% {
        opacity: 0.08;
        transform: scale(0.65);
    }
}

@keyframes home-star-twinkle-bright {
    0%,
    100% {
        opacity: 0.08;
        transform: scale(0.5);
    }
    12% {
        opacity: var(--star-opacity, 0.75);
        transform: scale(1.35);
    }
    28% {
        opacity: 0.15;
        transform: scale(0.7);
    }
    48% {
        opacity: calc(var(--star-opacity, 0.75) * 0.9);
        transform: scale(1.2);
    }
    64% {
        opacity: 0.1;
        transform: scale(0.6);
    }
    82% {
        opacity: calc(var(--star-opacity, 0.75) * 0.55);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-stars__star {
        animation: none;
        opacity: 0.25;
    }

    .home-stars__ascii-star {
        animation: none;
        opacity: 0.2;
    }
}