/* ============================================================================
   Hola Holidays — luxury preloader choreography + page transitions (2026)
   Overlay static styles live inline in index.html (critical, paints first).
   This file owns the reveal choreography and sitewide page transitions.
   ============================================================================ */

/* ---- Cinematic reveal choreography (first visit, homepage) ---------------- */

/* While the preloader covers the page: hold every hero element and the header. */
html.hh-preloading [data-reveal] {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition: none !important;
}
html.hh-preloading #siteHeaderMount {
  opacity: 0 !important;
}

/* Hero image starts slightly zoomed and settles to 1 while the curtain opens. */
html.hh-preloading .home-hero__media img {
  transform: scale(1.08);
  transform-origin: 50% 42%;
}
body.hh-hero-in .home-hero__media img {
  transform: scale(1);
  transition: transform 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The header mounts through JS; fade it in once the curtain starts opening. */
body.hh-hero-in #siteHeaderMount {
  opacity: 1;
  transition: opacity 0.9s ease 0.45s;
}

/* Staggered entrance for the hero copy (runs when hh-preloading is removed). */
body.hh-hero-in [data-reveal] {
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hh-hero-in .home-hero__eyebrow { transition-delay: 0.1s; }
body.hh-hero-in .home-hero__title { transition-delay: 0.22s; }
body.hh-hero-in .home-hero__lead { transition-delay: 0.36s; }
body.hh-hero-in .home-search-tabs { transition-delay: 0.5s; }

/* Word-by-word mask reveal for the hero heading. The preloader script wraps
   each word before the curtain opens; the text itself never changes. */
.hh-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.hh-w > span {
  display: inline-block;
  transform: translateY(118%);
}
body.hh-hero-in .hh-w > span {
  transform: none;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hh-hero-in .hh-w:nth-child(1) > span { transition-delay: 0.24s; }
body.hh-hero-in .hh-w:nth-child(2) > span { transition-delay: 0.31s; }
body.hh-hero-in .hh-w:nth-child(3) > span { transition-delay: 0.38s; }
body.hh-hero-in .hh-w:nth-child(4) > span { transition-delay: 0.45s; }
body.hh-hero-in .hh-w:nth-child(5) > span { transition-delay: 0.52s; }
body.hh-hero-in .hh-w:nth-child(6) > span { transition-delay: 0.59s; }
body.hh-hero-in .hh-w:nth-child(7) > span { transition-delay: 0.66s; }
body.hh-hero-in .hh-w:nth-child(8) > span { transition-delay: 0.73s; }

/* ---- Smooth page transitions ---------------------------------------------
   Cross-document View Transitions (Chromium) give a gentle cross-fade when
   navigating between internal pages. Other browsers fall back to a short
   page fade-in, so navigation never feels like a hard white flash. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports not (view-transition-name: root) {
    body {
      animation: hh-page-in 0.45s ease both;
    }
  }
}

@keyframes hh-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}