/* =============================================================
   scroll-hint.css — site-wide "scroll for more" indicator
   Style: Apple-style double-chevron rising + fading
   Approved 2026-05-11. Style 4 from preview.
   Auto-hides when user reaches near bottom of page (handled in scroll-hint.js)
   ============================================================= */

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: 36px;
  height: 44px;
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.35s ease;
  opacity: 1;
}

.scroll-hint.hidden { opacity: 0; }

.scroll-hint span {
  position: absolute;
  left: 0; right: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 10px solid #22d3ee;
  opacity: 0;
  animation: scrollHintRise 1.6s ease-out infinite;
}

.scroll-hint span:nth-child(1) { top: 0;    animation-delay: 0s;   }
.scroll-hint span:nth-child(2) { top: 14px; animation-delay: 0.4s; }

@keyframes scrollHintRise {
  0%   { opacity: 0; transform: translateY(-6px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px); }
}