/**
 * Seta "tem mais para baixo" (rolar-mais.js marca o contêiner com .alx-rolar-mais e liga a seta
 * com .alx-rolar-mais--ver enquanto falta conteúdo abaixo).
 *
 * A seta é o ::after do contêiner, em position:sticky: o lugar natural dela é o fim do conteúdo,
 * e o sticky a segura no rodapé visível enquanto o fim está fora da vista. A margem negativa do
 * tamanho da seta (mais o gap, num flex em coluna) a sobrepõe ao fim do conteúdo, para ela não
 * alongar a rolagem. pointer-events:none: o toque passa para o que estiver embaixo.
 *
 * @package Alericos\Core
 */

.alx-rolar-mais::after {
  content: '';
  position: sticky;
  bottom: 10px;
  z-index: 5;
  display: block;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: calc(-36px - var(--alx-rolar-mais-gap, 0px)) auto 0;
  border: 1px solid rgba(33, 158, 188, 0.55);
  border-radius: 50%;
  background: rgba(10, 25, 41, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ECAE6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
  /* O movimento só dá sentido à seta ("desce daqui"): um quique curto e contínuo. */
  animation: alx-rolar-mais-quica 1.4s ease-in-out infinite;
}

.alx-rolar-mais.alx-rolar-mais--ver::after {
  opacity: 1;
  visibility: visible;
}

/* O quique fica ACIMA do lugar da seta (de -5px a 0): no Chrome a transformação entra na área
   rolável, e descer além do lugar dela alongava a rolagem em 5px. */
@keyframes alx-rolar-mais-quica {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .alx-rolar-mais::after {
    animation: none;
  }
}