/*
 * Íconos animados al pasar el mouse.
 *
 * Port a CSS de lucide-animated (https://lucide-animated.com — MIT, © pqoqubbw).
 * La librería es para React + Motion; acá se reproducen sus animaciones sobre los SVG
 * que ya genera lucide.min.js. mg-icons.js agrega .mg-icon--play al ícono cuando el
 * mouse entra al enlace, botón o card que lo contiene, y la quita al terminar.
 *
 * Las medidas en px son unidades del viewBox (24 × 24) de cada ícono.
 * Para sumar un ícono: agregar su bloque acá y, si se "dibuja", su nombre en
 * DRAW_ICONS dentro de mg-icons.js.
 */

@media (prefers-reduced-motion: no-preference) {
  svg.mg-icon--play {
    overflow: visible;
  }

  /* ── Flechas ── */

  svg.lucide-arrow-up-right.mg-icon--play > * {
    transform-origin: 17px 7px;
    animation: mg-ia-arrow-up-right 0.5s ease-in-out;
  }

  svg.lucide-arrow-right.mg-icon--play > :nth-child(1) {
    transform-origin: 5px 12px;
    animation: mg-ia-shaft 0.4s ease-in-out;
  }

  svg.lucide-arrow-right.mg-icon--play > :nth-child(2) {
    animation: mg-ia-nudge-left-3 0.4s ease-in-out;
  }

  svg.lucide-arrow-left.mg-icon--play > :nth-child(1) {
    animation: mg-ia-nudge-right-3 0.4s ease-in-out;
  }

  svg.lucide-arrow-left.mg-icon--play > :nth-child(2) {
    transform-origin: 19px 12px;
    animation: mg-ia-shaft 0.4s ease-in-out;
  }

  svg.lucide-chevron-down.mg-icon--play > * {
    animation: mg-ia-chevron-down 0.5s ease-in-out;
  }

  svg.lucide-chevron-right.mg-icon--play > * {
    animation: mg-ia-chevron-right 0.5s ease-in-out;
  }

  svg.lucide-chevron-left.mg-icon--play > * {
    animation: mg-ia-chevron-left 0.5s ease-in-out;
  }

  /* ── Etiquetas del carrusel ── */

  svg.lucide-flame.mg-icon--play > * {
    animation: mg-ia-draw 0.4s ease-in-out 0.1s;
  }

  /* 1: punta de la flecha · 2: línea de tendencia */
  svg.lucide-trending-down.mg-icon--play > :nth-child(1) {
    animation:
      mg-ia-nudge-down-right 0.5s ease-in-out,
      mg-ia-draw-from-middle 0.3s ease-in-out 0.3s;
  }

  svg.lucide-trending-down.mg-icon--play > :nth-child(2) {
    animation:
      mg-ia-nudge-down-right 0.5s ease-in-out,
      mg-ia-draw-from-end 0.4s ease-in-out;
  }

  /* ── Subida de archivos ── */

  /* upload-cloud · 1: asta · 2: nube · 3: punta */
  svg:is(.lucide-upload-cloud, .lucide-cloud-upload).mg-icon--play > :is(:nth-child(1), :nth-child(3)),
  /* upload · 1: asta · 2: punta · 3: bandeja */
  svg.lucide-upload.mg-icon--play > :is(:nth-child(1), :nth-child(2)) {
    animation: mg-ia-lift 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }

  /* ── Búsqueda, contacto y acciones ── */

  svg.lucide-search.mg-icon--play > * {
    animation: mg-ia-search 1s ease-in-out;
  }

  svg.lucide-mic.mg-icon--play > rect {
    animation: mg-ia-mic 0.6s ease-in-out;
  }

  svg.lucide-phone.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation: mg-ia-phone 0.9s ease-in-out;
  }

  /* Las dos agujas son un solo trazo en Lucide: giran juntas una vuelta. */
  svg.lucide-clock.mg-icon--play > path {
    transform-origin: 12px 12px;
    animation: mg-ia-spin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  svg.lucide-map-pin.mg-icon--play > path {
    animation: mg-ia-pin-jump 0.8s ease-in-out;
  }

  svg.lucide-map-pin.mg-icon--play > circle {
    animation:
      mg-ia-pin-jump 0.8s ease-in-out,
      mg-ia-draw 0.5s ease-in-out 0.3s;
  }

  svg.lucide-message-circle.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation: mg-ia-wiggle 0.5s ease-in-out;
  }

  svg.lucide-x.mg-icon--play > :nth-child(1) {
    animation: mg-ia-draw 0.3s ease-in-out;
  }

  svg.lucide-x.mg-icon--play > :nth-child(2) {
    animation: mg-ia-draw 0.3s ease-in-out 0.2s backwards;
  }

  /* El trazo de Lucide va de derecha a izquierda: se dibuja desde el final. */
  svg.lucide-check.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation:
      mg-ia-draw-from-end 0.4s ease-in-out,
      mg-ia-pop 0.4s ease-in-out;
  }

  svg.lucide-plus.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation: mg-ia-half-turn 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  /* ── Ayuda y newsletter ── */

  svg.lucide-shopping-cart.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation: mg-ia-cart 0.9s ease-in-out;
  }

  /* No está en lucide-animated: el lápiz (trazos 5 y 6) garabatea apoyado en la punta. */
  svg.lucide-pencil-ruler.mg-icon--play > :is(:nth-child(5), :nth-child(6)) {
    transform-origin: 2.5px 21.5px;
    animation: mg-ia-scribble 1s ease-in-out;
  }

  /* No está en lucide-animated: la hoja se levanta y el tilde (trazo 3) se vuelve a dibujar. */
  svg.lucide-file-check.mg-icon--play > :is(:nth-child(1), :nth-child(2)) {
    animation: mg-ia-mail-lift 0.6s ease-in-out;
  }

  svg.lucide-file-check.mg-icon--play > :nth-child(3) {
    animation:
      mg-ia-mail-lift 0.6s ease-in-out,
      mg-ia-draw 0.4s ease-in-out 0.2s backwards;
  }

  /* No está en lucide-animated: el sobre se levanta y la solapa (trazo 1) se dibuja. */
  svg.lucide-mail.mg-icon--play > rect {
    animation: mg-ia-mail-lift 0.6s ease-in-out;
  }

  svg.lucide-mail.mg-icon--play > path {
    animation:
      mg-ia-mail-lift 0.6s ease-in-out,
      mg-ia-draw 0.4s ease-in-out 0.1s;
  }

  /* ── Tema claro / oscuro ── */

  svg.lucide-moon.mg-icon--play > * {
    transform-origin: 12px 12px;
    animation: mg-ia-moon 1.2s ease-in-out;
  }

  /* Los rayos parpadean en ronda, en sentido horario desde arriba. */
  svg.lucide-sun.mg-icon--play > path {
    animation: mg-ia-blink 0.3s ease-in-out;
  }

  svg.lucide-sun.mg-icon--play > :nth-child(2) { animation-delay: 0.1s; }
  svg.lucide-sun.mg-icon--play > :nth-child(9) { animation-delay: 0.2s; }
  svg.lucide-sun.mg-icon--play > :nth-child(7) { animation-delay: 0.3s; }
  svg.lucide-sun.mg-icon--play > :nth-child(5) { animation-delay: 0.4s; }
  svg.lucide-sun.mg-icon--play > :nth-child(3) { animation-delay: 0.5s; }
  svg.lucide-sun.mg-icon--play > :nth-child(8) { animation-delay: 0.6s; }
  svg.lucide-sun.mg-icon--play > :nth-child(6) { animation-delay: 0.7s; }
  svg.lucide-sun.mg-icon--play > :nth-child(4) { animation-delay: 0.8s; }
}

/* ── Movimientos ── */

@keyframes mg-ia-arrow-up-right {
  50% { transform: translate(-4px, 4px) scale(0.85); }
}

@keyframes mg-ia-shaft {
  50% { transform: scaleX(0.643); }
}

@keyframes mg-ia-nudge-left-3 {
  50% { transform: translateX(-3px); }
}

@keyframes mg-ia-nudge-right-3 {
  50% { transform: translateX(3px); }
}

@keyframes mg-ia-nudge-down-right {
  50% { transform: translate(2px, 2px); }
}

@keyframes mg-ia-chevron-down {
  40% { transform: translateY(2px); }
}

@keyframes mg-ia-chevron-right {
  40% { transform: translateX(2px); }
}

@keyframes mg-ia-chevron-left {
  40% { transform: translateX(-2px); }
}

@keyframes mg-ia-lift {
  45%, 60% { transform: translateY(-2px); }
}

@keyframes mg-ia-search {
  33% { transform: translate(0, -4px); }
  66% { transform: translate(-3px, 0); }
}

@keyframes mg-ia-mic {
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-2px); }
}

@keyframes mg-ia-phone {
  0% { transform: rotate(10deg) scale(1); }
  25% { transform: rotate(20deg) scale(1.05); }
  50% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes mg-ia-spin {
  to { transform: rotate(360deg); }
}

@keyframes mg-ia-half-turn {
  to { transform: rotate(180deg); }
}

@keyframes mg-ia-pin-jump {
  35% { transform: translateY(-5px); }
  60%, 75% { transform: translateY(-3px); }
}

@keyframes mg-ia-wiggle {
  0% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(-7deg) scale(1.05); }
  66% { transform: rotate(7deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes mg-ia-moon {
  20% { transform: rotate(-10deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(5deg); }
}

@keyframes mg-ia-cart {
  10% { transform: translateY(0) scale(1.1); }
  32% { transform: translateY(-5px) scale(1.1); }
  55% { transform: translateY(0) scale(1.1); }
  77% { transform: translateY(-5px) scale(1.1); }
}

@keyframes mg-ia-scribble {
  20% { transform: translateY(2px) rotate(0deg); }
  40% { transform: translateY(0) rotate(8deg); }
  60% { transform: translateY(-1px) rotate(-3deg); }
  80% { transform: translateY(0) rotate(8deg); }
}

@keyframes mg-ia-mail-lift {
  40% { transform: translateY(-2px); }
}

@keyframes mg-ia-pop {
  from { transform: scale(0.5); }
}

@keyframes mg-ia-blink {
  from { opacity: 0; }
}

/* ── Trazos que se dibujan (necesitan pathLength="1", lo pone mg-icons.js) ── */

@keyframes mg-ia-draw {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: 1; }
  100% { stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes mg-ia-draw-from-end {
  0% { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
  25% { opacity: 1; }
  100% { stroke-dasharray: 1 1; stroke-dashoffset: 2; opacity: 1; }
}

@keyframes mg-ia-draw-from-middle {
  0% { stroke-dasharray: 0 2; stroke-dashoffset: 1.5; opacity: 0; }
  33% { opacity: 1; }
  100% { stroke-dasharray: 1 2; stroke-dashoffset: 3; opacity: 1; }
}