/* ═══════════════════════════════════════════════════════════════════
   Briar Scroll Cue — quiet, brass-on-dark "scroll for more" indicator.
   Designed to sit in the bottom 1/8 of a hero. Class-prefixed `bsc-`.
   ═══════════════════════════════════════════════════════════════════ */

.bsc-cue {
  --bsc-color:        var(--white, #FFFFFF);
  --bsc-font-accent:  var(--font-accent, 'Sweet Sans Pro','Lexend', sans-serif);
  --bsc-ease:         cubic-bezier(0.2, 0.7, 0.2, 1);

  position: absolute;
  left: 50%;
  /* Lifted clear of typical bottom-pinned consent/cookie banners (~60–90px desktop, ~100–140px mobile). */
  bottom: clamp(120px, 14vh, 168px);
  transform: translateX(-50%);
  z-index: 1000;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  color: var(--bsc-color);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 180ms var(--bsc-ease);
}
.bsc-cue:hover { opacity: 0.78; }

.bsc-cue__label {
  font-family: var(--bsc-font-accent);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsc-color);
  line-height: 1;
  margin-bottom: 2px;
}

.bsc-cue__mouse { display: inline-flex; align-items: center; justify-content: center; }
.bsc-cue__mouse svg { display: block; overflow: visible; }
.bsc-cue__mouse rect { stroke: var(--bsc-color); }

.bsc-cue__dot {
  fill: var(--bsc-color);
  transform-origin: center;
  transform-box: fill-box;
  animation: bsc-dot 1.9s var(--bsc-ease) infinite;
}
@keyframes bsc-dot {
  0%   { transform: translateY(-2px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

.bsc-cue__chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}
.bsc-cue__chevrons svg {
  display: block;
  stroke: var(--bsc-color);
  opacity: 0.25;
  animation: bsc-chev 1.9s var(--bsc-ease) infinite;
}
.bsc-cue__chevrons svg:nth-child(1) { animation-delay: 0s; }
.bsc-cue__chevrons svg:nth-child(2) { animation-delay: 0.22s; }
@keyframes bsc-chev {
  0%, 100% { opacity: 0.18; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(1px); }
}

.bsc-cue:focus { outline: none; }
.bsc-cue:focus-visible {
  outline: 1px solid var(--bsc-color);
  outline-offset: 8px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bsc-cue__dot {
    animation: none;
    transform: translateY(2px);
    opacity: 0.9;
  }
  .bsc-cue__chevrons svg { animation: none; opacity: 0.7; }
}

@media (max-width: 760px) {
  .bsc-cue__label { display: none; }
  .bsc-cue {
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    margin: 1.75rem auto 2.25rem;
    gap: 6px;
  }
}