/* ===================================================================
   ANIMATIONS.CSS — SpeedMaxNet
   Keyframes · Scroll Triggers · Motion Effects · Transitions
=================================================================== */

/* ── KEYFRAMES ──────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes badgePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}

@keyframes heroGlow {
  0%,
  100% {
    box-shadow: 0 0 25px rgba(141, 198, 63, 0.5);
  }
  50% {
    box-shadow: 0 0 55px rgba(141, 198, 63, 0.85);
  }
}

@keyframes scrollWheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes glowPulseGreen {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(141, 198, 63, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(141, 198, 63, 0.7);
  }
}

@keyframes glowPulseBlue {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.7);
  }
}

@keyframes counterUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dotBounce {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes timelineLineGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes packageCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ── HERO ENTRANCE ANIMATIONS ───────────────────────────────────── */
.animate-hero {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s var(--ease-out) forwards;
  animation-delay: var(--delay, 0s);
}

/* ── SCROLL-TRIGGERED ANIMATIONS ───────────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.animate-on-scroll.from-left {
  transform: translateX(-30px);
}

.animate-on-scroll.from-right {
  transform: translateX(30px);
}

.animate-on-scroll.scale-in {
  transform: scale(0.93);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delay for children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.stagger-children.visible > *:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 1;
  transform: none;
}
.stagger-children.visible > *:nth-child(2) {
  transition-delay: 0.15s;
  opacity: 1;
  transform: none;
}
.stagger-children.visible > *:nth-child(3) {
  transition-delay: 0.25s;
  opacity: 1;
  transform: none;
}
.stagger-children.visible > *:nth-child(4) {
  transition-delay: 0.35s;
  opacity: 1;
  transform: none;
}
.stagger-children.visible > *:nth-child(5) {
  transition-delay: 0.45s;
  opacity: 1;
  transform: none;
}
.stagger-children.visible > *:nth-child(6) {
  transition-delay: 0.55s;
  opacity: 1;
  transform: none;
}

/* ── PACKAGE CARD ENTRANCE ──────────────────────────────────────── */
.package-card.entering {
  animation: packageCardIn 0.5s var(--ease-out) forwards;
}

.package-card.exiting {
  animation: packageCardIn 0.3s var(--ease-in) reverse forwards;
}

/* ── TIMELINE ANIMATION ─────────────────────────────────────────── */
.timeline::before {
  transform-origin: top;
}

.timeline.animate::before {
  animation: timelineLineGrow 1s var(--ease-out) 0.3s both;
}

.timeline-item {
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

.timeline-item:nth-child(1) {
  transition-delay: 0.1s;
}
.timeline-item:nth-child(2) {
  transition-delay: 0.25s;
}
.timeline-item:nth-child(3) {
  transition-delay: 0.4s;
}
.timeline-item:nth-child(4) {
  transition-delay: 0.55s;
}

/* ── SPEED BAR ANIMATION ────────────────────────────────────────── */
.pkg-speed-fill {
  transition: width 1.2s var(--ease-out);
}

/* ── COUNTER ANIMATION ──────────────────────────────────────────── */
.counter-animated {
  animation: counterUp 0.4s var(--ease-out);
}

/* ── GLOW ANIMATIONS (persistent) ──────────────────────────────── */
.glow-green {
  animation: glowPulseGreen 2.5s ease-in-out infinite;
}
.glow-blue {
  animation: glowPulseBlue 2.5s ease-in-out infinite;
}

/* ── HOVER MICRO-INTERACTIONS ───────────────────────────────────── */
.hover-lift {
  transition:
    transform var(--trans-base),
    box-shadow var(--trans-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hover-tilt {
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
}

/* Applied via JS for dynamic values */
.hover-scale {
  transition: transform var(--trans-fast);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* ── SHIMMER SKELETON LOADING ───────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 25%,
    var(--gray-100) 50%,
    var(--gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── NAVBAR TRANSITIONS ─────────────────────────────────────────── */
.navbar.hidden {
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease-in);
}

.navbar.visible {
  transform: translateY(0);
  transition: transform 0.3s var(--ease-out);
}

/* ── MAP REGION PULSE ───────────────────────────────────────────── */
@keyframes regionPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.region.covered animate {
  animation: regionPulse 2s ease-in-out infinite;
}

/* ── FLOATING CTA ───────────────────────────────────────────────── */
.whatsapp-float {
  animation: floatUp 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* ── SPEED NUMBER COUNTING HIGHLIGHT ───────────────────────────── */
@keyframes numberFlash {
  0% {
    color: var(--green);
    text-shadow: 0 0 20px rgba(141, 198, 63, 0.8);
  }
  100% {
    color: var(--green);
    text-shadow: none;
  }
}

.number-flash {
  animation: numberFlash 0.4s var(--ease-out) forwards;
}

/* ── SECTION REVEAL ─────────────────────────────────────────────── */
section {
  overflow: hidden;
}

/* ── REDUCE MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-hero {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}