/* A warm hint makes the existing hero stars easier to see. */
#beginning.video-hero .video-stars i,
#beginning.video-hero .video-stars .rare-star-glint{background:radial-gradient(circle,#fff8d9f2 0%,#ffe8a58c 12%,#ffd77838 31%,transparent 69%);filter:drop-shadow(0 0 5px #ffdb8099)}
#beginning.video-hero .video-stars i:before,
#beginning.video-hero .video-stars .rare-star-glint:before{background:#fff3be}
/* Every point follows a star already painted into its own scene. */
#river>.sky-twinkles i,#roadmap>.scroll-stars i,#garden>.garden-sky i{width:clamp(8px,1.05vw,18px);height:auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff5c48c,transparent 68%);filter:drop-shadow(0 0 5px #ffe6a6b3);animation-name:chapter-star-twinkle}
#river>.sky-twinkles i:before,#roadmap>.scroll-stars i:before,#garden>.garden-sky i:before{inset:22%;background:#fff6d2}
#river>.sky-twinkles i:after,#roadmap>.scroll-stars i:after,#garden>.garden-sky i:after{content:"";position:absolute;inset:-50%;border-radius:50%;background:radial-gradient(circle,#ffe6a64d,transparent 70%)}
@keyframes chapter-star-twinkle{0%,100%{opacity:.08;transform:translate(-50%,-50%) scale(.65)}30%{opacity:.25}48%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}64%{opacity:.3;transform:translate(-50%,-50%) scale(.9)}80%{opacity:.1}}
/* The sky shares the scroll painting's 3:2 canvas, independently of its edge fade. */
#roadmap>.scroll-stars{position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:3/2;z-index:1;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0,#000 12px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px)}
#roadmap>.scroll-stars i{width:clamp(8px,.95vw,16px)}
/* Reveal the waterwheel painting from its first row; its lower join stays intact. */
#river,#river>img{mask-image:none;-webkit-mask-image:none}
#river:before{display:none}
@media(prefers-reduced-motion:reduce){#river>.sky-twinkles i,#roadmap>.scroll-stars i,#garden>.garden-sky i{animation:none;opacity:.15}}
.still #river>.sky-twinkles i,.still #roadmap>.scroll-stars i,.still #garden>.garden-sky i{animation:none;opacity:.15}

@media(max-width:600px){
 #river>.sky-twinkles i,#roadmap>.scroll-stars i,#garden>.garden-sky i{filter:drop-shadow(0 0 3px #ffe6a680)}
 #river>.sky-twinkles i:after,#roadmap>.scroll-stars i:after,#garden>.garden-sky i:after{inset:-25%}
}

/* The scroll shares the waterwheel star size and animation. */
#roadmap>.scroll-stars i{width:clamp(8px,1.05vw,18px);animation:chapter-star-twinkle var(--speed,6s) ease-in-out var(--delay,0s) infinite}
@media(prefers-reduced-motion:reduce){#roadmap>.scroll-stars i{animation:none}}