/* Hero speciality icons — premium micro-animations */
.spec-icon {
  will-change: transform, filter;
  transform-origin: center;
  transition: transform .28s ease, filter .28s ease;
}

.spec-icon svg {
  display: block;
}

/* coral star — soft sparkle */
@keyframes spec-star {
  0%, 68%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 110, 100, 0));
  }

  8% {
    transform: scale(1.18) rotate(18deg);
    filter: drop-shadow(0 0 14px rgba(255, 110, 100, .42));
  }

  18% {
    transform: scale(.96) rotate(-10deg);
  }

  28% {
    transform: scale(1.08) rotate(8deg);
  }

  38% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 110, 100, 0));
  }
}

/* yellow bolt — electric snap */
@keyframes spec-bolt {
  0%, 70%, 100% {
    transform: scale(1) translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 196, 0, 0));
  }

  9% {
    transform: scale(1.22) translateY(-5px) rotate(-8deg);
    filter: drop-shadow(0 0 16px rgba(255, 196, 0, .5));
  }

  18% {
    transform: scale(1.04) translateY(-2px) rotate(8deg);
  }

  30% {
    transform: scale(.98) translateY(1px) rotate(0deg);
  }

  40% {
    transform: scale(1) translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 196, 0, 0));
  }
}

/* teal truck — mini drive bounce */
@keyframes spec-truck {
  0%, 72%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(0, 180, 170, 0));
  }

  8% {
    transform: translateX(-4px) rotate(3deg);
  }

  18% {
    transform: translateX(9px) rotate(-4deg);
    filter: drop-shadow(0 0 14px rgba(0, 180, 170, .38));
  }

  28% {
    transform: translateX(6px) translateY(-3px) rotate(-2deg);
  }

  42% {
    transform: translateX(0) translateY(0) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(0, 180, 170, 0));
  }
}

/* slower hero rhythm */
.spec-star {
  animation: spec-star 4.4s cubic-bezier(.22, 1, .36, 1) infinite;
}

.spec-bolt {
  animation: spec-bolt 4.4s cubic-bezier(.22, 1, .36, 1) infinite .45s;
}

.spec-truck {
  animation: spec-truck 4.4s cubic-bezier(.22, 1, .36, 1) infinite .9s;
}

/* hover: premium lift */
.group\/spec:hover .spec-icon {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.08) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .spec-icon {
    animation: none !important;
    transition: none;
  }
}