/* How to charge — static (HowToChargePage.tsx + UsageFlow.tsx) */

@keyframes gwf-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes htc-pointer {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.2) translate(2px, -2px); }
}

@keyframes htc-zap-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes htc-feel-free {
  0%, 100% { rotate: -6deg; }
  50% { rotate: -4deg; }
  25% { rotate: -8deg; }
  75% { rotate: -4deg; }
}

.animate-gwf-float { animation: gwf-float 3s ease-in-out infinite; }
.htc-pointer { animation: htc-pointer 2s ease-in-out infinite; }
.htc-zap-pulse { animation: htc-zap-pulse 1.5s ease-in-out infinite; }
.htc-feel-free { animation: htc-feel-free 4s ease-in-out infinite; }

[data-motion] { opacity: 0; }
[data-motion="htc-hero"] { transform: translateY(20px); }
[data-motion="fade-up"] { transform: translateY(20px); }
[data-motion="fade-left"] { transform: translateX(-20px); }
[data-motion="fade-in"] { opacity: 0; }
[data-motion="scale-in"] { transform: scale(0); }
[data-motion="highlight-bar"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
}