/* ══════════════════════════════════════════════════════════════
   PECK ICONS — CSS utilities for the SVG sprite
   Usage: <svg class="peck-icon peck-icon--lg"><use href="peck-icons.svg#peck-bird"/></svg>
   ══════════════════════════════════════════════════════════════ */

/* Base icon */
.peck-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  color: currentColor;
  flex-shrink: 0;
}

/* Sizes */
.peck-icon--xs  { width: 0.75rem;  height: 0.75rem;  }   /* 12px — inline text */
.peck-icon--sm  { width: 1rem;     height: 1rem;     }   /* 16px — buttons */
.peck-icon--md  { width: 1.5rem;   height: 1.5rem;   }   /* 24px — nav, default */
.peck-icon--lg  { width: 2rem;     height: 2rem;     }   /* 32px — cards */
.peck-icon--xl  { width: 3rem;     height: 3rem;     }   /* 48px — hero */
.peck-icon--2xl { width: 4rem;     height: 4rem;     }   /* 64px — splash */
.peck-icon--3xl { width: 6rem;     height: 6rem;     }   /* 96px — empty states */

/* Colors — uses accent from tokens.css */
.peck-icon--accent  { color: var(--peck-accent, #3b82f6); }
.peck-icon--success { color: var(--peck-success, #22c55e); }
.peck-icon--warning { color: var(--peck-warning, #f97316); }
.peck-icon--danger  { color: var(--peck-danger, #ef4444); }
.peck-icon--info    { color: var(--peck-info, #3b82f6); }
.peck-icon--muted   { color: var(--peck-gray-400, #8b92a5); }
.peck-icon--earth   { color: var(--peck-earth, #92714a); }

/* Animations */
.peck-icon--spin {
  animation: peck-icon-spin 1s linear infinite;
}
.peck-icon--pecking {
  animation: peck-pecking 0.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.peck-icon--pulse {
  animation: peck-pulse 1.5s ease-in-out infinite;
}
.peck-icon--bounce {
  animation: peck-icon-bounce 0.5s ease;
}

@keyframes peck-icon-spin {
  to { transform: rotate(360deg); }
}
/* peck-pecking and peck-pulse defined in tokens.css */

@keyframes peck-icon-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-4px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* Hover effects — add to parent, icon responds */
.peck-icon--hover-lift {
  transition: transform var(--peck-t-fast, 0.15s ease);
}
.peck-icon--hover-lift:hover {
  transform: translateY(-2px);
}

.peck-icon--hover-accent {
  transition: color var(--peck-t-fast, 0.15s ease);
}
.peck-icon--hover-accent:hover {
  color: var(--peck-accent, #3b82f6);
}