/* ==========================================================================
   Inmi Travels — motion & interaction layer
   Everything here is progressive: without JS (or with reduced motion) the
   page renders exactly as the static design.
   ========================================================================== */

/* ---- Page transitions --------------------------------------------------- */
.js body { animation: page-in .7s var(--ease) both; }
.js body.is-leaving { opacity: 0; transition: opacity .35s ease; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Hero backgrounds: slow Ken Burns + scroll parallax ----------------- */
.home-hero, .page-hero { isolation: isolate; overflow: hidden; background: #1e2a24; }
.home-hero::before, .page-hero::before {
	content: ""; position: absolute; inset: -8% 0; z-index: -2;
	background: var(--hero-bg, none) center / cover no-repeat;
	translate: 0 var(--py, 0px);
	animation: hero-zoom-in 2.6s var(--ease) both, hero-drift 26s 2.6s ease-in-out infinite alternate;
	will-change: transform;
}
.home-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10, 18, 14, .45) 0%, rgba(10, 18, 14, 0) 22%),
		linear-gradient(90deg, rgba(18, 26, 22, .88) 0%, rgba(18, 26, 22, .55) 38%, rgba(18, 26, 22, .05) 70%);
}
.page-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10, 18, 14, .4) 0%, rgba(10, 18, 14, 0) 25%),
		linear-gradient(90deg, rgba(18, 26, 22, .85) 0%, rgba(18, 26, 22, .5) 40%, rgba(18, 26, 22, .08) 75%);
}
@keyframes hero-zoom-in { from { scale: 1.2; } to { scale: 1.04; } }
@keyframes hero-drift { from { scale: 1.04; } to { scale: 1.12; } }

/* ---- Hero intro sequence ------------------------------------------------- */
.js .hero-seq { opacity: 0; translate: 0 34px; transition: opacity 1s var(--ease), translate 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.js .is-loaded .hero-seq { opacity: 1; translate: 0 0; }
.js .stats-card.hero-seq { translate: 0 60px; }
.js .is-loaded .stats-card.hero-seq { translate: 0 0; }

/* ---- Word-by-word heading reveal ---------------------------------------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.split .w > span { display: inline-block; translate: 0 110%; rotate: 4deg; transform-origin: 0 100%; transition: translate 1.05s var(--ease), rotate 1.05s var(--ease); transition-delay: calc(var(--i) * 38ms + var(--base, 0ms)); }
.split.is-in .w > span { translate: 0 0; rotate: 0deg; }

/* ---- Image wipe reveal --------------------------------------------------- */
.js .img-reveal { clip-path: inset(0 0 100% 0 round var(--r, 0)); transition: clip-path 1.4s var(--ease); }
.js .img-reveal img { scale: 1.22; transition: scale 1.8s var(--ease), transform 1s var(--ease); }
.js .img-reveal.is-in { clip-path: inset(0 0 0 0 round var(--r, 0)); }
.js .img-reveal.is-in img { scale: 1; }
.js .img-reveal.from-left { clip-path: inset(0 100% 0 0 round var(--r, 0)); }
.js .img-reveal.from-left.is-in { clip-path: inset(0 0 0 0 round var(--r, 0)); }

/* ---- Fade-up with stagger ------------------------------------------------ */
.js .fx-up { opacity: 0; translate: 0 44px; transition: opacity .9s var(--ease), translate 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .fx-up.is-in { opacity: 1; translate: 0 0; }
.js .fx-fade { opacity: 0; transition: opacity 1.2s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js .fx-fade.is-in { opacity: 1; }
.js .fx-scale { opacity: 0; scale: .9; transition: opacity .9s var(--ease), scale 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .fx-scale.is-in { opacity: 1; scale: 1; }

/* Eyebrow line draws in */
.js .eyebrow.fx-line::before, .js .eyebrow.fx-line::after { scale: 0 1; transform-origin: left; transition: scale 1s var(--ease) .15s; }
.js .eyebrow.fx-line.is-in::before, .js .eyebrow.fx-line.is-in::after { scale: 1 1; }
.js .eyebrow.fx-line::after { transform-origin: right; }

/* Divider lines draw in */
.js .fx-rule { scale: 0 1; transform-origin: left; transition: scale 1.6s var(--ease); }
.js .fx-rule.is-in { scale: 1 1; }

/* ---- Parallax helpers ---------------------------------------------------- */
.px-img { overflow: hidden; }
.px-img img { height: 118% !important; margin-top: -9%; translate: 0 var(--py, 0px); will-change: translate; }
.watermark-logo { translate: 0 var(--py, 0px); }
.mandala { rotate: var(--rot, 0deg); transition: rotate .2s linear; }
.travels-arc { translate: 0 var(--py, 0px); }
.philosophy::before { inset: -15% 0; translate: 0 var(--py, 0px); }
.intro-badge { animation: badge-float 6s ease-in-out infinite; }
@keyframes badge-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -12px; rotate: 4deg; } }

/* ---- Play button pulse --------------------------------------------------- */
.play-btn::before, .play-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: pulse-ring 2.6s var(--ease) infinite; pointer-events: none; }
.play-btn::after { animation-delay: 1.3s; }
@keyframes pulse-ring { from { scale: 1; opacity: .8; } to { scale: 2.2; opacity: 0; } }

/* ---- Buttons: shine + magnetic ------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); translate: -120% 0; transition: translate .8s var(--ease); pointer-events: none; }
.btn:hover::after { translate: 120% 0; }
.btn-outline::after, .btn-outline-dark::after, .btn-ghost::after { display: none; }
.magnetic { transition: transform .4s var(--ease); }

/* ---- Card hovers ---------------------------------------------------------- */
.tour-row, .rt-row, .pkg-card, .story-mini, .team-card, .included-card { transition: translate .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease); }
.tour-row:hover, .rt-row:hover, .pkg-card:hover, .story-mini:hover { translate: 0 -6px; box-shadow: 0 30px 60px -25px rgba(28, 34, 31, .28); }
.act-card-title, .day-card-title, .col-card-title { transition: color .3s, translate .4s var(--ease); }
.act-card:hover .act-card-title, .col-card:hover .col-card-title { translate: 6px 0; color: var(--gold); }
.day-card:hover .day-card-title { translate: 6px 0; color: var(--gold-2); }
.act-card-media, .day-card-media, .col-card-media { transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
.act-card:hover .act-card-media, .day-card:hover .day-card-media, .col-card:hover .col-card-media { translate: 0 -8px; box-shadow: 0 26px 40px -20px rgba(0, 0, 0, .6); }
.tag-pill { transition: translate .4s var(--ease); }
.act-card:hover .tag-pill { translate: 4px 4px; }
.team-photo img { transition: scale 1s var(--ease), filter .6s; }
.team-card:hover .team-photo img { scale: 1.06; }
.team-card:hover { translate: 0 -6px; }
.why-item { transition: background-color .4s, opacity .9s var(--ease), translate 1.1s var(--ease); }
.why-icon { transition: background-color .35s, color .35s, rotate .6s var(--ease), scale .4s var(--ease); }
.why-item:hover .why-icon { background: var(--gold-2); color: var(--ink); rotate: -10deg; scale: 1.08; }
.why-num { transition: color .4s; }
.why-item:hover .why-num { color: var(--gold-2); }
.why-item::before { content: ""; display: block; height: 1px; margin-top: -25px; margin-bottom: 24px; background: var(--gold-2); scale: 0 1; transform-origin: left; transition: scale .7s var(--ease); }
.why-item:hover::before { scale: 1 1; }
.promise-list li { transition: padding-left .5s var(--ease), opacity .9s var(--ease), translate 1.1s var(--ease); }
.promise-list li:hover { padding-left: 12px; }
.promise-num { transition: color .4s; }
.promise-list li:hover .promise-num { color: var(--green); }
.stat { transition: background-color .4s; }
.stat:hover { background: rgba(33, 121, 106, .04); }
.socials a { transition: background-color .3s, color .3s, translate .4s var(--ease); }
.socials a:hover { translate: 0 -3px; }
.footer-links a { display: inline-block; transition: color .25s, translate .35s var(--ease); }
.footer-links a:hover { translate: 6px 0; }
.dest-row .btn, .tour-row .btn { will-change: transform; }
.highlights-box li { transition: padding-left .4s var(--ease); }
.highlights-box li:hover { padding-left: 8px; }
.day { transition: background-color .4s; }

/* Tilt cards */
.tilt { transform-style: preserve-3d; transition: transform .6s var(--ease); will-change: transform; }
.bento-card .bento-body > * { transition: translate .6s var(--ease); }
.bento-card:hover .bento-title { translate: 0 -4px; }

/* Cursor glow on the green "why" band */
.why-green::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(246, 184, 22, .08), transparent 60%); opacity: 0; transition: opacity .5s; }
.why-green:hover::after { opacity: 1; }
.why-green > .container { position: relative; z-index: 1; }

/* Carousel dragging */
.carousel-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.carousel-track.is-dragging a { pointer-events: none; }
.carousel-track { cursor: grab; }
.car-dots button.is-active { scale: 1.25; }

/* Header: hide on scroll down, reveal on scroll up */
.site-header.is-stuck { transition: translate .45s var(--ease), background-color .35s, padding .35s, box-shadow .35s; }
.site-header.is-stuck.is-hidden { translate: 0 -110%; }
.main-nav .menu > li > a { transition: color .25s; }
.main-nav .menu > li > a:hover { color: var(--gold); }

/* Filter transitions */
.rt-row, .region-block { transition: opacity .45s ease, translate .45s var(--ease); }
.is-filtering { opacity: 0 !important; translate: 0 20px !important; }

/* Experiences swap */
.exp-detail.is-active .exp-img img { animation: exp-zoom 1.4s var(--ease) both; }
@keyframes exp-zoom { from { scale: 1.12; } to { scale: 1; } }
.exp-item { transition: opacity .4s, translate .4s var(--ease); }
.exp-item:hover { translate: -4px 0; }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 3px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transform-origin: left; scale: var(--p, 0) 1; pointer-events: none; }
.admin-bar .scroll-progress { top: 32px; }

/* Stories crossfade */
.story-slide.is-active blockquote { animation: fade-up .8s var(--ease) both; }
.story-slide.is-active figcaption { animation: fade-up .8s .15s var(--ease) both; }

@media (hover: none) {
	.tour-row:hover, .rt-row:hover, .pkg-card:hover, .story-mini:hover, .team-card:hover { translate: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js body, .home-hero::before, .page-hero::before, .intro-badge, .play-btn::before, .play-btn::after { animation: none !important; }
	.js .hero-seq, .js .fx-up, .js .fx-fade, .js .fx-scale, .split .w > span { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
	.js .img-reveal { clip-path: none !important; }
	.js .img-reveal img { scale: 1 !important; }
	.js .fx-rule, .js .eyebrow.fx-line::before, .js .eyebrow.fx-line::after { scale: 1 1 !important; }
	.px-img img { translate: none !important; }
}

html:not(.js) .home-hero::before, html:not(.js) .page-hero::before, html:not(.js) .intro-badge { animation: none; scale: 1; }

/* ==========================================================================
   Button & link hover states — matched to the Figma prototype
   (smart-animate ease-out ~300ms; no shine, no movement)
   ========================================================================== */
.btn::after { display: none !important; }
.btn:hover .icon-arrow-right, .btn:hover .icon-arrow-up-right { transform: none; }
.btn { transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out; }
/* Green buttons fill gold */
.btn-green:hover, .btn-green:focus-visible { background: #e2ac27; color: #fff; }
/* Small gold "See All" swaps to green */
.carousel-nav .btn-gold:hover, .carousel-nav .btn-gold:focus-visible { background: var(--green); color: #fff; }
/* Large gold, white, outline and ghost buttons hold their colours */
.btn-gold:hover, .btn-green-text:hover { background: var(--gold-2); }
.btn-green-text:hover { background: var(--gold); }
.btn-white:hover { background: #fff; }
.btn-ghost:hover { background: transparent; }
.btn-outline:hover { background: transparent; color: var(--green); }
.btn-outline-dark:hover { background: transparent; border-color: rgba(28, 34, 31, .3); color: var(--ink); }
/* Carousel arrows invert to a light chip */
.car-btn { transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out; }
.car-btn:not(.car-btn-round):hover { background: #e9e9e9; border-color: #e9e9e9; color: var(--green); }
.car-btn-round:hover { background: transparent; }
/* Menu: gold label with a dot underneath; no active underline */
.main-nav .menu > li > a::after { left: 50%; right: auto; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: #e7b94a; transform: translateX(-50%) scale(0); transition: transform .3s ease-out; }
.main-nav .menu > .current-menu-item > a::after, .main-nav .menu > .current-menu-ancestor > a::after { transform: translateX(-50%) scale(0); }
.main-nav .menu > li:hover > a::after { transform: translateX(-50%) scale(1); }
.main-nav .menu > li > a:hover, .main-nav .menu > li:hover > a { color: #e7b94a; }
/* Why items: number and title turn gold */
.why-item::before { display: none; }
.why-item:hover .why-icon { background: rgba(255, 255, 255, .1); color: var(--gold-2); rotate: none; scale: none; }
.why-item-title { transition: color .3s ease-out; }
.why-item:hover .why-item-title, .why-item:hover .why-num { color: #e2ac27; }
/* Footer links & socials stay still, as in the prototype */
.footer-links a:hover { translate: none; color: #fff; }
.socials a:hover { translate: none; background: transparent; color: #fff; }