/* =========================================================
   ANIMATIONS — USA Internet Provider
   ========================================================= */

/* ---- Base states (hidden before scroll) ---- */
.fade-up    { opacity: 0; transform: translateY(50px); }
.fade-left  { opacity: 0; transform: translateX(-60px); }
.fade-right { opacity: 0; transform: translateX(60px); }
.fade-in    { opacity: 0; }
.scale-in   { opacity: 0; transform: scale(0.85); }

/* ---- In-view: triggered by Intersection Observer ---- */
.fade-up.in-view,
.fade-left.in-view,
.fade-right.in-view,
.fade-in.in-view,
.scale-in.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s cubic-bezier(.4,0,.2,1),
              transform 0.75s cubic-bezier(.4,0,.2,1);
}

/* ---- Stagger delays ---- */
.delay-1  { transition-delay: 0.10s; }
.delay-2  { transition-delay: 0.20s; }
.delay-3  { transition-delay: 0.30s; }
.delay-4  { transition-delay: 0.40s; }
.delay-5  { transition-delay: 0.50s; }
.delay-6  { transition-delay: 0.60s; }
.delay-7  { transition-delay: 0.70s; }
.delay-8  { transition-delay: 0.80s; }

/* ---- Wifi orb pulse rings ---- */
@keyframes pulse-ring {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.35); opacity: 0; }
}
.orb-ring {
  animation: pulse-ring 2.8s ease-out infinite;
}
.ring-1 { animation-delay: 0s;    }
.ring-2 { animation-delay: 0.7s;  }
.ring-3 { animation-delay: 1.4s;  }

/* ---- Floating chips ---- */
@keyframes float-chip {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-10px); }
}
.floating-chip { animation: float-chip 3s ease-in-out infinite; }
.chip-1 { animation-delay: 0s;   }
.chip-2 { animation-delay: 1s;   }
.chip-3 { animation-delay: 1.8s; }

/* ---- Hero badge pulse ---- */
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.5); }
  50%     { box-shadow: 0 0 0 10px rgba(255,107,0,0); }
}
.hero-promo-badge { animation: badge-pulse 2s ease-in-out infinite; }

/* ---- Scroll hint bounce ---- */
@keyframes bounce-down {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50%     { transform: rotate(45deg) translateY(8px); }
}
.scroll-caret { animation: bounce-down 1.6s ease-in-out infinite; }

/* ---- Button shimmer ---- */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 200%;  }
}

/* ---- About gfx rings ---- */
@keyframes gfx-spin-slow {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.gfx-r1 { animation: gfx-spin-slow 12s linear infinite; }
.gfx-r2 { animation: gfx-spin-slow 20s linear infinite reverse; }

/* ---- Hamburger lines → X ---- */
@keyframes top-line-open    { to { transform: rotate(45deg) translate(5px,5px); } }
@keyframes mid-line-open    { to { opacity: 0; transform: scaleX(0); } }
@keyframes bottom-line-open { to { transform: rotate(-45deg) translate(5px,-5px); } }

/* ---- Scroll-to-top pulse ---- */
@keyframes scroll-top-appear {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Orb center glow ---- */
@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 30px rgba(255,107,0,0.5), 0 0 60px rgba(255,107,0,0.2); }
  50%     { box-shadow: 0 0 50px rgba(255,107,0,0.8), 0 0 90px rgba(255,107,0,0.4); }
}
.orb-center { animation: glow-pulse 2.5s ease-in-out infinite; }

/* ---- Shape blobs in hero ---- */
@keyframes blob-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-20px) scale(1.05); }
  66%     { transform: translate(-20px,15px) scale(0.95); }
}
.shape-1 { animation: blob-drift 8s  ease-in-out infinite; }
.shape-2 { animation: blob-drift 11s ease-in-out infinite reverse; }
.shape-3 { animation: blob-drift 14s ease-in-out infinite; }

/* ---- Feature card icon bounce-in ---- */
@keyframes icon-bounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-8px); }
  60%     { transform: translateY(-4px); }
}
.feat-card:hover .feat-icon i { animation: icon-bounce 0.6s ease; }

/* ---- Popular ribbon shimmer ---- */
@keyframes ribbon-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.popular-ribbon {
  background: linear-gradient(90deg, #FF6B00 0%, #ffaa00 40%, #FF6B00 60%, #ff8c00 100%);
  background-size: 200% auto;
  animation: ribbon-shine 3s linear infinite;
}

/* ---- Stat number count ---- */
.stat-num { display: inline-block; }

/* ---- Step number background ---- */
@keyframes step-num-float {
  0%,100% { opacity: 0.06; }
  50%     { opacity: 0.12; }
}
.step-num { animation: step-num-float 3s ease-in-out infinite; }

/* ---- Input focus ring ---- */
@keyframes input-focus {
  from { box-shadow: 0 0 0 0 rgba(26,74,219,0.4); }
  to   { box-shadow: 0 0 0 4px rgba(26,74,219,0.15); }
}

/* ---- Success checkmark ---- */
@keyframes check-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.form-alert.success i { animation: check-pop 0.4s ease forwards; }

/* ---- Mobile CTA bar slide ---- */
@keyframes slide-up-bar {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mobile-cta-bar { animation: slide-up-bar 0.5s 1.5s ease both; }