/* css/scroll-indicator.css */
/* Premium scroll indicator – minimal, elegant animation */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 2; /* above overlay but below content */
}

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--brand-primary);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.scroll-wheel {
  width: 4px;
  height: 8px;
  background: var(--brand-primary);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite ease-in-out;
}

@keyframes scrollWheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; transform: translate(-50%, 8px); }
  70% { opacity: 1; transform: translate(-50%, 16px); }
  100% { opacity: 0; transform: translate(-50%, 24px); }
}

/* Light theme adjustment – subtle lighter border */
html.light .scroll-mouse {
  border-color: var(--brand-primary);
}

/* Dark theme – keep same brand color */
html.dark .scroll-mouse { border-color: var(--brand-primary); }