/* Señal de desplazamiento de las tiras horizontales (mobile).
 *
 * Las tabs de la demo, el menú de módulos y los dos carruseles se desbordan a la derecha y nada
 * decía que hubiera más. Esto lo dice.
 *
 * ES UNA SOLA SEÑAL, NO DOS. El degradado da la sensación de que el contenido sigue; la flecha la
 * nombra. Un degradado solo se lee como decoración, y una flecha sola sobre contenido que termina
 * en seco se lee como un botón. Van juntas o no van.
 *
 * El adorno es un ELEMENTO por tira, no un pseudo-elemento: dos de las tiras comparten padre y un
 * padre tiene un solo ::before. Ver el comentario largo en js/demo-tabs.js.
 *
 * Todo lo posicional —top, height, left— lo escribe el JS contra la caja del scroller, porque es
 * geometría que sólo existe en tiempo de layout. Acá vive lo que se puede saber de antemano.
 */

[data-tira-adorno] {
  /* oculto por defecto: la señal es del recorrido táctil, y el JS la muestra sólo cuando la tira
   * tiene contenido escondido de verdad */
  display: none;
}

@media (max-width: 767px) {
  [data-tira-adorno]:not([hidden]) {
    display: flex;
    position: absolute;
    width: 54px;
    align-items: center;
    justify-content: flex-end;
    /* la flecha no se pega al filo: la tira tiene su propio ritmo de padding y un signo contra el
     * borde se lee como si se estuviera cayendo de la pantalla */
    padding-right: 4px;
    /* el adorno NO se come los toques de lo que asoma debajo */
    pointer-events: none;
    z-index: 2;
    /* el degradado termina en el fondo real de la sección: con un color fijo se vería un parche
     * al cambiar de tema */
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--s0) 78%);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
  }

  /* El movimiento va envuelto en `no-preference` a propósito.
   *
   * La trampa que este repo pisó SEIS veces: un `!important` propio le gana por especificidad a
   * la regla global `* { animation-duration: 0.01ms !important }` de reduced-motion, y la
   * animación sobrevive donde debería morir. Envuelta así no hay nada que ganarle: bajo
   * reduced-motion esta regla no existe y la flecha queda quieta, que sigue siendo señal válida. */
  @media (prefers-reduced-motion: no-preference) {
    [data-tira-adorno]:not([hidden]) {
      animation: upran-tab-empuje 1.9s ease-in-out infinite;
    }
  }
}

@keyframes upran-tab-empuje {
  0%,
  62%,
  100% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(3px);
  }
}