/* ==========================================================================
   Teixeira IP — indicador de rolagem do herói

   Área nova em arquivo próprio. Nada aqui redefine regra de site.v2.css.
   Carregar SEMPRE depois de site.v2.css.

   ---------------------------------------------------------------------------
   Por que .v2 — e por que o desenho mudou

   A primeira versão era um filete de 1px em latão a 32% de opacidade, com um
   brilho escorrendo, sobre a fotografia do herói. Sobre fundo liso teria
   funcionado. Sobre uma foto de sala de reunião — vidro, reflexo, luminária,
   cadeiras — sumiu por completo.

   A lição: elemento de sinalização não pode depender do que está atrás dele.
   Este traz o próprio contraste, num disco com tinta e desfoque. Sobre foto
   clara, escura ou movimentada, lê igual.

   O JS não mudou. `hero.v2.js` continua gerando os mesmos três nós; o que
   era o trilho do filete virou o anel que pulsa.
   ========================================================================== */

.hero-rolar {
  position: absolute;                 /* vence `.hero > * { position: relative }`
                                         por vir depois, com a mesma especificidade */
  left: 50%; bottom: clamp(1.1rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 3;

  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;

  border: 1px solid rgba(168, 128, 47, .55);
  border-radius: 50%;
  background: rgba(9, 18, 21, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  text-decoration: none; color: #D4AF5A;
  cursor: pointer;
  opacity: 1;
  transition: opacity .45s ease, background .25s ease,
              border-color .25s ease, color .25s ease;
}

/* O anel que pulsa. É o que chama o olho de longe: cresce e apaga, como um
   toque na superfície. Amplitude pequena — o herói é sóbrio e uma seta
   quicando estragaria isso. */
.hero-rolar-trilho {
  position: absolute; inset: -1px;
  border: 1px solid rgba(168, 128, 47, .7);
  border-radius: 50%;
  animation: tip-anel 2.4s cubic-bezier(.25, .6, .3, 1) infinite;
  pointer-events: none;
}

@keyframes tip-anel {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* O chevron desliza dentro do disco e reaparece no topo. Mesmo gesto que se
   pede ao visitante, em dois pixels. */
.hero-rolar svg {
  width: 18px; height: 11px;
  stroke: currentColor; stroke-width: 1.9;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  animation: tip-desce 2.4s cubic-bezier(.45, 0, .3, 1) infinite;
}

@keyframes tip-desce {
  0%   { transform: translateY(-4px); opacity: 0; }
  25%  { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(5px);  opacity: 0; }
}

/* Sob o cursor o disco se acende inteiro. Não há dúvida do que é clicável. */
.hero-rolar:hover, .hero-rolar:focus-visible {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}
.hero-rolar:hover .hero-rolar-trilho,
.hero-rolar:focus-visible .hero-rolar-trilho { animation-play-state: paused; opacity: 0; }
.hero-rolar:hover svg,
.hero-rolar:focus-visible svg { animation: none; transform: translateY(1px); opacity: 1; }

.hero-rolar:focus-visible { outline: 1px solid var(--brass); outline-offset: 5px; }

/* Sai de cena assim que a pessoa entende o recado. */
.hero-rolar.is-fora { opacity: 0; pointer-events: none; }

/* Telas baixas: o herói já ocupa tudo e o disco brigaria com a legenda. */
@media (max-height: 620px) {
  .hero-rolar { display: none; }
}

/* Menos movimento: o disco continua, parado. Ele ainda comunica sozinho,
   porque tem forma e contraste próprios — que é justamente o que a versão
   anterior não tinha. */
@media (prefers-reduced-motion: reduce) {
  .hero-rolar, .hero-rolar svg { transition: none; }
  .hero-rolar-trilho { animation: none; opacity: .5; }
  .hero-rolar svg { animation: none; opacity: 1; transform: none; }
}