/* Moramay · Home · "Nuestra selección" (entrada de tarjetas y notas) y
   "¿No sabes cuál elegir?" (tazas de Raíz y Rubí con vapor).
   Todo es visible sin JS; mmy-home.js agrega .mmy-ready (estado inicial) y .mmy-on (animación). */

.mmh {
  --mmy-ink: var(--ink, #1F1739);
  --mmy-honey: var(--honey, #C99B5C);
  --mmy-rubi: var(--rubi, #7A1F2B);
  --mmy-muted: var(--ink-50, #5F5977);
  --mmy-bloom: cubic-bezier(.16, 1, .3, 1);
  --mmy-natural: cubic-bezier(.22, .61, .36, 1);
}

/* ───────── Nuestra selección ─────────
   Se usa la propiedad "translate" (no "transform") para no chocar con el hover de la tarjeta. */
.mmh-prod-grid.mmy-ready .mmh-pcard {
  opacity: 0;
  translate: 0 32px;
  transition: box-shadow .3s, transform .25s,
              opacity 1s var(--mmy-bloom) var(--mmy-delay, 0s),
              translate 1.1s var(--mmy-bloom) var(--mmy-delay, 0s);
}
.mmh-prod-grid.mmy-ready .mmh-pcard.mmy-on { opacity: 1; translate: none; }

/* La foto entra con un acercamiento suave que se asienta */
.mmh-prod-grid.mmy-ready .mmh-pcard-img img { scale: 1.08; transition: transform .65s, scale 1.6s var(--mmy-natural) var(--mmy-delay, 0s); }
.mmh-prod-grid.mmy-ready .mmh-pcard.mmy-on .mmh-pcard-img img { scale: 1; }

/* Las notas aparecen una a una después de la tarjeta */
.mmh-prod-grid.mmy-ready .mmh-chip {
  opacity: 0;
  translate: 0 6px;
  transition: opacity .6s var(--mmy-bloom) calc(var(--mmy-delay, 0s) + .55s + var(--c, 0) * .14s),
              translate .6s var(--mmy-bloom) calc(var(--mmy-delay, 0s) + .55s + var(--c, 0) * .14s);
}
.mmh-prod-grid.mmy-ready .mmy-on .mmh-chip { opacity: 1; translate: none; }

/* ───────── ¿No sabes cuál elegir? ───────── */
.mmy-cups {
  flex: 0 0 auto;
  width: 270px;
  height: 128px;
  margin-left: auto;
  pointer-events: none;
}
.mmy-cups svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mmy-cups .s { fill: none; stroke: var(--mmy-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mmy-ready .mmy-cups .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--mmy-natural) var(--o, 0s);
}
.mmy-on .mmy-cups .d { stroke-dashoffset: 0; }
.mmy-ready .mmy-cups .f { opacity: 0; transition: opacity .9s var(--mmy-bloom) var(--o, 1s); }
.mmy-on .mmy-cups .f { opacity: 1; }
.mmy-cups .raiz { fill: var(--mmy-honey); }
.mmy-cups .rubi { fill: var(--mmy-rubi); }
.mmy-cups .lbl { font: 9px/1 "Komet", "Outfit", system-ui, sans-serif; letter-spacing: .24em; fill: var(--mmy-muted); text-anchor: middle; }
.mmy-cups .steam { fill: none; stroke: var(--mmy-ink); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: .35 .65; stroke-dashoffset: 1; opacity: 0; }
.mmy-on .mmy-cups .steam { animation: mmy-steam 3.6s linear calc(1.8s + var(--b, 0s)) infinite; }
@keyframes mmy-steam {
  0% { stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: .7; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.mmh-cta-band .mmh-btn { flex-shrink: 0; }

@media (max-width: 960px) {
  .mmy-cups { margin-left: 0; width: 200px; height: 96px; }
}

/* Movimiento reducido: todo en su estado final */
@media (prefers-reduced-motion: reduce) {
  .mmh-prod-grid.mmy-ready .mmh-pcard,
  .mmh-prod-grid.mmy-ready .mmh-pcard-img img,
  .mmh-prod-grid.mmy-ready .mmh-chip,
  .mmy-ready .mmy-cups .d, .mmy-ready .mmy-cups .f { transition: none !important; }
  .mmy-cups .steam { animation: none !important; opacity: .5; stroke-dashoffset: 0; }
}