/* =====================================================================
   RV25 Relojería · ANIMACIONES DE ENTRADA
   ---------------------------------------------------------------------
   Los elementos con  data-animar  suben y aparecen suavemente la
   primera vez que entran en pantalla (lo activa js/nucleo/animaciones.js).

     <div data-animar>…</div>
     <div data-animar style="--retraso: 120ms">…</div>   (aparece después)

   Seguridad:
     · Solo se esconden si la página tiene la clase  .js-animar
       (la pone un script al inicio del <body>). Sin JavaScript todo se ve.
     · Quien pidió "reducir movimiento" en su teléfono no ve animaciones.
   ===================================================================== */

.js-animar [data-animar] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease var(--retraso, 0ms),
    transform .8s cubic-bezier(.2, .7, .2, 1) var(--retraso, 0ms);
}

.js-animar [data-animar].visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-animar [data-animar] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   ESQUELETOS DE CARGA
   ---------------------------------------------------------------------
   Mientras llega una foto, su espacio muestra un brillo suave que pasa
   de lado a lado (las fotos son opacas: al cargar, lo tapan solas).
   Las tarjetas .tarjeta-esqueleto (en index.html, dentro de #rejilla)
   ocupan el lugar del catálogo hasta que js/secciones/catalogo.js pinta
   los relojes, así la página no salta.
   ===================================================================== */

@keyframes esqueleto-brillo {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

.tarjeta-img img,
.escenario-foto img,
.lista-foto img,
.esqueleto {
  background-color: var(--arena);
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: esqueleto-brillo 1.4s ease-in-out infinite;
}

.tarjeta-esqueleto { pointer-events: none; }
.tarjeta-esqueleto .esqueleto-linea {
  display: block; height: 12px; margin: 16px auto 0; width: 40%;
  border-radius: 2px;
}
.tarjeta-esqueleto .esqueleto-linea + .esqueleto-linea { width: 70%; height: 18px; margin-top: 10px; }
.tarjeta-esqueleto .esqueleto-boton { display: block; height: 50px; margin-top: 18px; border-radius: var(--radio); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-img img, .escenario-foto img, .lista-foto img, .esqueleto { animation: none; }
}