/* ============================================================
   carga.css · LO QUE SE VE MIENTRAS LA FOTO NO HA LLEGADO
   ------------------------------------------------------------
   Con la señal de Castro una foto puede tardar segundos. Antes ese
   rato era un hueco vacío en la tarjeta, y después la foto caía de
   golpe. Ahora el marco muestra un brillo suave que se mueve (el
   "esqueleto" que usan Instagram o Rappi) y la foto entra con un
   fundido. js/fotos.js pone la clase `foto-lista` en el marco y
   `lista` en la foto cuando cargó.

   Solo actúa mientras la foto NO está. Con la foto lista, todas
   estas reglas dejan de aplicar y manda el diseño de siempre.
   ============================================================ */

/* El brillo, sobre el fondo oscuro de la tarjeta. */
.card-img-wrap:not(.foto-lista),
.hero-img-wrap:not(.foto-lista),
.fries-img-wrap:not(.foto-lista),
.drink-img-wrap:not(.foto-lista),
.modal-img-wrap:not(.foto-lista) {
  background: linear-gradient(110deg, #151515 25%, #232323 42%, #151515 58%) !important;
  background-size: 220% 100% !important;
  animation: foto-brillo 1.5s ease-in-out infinite;
}
@keyframes foto-brillo {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* La foto entra con un fundido en vez de caer de golpe. */
.card-img, .hero-img, .fries-img, .drink-img, .modal-img {
  opacity: 0;
  transition: opacity .38s ease-out;
}
.card-img.lista, .hero-img.lista, .fries-img.lista, .drink-img.lista, .modal-img.lista { opacity: 1; }

/* Si el navegador no avisó (una foto que falló, una caché rara), la
   foto igual aparece a los 4 s. Nunca una tarjeta invisible. */
@keyframes foto-rescate { to { opacity: 1; } }
.card-img:not(.lista), .hero-img:not(.lista), .fries-img:not(.lista), .drink-img:not(.lista), .modal-img:not(.lista) {
  animation: foto-rescate 0s linear 4s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .card-img-wrap:not(.foto-lista), .hero-img-wrap:not(.foto-lista),
  .fries-img-wrap:not(.foto-lista), .drink-img-wrap:not(.foto-lista),
  .modal-img-wrap:not(.foto-lista) { animation: none; }
}