/* Native scrolling keeps keyboard, touch, anchors and dialogs in control. */
html { scroll-behavior: smooth; }
#top { scroll-margin-top: 110px; }
[data-parallax-depth] { translate: 0 var(--parallax-y, 0px); }
.hero-visual::before { translate: 0 var(--parallax-glow-y, 0px); }
.hero { position: relative; }
.topbar::after {
  content: '';
  position: absolute;
  inset: auto 22px -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #cbb0ff, #9067d9);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: right;
  pointer-events: none;
}
.topbar nav a[aria-current="location"] {
  color: var(--home-ink);
  background: rgba(154, 121, 227, .14);
  box-shadow: inset 0 -2px #b99ae9;
}
.scroll-discover {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  min-height: 44px;
  margin: 14px auto 0;
  padding: 8px 16px;
  color: var(--home-muted);
  text-decoration: none;
  font-size: 13px;
  border-radius: 12px;
}
.scroll-discover:hover { color: var(--home-ink); background: #a282d710; }
.scroll-discover-line {
  width: 1px;
  height: 28px;
  background: linear-gradient(transparent, #b99ae9);
}
/* Translate is separate from the existing rotation and scaling of the artwork. */
@media (min-width: 781px) {
  .hero { min-height: min(740px, calc(100svh - 152px)); }
}
@media (max-width: 780px) {
  .scroll-discover { margin-top: 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-parallax-depth], .hero-visual::before { translate: none !important; }
}