/* --- SCROLL INDICATOR (Deep Hydro Edition) --- */

.scroll-indicator-wrapper {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none; /* Let clicks pass through wrapper, catch on trigger */
}

.scroll-trigger {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover Interaction: Lift */
.scroll-trigger:hover {
  transform: translateY(-5px);
}

.scroll-trigger:hover .scroll-text {
  color: var(--text);
  letter-spacing: 4px;
}

.scroll-trigger:hover .emitter-core {
  background: var(--text);
  box-shadow: 0 0 20px var(--text), 0 0 40px var(--brand);
}

/* --- 1. SONAR EMITTER (The Orb) --- */
.sonar-emitter {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}

.emitter-core {
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 10px var(--brand);
  transition: 0.3s ease;
}

.sonar-wave {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--brand);
  opacity: 0;
  animation: sonarPing 3s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.wave-1 { width: 100%; height: 100%; animation-delay: 0s; }
.wave-2 { width: 100%; height: 100%; animation-delay: 1s; }
.wave-3 { width: 100%; height: 100%; animation-delay: 2s; }

@keyframes sonarPing {
  0% { width: 10px; height: 10px; opacity: 0.8; border-width: 2px; }
  100% { width: 60px; height: 60px; opacity: 0; border-width: 0px; }
}

/* --- 2. DATA BEAM (The Line) --- */
.data-beam {
  position: relative;
  width: 1px;
  height: 60px;
  background: var(--glass-highlight);
  overflow: hidden;
}

.scan-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(to bottom, transparent, var(--brand), transparent);
  opacity: 0.8;
  animation: scanDown 2s linear infinite;
}

@keyframes scanDown {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}

/* --- 3. TEXT LABEL --- */
.scroll-text {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.4s ease;
  display: flex;
  gap: 1px;
}

/* Individual character animation delay if desired */
.text-char { display: inline-block; transition: 0.3s; }

/* --- 4. ARROW --- */
.scroll-arrow {
  color: var(--s-brand);
  width: 20px; height: 20px;
  animation: bounce 2s infinite;
}

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

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
  .scroll-indicator-wrapper { bottom: 1.5rem; }
  .data-beam { height: 40px; }
  .scroll-text { display: none; } /* Hide text on mobile to save vertical space */
}