/* ============================================================
   americanlight.design — icon system
   Stroke icons, 24x24, stroke-width 1.8, currentColor.
   Sprite: /static/icons.ad6d1a7040.svg   Usage: docs/icons.md
   ============================================================ */

/* ---- sizing ------------------------------------------------ */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  overflow: visible;
  transform-origin: center;
  /* color rides on `color`; strokes inherit it via currentColor */
}

.icon-lg {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

/* ---- state animations -------------------------------------- */
/* Every shape in the sprite carries pathLength="100", and SVG
   stroke-dash* properties inherit into <use> shadow content, so
   a uniform dash of 100 gives a normalized draw-on for any icon. */

.icon-anim {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: transform 0.35s ease;
}

/* draw-on when an interactive parent is hovered or keyboard-focused */
:where(a, button, .btn, .card):hover .icon-anim,
:where(a, button, .btn, .card):focus-visible .icon-anim {
  animation: icon-draw 0.7s ease both;
}

@keyframes icon-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ---- per-icon personalities -------------------------------- */
/* Automatic via :has(); the utility classes work everywhere else. */

/* chevron: gentle rotate (disclosure flip) */
:where(a, button, .btn, .card):hover :is(.icon-anim.icon-anim--rotate, .icon-anim:has(use[href$="#i-chevron-down"])),
:where(a, button, .btn, .card):focus-visible :is(.icon-anim.icon-anim--rotate, .icon-anim:has(use[href$="#i-chevron-down"])) {
  animation: none;                 /* rotate instead of draw */
  transform: rotate(180deg);
}
/* open state set by JS on the parent keeps the chevron flipped */
:where([aria-expanded="true"], .is-open) .icon-anim:has(use[href$="#i-chevron-down"]) {
  transform: rotate(180deg);
}

/* phone: soft pulse */
:where(a, button, .btn, .card):hover :is(.icon-anim.icon-anim--pulse, .icon-anim:has(use[href$="#i-phone"])),
:where(a, button, .btn, .card):focus-visible :is(.icon-anim.icon-anim--pulse, .icon-anim:has(use[href$="#i-phone"])) {
  animation: icon-pulse 0.9s ease-in-out;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.14); }
  60%      { transform: scale(0.98); }
  80%      { transform: scale(1.07); }
}

/* magnet: playful wiggle */
:where(a, button, .btn, .card):hover :is(.icon-anim.icon-anim--wiggle, .icon-anim:has(use[href$="#i-magnet-track"])),
:where(a, button, .btn, .card):focus-visible :is(.icon-anim.icon-anim--wiggle, .icon-anim:has(use[href$="#i-magnet-track"])) {
  animation: icon-wiggle 0.6s ease-in-out;
}

@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-9deg); }
  45%      { transform: rotate(8deg); }
  70%      { transform: rotate(-5deg); }
  85%      { transform: rotate(3deg); }
}

/* ---- reduced motion: no animation, ever -------------------- */
@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon-anim,
  :where(a, button, .btn, .card):hover .icon-anim,
  :where(a, button, .btn, .card):focus-visible .icon-anim {
    animation: none !important;
    transition: none !important;
  }
  /* keep the semantic open-state flip only (no motion, instant) */
}