/* Its Hover icon animations — static SVG port for product pages (itshover.com) */

.ih-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mte-validation-icon .ih-icon {
  width: 24px;
  height: 24px;
}

.ih-icon--rocket {
  width: 22px;
  height: 22px;
}

.ih-icon--layers {
  width: 22px;
  height: 22px;
}

.mte-spec-icon .ih-icon,
.mte-feature-check .ih-icon,
.mte-validation-icon .ih-icon {
  font-size: 0;
  line-height: 0;
}

.mte-feature-check .ih-icon {
  width: 18px;
  height: 18px;
}

.mte-feature-check .ih-icon--rocket {
  width: 20px;
  height: 20px;
}

.mte-feature-check .ih-icon--layers {
  width: 20px;
  height: 20px;
}

.ih-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ih-gauge-needle {
  transform-origin: 12px 14px;
}

.mte-spec-icon:hover .ih-gauge-needle,
.mte-feature-check:hover .ih-gauge-needle,
.mte-validation-icon:hover .ih-gauge-needle {
  animation: ihGaugeNeedle 0.8s ease-in-out;
}

@keyframes ihGaugeNeedle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(45deg); }
  50% { transform: rotate(-20deg); }
  75% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

.mte-spec-icon:hover .ih-rocket-upper,
.mte-feature-check:hover .ih-rocket-upper {
  animation: ihRocketFly 0.85s ease-in-out;
}

.mte-spec-icon:hover .ih-rocket-flame,
.mte-feature-check:hover .ih-rocket-flame {
  animation: ihRocketFlame 0.85s ease-in-out;
}

@keyframes ihRocketFly {
  0% { transform: translate(0, 0); opacity: 1; }
  35% { transform: translate(8px, -8px); opacity: 0; }
  36% { transform: translate(-8px, 8px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes ihRocketFlame {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  35% { transform: translate(-4px, 4px) scale(1.15); opacity: 0; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

.mte-spec-icon:hover .ih-flame-group,
.mte-feature-check:hover .ih-flame-group {
  animation: ihFlame 0.6s ease-out;
  transform-origin: 50% 100%;
}

@keyframes ihFlame {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(1px, -2px) rotate(4deg); }
  50% { transform: translate(-1px, -1px) rotate(-3deg); }
  75% { transform: translate(0.5px, -2px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.mte-spec-icon:hover .ih-cpu-pins,
.mte-feature-check:hover .ih-cpu-pins {
  animation: ihCpuPins 0.5s ease-in-out;
  transform-origin: 12px 12px;
}

.mte-spec-icon:hover .ih-cpu-outer,
.mte-feature-check:hover .ih-cpu-outer {
  animation: ihCpuOuter 0.5s ease-in-out;
  transform-origin: 12px 12px;
}

.mte-spec-icon:hover .ih-cpu-inner,
.mte-feature-check:hover .ih-cpu-inner {
  animation: ihCpuInner 0.5s ease-in-out;
  transform-origin: 12px 12px;
}

@keyframes ihCpuPins {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes ihCpuOuter {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes ihCpuInner {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.9); }
}

.mte-feature-check:hover .ih-chart-bar-1 {
  animation: ihBarGrow 0.3s ease-out;
  transform-origin: 6px 20px;
}

.mte-feature-check:hover .ih-chart-bar-2 {
  animation: ihBarGrow 0.3s ease-out 0.1s;
  transform-origin: 12px 20px;
}

.mte-feature-check:hover .ih-chart-bar-3 {
  animation: ihBarGrow 0.3s ease-out 0.2s;
  transform-origin: 18px 20px;
}

.mte-validation-icon:hover .ih-chart-bar-1 {
  animation: ihBarGrow 0.3s ease-out;
  transform-origin: 6px 20px;
}

.mte-validation-icon:hover .ih-chart-bar-2 {
  animation: ihBarGrow 0.3s ease-out 0.1s;
  transform-origin: 12px 20px;
}

.mte-validation-icon:hover .ih-chart-bar-3 {
  animation: ihBarGrow 0.3s ease-out 0.2s;
  transform-origin: 18px 20px;
}

@keyframes ihBarGrow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

.mte-feature-check:hover .ih-layers-top {
  animation: ihLayersTop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes ihLayersTop {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

.mte-feature-check:hover .ih-stack-top {
  animation: ihStackTop 0.3s ease-out;
}

.mte-feature-check:hover .ih-stack-bottom {
  animation: ihStackBottom 0.3s ease-out;
}

@keyframes ihStackTop {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.05); }
}

@keyframes ihStackBottom {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(1px); opacity: 0.7; }
}

.mte-feature-check:hover .ih-expand-tr {
  animation: ihExpandTR 0.25s ease-out;
}

.mte-feature-check:hover .ih-expand-tl {
  animation: ihExpandTL 0.25s ease-out;
}

.mte-feature-check:hover .ih-expand-br {
  animation: ihExpandBR 0.25s ease-out;
}

.mte-feature-check:hover .ih-expand-bl {
  animation: ihExpandBL 0.25s ease-out;
}

@keyframes ihExpandTR {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}

@keyframes ihExpandTL {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, -2px); }
}

@keyframes ihExpandBR {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, 2px); }
}

@keyframes ihExpandBL {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 2px); }
}

.mte-feature-check:hover .ih-sliders-1 {
  animation: ihSlider1 2s ease-in-out infinite;
}

.mte-feature-check:hover .ih-sliders-2 {
  animation: ihSlider2 2s ease-in-out 0.2s infinite;
}

.mte-feature-check:hover .ih-sliders-3 {
  animation: ihSlider3 2s ease-in-out 0.4s infinite;
}

@keyframes ihSlider1 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes ihSlider2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes ihSlider3 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

.mte-feature-check:hover .ih-sparkle-main {
  animation: ihSparkleMain 0.6s ease-in-out;
  transform-origin: 9px 12px;
}

.mte-feature-check:hover .ih-sparkle-top {
  animation: ihSparkleTop 0.5s ease-in-out 0.1s;
  transform-origin: 18px 6px;
}

.mte-feature-check:hover .ih-sparkle-bottom {
  animation: ihSparkleBottom 0.5s ease-in-out 0.05s;
  transform-origin: 18px 18px;
}

@keyframes ihSparkleMain {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
}

@keyframes ihSparkleTop {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(-90deg) scale(1.1); opacity: 0.6; }
}

@keyframes ihSparkleBottom {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(90deg) scale(1.15); opacity: 0.7; }
}