/* ═══════════════════════════════════════════════════════════════
   JIYA HOLIDAYS — SCROLL-TRIGGERED ANIMATIONS
   Pure CSS keyframes + JS IntersectionObserver integration.
   ❌ No layout changes  ❌ No colour/font changes  ❌ No spacing edits
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. BASE HIDDEN STATE ───────────────────────────────────── */
/* All animated elements start invisible & offset.             */
/* The JS adds .is-visible to trigger the enter keyframe.      */

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  /* prevent flash-of-hidden on very first render */
  transition: none;
}

/* Once visible, play the named keyframe */
[data-anim].is-visible {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-duration: var(--anim-dur, 0.75s);
  animation-delay: var(--anim-delay, 0s);
}

/* ── 2. DELAY HELPERS ───────────────────────────────────────── */
[data-anim].is-visible[data-delay="1"] { --anim-delay: 0.10s; }
[data-anim].is-visible[data-delay="2"] { --anim-delay: 0.20s; }
[data-anim].is-visible[data-delay="3"] { --anim-delay: 0.32s; }
[data-anim].is-visible[data-delay="4"] { --anim-delay: 0.44s; }
[data-anim].is-visible[data-delay="5"] { --anim-delay: 0.56s; }

/* ── 3. KEYFRAMES ───────────────────────────────────────────── */

/* Fade up  (default — headings, paragraphs) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Fade down */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-36px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Slide in from left */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* Slide in from right */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Zoom in (cards, badges) */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Zoom in + slight upward drift */
@keyframes zoomUp {
  from { opacity: 0; transform: scale(0.92) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Fade only */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pop (small icons, tags, badges) */
@keyframes pop {
  0%   { opacity: 0; transform: scale(0.6);   }
  70%  { opacity: 1; transform: scale(1.08);  }
  100% { opacity: 1; transform: scale(1);     }
}

/* Stagger line (horizontal dividers / kickers) */
@keyframes widthIn {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* Flip card */
@keyframes flipUp {
  from { opacity: 0; transform: rotateX(-20deg) translateY(30px); }
  to   { opacity: 1; transform: rotateX(0deg)   translateY(0);    }
}

/* ── 4. ANIMATION TYPE MAP ──────────────────────────────────── */

[data-anim="fade-up"].is-visible        { animation-name: fadeUp;    }
[data-anim="fade-down"].is-visible      { animation-name: fadeDown;  }
[data-anim="slide-left"].is-visible     { animation-name: slideLeft; }
[data-anim="slide-right"].is-visible    { animation-name: slideRight;}
[data-anim="zoom-in"].is-visible        { animation-name: zoomIn;    }
[data-anim="zoom-up"].is-visible        { animation-name: zoomUp;    }
[data-anim="fade-in"].is-visible        { animation-name: fadeIn;    }
[data-anim="pop"].is-visible            { animation-name: pop;       }
[data-anim="flip-up"].is-visible        { animation-name: flipUp;    }

/* ── 5. DURATION OVERRIDES ──────────────────────────────────── */

[data-anim="fade-in"].is-visible        { --anim-dur: 0.65s; }
[data-anim="zoom-in"].is-visible        { --anim-dur: 0.70s; }
[data-anim="zoom-up"].is-visible        { --anim-dur: 0.80s; }
[data-anim="pop"].is-visible            { --anim-dur: 0.55s; }
[data-anim="flip-up"].is-visible        { --anim-dur: 0.90s; }
[data-anim="slide-left"].is-visible,
[data-anim="slide-right"].is-visible    { --anim-dur: 0.80s; }

/* ── 6. SECTION-SPECIFIC OVERRIDES ─────────────────────────── */

/* Search card — slight longer entrance */
.search-card[data-anim].is-visible  { --anim-dur: 0.90s; }

/* Feature strip items — fast snappy pop */
.feature-item[data-anim].is-visible { --anim-dur: 0.60s; }

/* Gallery images — quick zoom */
.gallery-item[data-anim].is-visible { --anim-dur: 0.65s; }

/* Why-us cards — flip feel */
.why-card[data-anim].is-visible { --anim-dur: 0.85s; }

/* Package & Salinas cards — zoom up */
.pkg-card[data-anim].is-visible,
.salinas-card[data-anim].is-visible { --anim-dur: 0.80s; }

/* Section kicker / tags — pop */
.section-kicker[data-anim].is-visible { --anim-dur: 0.50s; }

/* Destination cards — slide */
.dest-card[data-anim].is-visible { --anim-dur: 0.78s; }

/* CTA actions */
.cta-actions[data-anim].is-visible { --anim-dur: 0.70s; }

/* Banner strip */
.salinas-banner[data-anim].is-visible { --anim-dur: 0.80s; }

/* ── 7. REDUCED MOTION SUPPORT ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}