/* AUTO-GENERATED by sync-css.js — do not edit directly. */
/* Edit shared-css/ sources or _*-local.css files, then run: node sync-css.js */

/* ============================================
   MaP Scroll Cue Component
   ============================================

   A scroll-invitation element anchored to the bottom
   of full-viewport sections. Text label + circled
   down-arrow with a gentle bob animation.

   Usage:
     <div class="scroll-cue" data-scroll-target="section-id">
       <span class="scroll-cue__label">Begin</span>
       <div class="scroll-cue__arrow">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2" aria-hidden="true">
           <line x1="12" y1="5" x2="12" y2="19"/>
           <polyline points="19 12 12 19 5 12"/>
         </svg>
       </div>
     </div>

   JS (delegated click handler — add per-site):
     document.addEventListener('click', function(e) {
       var cue = e.target.closest('.scroll-cue');
       if (!cue) return;
       var id = cue.dataset.scrollTarget;
       if (id) document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
     });

   ============================================ */

.scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.scroll-cue__label {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.scroll-cue__arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-text-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.scroll-cue__arrow svg {
  width: 16px;
  height: 16px;
  animation: scroll-cue-bob 2s ease infinite;
}

/* Hover: fill the circle */
.scroll-cue:hover .scroll-cue__label {
  color: var(--color-text);
}

.scroll-cue:hover .scroll-cue__arrow {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* Bob animation */
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Hide on short viewports — the cue is a grace note, not critical */
@media (max-height: 500px) {
  .scroll-cue { display: none; }
}