/* ============================================================
   EID PICNIC 2027 — ANIMATIONS
   ============================================================ */

/* Preloader sweep */
@keyframes loadSweep {
  0% { left: -40%; }
  100% { left: 100%; }
}
.preloader-bar { width: 120px; height: 2px; background: rgba(255, 255, 255, .15); position: relative; overflow: hidden; border-radius: 2px; }
.preloader-bar span { content: ''; position: absolute; left: -40%; top: 0; height: 100%; width: 40%; background: var(--gold-light); animation: loadSweep 1.1s ease-in-out infinite; }
#preloader { position: fixed; inset: 0; background: var(--ink); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; transition: opacity .6s ease; }
#preloader.hide { opacity: 0; visibility: hidden; }

/* Marquee scroll */
@keyframes scrollX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: scrollX 28s linear infinite; }

/* WhatsApp pulse */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.fab-wa { animation: pulse 2.4s infinite; }

/* Simple scroll-reveal (lightweight AOS-style fallback) */
[data-aos] { opacity: 0; transition-property: opacity, transform; transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
[data-aos].aos-animate { opacity: 1; transform: none; }
[data-aos="fade-up"] { transform: translateY(28px); }
[data-aos="fade-right"] { transform: translateX(-28px); }
[data-aos="fade-left"] { transform: translateX(28px); }

@media (prefers-reduced-motion: reduce) {
  [data-aos] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .marquee-track, .fab-wa, .preloader-bar span { animation: none !important; }
}

/* Fade-in for dynamically injected content (e.g. filtered gallery) */
@keyframes softFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-soft { animation: softFadeIn .4s ease both; }