/* ════════════════════════════════════════════════════════════════════════════════════════════
   Icon motion — hover animations for Lucide icons, in plain CSS.
   Modelled on lucide-animated.com (MIT), rewritten without React or JavaScript.

   FOR THE WORDPRESS DEVELOPER
   1. Copy this file into the theme and load it on every page, e.g. in functions.php:
        wp_enqueue_style( 'icon-motion', get_stylesheet_directory_uri() . '/icon-motion.css', [], '1.0' );
   2. Icons must be INLINE SVG straight from Lucide, keeping Lucide's own classes:
        <svg class="lucide lucide-arrow-right" …><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
      Not <img src="…svg">, not an icon font: CSS cannot reach inside those (the icon simply
      stays still; nothing breaks). Any way of printing inline Lucide SVG works (copied markup,
      a PHP include, an icon plugin), as long as the classes and the order of the SVG children stay
      as Lucide ships them (checked against Lucide 1.52).
   3. An icon animates when the element it sits in is hovered or focused with the keyboard:
        <a>, <button>, <summary>, <label>, or any element with the attribute data-icon-motion
      (use that on non-clickable rows, e.g. a list of benefits). Disabled buttons stay still.
   4. Nothing else is needed. With "reduce motion" switched on in the system, nothing moves.

   Which icons move and how is listed at /design-system/#icon-motion.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --im-ease: cubic-bezier(.4, 0, .2, 1);
  /* Spring (stiffness ~100, damping ~15) for the "turn and stay" icons; easeOut where linear() is missing. */
  --im-spring: cubic-bezier(.2, 0, 0, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --im-spring: linear(0, .09, .29, .51, .7, .84, .93, .99, 1.02, 1.03, 1.03, 1.02, 1.01, 1); }
}

@media (prefers-reduced-motion: no-preference) {

  /* Every part of an icon turns and scales around its own centre unless set otherwise. */
  .lucide > * { transform-box: fill-box; transform-origin: center; }

  /* ── Turn and stay while hovered (transitions, so they turn back on leave) ─────────────── */
  .lucide-plus,
  .lucide-rotate-ccw,
  .lucide-repeat,
  .lucide-badge-percent > :first-child { transition: transform .5s var(--im-spring); }

  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-plus { transform: rotate(180deg); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-rotate-ccw { transform: rotate(-50deg); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-repeat { transform: rotate(180deg); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-badge-percent > :first-child { transform: rotate(180deg); transition-delay: .1s; }

  /* ── Play once on hover (keyframe animations) ─────────────────────────────────────────── */

  /* Arrows: the shaft shortens and the head pulls back, then both snap out again. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-right > :nth-child(1) { transform-origin: left; animation: im-shaft-x .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-right > :nth-child(2) { animation: im-back-x .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-left > :nth-child(1) { animation: im-fwd-x .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-left > :nth-child(2) { transform-origin: right; animation: im-shaft-x .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-up > :nth-child(1) { animation: im-fwd-y .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-up > :nth-child(2) { transform-origin: bottom; animation: im-shaft-y .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-down > :nth-child(1) { transform-origin: top; animation: im-shaft-y .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-down > :nth-child(2) { animation: im-back-y .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-arrow-up-right { transform-origin: top right; animation: im-diagonal .5s ease-in-out; }

  /* Chevrons: a small nudge in their direction. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-chevron-down > * { animation: im-nudge-down .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-chevron-right > * { animation: im-nudge-right .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-chevron-left > * { animation: im-nudge-left .4s var(--im-ease); }

  /* Lines drawn again from the start (stroke-dasharray = the line's length). */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-x > * { stroke-dasharray: 17; animation: im-draw-17 .35s var(--im-ease) backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-x > :nth-child(2) { animation-delay: .15s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-check > * { stroke-dasharray: 23; animation: im-draw-23 .4s var(--im-ease) backwards, im-grow .4s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) :is(.lucide-circle-check, .lucide-shield-check) > :nth-child(2) { stroke-dasharray: 12; animation: im-draw-12 .4s var(--im-ease) backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-zap > * { stroke-dasharray: 62; animation: im-draw-62 .6s var(--im-ease) backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-flame > * { stroke-dasharray: 58; animation: im-draw-58 .5s var(--im-ease) .1s backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-wind > * { stroke-dasharray: 28; animation: im-draw-28 .5s ease-in-out backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-wind > :nth-child(1) { animation-delay: .2s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-wind > :nth-child(3) { animation-delay: .4s; }

  /* Shopping bag: lifts, the handle follows a beat later. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-shopping-bag > * { animation: im-lift .5s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-shopping-bag > :nth-child(1) { animation-delay: .06s; }

  /* Trash: the lid (rim + handle) tips open and closes. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-trash > :is(:nth-child(4), :nth-child(5)) { animation: im-lid .5s var(--im-ease); }
  .lucide-trash > :nth-child(5) { transform-origin: 0 4px; }
  .lucide-trash > :nth-child(4) { transform-origin: 0 0; }

  /* Lock: a small shake, the shackle lifts. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-lock { animation: im-shake 1s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-lock > :nth-child(2) { animation: im-shackle .6s var(--im-ease); }

  /* Map pin: hops up and stays a little raised, the dot is drawn again. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-map-pin { animation: im-hop .5s var(--im-ease) forwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-map-pin > :nth-child(2) { stroke-dasharray: 19; animation: im-draw-19 .5s var(--im-ease) .3s backwards; }

  /* Phone rings, pencil scribbles, envelope flap redraws. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-phone { animation: im-ring .9s ease-in-out; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-pencil { transform-origin: bottom left; animation: im-scribble .6s ease-in-out; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-mail > :nth-child(1) { stroke-dasharray: 24; animation: im-draw-24 .45s var(--im-ease) backwards; }

  /* Truck: rocks along while hovered. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-truck > :is(:nth-child(1), :nth-child(2), :nth-child(3)) { animation: im-rock .4s ease-in-out infinite; }

  /* Media controls. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-play > * { animation: im-play .5s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-pause > :nth-child(1) { animation: im-tap .5s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-pause > :nth-child(2) { animation: im-tap .5s var(--im-ease) .1s; }

  /* Nature icons (benefits, ingredients): a breath of movement. */
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-leaf { animation: im-flutter 1.6s ease-in-out; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-snowflake { animation: im-shiver .4s linear; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :not(:first-child) { animation: im-fade-in .3s var(--im-ease) backwards; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(3) { animation-delay: .1s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(4) { animation-delay: .2s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(5) { animation-delay: .3s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(6) { animation-delay: .4s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(7) { animation-delay: .5s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(8) { animation-delay: .6s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sun > :nth-child(9) { animation-delay: .7s; }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sparkles > :nth-child(1) { animation: im-twinkle 1s var(--im-ease); }
  :where(a, button, summary, label, [data-icon-motion]):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) .lucide-sparkles > :not(:first-child) { animation: im-blink 1.2s ease-in-out; }

  /* ── Keyframes ────────────────────────────────────────────────────────────────────────── */
  @keyframes im-shaft-x { 50% { transform: scaleX(.64); } }
  @keyframes im-shaft-y { 50% { transform: scaleY(.64); } }
  @keyframes im-back-x { 50% { transform: translateX(-3px); } }
  @keyframes im-fwd-x { 50% { transform: translateX(3px); } }
  @keyframes im-back-y { 50% { transform: translateY(-3px); } }
  @keyframes im-fwd-y { 50% { transform: translateY(3px); } }
  @keyframes im-diagonal { 50% { transform: translate(-4px, 4px) scale(.85); } }
  @keyframes im-nudge-down { 50% { transform: translateY(2px); } }
  @keyframes im-nudge-right { 50% { transform: translateX(2px); } }
  @keyframes im-nudge-left { 50% { transform: translateX(-2px); } }
  @keyframes im-draw-12 { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-17 { from { stroke-dashoffset: 17; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-19 { from { stroke-dashoffset: 19; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-23 { from { stroke-dashoffset: 23; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-24 { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-28 { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-58 { from { stroke-dashoffset: 58; } to { stroke-dashoffset: 0; } }
  @keyframes im-draw-62 { from { stroke-dashoffset: 62; } to { stroke-dashoffset: 0; } }
  @keyframes im-grow { from { transform: scale(.5); } }
  @keyframes im-lift { 40% { transform: translateY(-2px); } 70% { transform: translateY(.5px); } }
  @keyframes im-lid { 40% { transform: translateY(-1.5px) rotate(-14deg); } 75% { transform: rotate(3deg); } }
  @keyframes im-shake { 0% { transform: rotate(-3deg) scale(.95); } 33% { transform: rotate(1deg) scale(1.05); } 66% { transform: rotate(-2deg) scale(.98); } }
  @keyframes im-shackle { 40% { transform: translateY(-1.5px); } }
  @keyframes im-hop { 60% { transform: translateY(-5px); } to { transform: translateY(-3px); } }
  @keyframes im-ring { 0% { transform: rotate(10deg); } 25% { transform: rotate(20deg) scale(1.1); } 50% { transform: rotate(-10deg) scale(1.05); } 75% { transform: rotate(10deg); } }
  @keyframes im-scribble { 25% { transform: rotate(-10deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
  @keyframes im-rock { 25% { transform: translateY(-1px); } 75% { transform: translateY(-.5px); } }
  @keyframes im-play { 20% { transform: translateX(-1px) rotate(-10deg); } 50% { transform: translateX(2px); } }
  @keyframes im-tap { 40% { transform: translateY(2px); } }
  @keyframes im-flutter { 25% { transform: translate(2px, -4px) rotate(-8deg); } 50% { transform: translate(-2px, -2px) rotate(4deg); } 75% { transform: translate(1px, -1px) rotate(-3deg); } }
  @keyframes im-shiver { 20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } }
  @keyframes im-fade-in { from { opacity: 0; } }
  @keyframes im-twinkle { 33% { transform: translateY(-1px); fill: currentColor; } 66% { fill: currentColor; } }
  @keyframes im-blink { 0%, 30%, 70% { opacity: 0; } 15%, 50%, 100% { opacity: 1; } }
}