/* ==========================================================================
   XPLOROO · Homepage cinematic scroll-reveal (index.html only)
   scroll-reveal.css — Progressive-enhancement reveal-on-scroll layer, paired
   with js/scroll-reveal.js. Every rule here is scoped under
   `html.js-reveal-ready`, a class only ever added by the JS after it
   confirms IntersectionObserver support and that prefers-reduced-motion is
   NOT set — so if JS fails to load/run, every [data-reveal] element simply
   keeps its normal default (fully visible) styling. Nothing here ever hides
   content unconditionally.

   Carousels (Trending Packages, Ending Soon, Influencers, Recent Winners,
   Vlog Shoot Packages) are revealed at the SECTION level only — the
   [data-reveal] marker sits on the outer <section>, well above
   `.tp-track`/`.inf-track`/etc., so this transform is entirely independent
   of (and never touches) the carousels' own auto-scroll transform.
   ========================================================================== */

html.js-reveal-ready [data-reveal]:not(.is-revealed),
html.js-reveal-ready [data-reveal-group]:not(.is-revealed) [data-reveal-item] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  will-change: opacity, transform, filter;
}

html.js-reveal-ready [data-reveal-variant="scale"]:not(.is-revealed) {
  transform: translateY(20px) scale(0.985);
}

html.js-reveal-ready [data-reveal],
html.js-reveal-ready [data-reveal-group] [data-reveal-item] {
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-reveal-ready [data-reveal].is-revealed,
html.js-reveal-ready [data-reveal-group].is-revealed [data-reveal-item] {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}
html.js-reveal-ready [data-reveal-variant="scale"].is-revealed {
  transform: translateY(0) scale(1);
}

/* Mobile — same idea, smaller travel distance and lighter blur */
@media (max-width: 640px) {
  html.js-reveal-ready [data-reveal]:not(.is-revealed),
  html.js-reveal-ready [data-reveal-group]:not(.is-revealed) [data-reveal-item] {
    transform: translateY(18px);
    filter: blur(3px);
  }
  html.js-reveal-ready [data-reveal-variant="scale"]:not(.is-revealed) {
    transform: translateY(14px) scale(0.99);
  }
}

/* Belt-and-suspenders: even if the ready class were somehow present, a user
   with prefers-reduced-motion never sees movement/blur — content is simply
   shown immediately (js/scroll-reveal.js also skips initializing the
   observer entirely in this case). */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] [data-reveal-item] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Hero — unconditional one-time entrance (never gated by JS/observer, so
   the hero is always immediately visible even if the reveal system never
   initializes). Purely a fade + very subtle scale on first paint.
   ------------------------------------------------------------------------- */
@keyframes xp-hero-media-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__media {
  animation: xp-hero-media-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { animation: none; }
}