/* ============================================================
   TinyHug® icon helpers — tinyhug-icons.css
   Pairs with /icons/tinyhug-icons.svg
   Palette: cream #F8F1E8 · terracotta #C06030 · espresso #302010
   ============================================================ */

/* Base icon: inherits text color via currentColor */
.th-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.22em;
  color: inherit;
}

/* ---- Size variants (relative to surrounding font-size) ---- */
.th-icon--xs { width: .85em;  height: .85em; }
.th-icon--sm { width: 1em;    height: 1em; }
.th-icon--md { width: 1.5em;  height: 1.5em; }
.th-icon--lg { width: 2em;    height: 2em; }
.th-icon--xl { width: 2.75em; height: 2.75em; }

/* ---- Brand color shortcuts ---- */
.th-icon--terra    { color: #C06030; }
.th-icon--espresso { color: #302010; }
.th-icon--cream    { color: #F8F1E8; }
.th-icon--peach    { color: #E9A87C; }
.th-icon--muted    { color: #8A7560; }

/* ============================================================
   Micro-animations — subtle, 150–400ms, ease-out.
   Apply the th-anim-* class ON the <svg class="th-icon"> itself.
   ============================================================ */

/* Review star: gentle twinkle on hover */
@keyframes th-twinkle {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.22) rotate(9deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.th-anim-star { transform-origin: center; }
.th-anim-star:hover { animation: th-twinkle .35s ease-out; }

/* Heart: soft pulse on hover */
@keyframes th-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
.th-anim-heart { transform-origin: center; }
.th-anim-heart:hover { animation: th-pulse .4s ease-out; }

/* Truck: playful forward nudge on hover (wheels "roll") */
@keyframes th-nudge {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(3px); }
  60%  { transform: translateX(-1.5px); }
  100% { transform: translateX(0); }
}
.th-anim-truck:hover { animation: th-nudge .35s ease-out; }

/* Sparkle: slow ambient float (runs continuously, very subtle) */
@keyframes th-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.th-anim-sparkle { animation: th-float 3s ease-in-out infinite; }

/* Arrow-right: slides forward when its button/link is hovered */
.th-anim-arrow { transition: transform .18s ease-out; }
a:hover .th-anim-arrow,
button:hover .th-anim-arrow,
.th-anim-arrow:hover { transform: translateX(4px); }

/* Check draw-in — best with INLINE svg (not <use>), e.g. success states.
   Add .th-draw--go (via JS or :target) to play the stroke animation. */
.th-draw path,
.th-draw circle,
.th-draw rect,
.th-draw ellipse {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
/* keep solid filled accents visible instantly */
.th-draw [fill]:not([fill="none"]) {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}
@keyframes th-draw { to { stroke-dashoffset: 0; } }
.th-draw.th-draw--go path,
.th-draw.th-draw--go circle,
.th-draw.th-draw--go rect,
.th-draw.th-draw--go ellipse {
  animation: th-draw .45s ease-out forwards;
}

/* ============================================================
   Trust badge pill (pairs with the badge snippets in ICONS.md)
   ============================================================ */
.th-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: #FBF6EE;
  border: 1px solid #EAD9C2;
  border-radius: 999px;
  padding: .55em 1.15em .55em .8em;
  font: 600 .92rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #302010;
  white-space: nowrap;
}
.th-badge .th-icon { color: #C06030; }
.th-badge--payments { gap: 1.1em; padding-left: 1.25em; padding-right: 1.25em; }
.th-paymark {
  font-family: Arial, Helvetica, sans-serif;
  color: #7A6A58;
  letter-spacing: .04em;
  line-height: 1;
}

/* ============================================================
   Reduced motion: calm everything down
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .th-anim-star:hover,
  .th-anim-heart:hover,
  .th-anim-truck:hover,
  .th-anim-sparkle,
  .th-draw.th-draw--go path,
  .th-draw.th-draw--go circle,
  .th-draw.th-draw--go rect,
  .th-draw.th-draw--go ellipse {
    animation: none !important;
  }
  .th-anim-arrow { transition: none !important; }
  a:hover .th-anim-arrow,
  button:hover .th-anim-arrow,
  .th-anim-arrow:hover { transform: none !important; }
}