/* ============================================================
   MOVIMIENTO — micro-animaciones
   WIDDI, 2026-09-21.

   Solo se animan `transform` y `opacity`: son las dos propiedades que el
   navegador resuelve sin recalcular la página. Animar alto, margen o
   posición provoca saltos en teléfonos modestos, que es la mayoría del
   tráfico en Guatemala.

   Todo lo que empieza oculto cuelga de `.t-enhanced`, la clase que
   tienda.js pone en el body: sin JavaScript el contenido se ve completo.

   Quitar el enqueue de este archivo devuelve el sitio a como estaba.
   ============================================================ */

/* --- entradas al aparecer en pantalla ---------------------- */

.t-enhanced [data-reveal] {
    opacity: 0;
    transform: translateY(var(--t-mov-desliz));
    transition:
        opacity   var(--t-mov-lento) var(--t-mov-curva),
        transform var(--t-mov-lento) var(--t-mov-curva);
    transition-delay: calc(var(--i, 0) * 60ms);
    will-change: opacity, transform;
}
.t-enhanced [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --- tarjetas de producto ---------------------------------- */

.t-site ul.products li.product,
.t-site .t-card {
    transition:
        transform  var(--t-mov-normal) var(--t-mov-curva),
        box-shadow var(--t-mov-normal) var(--t-mov-curva);
}
.t-site ul.products li.product:hover,
.t-site .t-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-sombra);
}
/* La foto respira dentro de la tarjeta, sin mover la tarjeta */
.t-site ul.products li.product img {
    transition: transform var(--t-mov-lento) var(--t-mov-curva);
}
.t-site ul.products li.product:hover img { transform: scale(1.03); }

/* --- botones: confirman el toque --------------------------- */

.t-site .t-button,
.t-site .button,
.t-site button[type="submit"],
.t-site .wa-consulta {
    transition:
        background var(--t-mov-normal) ease,
        color      var(--t-mov-normal) ease,
        transform  var(--t-mov-rapido) var(--t-mov-curva);
}
.t-site .t-button:active,
.t-site .button:active,
.t-site button[type="submit"]:active { transform: scale(.98); }

/* --- enlaces de texto: el subrayado crece ------------------ */

.t-site .t-text-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--t-mov-normal) var(--t-mov-curva);
    text-decoration: none;
}
.t-site .t-text-link:hover,
.t-site .t-text-link:focus-visible { background-size: 100% 1px; }

/* --- las imágenes aparecen, no saltan ---------------------- */

.t-enhanced .t-site img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--t-mov-normal) ease;
}
.t-enhanced .t-site img[loading="lazy"].is-cargada,
.t-enhanced .t-site img[loading="lazy"][data-cargada] { opacity: 1; }

/* --- el carrito confirma que agregaste --------------------- */

@keyframes t-pulso {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.28); }
    100% { transform: scale(1); }
}
.t-cart-count.is-pulso { animation: t-pulso 460ms var(--t-mov-curva); }

/* --- FAQ: abre sin dar el salto ---------------------------- */

.t-site details > summary { transition: color var(--t-mov-normal) ease; }
.t-site details[open] > summary ~ * {
    animation: t-desplegar var(--t-mov-normal) var(--t-mov-curva);
}
@keyframes t-desplegar {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --- el precio avisa que cambió (variantes) ---------------- */

@keyframes t-destello {
    0%   { opacity: .35; }
    100% { opacity: 1; }
}
.t-site .woocommerce-variation-price .amount { animation: t-destello var(--t-mov-lento) ease; }

/* ------------------------------------------------------------------
   Dónde NO hay movimiento
   ------------------------------------------------------------------ */

/* El hero es lo primero que se ve y lo que Google mide como LCP:
   empezar invisible retrasaría esa métrica. */
.t-hero [data-reveal] { opacity: 1; transform: none; }

/* En el checkout nada compite con terminar la compra. */
.woocommerce-checkout [data-reveal] { opacity: 1; transform: none; transition: none; }
.woocommerce-checkout ul.products li.product:hover { transform: none; }

/* Quien pidió menos movimiento en su sistema, no recibe ninguno.
   secciones.css ya apaga duraciones globalmente; esto cubre los estados. */
@media (prefers-reduced-motion: reduce) {
    .t-enhanced [data-reveal],
    .t-enhanced .t-site img[loading="lazy"] { opacity: 1; transform: none; }
    .t-site ul.products li.product:hover { transform: none; }
    .t-site ul.products li.product:hover img { transform: none; }
    .t-cart-count.is-pulso { animation: none; }
}