/**
 * Scroll reveal — refines the AOS animations site-wide.
 *
 * Shorter travel, an ease-out curve that settles softly, and a light blur-to-sharp
 * focus on the homepage. Loads render-blocking (tiny) so the hidden start state is
 * in place before the async aos.css arrives — no flash of content. Selectors are
 * prefixed with `html body` to outrank aos.css regardless of load order.
 */

html body [data-aos][data-aos] {
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}


/* Start states */
html body [data-aos^="fade"][data-aos^="fade"],
html body [data-aos^="zoom"][data-aos^="zoom"] {
  opacity: 0;
}

html body [data-aos="fade-up"][data-aos="fade-up"]       { transform: translate3d(0, 28px, 0); }
html body [data-aos="fade-down"][data-aos="fade-down"]   { transform: translate3d(0, -28px, 0); }
html body [data-aos="fade-left"][data-aos="fade-left"]   { transform: translate3d(36px, 0, 0); }
html body [data-aos="fade-right"][data-aos="fade-right"] { transform: translate3d(-36px, 0, 0); }
html body [data-aos="zoom-in"][data-aos="zoom-in"]       { transform: scale(.94); }
html body [data-aos="zoom-out"][data-aos="zoom-out"]     { transform: scale(1.06); }

/* Homepage: soft focus-in on top of the slide */
html body.home [data-aos^="fade"]:not(.aos-animate),
html body.home [data-aos^="zoom"]:not(.aos-animate) {
  filter: blur(6px);
}

/* End state */
html body [data-aos][data-aos].aos-animate {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Phones: one column, so items already appear one by one as they scroll in —
   drop stagger delays (they only add lag), skip the costly blur, travel less. */
@media (max-width: 767.98px) {
  html body [data-aos][data-aos].aos-animate { transition-delay: 0s !important; }
  html body.home [data-aos^="fade"]:not(.aos-animate),
  html body.home [data-aos^="zoom"]:not(.aos-animate) { filter: none; }
  html body [data-aos="fade-up"][data-aos="fade-up"]:not(.aos-animate) { transform: translate3d(0, 20px, 0); }
  html body [data-aos="fade-left"][data-aos="fade-left"]:not(.aos-animate)   { transform: translate3d(24px, 0, 0); }
  html body [data-aos="fade-right"][data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-24px, 0, 0); }
}

/* ── Homepage hero intro ──────────────────────────────────────────────────
 * Plays once when the homepage opens. html.jcy-hero-intro is set by an inline
 * script just before the hero (front-page.php) and removed when the sequence
 * ends, so hover effects and normal styles take over afterwards.
 * Timeline: photo settles → eyebrow → headline word by word → subtitle →
 * features → buttons; trip finder and slide controls alongside.
 */
:root { --jcy-ease-out: cubic-bezier(.16, 1, .3, 1); }

@keyframes jcyHeroPhoto { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } }
@keyframes jcyHeroFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jcyRise      { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes jcyFocusUp   { from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes jcyWordUp    { from { transform: translate3d(0, 110%, 0) rotate(5deg); } to { transform: none; } }
@keyframes jcyEyebrow   { from { opacity: 0; letter-spacing: 14px; } to { opacity: 1; letter-spacing: 5px; } }
@keyframes jcyLine      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes jcyDivider   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes jcyCardIn    { from { opacity: 0; transform: translate3d(48px, 0, 0) scale(.97); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes jcyPop       { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); } to { opacity: 1; transform: none; } }

/* Headline stays hidden until it has been split into words (no flash of unsplit text) */
.jcy-hero-intro #travel-hero .hero-title:not(.is-split) { visibility: hidden; }

/* Word masks — clip only during the intro, so the title's text-shadow returns after */
.travel-hero .hero-title .hw { display: inline-block; vertical-align: top; }
.travel-hero .hero-title .hw-i { display: inline-block; }
.jcy-hero-intro .travel-hero .hero-title .hw { overflow: hidden; padding: .06em .04em .14em; margin: -.06em -.04em -.14em; }
.jcy-hero-intro .travel-hero .hero-title .hw-i {
  animation: jcyWordUp .7s var(--jcy-ease-out) both;
  animation-delay: calc(150ms + var(--i, 0) * 50ms);
}

.jcy-hero-intro .travel-hero .hero-photo .hero-slide.is-active { animation: jcyHeroPhoto 1.8s var(--jcy-ease-out) both; }
.jcy-hero-intro .travel-hero .hero-photo video.hero-slide.is-active { animation-name: jcyHeroFade; }

.jcy-hero-intro .travel-hero .hero-eyebrow { animation: jcyEyebrow .8s var(--jcy-ease-out) 50ms both; }
.jcy-hero-intro .travel-hero .hero-eyebrow::before { transform-origin: left center; animation: jcyLine .6s var(--jcy-ease-out) 50ms both; }

.jcy-hero-intro .travel-hero .hero-subtitle {
  animation: jcyFocusUp .7s var(--jcy-ease-out) both;
  animation-delay: calc(250ms + var(--hw-n, 6) * 50ms);
}

.jcy-hero-intro .travel-hero .hero-features .feature-item { animation: jcyRise .6s var(--jcy-ease-out) both; }
.jcy-hero-intro .travel-hero .hero-features .feature-item:nth-of-type(1) { animation-delay: calc(350ms + var(--hw-n, 6) * 50ms); }
.jcy-hero-intro .travel-hero .hero-features .feature-item:nth-of-type(2) { animation-delay: calc(420ms + var(--hw-n, 6) * 50ms); }
.jcy-hero-intro .travel-hero .hero-features .feature-item:nth-of-type(3) { animation-delay: calc(490ms + var(--hw-n, 6) * 50ms); }
.jcy-hero-intro .travel-hero .hero-features .feature-divider {
  animation: jcyDivider .5s var(--jcy-ease-out) both;
  animation-delay: calc(450ms + var(--hw-n, 6) * 50ms);
}

.jcy-hero-intro .travel-hero .hero-buttons .btn { animation: jcyPop .6s var(--jcy-ease-out) both; }
.jcy-hero-intro .travel-hero .hero-buttons .btn:nth-child(1) { animation-delay: calc(520ms + var(--hw-n, 6) * 50ms); }
.jcy-hero-intro .travel-hero .hero-buttons .btn:nth-child(2) { animation-delay: calc(600ms + var(--hw-n, 6) * 50ms); }

.jcy-hero-intro .travel-hero .hero-finder { animation: jcyCardIn .8s var(--jcy-ease-out) 300ms both; }
.jcy-hero-intro .travel-hero .hero-slide-nav { animation: jcyHeroFade .6s ease .8s both; }

/* ── Image reveals ────────────────────────────────────────────────────────
 * data-aos="img-reveal" (bottom → top) / "img-reveal-x" (left → right): the
 * picture is uncovered by a clip wipe. Applied to the <img> so the wrapper's
 * frames and hover effects are untouched.
 */
html body [data-aos^="img-reveal"] img {
  transition: clip-path .9s var(--jcy-ease-out), transform .5s ease;
}
html body [data-aos="img-reveal"]:not(.aos-animate) img   { clip-path: inset(100% 0 0 0); }
html body [data-aos="img-reveal-x"]:not(.aos-animate) img { clip-path: inset(0 100% 0 0); }
html body [data-aos^="img-reveal"].aos-animate img        { clip-path: inset(0); }
html body [data-aos^="img-reveal"] .vmv-zoom { transition: opacity .5s ease .6s; }
html body [data-aos^="img-reveal"]:not(.aos-animate) .vmv-zoom { opacity: 0; }

/* ── Inner-page header (jcy_page_header): entrance on page open ──────────
 * Title words rise out of masks, breadcrumb and description ease in, the
 * photo fades up before its slow ambient zoom, the gold ribbon slides in.
 */
@keyframes jcyRibbon { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }

/* Word masks from jcy_anim_words() — any heading inside a [data-hw-root] element */
html body [data-hw-root] .hw   { display: inline-block; vertical-align: top; overflow: hidden; padding: .06em .04em .16em; margin: -.06em -.04em -.16em; }
html body [data-hw-root] .hw-i {
  display: inline-block;
  animation: jcyWordUp .7s var(--jcy-ease-out) both;
  animation-delay: calc(var(--hw-base, 120ms) + var(--i, 0) * 50ms);
}
/* Gold gradient word: paint the gradient on the moving word itself (a clipped
   background on the outer span doesn't follow text inside inline-blocks) */
html body .page-title.jcy-ph .jcy-ph-gold { background: none; color: inherit; }
html body .page-title.jcy-ph .jcy-ph-gold .hw-i {
  background: linear-gradient(90deg, #ffcf6b, #f2a423);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html body .page-title.jcy-ph .jcy-ph-photo { animation: jcyHeroFade 1s ease both, jcyPhZoom 22s ease-in-out 1s infinite alternate; }
html body .page-title.jcy-ph .jcy-ph-crumbs { animation: jcyRise .6s var(--jcy-ease-out) 0ms both; }
html body .page-title.jcy-ph .container > p {
  animation: jcyFocusUp .7s var(--jcy-ease-out) both;
  animation-delay: calc(220ms + var(--hw-n, 3) * 50ms);
}
html body .page-title.jcy-ph .jcy-ph-ribbon { animation: jcyRibbon .8s var(--jcy-ease-out) 150ms both; }

/* ── Tour Packages intro + search (first screen, plays on page open) ──────
 * "backwards" fill: elements return to their own styles once finished, so
 * hover lifts (search button) keep working.
 */
html body .tp-page .tp-intro { --hw-base: 100ms; }
html body .tp-page .tp-intro .tp-eyebrow { animation: jcyRise .6s var(--jcy-ease-out) 0ms backwards; }
html body .tp-page .tp-intro > p {
  animation: jcyFocusUp .7s var(--jcy-ease-out) backwards;
  animation-delay: calc(200ms + var(--hw-n, 4) * 50ms);
}
html body .tp-page .tp-search {
  animation: jcyRise .7s var(--jcy-ease-out) backwards;
  animation-delay: calc(280ms + var(--hw-n, 4) * 50ms);
}
html body .tp-page .tp-search > * { animation: jcyPop .5s var(--jcy-ease-out) backwards; }
html body .tp-page .tp-search > :nth-child(1) { animation-delay: calc(340ms + var(--hw-n, 4) * 50ms); }
html body .tp-page .tp-search > :nth-child(2) { animation-delay: calc(390ms + var(--hw-n, 4) * 50ms); }
html body .tp-page .tp-search > :nth-child(3) { animation-delay: calc(440ms + var(--hw-n, 4) * 50ms); }
html body .tp-page .tp-search > :nth-child(4) { animation-delay: calc(490ms + var(--hw-n, 4) * 50ms); }

/* ── Custom Tour: destination filter tabs join the intro (after the headline) ── */
html body .ct-filters-intro li { animation: jcyPop .45s var(--jcy-ease-out) backwards; }
html body .ct-filters-intro li:nth-child(1) { animation-delay: calc(260ms + var(--hw-n, 4) * 50ms); }
html body .ct-filters-intro li:nth-child(2) { animation-delay: calc(295ms + var(--hw-n, 4) * 50ms); }
html body .ct-filters-intro li:nth-child(3) { animation-delay: calc(330ms + var(--hw-n, 4) * 50ms); }
html body .ct-filters-intro li:nth-child(4) { animation-delay: calc(365ms + var(--hw-n, 4) * 50ms); }
html body .ct-filters-intro li:nth-child(5) { animation-delay: calc(400ms + var(--hw-n, 4) * 50ms); }
html body .ct-filters-intro li:nth-child(6) { animation-delay: calc(435ms + var(--hw-n, 4) * 50ms); }

/* Destination tiles animate themselves (not the Isotope item). No hover movement: the
   end state below (transform: none) also outranks main.css's old hover scale. */

@media (prefers-reduced-motion: reduce) {
  html body .ct-filters-intro li,
  html body [data-hw-root] .hw-i,
  html body .tp-page .tp-intro .tp-eyebrow,
  html body .tp-page .tp-intro > p,
  html body .tp-page .tp-search,
  html body .tp-page .tp-search > * { animation: none !important; }
  html body [data-aos][data-aos] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  html body [data-aos^="img-reveal"] img { clip-path: none !important; }
  html body .page-title.jcy-ph .jcy-ph-photo,
  html body .page-title.jcy-ph .jcy-ph-crumbs,
  html body .page-title.jcy-ph .container > p,
  html body .page-title.jcy-ph .jcy-ph-ribbon { animation: none !important; }
}