/* ============================================================
   Humart · Microinteracciones (efectos) — librería reutilizable
   Versión integrada en el storefront: SCOPED bajo .hm-* para no
   pisar los tokens del DS (humart-tokens.css ya define
   --navy/--mint/--coral/--line/--fg-3/--mint-50/--font-sans).
   Solo añadimos vars NUEVAS prefijadas --hm-* (no colisionan).
   Efectos incluidos: 1 add-to-cart · 2 pull-to-refresh ·
   4 checks que se dibujan · 7 toast · 8 easter egg del logo.
   (El efecto 6 "galería elástica" se omite a propósito: la PDP
   tiene su propia galería.)
   ============================================================ */

:root{
  /* Solo vars nuevas — NO redefinimos navy/mint/coral/line/fg-3/etc. */
  --hm-cream:#fdfbf6; --hm-soft:#f6f7fb;
  --hm-ease:cubic-bezier(.4,0,.2,1); --hm-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* ── 1 · ADD TO CART · squash + punto volador + contador ──
   HTML:  <button class="hm-atc">Añadir <span class="hm-count">0</span></button>
          <span class="hm-fly"></span>   (un solo nodo dentro del contenedor relativo)
   El squash es CSS; el punto volador y el bounce los hace el JS.
   (Disponible en la librería; no cableado a ningún botón por defecto.) */
.hm-atc{transition:transform .18s var(--hm-bounce);}
.hm-atc:active{transform:scale(.95);}
.hm-fly{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--mint);z-index:60;pointer-events:none;opacity:0;}

/* ── 2 · PULL TO REFRESH · franja con H. que rebota ──
   HTML:  <div class="hm-ptr"><span class="hm-ptr-h">H<i>.</i></span><span class="hm-ptr-l">Actualizando</span></div>
   (primer hijo del contenedor scrolleable, position:relative)
   (Disponible en la librería; no cableado por defecto.) */
.hm-ptr{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--navy);z-index:25;background:var(--hm-cream);border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .4s var(--hm-bounce);}
.hm-ptr.spin{transform:translateY(0);}
.hm-ptr-h{font-family:var(--font-serif);font-weight:900;font-size:22px;}
.hm-ptr-h i{color:var(--mint);font-style:normal;display:inline-block;}
.hm-ptr.spin .hm-ptr-h i{animation:hm-ptrb .6s var(--hm-bounce) infinite;}
.hm-ptr-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);}
@keyframes hm-ptrb{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* ── 4 · CHECKS QUE SE DIBUJAN · trust signals en cascada ──
   API genérica reutilizable:
     <div class="hm-checks">
       <div class="c"><svg class="hm-ck" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11"/><path d="M7 12.5l3.2 3.2L17 9"/></svg> Texto</div>
       ... (hasta 3) </div>
   Añade la clase .draw al contenedor cuando entre en viewport (drawChecks).
   NOTA: en el storefront el efecto está integrado en el trust-stack del
   popup COD reutilizando @keyframes hm-draw (ver storefront-cod-popup). */
.hm-checks .hm-ck{width:20px;height:20px;flex:0 0 auto;}
.hm-checks .hm-ck circle{fill:var(--mint-50);}
.hm-checks .hm-ck path{stroke:var(--mint);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:20;stroke-dashoffset:20;}
.hm-checks.draw .hm-ck path{animation:hm-draw .5s var(--hm-ease) forwards;}
.hm-checks.draw .c:nth-child(2) .hm-ck path{animation-delay:.12s;}
.hm-checks.draw .c:nth-child(3) .hm-ck path{animation-delay:.24s;}
.hm-checks .c{display:flex;align-items:center;gap:8px;}
@keyframes hm-draw{to{stroke-dashoffset:0;}}

/* ── 7 · TOAST DE ÉXITO · sube desde abajo y auto-cierra ──
   HTML:  <div class="hm-toast"><div class="mini">…</div><div class="txt"><b>…</b><span>…</span></div><div class="ok">✓</div></div>
   Añade/quita la clase .show por JS.
   (Disponible en la librería; no cableado por defecto.) */
.hm-toast{position:absolute;left:14px;right:14px;bottom:24px;background:var(--navy);color:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;z-index:40;transform:translateY(160%);opacity:0;transition:transform .5s var(--hm-bounce),opacity .3s;box-shadow:0 16px 36px rgba(0,0,0,.3);}
.hm-toast.show{transform:translateY(0);opacity:1;}
.hm-toast .mini{width:38px;height:38px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.hm-toast .mini img{width:80%;height:80%;object-fit:contain;}
.hm-toast .txt b{display:block;font-weight:700;font-size:13px;}
.hm-toast .txt span{font-size:11px;color:rgba(255,255,255,.6);}
.hm-toast .ok{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* ── 8 · EASTER EGG DEL LOGO · el punto late (pulso cardíaco) ──
   Se integra con el componente de logo existente (.hm-logo / .hm-logo__dot).
   logoBeat() añade la clase .beat tras un long-press de ~1,2s. NO redefine
   los estilos base del logo (los pone humart-components.css). */
.hm-logo.beat .hm-logo__dot{display:inline-block;animation:hm-beat 1s ease-in-out infinite;}
@keyframes hm-beat{0%,100%{transform:scale(1);}15%{transform:scale(1.5);}30%{transform:scale(1);}45%{transform:scale(1.35);}}

@media (prefers-reduced-motion: reduce){
  .hm-atc,.hm-ptr,.hm-toast{transition:none;}
  .hm-checks.draw .hm-ck path,.hm-logo.beat .hm-logo__dot,.hm-ptr.spin .hm-ptr-h i{animation:none;stroke-dashoffset:0;}
}