/* ==========================================================================
   OnePayCab — Animations
   Scroll-reveal + entrance keyframes. Every effect is opt-in via a data
   attribute so nothing animates unless it was asked for.
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-32px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(32px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(87, 204, 42, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(87, 204, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 204, 42, 0); }
}

/* --- Scroll reveal -------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  animation-duration: 0.7s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}

[data-reveal="fade"].is-revealed       { animation-name: fadeIn; }
[data-reveal="up"].is-revealed         { animation-name: fadeInUp; }
[data-reveal="down"].is-revealed       { animation-name: fadeInDown; }
[data-reveal="left"].is-revealed       { animation-name: fadeInLeft; }
[data-reveal="right"].is-revealed      { animation-name: fadeInRight; }
[data-reveal="zoom"].is-revealed       { animation-name: zoomIn; }

/* --- Utility motion ------------------------------------------------------- */

.anim-float { animation: floatY 5s ease-in-out infinite; }
.anim-pulse { animation: pulseRing 2.4s ease-out infinite; }

.hover-up { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.hover-up:hover { transform: translateY(-3px); }

.hover-zoom img { transition: transform 0.6s var(--ease-out); }
.hover-zoom:hover img { transform: scale(1.06); }

/* Page enters with a short, non-blocking fade */
.page-enter { animation: fadeIn 0.28s ease both; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; }
  [data-reveal].is-revealed { animation: none !important; }
  .anim-float,
  .anim-pulse,
  .ticker-track { animation: none !important; }
  .page-fade { display: none !important; }
}