/* ============================================================
   Shio Gourmet · Utilidades visuales
   Las animaciones de entrada y de scroll vive en
   assets/js/animations.js (GSAP + ScrollTrigger).
   Este archivo queda con foco, scrollbar y cargadores.
   ============================================================ */

::selection {
  background: var(--bs-primary-2);
  color: var(--bs-white);
}

/* ------------------------------------------------------------
   1. Foco visible accesible (solo teclado, no es hover)
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(31, 101, 220, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   2. Scrollbar sutil
   ------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bs-secondary-3);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--bs-secondary-3);
  border-radius: 99px;
  background: #c7ccd3;
}

/* ------------------------------------------------------------
   3. Cargador de recetas: frascos en órbita
   Todos los frascos arrancan APILADOS en la misma posición (el
   azul arriba, con z-index). Tras una pausa (--inicio) el azul
   sale girando y cada frasco sigue al anterior con un delay
   (--delay), todos dando vueltas de 360° en sentido horario alrededor
   de un pivote invisible DEBAJO del frasco (--pivote).
   Variables ajustables: --frasco-alto, --pivote, --duracion,
   --inicio, --delay
   ------------------------------------------------------------ */
.cargando-recetas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 0;
  font-size: 0.95rem;
  color: var(--color-pizarra);
}

.orbita-frascos {
  --frasco-alto: 4.5rem;
  --frasco-ancho: calc(var(--frasco-alto) * 99.48 / 271.81);
  --pivote: 3rem;
  --duracion: 2.5s;
  --inicio: 0.5s;
  /* 0.25s = duración ÷ 10 frascos (si cambia la cantidad, ajustar) */
  --delay: 0.25s;
  position: relative;
  width: calc((var(--frasco-alto) + var(--pivote)) * 2 + var(--frasco-ancho));
  height: calc((var(--frasco-alto) + var(--pivote)) * 2);
}

.frasco {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--frasco-ancho);
  height: var(--frasco-alto);
  margin-left: calc(var(--frasco-ancho) / -2);
  z-index: calc(10 - var(--orden));
  transform: rotate(0turn);
  transform-origin: 50% calc(100% + var(--pivote));
  animation: frasco-orbita var(--duracion) linear infinite;
  animation-delay: calc(var(--inicio) + var(--orden) * var(--delay));
}

.frasco::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color);
  -webkit-mask: url("../assets/imgs/shioBg.svg") no-repeat center / contain;
  mask: url("../assets/imgs/shioBg.svg") no-repeat center / contain;
}

@keyframes frasco-orbita {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.cargando-recetas p {
  animation: sal-carga-texto 1.6s infinite;
}

@keyframes sal-carga-texto {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ------------------------------------------------------------
   4. Accesibilidad: respeta prefers-reduced-motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cargando-recetas p {
    animation: none;
  }

  .frasco {
    display: none;
    animation: none;
  }

  .frasco:first-child {
    display: block;
  }
}