/* Decorative layers never intercept taps or cover the readable content area. */
.hero-starfield { position: absolute; inset: -10% -5%; z-index: 0; overflow: hidden; pointer-events: none; mask-image: radial-gradient(ellipse, #000 48%, transparent 78%); }
.starflight { position: absolute; left: 58%; top: 45%; margin: -24px; opacity: 0; will-change: transform, opacity; animation: starflight 7s linear infinite; }
@keyframes starflight {
  0% { transform: translate(0, 0) scale(.06); opacity: 0; }
  15% { opacity: .3; }
  50% { transform: translate(calc(var(--flight-x) * .22), calc(var(--flight-y) * .22)) scale(.32) rotate(calc(var(--turn) * .22)); opacity: .75; }
  80% { opacity: .95; }
  100% { transform: translate(var(--flight-x), var(--flight-y)) scale(1.25) rotate(var(--turn)); opacity: 0; }
}
.scroll-balls { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; mask-image: linear-gradient(transparent, #000 18%, #000 85%, transparent); }
.scroll-ball-lane { position: absolute; top: 90px; bottom: 0; width: clamp(18px, calc((100vw - 1180px) / 2 - 10px), 100px); overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); }
.scroll-ball-lane:first-child { left: 0; mask-image: linear-gradient(to right, #000 55%, transparent); }
.scroll-ball-lane:last-child { right: 0; mask-image: linear-gradient(to left, #000 55%, transparent); }
.scroll-traveller { position: absolute; top: 0; left: 50%; margin-left: -26px; will-change: transform; }
.scroll-traveller .game-ball { --ball-size: 52px; display: block; animation: ambient-drift 8s ease-in-out infinite; filter: drop-shadow(0 8px 8px #37312020); }
.scroll-traveller:nth-child(2) .game-ball { --ball-size: 34px; animation-delay: -3s; }
.scroll-traveller:nth-child(3) .game-ball { --ball-size: 65px; animation-delay: -5s; }
.scroll-traveller:nth-child(4) .game-ball { --ball-size: 42px; animation-delay: -2s; }
.contact-mascot { align-items: center; justify-content: center; flex-wrap: nowrap; gap: 16px; }
.contact-mascot img { width: 180px; height: 270px; object-fit: contain; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 12px 10px #485a1812); }
.contact-mascot span { max-width: 205px; font-weight: 800; font-size: 20px; line-height: 1.5; }
@media (max-width: 620px) {
  .hero-starfield { inset: -5% 0; }
  .scroll-ball-lane { top: 72px; width: 15px; opacity: .65; }
  .scroll-traveller { margin-left: -18px; }
  .scroll-traveller .game-ball { --ball-size: 32px !important; }
  .contact-mascot { justify-content: center; gap: 12px; margin-top: 24px; }
  .contact-mascot img { width: 142px; height: 213px; }
  .contact-mascot span { font-size: 18px; max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .hero-starfield, html:not([data-motion="full"]) .scroll-balls { display: none; }
}

.motion-notice { margin-top: 18px; max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.motion-notice[hidden] { display: none; }
.motion-choice { display: block; min-height: 44px; padding: 6px 0; color: var(--ink); font-weight: 800; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }