/* ============================================
   Scroll-hint button — reusable component
   Place .scroll-hint inside any position:relative
   section that needs a "scroll down" indicator.
   ============================================ */

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  text-decoration: none;
  z-index: 10;
  cursor: pointer;
  animation: scrollHintFloat 2.2s ease-in-out infinite;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.scroll-hint:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.scroll-hint i {
  /* slight downward nudge so the chevron feels centred optically */
  margin-top: 2px;
}

@keyframes scrollHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0px);  }
  50%       { transform: translateX(-50%) translateY(-9px); }
}

/* ── Hide on mobile ── */
@media (max-width: 992px) {
  .scroll-hint { display: none; }
}

/* ── Light mode ── */
[data-theme="light"] .scroll-hint {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--rr-color-heading-primary, #1a1a2e);
}
[data-theme="light"] .scroll-hint:hover {
  background: rgba(0, 0, 0, 0.13);
  border-color: rgba(0, 0, 0, 0.25);
  color: var(--rr-color-heading-primary, #1a1a2e);
}