/* ==========================================================================
   CJS CAR HIRE — ANIMATIONS
   ========================================================================== */

@keyframes loader-slide{
  0%{ transform: translateX(-100%); }
  50%{ transform: translateX(140%); }
  100%{ transform: translateX(-100%); }
}

@keyframes pulse-wa{
  0%, 100%{ box-shadow: 0 14px 30px -10px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow: 0 14px 30px -10px rgba(37,211,102,.6), 0 0 0 12px rgba(37,211,102,0); }
}

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

@keyframes gradient-shift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@keyframes count-blur{
  from{ opacity:0; filter: blur(4px); }
  to{ opacity:1; filter: blur(0); }
}

/* Scroll-reveal: elements start hidden, JS adds .in-view on intersect */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform: translateY(0); }
.reveal-delay-1.in-view{ transition-delay: .1s; }
.reveal-delay-2.in-view{ transition-delay: .2s; }
.reveal-delay-3.in-view{ transition-delay: .3s; }
.reveal-delay-4.in-view{ transition-delay: .4s; }

/* Animated gradient text for hero emphasis word */
.gradient-text{
  background: linear-gradient(100deg, var(--accent), #a9c9ff, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  animation: gradient-shift 6s ease infinite;
}

.trip-value.counted{ animation: count-blur .6s ease; }

/* Page transition fade-in on load */
.page-enter{ animation: fade-up .6s ease both; }

/* Hover lift utility */
.hover-lift{ transition: transform .3s ease; }
.hover-lift:hover{ transform: translateY(-4px); }