/* ==========================================================================
   Component: Scroll Indicator
   Animated "scroll to explore" chevron on the landing panel.
   Depends on: shared/tokens.css
   ========================================================================== */

.scroll-indicator {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  animation: bounce 2s infinite;
}

.scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid var(--white-dim);
  border-bottom: 2px solid var(--white-dim);
  transform: rotate(45deg);
  margin: 0 auto 12px;
}

.scroll-text {
  font-size: 12px;
  color: var(--white-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}