/* ==========================================================================
   HADADANZA · CAPA DE EXPERIENCIA

   TESIS DE MOVIMIENTO: "sacar la pieza a la luz". El mundo del tema es oro
   sobre penumbra y la ficha dice que el producto se enseña "como una pieza
   expuesta en penumbra, con la luz cayéndole encima". El movimiento ES esa
   luz: las piezas salen de la sombra al entrar en escena, el oro barre la
   plancha al pasar el ratón, y la ficha se descubre con un foco que cruza.

   REGLAS: nada se oculta por CSS (si el JS falla, todo se ve). Los estados
   iniciales los pone GSAP. Todo cae bajo prefers-reduced-motion. Un solo
   material —la luz de oro— llevado del catálogo a la ficha.
   ========================================================================== */

/* --- Brasas ambientales (lienzo detrás de todo, muy tenue) --- */
.hd-brasas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: screen;
}

/* --- Revelado: transición común para lo que entra en escena.
   El estado oculto lo pone GSAP (gsap.set), no el CSS. --- */
.exp-reveal { will-change: transform, opacity; }

/* ==========================================================================
   CATÁLOGO · las piezas y su luz
   ========================================================================== */

/* La plancha del producto en el catálogo. El tema ya le da hover; aquí se le
   añade la profundidad y, sobre ella, el barrido de oro. */
li.product, .wc-block-product {
  position: relative;
  isolation: isolate;
}

/* El barrido de oro que cruza la plancha al pasar el ratón: una banda de luz
   diagonal enmascarada, que viaja de un lado a otro. Material = luz, no color
   plano. */
.exp-sheen { position: relative; overflow: hidden; display: block; border-radius: inherit; line-height: 0; }
.exp-sheen > img { display: block; width: 100%; height: auto; }
.exp-sheen::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg,
     transparent 30%,
     rgba(255,220,148,.00) 42%,
     rgba(255,220,148,.22) 50%,
     rgba(233,180,76,.10) 56%,
     transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--sale, cubic-bezier(.2,.8,.2,1));
}
li.product:hover .exp-sheen::after,
.wc-block-product:hover .exp-sheen::after { transform: translateX(120%); }

/* La imagen del catálogo respira al acercarte: un leve zoom y un empuje de luz.
   (No tocamos layout: solo transform/filter dentro de su marco.) */
li.product a img,
.wc-block-product img {
  transition: transform .6s var(--sale, cubic-bezier(.2,.8,.2,1)),
              filter .6s var(--sale, cubic-bezier(.2,.8,.2,1));
}
li.product:hover a img,
.wc-block-product:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) brightness(1.06);
}

/* Un filo de oro que se enciende en el borde de la pieza al pasar por encima */
.exp-sheen::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(233,180,76,0);
  transition: box-shadow .35s var(--sale, cubic-bezier(.2,.8,.2,1));
}
li.product:hover .exp-sheen::before,
.wc-block-product:hover .exp-sheen::before {
  box-shadow: inset 0 0 0 1px rgba(233,180,76,.45), inset 0 0 22px -6px rgba(233,180,76,.35);
}

/* ==========================================================================
   FICHA DE PRODUCTO · el momento focal
   ========================================================================== */

/* El foco que cruza la imagen principal una vez, al descubrirla. Lo coloca el
   JS como .hd-foco dentro del marco de la galería. */
.hd-foco {
  position: absolute; inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.hd-foco::before {
  content: "";
  position: absolute; top: -20%; bottom: -20%;
  width: 55%; left: -60%;
  background: linear-gradient(100deg,
     transparent, rgba(255,220,148,.0) 20%,
     rgba(255,220,148,.33) 50%, rgba(233,180,76,.12) 66%, transparent);
  filter: blur(2px);
  transform: skewX(-8deg);
}
.hd-foco.corre::before {
  animation: hd-foco-cruza 1.15s var(--sale, cubic-bezier(.2,.8,.2,1)) forwards;
}
@keyframes hd-foco-cruza {
  from { left: -60%; }
  to   { left: 130%; }
}

/* Un halo de oro que se enciende tras la pieza al asentarse (respira una vez) */
.hd-aura {
  position: absolute; inset: -6% ;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgba(233,180,76,.18), transparent 70%);
  opacity: 0;
}
.hd-aura.vive { animation: hd-aura-respira 2.4s var(--sale, cubic-bezier(.2,.8,.2,1)) .2s both; }
@keyframes hd-aura-respira {
  0% { opacity: 0; transform: scale(.94); }
  45% { opacity: 1; }
  100% { opacity: .5; transform: scale(1); }
}

/* ==========================================================================
   TALLAS · se encienden al elegirlas
   ========================================================================== */

/* Pulso de oro cuando una talla pasa a elegida (el tema ya le da el color;
   aquí solo el destello al encenderse). Se reproduce cada vez que se elige. */
.hd-talla.elegida { animation: hd-enciende .5s var(--sale, cubic-bezier(.2,.8,.2,1)); }
@keyframes hd-enciende {
  0%   { box-shadow: 0 0 0 0 rgba(233,180,76,.55), 0 0 0 0 rgba(233,180,76,.0); }
  60%  { box-shadow: 0 0 0 4px rgba(233,180,76,.0), 0 0 22px 2px rgba(233,180,76,.55); }
  100% { box-shadow: 0 0 0 0 rgba(233,180,76,0), 0 0 0 0 rgba(233,180,76,0); }
}
/* Al pulsar, un hundimiento táctil */
.hd-talla:active { transform: translateY(1px) scale(.97); }

/* ==========================================================================
   EL BOTÓN DE COMPRAR · incita sin gritar
   ========================================================================== */

/* Cuando ya se puede comprar (botón activo), un brillo de oro lo recorre en
   bucle lento: dice "estoy listo" sin parpadear. Se apaga si está deshabilitado
   o si el usuario pidió menos movimiento. */
.single_add_to_cart_button:not(:disabled) {
  position: relative;
  overflow: hidden;
}
.single_add_to_cart_button:not(:disabled)::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: hd-boton-brillo 3.6s var(--sale, cubic-bezier(.2,.8,.2,1)) 1s infinite;
}
@keyframes hd-boton-brillo {
  0%   { transform: translateX(-120%); }
  26%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.single_add_to_cart_button { transition: transform .18s var(--sale, cubic-bezier(.2,.8,.2,1)), box-shadow .25s var(--sale); }
.single_add_to_cart_button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(233,180,76,.6); }
.single_add_to_cart_button:not(:disabled):active { transform: translateY(0) scale(.99); }

/* La chispa que salta al añadir (la crea el JS en el punto del clic) */
.hd-chispa {
  position: fixed; z-index: 9999;
  width: 10px; height: 10px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #ffdc94, #e9b44c 45%, rgba(233,180,76,0) 70%);
  will-change: transform, opacity;
}

/* El carrito de la barra late cuando algo entra */
.hd-carro-late { animation: hd-carro 0.6s var(--sale, cubic-bezier(.2,.8,.2,1)); transform-origin: center; }
@keyframes hd-carro {
  0%,100% { transform: scale(1); }
  30% { transform: scale(1.22) rotate(-6deg); }
  60% { transform: scale(.96) rotate(3deg); }
}

/* ==========================================================================
   MENOS MOVIMIENTO · se respeta siempre
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hd-brasas { display: none !important; }
  .exp-sheen::after, .hd-foco::before { display: none !important; }
  .hd-aura { display: none !important; }
  .single_add_to_cart_button::after { animation: none !important; display: none !important; }
  .hd-talla.elegida { animation: none !important; }
  li.product:hover a img, .wc-block-product:hover img { transform: none !important; }
  .exp-reveal { opacity: 1 !important; transform: none !important; }
}