/* home hero: "scroll down" nudge that fades in after 5s of no activity (assets/js/scroll-hint.js toggles .show). Sits 25% up from the bottom edge, in white.
   Mouse devices get a mouse with a rolling wheel, touch devices get a hand swiping up. */
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:25%;translate:-50% 0;display:flex;align-items:center;gap:14px;white-space:nowrap;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.scroll-hint.show{opacity:1;visibility:visible;transition:opacity .5s ease}
.sh-text{font:400 24px/1 Comicy,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.sh-touch,.sh-swipe{display:none}
/* mouse + wheel */
.sh-mouse{position:relative;width:34px;height:54px;border:4px solid #fff;border-radius:20px}
.sh-mouse::after{content:"";position:absolute;left:50%;top:8px;width:6px;height:12px;margin-left:-3px;border-radius:3px;background:#fff;animation:sh-wheel 1.6s ease-in-out infinite}
@keyframes sh-wheel{0%{opacity:0;translate:0 0}25%{opacity:1}75%{opacity:1;translate:0 14px}100%{opacity:0;translate:0 17px}}
/* hand swiping up, with a fading trail */
.sh-swipe{position:relative;width:42px;height:66px}
.sh-swipe::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:6px;margin-left:-3px;border-radius:3px;background:linear-gradient(#fff,transparent);opacity:.35}
.sh-swipe svg{position:absolute;left:0;bottom:0;width:100%;height:auto;fill:#fff;animation:sh-swipe 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sh-swipe{0%{translate:0 0;opacity:0}15%{opacity:1}75%{translate:0 -22px;opacity:1}100%{translate:0 -26px;opacity:0}}
@media(hover:none) and (pointer:coarse){
 .sh-mouse,.sh-desktop{display:none}
 .sh-touch{display:inline}
 .sh-swipe{display:block}
}
@media(prefers-reduced-motion:reduce){
 .scroll-hint,.scroll-hint.show{transition:none}
 .sh-mouse::after,.sh-swipe svg{animation:none;opacity:1}
}