/* two layered starfields for depth */
.hero-sky::before,
.hero-sky::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
    background-repeat: repeat;
    mix-blend-mode: lighten;
    opacity: .55;
    /* Mobile-first: centered cluster (works when image stacks above text) */
    width: min(92%, 720px);
    height: clamp(260px, 48vh, 480px);
    left: 50%;
    top: .5rem;
    transform: translateX(-50%);
    /* Fade out toward edges, biased slightly right (toward image on small screens) */
    -webkit-mask-image: radial-gradient(75% 78% at 58% 42%, rgba(0,0,0,1) 0 58%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(75% 78% at 58% 42%, rgba(0,0,0,1) 0 58%, rgba(0,0,0,0) 100%);
}

/* Desktop/tablet (md+): anchor to the right near the illustration,
   span ~2/3 of the hero, and fade as it goes left */
@media (min-width: 768px) {
    .hero-sky::before,
    .hero-sky::after {
        width: 66.666%; /* ~2/3 width */
        height: clamp(620px, 50vh, 560px);
        left: auto;
        /*right: 0;*/
        top: clamp(.5rem, 4vh, 3rem);
        transform: none;
        /* Dense near the image (right), falling off to the left */
        -webkit-mask-image: radial-gradient(90% 85% at 88% 45%, rgba(0,0,0,1) 0 54%, rgba(0,0,0,0) 100%);
        mask-image: radial-gradient(90% 85% at 88% 45%, rgba(0,0,0,1) 0 54%, rgba(0,0,0,0) 100%);
    }
}

/* small, denser stars */
.hero-sky::before {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'>\
<circle cx='10' cy='14' r='1.2' fill='%23ffffff' opacity='.85'/>\
<circle cx='38' cy='30' r='1'   fill='%23e44d9c' opacity='.55'/>\
<circle cx='74' cy='22' r='1.1' fill='%234d49fc' opacity='.50'/>\
<circle cx='26' cy='66' r='1.1' fill='%238a4dfc' opacity='.50'/>\
<circle cx='58' cy='54' r='0.9' fill='%23ffffff' opacity='.70'/>\
<circle cx='86' cy='78' r='1.0' fill='%23e44d9c' opacity='.45'/>\
<circle cx='14' cy='88' r='0.9' fill='%234d49fc' opacity='.45'/>\
</svg>");
    background-size: 160px 160px;
    animation: hero-stars-drift 36s linear infinite;
}

/* slightly larger, sparser stars that 'twinkle' */
.hero-sky::after {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>\
<circle cx='20' cy='24' r='1.6' fill='%23ffffff' opacity='.85'/>\
<circle cx='52' cy='70' r='1.4' fill='%238a4dfc' opacity='.55'/>\
<circle cx='96' cy='36' r='1.5' fill='%23e44d9c' opacity='.55'/>\
<circle cx='78' cy='98' r='1.3' fill='%234d49fc' opacity='.55'/>\
</svg>");
    background-size: 200px 200px;
    animation: hero-stars-drift 48s linear infinite reverse, hero-stars-twinkle 6s ease-in-out infinite;
    opacity: .45;
}