/* Movimiento estilo Pinterest para el catálogo.
 *
 * De todo lo que hace Pinterest se han cogido las cuatro cosas que aportan
 * algo a una tienda de pedidos, y se ha dejado fuera lo que no:
 *
 *   SÍ  Entrada escalonada de la rejilla: las fichas no aparecen de golpe,
 *       suben en cascada. Da la sensación de que el contenido "llega" en vez
 *       de parpadear, y ayuda a que el ojo enganche la primera fila.
 *   SÍ  Zoom de la foto dentro de su marco al pasar por encima, con la ficha
 *       levantándose un poco. Es lo que hace que una rejilla plana se sienta
 *       táctil.
 *   SÍ  Apertura desde la posición de la ficha (lo hace pinterest.js): el
 *       detalle crece desde donde estaba la foto en lugar de aparecer de la
 *       nada. Es su gesto más reconocible.
 *   NO  Esconder las acciones hasta el hover. En Pinterest tiene sentido
 *       porque el objetivo es mirar; aquí el objetivo es PEDIR, y esconder
 *       "Añadir" detrás del ratón añade un paso a la tarea principal. Además
 *       en móvil no hay hover y la mitad de los pedidos se hacen desde el
 *       teléfono.
 *
 * Todo se apaga con prefers-reduced-motion, igual que el resto de la app.
 */

/* ── Entrada escalonada ──────────────────────────────────────────────────── */
/* El retardo lo pone el JS en --i, y va topado: con 300 productos en pantalla
   un escalonado sin límite tardaría medio minuto en terminar. */
.product-card.pin-entra {
    animation: pin-sube .42s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes pin-sube {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Hover de la ficha ───────────────────────────────────────────────────── */
.product-card {
    transition:
        transform .28s cubic-bezier(.22, .61, .36, 1),
        box-shadow .28s cubic-bezier(.22, .61, .36, 1);
}

/* `:hover` solo donde hay ratón de verdad. En una tableta, el hover se queda
   pegado tras el toque y la ficha se queda levantada. */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .11);
    }

    /* La foto crece dentro del marco, que recorta. Es el efecto de Pinterest:
       se mueve la imagen, no la caja. */
    .product-card:hover .card-img-wrapper img {
        transform: scale(1.06);
    }
}

.card-img-wrapper img {
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .5s ease-in-out;
}

/* El clic hunde la ficha un instante. Sustituye al `scale(.97)` de antes, que
   encogía la tarjeta entera también al pulsar "Añadir" y se leía como si el
   botón hubiera fallado. */
.product-card:active {
    transform: translateY(-1px) scale(.994);
    transition-duration: .08s;
}

/* Los controles se quedan quietos: son objetivos de clic y moverlos con la
   ficha hace fallar el segundo toque. */
.product-card .btn-add-card,
.product-card .qty-pill,
.product-card .fav-btn-card,
.product-card .edit-btn-card { transition: none; }

/* ── Vuelo de apertura ───────────────────────────────────────────────────── */
/* Clon de la foto que viaja de la ficha al detalle. Va por encima de todo y
   no recibe clics: es decorativo y se destruye al llegar. */
.pin-vuelo {
    position: fixed;
    z-index: 9998;
    margin: 0;
    padding: 0;
    pointer-events: none;
    /* El clon se coloca ya con la caja EXACTA de la foto (lo calcula
       cajaDeLaFoto en pinterest.js), así que aquí `fill` y `contain` dan lo
       mismo y `fill` se ahorra el recorte. El fondo blanco y el relleno se han
       quitado: eran para disimular las franjas de `contain`, y ya no hay. */
    object-fit: fill;
    background: none;
    box-sizing: border-box;
    /* La escala parte de la esquina superior izquierda, que es la que fija el
       translate. Con el centro por defecto, el desplazamiento calculado no
       cuadraría con el crecimiento. */
    transform-origin: top left;
    /* Solo transform: es lo único que se anima, y avisarlo de más obliga al
       navegador a reservar capas para propiedades que ya no cambian. */
    will-change: transform;
}

/* Mientras el clon vuela, el modal entra sin su propia animación de escala:
   dos movimientos a la vez se pelean y se ve un salto. */
.modal-overlay.pin-volando .modal-wrapper { animation: none; }
.modal-overlay.pin-volando .modal-img-area img { opacity: 0; }

/* ── Botón de añadir ─────────────────────────────────────────────────────── */
/* Respuesta al pulsar en el botón, no en la ficha entera. */
.btn-add-card {
    transition: transform .12s cubic-bezier(.22, .61, .36, 1), background-color .15s ease;
}
.btn-add-card:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
    .product-card.pin-entra { animation: none; }
    .product-card:hover,
    .product-card:active { transform: none; }
    .product-card:hover .card-img-wrapper img { transform: none; }
    .btn-add-card:active { transform: none; }
    .pin-vuelo { display: none; }
}