/* ============ Wadicos · Components · Micro-animations ============ *
 * CSS keyframes for the three current micro-animations:
 *   1. Heart pulse  — favorite toggle, subscribe success
 *   2. Check draw   — basket-add confirmation
 *   3. Vapor wisp   — /mon-devis/ empty state
 *
 * Lottie is banned — see
 * /.claude/skills/wadicos-microanimation-patterns/SKILL.md
 *
 * Reduced motion: global override in base.css collapses every animation
 * to 0.01ms so each reaches its final state instantly.
 * =================================================================== */

@layer components {
  /* 1 · Heart pulse — toggle the class on, remove on `animationend`. */
  .heart-pulse {
    animation: heartPulse 480ms var(--ease-out);
    transform-origin: center;
  }
  @keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
  }

  /* 2 · Check draw — SVG <path d="M5 13 l4 4 l10 -10"> wrapped in
        <svg class="check-draw" viewBox="0 0 24 24" aria-hidden="true">.
        Lives in the .pdp-actions__confirmation banner (PDP) and the
        inline confirmation row on /mon-devis/ after add-to-basket. */
  .check-draw {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-success);
    flex: none;
  }
  .check-draw path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: drawCheck 360ms var(--ease-out) forwards;
  }
  @keyframes drawCheck { to { stroke-dashoffset: 0; } }

  /* 3 · Vapor wisp — decorative <span aria-hidden="true" class="vapor-wisp">
        inside the /mon-devis/ empty block. Subtle 8s infinite drift. */
  .vapor-wisp {
    display: inline-block;
    inline-size: 4px;
    block-size: 24px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
      to top,
      transparent,
      color-mix(in srgb, var(--color-accent-peach) 60%, transparent),
      transparent
    );
    animation: vaporWisp 8s var(--ease-in-out) infinite;
  }
  @keyframes vaporWisp {
    0%, 100% { transform: translateY(-4px); opacity: 0.4; }
    50%      { transform: translateY( 4px); opacity: 0.7; }
  }
}