/**
 * Catalog motion, style "caravan" (the multi-day tours hub, 2026-09-28). The desert's language: the sun comes up
 * behind dunes, headings come into focus like a mirage, cards walk in one after another with a camel's gait, days
 * roll up on an odometer, footprints count the days, photos brighten like a dawn, embers rise from a campfire.
 * catalog-motion.js arms each block; entrances keep a backwards fill, so hovers keep working.
 */
@keyframes tgc-c-mirage { 0% { opacity: 0; filter: blur(9px); transform: scaleX(1.05) skewX(-5deg); } 55% { opacity: 1; filter: blur(1.5px); transform: scaleX(1) skewX(2deg); } }
@keyframes tgc-c-walk { 0% { opacity: 0; transform: translateX(-60px); } 20% { opacity: 1; transform: translateX(-46px) translateY(-4px); } 35% { transform: translateX(-32px) translateY(0); } 50% { transform: translateX(-20px) translateY(-4px); } 65% { transform: translateX(-10px) translateY(0); } 80% { transform: translateX(-3px) translateY(-2px); } }
@keyframes tgc-c-settle { from { opacity: 0; filter: blur(4px); transform: translateY(-14px); } }
@keyframes tgc-c-page { from { opacity: 0; transform: perspective(900px) rotateY(-75deg); } }
@keyframes tgc-c-dawn { from { filter: brightness(.25) sepia(.7) saturate(1.5); transform: scale(1.1); } }
@keyframes tgc-c-sunrise { from { opacity: 0; transform: translate(-50%, 45%) scale(.7); } }
@keyframes tgc-c-glow { 0%, 100% { opacity: .55; } 50% { opacity: .75; } }
@keyframes tgc-c-drift { to { background-position: 400px 0, 260px 30px; } }
@keyframes tgc-c-roll { from { transform: translateY(0); } }
@keyframes tgc-c-print { from { opacity: 0; transform: scale(.2); } }
@keyframes tgc-c-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes tgc-c-ember { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(18px, -260px); } }
@keyframes tgc-c-sun { 0% { transform: scale(.6); } 45% { background: #f3b562; box-shadow: 0 0 0 10px rgba(243, 181, 98, .25), 0 0 26px rgba(243, 181, 98, .8); transform: scale(1.18); } }
@keyframes tgc-c-trek { 0% { left: 12.5%; opacity: 1; } 8% { left: 12.5%; } 25%, 33% { left: 37.5%; } 50%, 58% { left: 62.5%; } 75%, 100% { left: 87.5%; opacity: 1; } }
@keyframes tgc-c-gait { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-2deg); } 75% { transform: translateY(-1px) rotate(2deg); } }
@keyframes tgc-c-dusk { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* A block never lets what walks in from the side widen the page (clip keeps sticky parts sticky). */
.tgc--m-caravan .tgc-band, .tgc--m-caravan .tgc-catalog { overflow-x: clip; }

/* Out of sight until its block plays. */
.tgc--m-caravan .is-armed:not(.is-in) .tgc-head > *,
.tgc--m-caravan .tgc-hero.is-armed:not(.is-in) .tgc-hero__inner > :not(.tgc-hero__title),
.tgc--m-caravan .tgc-hero.is-armed:not(.is-in) .tgc-m-w > span,
.tgc--m-caravan .tgc-hero.is-armed:not(.is-in) .tgc-hero__trust li,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-filter,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-card,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-answer__text,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-more,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-fact,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-choose__item,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-table tbody tr,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-pricing__col,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-banner,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-place,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-reason,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-step,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-prose__part,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-faq__item,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-faq__ask,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-links > li,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-cta > *,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-micro li,
.tgc--m-caravan .is-armed:not(.is-in) .tgc-c-camel { opacity: 0; }

/* Headings come into focus like a mirage over the sand. */
.tgc--m-caravan .is-in .tgc-head > * { animation: tgc-c-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-caravan .is-in .tgc-head > .tgc-title { animation: tgc-c-mirage 1.4s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.tgc--m-caravan .is-in .tgc-head > :nth-child(3) { animation-delay: .35s; }

/* Hero: the sun rises behind the dunes, sand drifts, the words walk in one after another. */
.tgc--m-caravan .tgc-hero { position: relative; overflow-x: clip; }
.tgc-c-sun { position: absolute; bottom: 0; left: 50%; z-index: -1; width: min(760px, 120vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(247, 196, 112, .55) 0%, rgba(232, 160, 80, .28) 30%, rgba(232, 160, 80, 0) 64%); transform: translate(-50%, 55%); mix-blend-mode: screen; pointer-events: none; animation: tgc-c-glow 6s ease-in-out 3.2s infinite; }
.tgc--m-caravan .tgc-hero.is-in .tgc-c-sun { animation: tgc-c-sunrise 3.2s cubic-bezier(.2, .7, .2, 1) backwards, tgc-c-glow 6s ease-in-out 3.2s infinite; }
.tgc-c-sand { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(248, 226, 180, .55) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(248, 226, 180, .35) 0 .8px, transparent 1.3px); background-size: 200px 130px, 130px 90px; animation: tgc-c-drift 16s linear infinite; pointer-events: none; }
.tgc-c-dunes { position: absolute; right: 0; bottom: -1px; left: 0; z-index: -1; width: 100%; height: 90px; pointer-events: none; }
.tgc-c-dunes__back { fill: rgba(224, 196, 117, .14); }
.tgc-c-dunes__front { fill: rgba(224, 196, 117, .22); }
.tgc--m-caravan .tgc-hero.is-in .tgc-hero__inner > :not(.tgc-hero__title) { animation: tgc-c-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-caravan .tgc-m-w { overflow: visible; }
.tgc--m-caravan .tgc-hero.is-in .tgc-m-w > span { animation: tgc-c-walk 1.3s ease-out backwards; animation-delay: calc(var(--w) * .12s + .2s); }
.tgc--m-caravan .tgc-hero.is-in .tgc-hero__lead { animation-delay: 1.1s; }
.tgc--m-caravan .tgc-hero.is-in .tgc-hero__trust { animation: none; }
.tgc--m-caravan .tgc-hero.is-in .tgc-hero__trust li { animation: tgc-c-settle .7s ease backwards; animation-delay: calc(var(--i) * .15s + 1.3s); }

/* Trip cards walk in as a caravan; each card's days roll up on an odometer. */
.tgc--m-caravan .is-in .tgc-filter { animation: tgc-c-rise .7s ease backwards; }
.tgc--m-caravan .is-in .tgc-card { animation: tgc-c-walk 1.3s ease-out backwards; animation-delay: calc(var(--i) * .11s + .15s); }
.tgc--m-caravan .tgc-card__media img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease; }
.tgc--m-caravan .tgc-card:hover .tgc-card__media img { filter: saturate(1.15) sepia(.12); transform: scale(1.07); }
.tgc-c-odo { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(14, 22, 32, .78); color: #f5d796; font-family: 'Trebuchet MS', Tahoma, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tgc-c-odo__win { display: flex; height: 22px; overflow: hidden; border-radius: 6px; background: #f5d796; color: #0e1620; }
.tgc-c-odo__reel { display: flex; flex-direction: column; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; font-weight: 400; letter-spacing: 0; line-height: 22px; text-align: center; transform: translateY(calc(var(--n) * -22px)); }
.tgc-c-odo__reel i { width: 13px; font-style: normal; }
.tgc--m-caravan .is-in .tgc-c-odo__reel { animation: tgc-c-roll 1.6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * .11s + .7s); }

/* The answer settles like sand; journal pages turn for "which trip". */
.tgc--m-caravan .is-in .tgc-answer__text, .tgc--m-caravan .is-in .tgc-more { animation: tgc-c-settle .9s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
.tgc--m-caravan .is-in .tgc-fact { animation: tgc-c-settle .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .2s); }
.tgc--m-caravan .tgc-choose__item { transform-origin: left center; }
.tgc--m-caravan .is-in .tgc-choose__item { animation: tgc-c-page 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .14s + .1s); }

/* The comparison: rows walk in; each trip's days are a trail of footprints. */
.tgc--m-caravan .is-in .tgc-table tbody tr { animation: tgc-c-walk 1s ease-out backwards; animation-delay: calc(var(--i) * .07s + .1s); }
.tgc-c-steps { display: flex; flex-wrap: wrap; gap: 3px 5px; max-width: 110px; margin-top: 7px; }
.tgc-c-steps i { width: 6px; height: 9px; border-radius: 50% 50% 45% 45%; background: #c8a44a; transform: rotate(-10deg); }
.tgc-c-steps i:nth-child(even) { margin-top: 3px; transform: rotate(10deg); }
.tgc--m-caravan .is-in .tgc-c-steps i { animation: tgc-c-print .35s ease backwards; animation-delay: calc(var(--i, 0) * .07s + var(--k) * .12s + .5s); }

/* Pricing rises out of the sand. */
.tgc--m-caravan .is-in .tgc-pricing__col { animation: tgc-c-settle 1s cubic-bezier(.2, .7, .2, 1) backwards; }
.tgc--m-caravan .is-in .tgc-pricing__col--excluded { animation-delay: .15s; }
.tgc--m-caravan .is-in .tgc-pricing__col li { animation: tgc-c-rise .5s ease backwards; animation-delay: calc(var(--i) * .08s + .4s); }
.tgc--m-caravan .is-in .tgc-banner { animation: tgc-c-settle .9s ease 1s backwards; }

/* The regions arrive in a line, their photos brightening like a dawn. */
.tgc--m-caravan .is-in .tgc-place { animation: tgc-c-walk 1.3s ease-out backwards; animation-delay: calc(var(--i) * .14s + .1s); }
.tgc--m-caravan .is-in .tgc-place__img img { animation: tgc-c-dawn 2.4s ease-out backwards; animation-delay: calc(var(--i) * .14s + .3s); }

/* A campfire in the navy band: embers rise and fade. */
.tgc--m-caravan .tgc-band--navy { position: relative; }
.tgc--m-caravan .tgc-band--navy > .tgc-wrap { position: relative; z-index: 1; }
.tgc-c-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tgc-c-embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #f3a95a; box-shadow: 0 0 8px 2px rgba(243, 169, 90, .6); opacity: 0; animation: tgc-c-ember var(--d) ease-in var(--w) infinite; }
.tgc--m-caravan .is-in .tgc-reason { animation: tgc-c-settle .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .14s + .15s); }

/* Booking: a camel walks the line; each step glows like the sun as it arrives. */
.tgc-c-camel { position: absolute; top: 29px; left: 12.5%; z-index: 2; width: 34px; margin: -28px 0 0 -17px; color: #a8862e; pointer-events: none; }
.tgc-c-camel svg { display: block; width: 34px; height: 23px; fill: currentColor; animation: tgc-c-gait .7s ease-in-out infinite; }
.tgc--m-caravan .is-in .tgc-c-camel { animation: tgc-c-trek 4.8s cubic-bezier(.45, 0, .3, 1) .4s both; }
.tgc--m-caravan .is-in .tgc-step { animation: tgc-c-rise .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * 1.2s + .25s); }
.tgc--m-caravan .is-in .tgc-step__no { animation: tgc-c-sun .9s ease backwards; animation-delay: calc(var(--i) * 1.2s + .4s); }
.tgc--m-caravan .is-in .tgc-steps::before { animation: tgc-c-line 3.6s linear .4s backwards; transform-origin: left; }
@keyframes tgc-c-line { from { transform: scaleX(0); } }

/* When to go, questions, more, the last call. */
.tgc--m-caravan .is-in .tgc-prose__part { animation: tgc-c-page 1s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .15s + .15s); transform-origin: left center; }
.tgc--m-caravan .is-in .tgc-faq__item { animation: tgc-c-walk .9s ease-out backwards; animation-delay: calc(var(--i) * .08s + .1s); }
.tgc--m-caravan .is-in .tgc-faq__ask { animation: tgc-c-settle .9s ease .2s backwards; }
.tgc--m-caravan .is-in .tgc-links > li { animation: tgc-c-walk 1.1s ease-out backwards; animation-delay: calc(var(--i) * .1s + .1s); }
.tgc--m-caravan .tgc-band--cta { position: relative; }
.tgc--m-caravan .tgc-band--cta > .tgc-wrap { position: relative; z-index: 1; }
.tgc-c-dusk { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(248, 245, 238, 0) 20%, rgba(243, 181, 98, .16) 45%, rgba(232, 140, 90, .1) 60%, rgba(248, 245, 238, 0) 80%); background-size: 220% 100%; animation: tgc-c-dusk 14s ease-in-out infinite alternate; pointer-events: none; }
.tgc--m-caravan .is-in .tgc-cta > * { animation: tgc-c-settle .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * .12s + .35s); }
.tgc--m-caravan .is-in .tgc-micro li { animation: tgc-c-rise .5s ease backwards; animation-delay: calc(var(--i) * .15s + .8s); }

@media (max-width: 1024px) {
	.tgc-c-camel { display: none; }
}
@media (max-width: 760px) {
	.tgc-c-dunes { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.tgc-c-sun, .tgc-c-sand, .tgc-c-embers i, .tgc-c-camel svg, .tgc-c-dusk { animation: none; }
	.tgc-c-embers { display: none; }
}