/* ==========================================================
   Night-sky hero (canvas behind the hero content)
   ========================================================== */
.fun-hero.sky{background:#06021A;color:#F6F1FF;isolation:isolate}
/* keep the copy and button above the dawn band */
.homepage .fun-hero.sky{padding-bottom:calc(clamp(2.5rem,6vh,5rem) + 150px)}
@media (max-width:700px){.homepage .fun-hero.sky{padding-bottom:9rem}}
.fun-hero.sky .sky-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* dawn: the sky dissolves into the page color at the bottom */
.fun-hero.sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(244,240,251,0) 0%,rgba(244,240,251,.5) 55%,var(--v-bg,#F4F0FB) 100%)}
.fun-hero.sky .star-field{display:none}   /* the canvas draws the stars now */
.fun-hero.sky .wrap{position:relative;z-index:2}

/* copy on the dark sky */
.fun-hero.sky h1,.fun-hero.sky .hero-line{color:#F6F1FF}
.fun-hero.sky .lede{color:#D8CFEA}
.fun-hero.sky .lede.punch{color:var(--v-cta)}
.homepage .fun-hero.sky h1 em.hero-line{filter:drop-shadow(0 0 22px rgba(255,158,122,.55))}
.fun-hero.sky .btn.pop.launch{color:#fff;border-color:rgba(196,181,240,.85);box-shadow:3px 3px 0 rgba(91,52,199,.55)}
.fun-hero.sky .btn.pop.launch:hover,.fun-hero.sky .btn.pop.launch.charging{background:var(--v-accent-2);color:var(--v-ink)}

/* the animated logo on the sky */
.fun-hero.sky .ls-l{fill:#F6F1FF}
.fun-hero.sky .mock-glow{opacity:.75}
.fun-hero.sky .ls-svg{filter:drop-shadow(0 0 30px rgba(91,52,199,.35))}

/* the cursor sparkle trail is peach/lilac already; the launch-button shooting stars read fine on dark */