/* Moramay · Home · "De la cereza a tu bolsa"
   Ilustraciones de línea animadas para los 4 pasos del proceso.
   Se activa con .mmp-on (lo agrega mmh-proceso.js al entrar en pantalla). */

.mmh-process-grid {
  --mmp-ink: var(--ink, #1F1739);
  --mmp-paper: var(--paper, #F4EFE6);
  --mmp-soft: var(--paper-soft, #EAE3D4);
  --mmp-honey: var(--honey, #C99B5C);
  --mmp-rubi: var(--rubi, #7A1F2B);
  --mmp-raiz: var(--raiz, #5A3A2A);
  --mmp-unripe: #A9B08C;
  --mmp-bloom: cubic-bezier(.16, 1, .3, 1);
  --mmp-natural: cubic-bezier(.22, .61, .36, 1);
  --mmp-draw: 1.6s;
}

/* Línea que une los pasos: se llena de miel de izquierda a derecha */
.mmp-line {
  position: absolute;
  top: 17px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--mmp-honey);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 2.4s var(--mmp-natural);
  pointer-events: none;
}
.mmh-process-grid.mmp-on .mmp-line { transform: scaleX(1); }

/* Número: de contorno a tinta llena cuando la línea lo alcanza */
.mmh-process-grid .mmh-step-num {
  background: var(--mmp-paper);
  color: var(--mmp-ink);
  box-shadow: inset 0 0 0 1px var(--mmp-ink);
  transition: background .6s var(--mmp-natural) var(--mmp-delay, 0s),
              color .6s var(--mmp-natural) var(--mmp-delay, 0s);
}
.mmh-proc-step.mmp-on .mmh-step-num {
  background: var(--mmp-ink);
  color: var(--mmp-paper);
}

/* Opción C · números 01–04 */
[data-mmp-marker="numero"] .mmh-step-num {
  font-style: italic;
  font-size: 14px;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
}

/* Opción B · marcadores que se transforman (cereza, grano con miel, grano tostado, gota) */
[data-mmp-marker="transforma"] .mmh-step-num {
  width: 40px;
  height: 40px;
  margin-top: -2px;
  background: var(--mmp-paper);
  box-shadow: inset 0 0 0 1px var(--mmp-ink);
  transition: box-shadow .6s var(--mmp-natural) var(--mmp-delay, 0s);
}
[data-mmp-marker="transforma"] .mmh-proc-step.mmp-on .mmh-step-num {
  background: var(--mmp-paper);
  box-shadow: inset 0 0 0 1.5px var(--mmp-honey);
}
[data-mmp-marker="transforma"] .mmh-step-num svg { width: 22px; height: 22px; overflow: visible; }
.mmh-step-num .mk-s { fill: none; stroke: var(--mmp-ink); stroke-width: 1.3; stroke-linecap: round; }
.mmh-step-num .mk-cherry,
.mmh-step-num .mk-honey,
.mmh-step-num .mk-roast,
.mmh-step-num .mk-drop {
  fill: transparent;
  stroke: var(--mmp-ink);
  stroke-width: 1.3;
  transition: fill 1.2s var(--mmp-natural) calc(var(--mmp-delay, 0s) + .3s);
}
.mmp-on .mmh-step-num .mk-cherry { fill: var(--mmp-rubi); }
.mmp-on .mmh-step-num .mk-honey { fill: var(--mmp-honey); }
.mmp-on .mmh-step-num .mk-roast { fill: var(--mmp-raiz); }
.mmp-on .mmh-step-num .mk-drop { fill: var(--mmp-ink); }
.mmp-on .mmh-step-num .mk-seam { stroke: var(--mmp-paper); transition: stroke 1.2s var(--mmp-natural) calc(var(--mmp-delay, 0s) + .3s); }
[data-mmp-marker="transforma"] .mmh-proc-step.mmp-on .mmh-step-num svg {
  animation: mmp-pop .9s var(--mmp-bloom) calc(var(--mmp-delay, 0s) + .2s) both;
}
@keyframes mmp-pop {
  0% { transform: scale(.8); }
  100% { transform: scale(1); }
}

/* Contenedor de la ilustración */
.mmp-art {
  width: 112px;
  height: 94px;
  margin: -6px 0 14px;
}
.mmp-art svg { width: 100%; height: 100%; overflow: visible; display: block; }

.mmp-art .s {
  fill: none;
  stroke: var(--mmp-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mmp-art .thin { stroke-width: 1; }

/* Trazo que se dibuja: todos usan pathLength="1" */
.mmp-art .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--mmp-draw) var(--mmp-natural) calc(var(--mmp-delay, 0s) + var(--o, 0s));
}
.mmp-on .mmp-art .d { stroke-dashoffset: 0; }

/* Elementos que aparecen después del trazo */
.mmp-art .f {
  opacity: 0;
  transition: opacity .9s var(--mmp-bloom) calc(var(--mmp-delay, 0s) + var(--o, .9s));
}
.mmp-on .mmp-art .f { opacity: 1; }

/* I · Cosecha: las cerezas maduran de verde a rubí y el racimo se mece */
.mmp-art .mmp-cherry {
  fill: var(--mmp-unripe);
  transition: opacity .9s var(--mmp-bloom) calc(var(--mmp-delay, 0s) + var(--o, 1s)),
              fill 2.2s var(--mmp-natural) calc(var(--mmp-delay, 0s) + var(--o, 1s) + .6s);
}
.mmp-on .mmp-art .mmp-cherry { fill: var(--mmp-rubi); }
.mmp-sway { transform-origin: 60px 30px; transform-box: view-box; }
.mmp-on .mmp-sway { animation: mmp-sway 7s ease-in-out calc(var(--mmp-delay, 0s) + 2.8s) infinite; }
@keyframes mmp-sway {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(2.4deg); }
  70% { transform: rotate(-1.8deg); }
}

/* II · Fermentación: el tanque se llena y suben burbujas */
.mmp-liquid {
  fill: var(--mmp-honey);
  fill-opacity: .28;
  transform: scaleY(0);
  transform-origin: 60px 85px;
  transform-box: view-box;
  transition: transform 1.8s var(--mmp-bloom) calc(var(--mmp-delay, 0s) + .7s);
}
.mmp-on .mmp-liquid { transform: scaleY(1); }
.mmp-bubble { fill: var(--mmp-paper); stroke: var(--mmp-ink); stroke-width: 1; opacity: 0; }
.mmp-on .mmp-bubble { animation: mmp-rise 3.6s var(--mmp-natural) calc(var(--mmp-delay, 0s) + 2.2s + var(--b, 0s)) infinite; }
@keyframes mmp-rise {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-30px); }
}
.mmp-art .mmp-clock { stroke: var(--mmp-honey); stroke-width: 2; }

/* III · Tostión: el tambor gira y el grano pasa de verde a miel a tostado */
.mmp-drum { transform-origin: 60px 46px; transform-box: view-box; }
.mmp-on .mmp-drum { animation: mmp-spin 16s linear calc(var(--mmp-delay, 0s) + 1.6s) infinite; }
@keyframes mmp-spin { to { transform: rotate(360deg); } }
.mmp-bean { fill: var(--mmp-unripe); stroke: var(--mmp-ink); stroke-width: 1; }
.mmp-on .mmp-bean { animation: mmp-roast 3.2s var(--mmp-natural) calc(var(--mmp-delay, 0s) + 1s) forwards; }
@keyframes mmp-roast {
  0% { fill: var(--mmp-unripe); }
  45% { fill: var(--mmp-honey); }
  100% { fill: var(--mmp-raiz); }
}
.mmp-art .mmp-heat { stroke: var(--mmp-honey); }
.mmp-on .mmp-heat { animation: mmp-flicker 2.8s ease-in-out calc(var(--mmp-delay, 0s) + 2s + var(--b, 0s)) infinite; }
@keyframes mmp-flicker {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* IV · Tu taza: café en la taza y vapor que sube */
.mmp-coffee { fill: var(--mmp-raiz); }
.mmp-steam {
  stroke: var(--mmp-ink);
  stroke-width: 1.2;
  stroke-dasharray: .35 .65;
  stroke-dashoffset: 1;
  opacity: 0;
}
.mmp-on .mmp-steam { animation: mmp-steam 3.4s linear calc(var(--mmp-delay, 0s) + 2.2s + var(--b, 0s)) infinite; }
@keyframes mmp-steam {
  0% { stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: .75; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Pantallas medianas y móviles: sin línea, cada paso se anima solo */
@media (max-width: 960px) {
  .mmp-line { display: none; }
}

/* Movimiento reducido: estado final, sin bucles */
@media (prefers-reduced-motion: reduce) {
  .mmp-line,
  .mmh-process-grid .mmh-step-num,
  .mmp-art .d, .mmp-art .f, .mmp-cherry, .mmp-liquid { transition: none !important; }
  .mmp-sway, .mmp-drum, .mmp-bubble, .mmp-heat, .mmp-steam, .mmp-bean,
  .mmh-step-num svg { animation: none !important; }
  .mmh-step-num [class^="mk-"] { transition: none !important; }
  .mmp-bean { fill: var(--mmp-raiz); }
  .mmp-bubble, .mmp-steam { opacity: .6; stroke-dashoffset: 0; }
}