/* ==========================================================================
   Mahir Travel Agency — ANIMATIONS
   Keyframes + scroll-reveal utility classes toggled by main.js (IntersectionObserver)
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes scroll-dot {
  0% { top: 8px; opacity: 1; }
  70% { top: 22px; opacity: 0; }
  100% { top: 8px; opacity: 0; }
}

@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-left-in {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fade-right-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes zoom-in-reveal {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* ---------- Scroll-reveal utility classes ---------- */
/* Elements start hidden; main.js adds .in-view via IntersectionObserver */
[data-animate] { opacity: 0; }
[data-animate].in-view { opacity: 1; }

[data-animate="fade-up"] { transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-animate="fade-up"].in-view { animation: fade-up-in 0.7s ease forwards; }

[data-animate="fade-left"] { transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-animate="fade-left"].in-view { animation: fade-left-in 0.7s ease forwards; }

[data-animate="fade-right"] { transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-animate="fade-right"].in-view { animation: fade-right-in 0.7s ease forwards; }

[data-animate="zoom-in"] { transform: scale(0.88); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-animate="zoom-in"].in-view { animation: zoom-in-reveal 0.6s ease forwards; }

/* Stagger children helper: apply --delay inline style e.g. style="--delay:120ms" */
[data-animate] { transition-delay: var(--delay, 0ms); }

/* Ambient floating accents */
.float-anim { animation: float-y 4s ease-in-out infinite; }

/* WhatsApp pulse */
.float-whatsapp { animation: pulse-ring 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .float-anim, .float-whatsapp { animation: none !important; }
}