/* =========================================================================
   Encrew — Animations
   Scroll reveals, floating elements, gradients, and micro-interactions.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Scroll reveal (toggled by IntersectionObserver in js/animations.js)
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal variants */
.reveal--left {
  transform: translateX(-40px);
}
.reveal--right {
  transform: translateX(40px);
}
.reveal--scale {
  transform: scale(0.94);
}
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible {
  transform: none;
}

/* Stagger children using inline --delay set from JS/markup */
.reveal[style*="--delay"] {
  transition-delay: var(--delay);
}

/* -------------------------------------------------------------------------
   Floating cards
   ------------------------------------------------------------------------- */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
.float-card {
  animation: float-y 6s ease-in-out infinite;
}
.float-card--2 {
  animation-duration: 7s;
  animation-delay: -1.5s;
}
.float-card--3 {
  animation-duration: 6.5s;
  animation-delay: -0.8s;
}
.float-card--4 {
  animation-duration: 7.5s;
  animation-delay: -2.2s;
}

/* Gentle phone bob */
@keyframes float-phone {
  0%,
  100% {
    transform: rotate(-4deg) translateY(0);
  }
  50% {
    transform: rotate(-4deg) translateY(-12px);
  }
}
.phone--tilt {
  animation: float-phone 8s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   Hero background pulse glows
   ------------------------------------------------------------------------- */
@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.12);
  }
}
.hero__glow {
  animation: glow-pulse 9s ease-in-out infinite;
}
.hero__glow--2 {
  animation-delay: -3s;
}

/* -------------------------------------------------------------------------
   Live status pulse (badges / dots)
   ------------------------------------------------------------------------- */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
.hero__pill .dot {
  animation: pulse-ring 2.4s ease-out infinite;
}

/* Shimmer on the map pin */
@keyframes pin-bounce {
  0%,
  100% {
    transform: rotate(-45deg) translateY(0);
  }
  50% {
    transform: rotate(-45deg) translateY(-6px);
  }
}
.app-pin {
  animation: pin-bounce 2.2s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   Animated gradient border helper (used on hover targets)
   ------------------------------------------------------------------------- */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* -------------------------------------------------------------------------
   Marquee-free subtle entrance for stat numbers already handled in JS
   ------------------------------------------------------------------------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  animation: fade-in-up 0.6s ease-out both;
}