/* Decorative scroll cue; no layout or input behavior changes. */
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 32px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 11px; color: #fff; pointer-events: none; user-select: none; }
.hero-scroll-line { position: relative; display: block; width: 1px; height: 56px; overflow: hidden; background: rgba(255,255,255,.25); }
.hero-scroll-line::after { content: ""; position: absolute; inset: -30px 0 auto; height: 30px; background: linear-gradient(to bottom, transparent, #fff 70%, #ffffff55); animation: scroll-light 2.4s cubic-bezier(.4,0,.25,1) infinite; }
.hero-scroll-label { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 9px; font-weight: 400; line-height: 1; letter-spacing: .28em; text-indent: .28em; text-shadow: 0 1px 4px #0005; }
.hero-scroll-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0002; }
@keyframes scroll-light { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: .95; } 75% { opacity: .8; } 100% { transform: translateY(90px); opacity: 0; } }
@media (max-width: 800px) {
  .hero-scroll { bottom: clamp(32px, calc(100% - 100svh + 32px + env(safe-area-inset-bottom, 0px)), 25%); }
  .hero-scroll-line { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-line::after { animation: none; transform: translateY(30px); opacity: .7; }
}