/* v8 / PCの左右と、スマホのKV下に続く星空。 */
.hero-sky {
  position:absolute; inset:0; z-index:-4; pointer-events:none;
  background:
    radial-gradient(ellipse at 9% 42%, #8b3f883d 0%, transparent 38%),
    radial-gradient(ellipse at 92% 39%, #7839774f 0%, transparent 40%),
    radial-gradient(ellipse at 17% 61%, #b6486b29 0%, transparent 29%),
    radial-gradient(ellipse at 87% 62%, #b749772e 0%, transparent 31%),
    radial-gradient(ellipse at 40% 15%, #4e368b40 0%, transparent 44%),
    linear-gradient(180deg,#08091f 0%,#1a1034 48%,#170e2a 76%,#090823 100%);
}
.hero-stars {
  z-index:-3; background:url("../img/hero-starfield.svg") center top / 1600px 1000px repeat;
  mask-image:none; -webkit-mask-image:none; opacity:.86;
}
.starlight-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-2; }
.hero-visual:before {
  z-index:-1;
  background:linear-gradient(180deg,#09082310,transparent 20%,transparent 78%,#090823b8);
}
/* A small, local shade keeps the billing legible without hiding the side skies. */
.hero-copy:before {
  content:""; position:absolute; inset:-22px -50px; z-index:-1; pointer-events:none;
}
@media(max-width:767px) {
  .hero-stars { background-size:800px 500px; opacity:.88; }
  /* A clear stretch of sky lets the mobile meteor pass above the tour links. */
  .hero-copy { padding-top:108px; padding-bottom:24px; background:transparent; }
  .hero-copy:before { inset:0; background:none; }
  .hero-tour { background:#0a0927b0; }
}
@media print { .hero-sky,.hero-stars,.starlight-canvas { display:none!important; } }
