/* Good Wi-Fi — static home (animations & utilities from src/index.css) */

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

@keyframes gwf-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes gwf-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-gwf-float { animation: gwf-float 3s ease-in-out infinite; }
.animate-gwf-pulse { animation: gwf-pulse 2s ease-in-out infinite; }
.animate-gwf-rotate { animation: gwf-rotate 12s linear infinite; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Motion: initial state before inView */
[data-motion] {
  opacity: 0;
}

[data-motion="hero-content"] {
  opacity: 0;
  transform: translateX(-50px);
}

[data-motion="hero-features"] {
  opacity: 0;
  transform: translateY(30px);
}

[data-motion="fade-up"] {
  transform: translateY(20px);
}

[data-motion="fade-left"] {
  transform: translateX(-20px);
}

[data-motion="fade-right"] {
  transform: translateX(20px);
}

[data-motion="scale-in"] {
  transform: scale(0.95);
}

[data-motion="fade-y-lg"] {
  transform: translateY(40px);
}

/* Features carousel slide */
#features-track {
  will-change: transform, opacity;
}

#features-track.is-exiting {
  pointer-events: none;
}

/* Customer voices mobile */
#voices-mobile-card {
  will-change: transform, opacity;
}

/* Hero gauge needle — match React Hero.tsx transform-origin */
.origin-\[50px_55px\] {
  transform-origin: 50px 55px;
}
.-rotate-\[45deg\] {
  transform: rotate(-45deg);
}

/* Blob badges (UsageScene case / UsageSteps step) */
.rounded-\[60\%_40\%_30\%_70\%_\/_60\%_30\%_70\%_40\%\] {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.rounded-\[50\%_50\%_30\%_70\%_\/_60\%_40\%_60\%_40\%\] {
  border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
}

/* Usage scenes card — hover lift (separate from Motion data-motion wrapper) */
.usage-scene-card {
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.usage-scene-card:hover {
  transform: translate3d(0, -0.5rem, 0);
  box-shadow: 0 40px 80px rgba(0, 80, 180, 0.1);
}

.usage-scene-card img {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  backface-visibility: hidden;
}

.usage-scene-card:hover img {
  transform: scale(1.05);
}