/* ==========================================================================
   Farhan Travel — Scroll Entrance Animations
   Driven by [data-animate] + JS IntersectionObserver (js/animations.js).
   Stagger via inline style="--d:100ms". Respects prefers-reduced-motion.
   ========================================================================== */

/* Base hidden state only when JS confirmed it can animate (html.has-anim) */
html.has-anim [data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

html.has-anim [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Variants (initial states — revealed state is transform:none unless noted)
   -------------------------------------------------------------------------- */

/* Fade up (+ scale) — cinematic titles */
html.has-anim [data-animate="fade-up"] {
  transform: translate3d(0, 36px, 0);
}

html.has-anim [data-animate="fade-up-scale"] {
  transform: translate3d(0, 24px, 0) scale(0.95);
}

/* Scale pop (filters, pills) — bouncy */
html.has-anim [data-animate="scale-pop"] {
  transform: scale(0.75);
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stagger pop-in from bottom (badges, pillars) */
html.has-anim [data-animate="pop-in"] {
  transform: translate3d(0, 22px, 0) scale(0.85);
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Slide in from right / left (booking widget, focus card, form, map) */
html.has-anim [data-animate="slide-right"] {
  transform: translate3d(56px, 0, 0);
}

html.has-anim [data-animate="slide-left"] {
  transform: translate3d(-56px, 0, 0);
}

html.has-anim[dir="rtl"] [data-animate="slide-right"] {
  transform: translate3d(-56px, 0, 0);
}

html.has-anim[dir="rtl"] [data-animate="slide-left"] {
  transform: translate3d(56px, 0, 0);
}

/* Slide up — ribbons / banners */
html.has-anim [data-animate="slide-up"] {
  transform: translate3d(0, 56px, 0);
}

/* Team cards — tilt then straighten */
html.has-anim [data-animate="tilt-up"] {
  transform: translate3d(0, 34px, 0) rotate(-4deg);
}

/* Polaroid — slides onto the table with rotation */
.polaroid-card {
  transform: rotate(-3deg);
  transition: transform 0.4s ease;
}

.polaroid-card:hover {
  transform: rotate(0deg);
}

html.has-anim [data-animate="polaroid"] {
  transform: translate3d(-56px, 16px, 0) rotate(-16deg) scale(0.92);
  transition-duration: 0.9s;
}

html.has-anim [data-animate="polaroid"].is-visible {
  transform: rotate(-3deg);
}

html.has-anim [data-animate="polaroid"].is-visible:hover {
  transform: rotate(0deg);
}

/* Newsletter — parallax-style fade + scale */
html.has-anim [data-animate="fade-scale"] {
  transform: translate3d(0, 30px, 0) scale(0.94);
  transition-duration: 1s;
}

/* Star ratings — pop with bounce (child of a revealed card) */
@keyframes ff-star-pop {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

html.has-anim .star-row i {
  display: inline-block;
  opacity: 0;
  transform: scale(0.2);
}

html.has-anim [data-animate].is-visible .star-row i {
  animation: ff-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

html.has-anim [data-animate].is-visible .star-row i:nth-child(1) { animation-delay: 0.35s; }
html.has-anim [data-animate].is-visible .star-row i:nth-child(2) { animation-delay: 0.45s; }
html.has-anim [data-animate].is-visible .star-row i:nth-child(3) { animation-delay: 0.55s; }
html.has-anim [data-animate].is-visible .star-row i:nth-child(4) { animation-delay: 0.65s; }
html.has-anim [data-animate].is-visible .star-row i:nth-child(5) { animation-delay: 0.75s; }

/* Subtle zoom on hover (Umrah/Hajj focus card) — after entrance settles */
html.has-anim [data-animate].is-visible.zoom-on-hover,
html.has-anim [data-animate].is-visible[data-zoom] {
  transition-duration: 0.75s, 0.45s;
}

html.has-anim [data-animate].is-visible.zoom-on-hover:hover,
html.has-anim [data-animate].is-visible[data-zoom]:hover {
  transform: scale(1.02);
}

/* --------------------------------------------------------------------------
   Gallery / Blog filter transitions (fade out/in + subtle scale)
   -------------------------------------------------------------------------- */
.gallery-item,
.blog-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-item.is-filtering,
.blog-item.is-filtering {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reduced motion — show everything, no movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.has-anim [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.has-anim [data-animate="polaroid"] {
    transform: rotate(-3deg) !important;
  }

  html.has-anim .star-row i,
  html.has-anim [data-animate].is-visible .star-row i {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .gallery-item,
  .blog-item {
    transition: none;
  }
}