/* G&H Motion. Everything here only applies while .gh-m is set, which the head
   script skips for visitors who prefer reduced motion. */

:root {
	/* Eases in and out, so the movement stays visible all the way through. */
	--gh-ease: cubic-bezier(.3, .1, .2, 1);
	--gh-fade: cubic-bezier(.4, 0, .4, 1);
}

/* Hold content back until the script has prepared it, then fade the sections in. */
.gh-m [data-elementor-type="wp-page"] > .e-parent,
.gh-m [data-elementor-type="archive"] > .e-parent {
	transition: opacity .9s var(--gh-fade);
}
.gh-m:not(.gh-ready) [data-elementor-type="wp-page"] > .e-parent,
.gh-m:not(.gh-ready) [data-elementor-type="archive"] > .e-parent {
	opacity: 0;
}

/* Replace Elementor's own entrance animations on the page itself. Popups are
   left out here and get their own entrance further down. */
.gh-m [data-elementor-type="wp-page"] .elementor-invisible,
.gh-m [data-elementor-type="archive"] .elementor-invisible { visibility: visible !important; }
.gh-m [data-elementor-type="wp-page"] .animated,
.gh-m [data-elementor-type="archive"] .animated { animation: none !important; }

/* Scroll progress line */
.gh-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: #C1A480;
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 100000;
	pointer-events: none;
}

/* Text, buttons and cards. Elementor's widget rule sets its own transition with
   higher specificity and no opacity, which would cancel the fade, so this must win. */
.gh-r {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .9s var(--gh-fade), transform 1.05s var(--gh-ease) !important;
	transition-delay: var(--d, 0ms) !important;
}
.gh-r.gh-in { opacity: 1; transform: none; }

/* Images fade, wipe open and settle */
.gh-img {
	opacity: 0;
	clip-path: inset(0 0 100% 0 round 12px);
	transform: scale(1.1);
	transition: opacity .9s var(--gh-fade), clip-path 1.35s var(--gh-ease), transform 1.7s var(--gh-ease);
	transition-delay: var(--d, 0ms);
}
.gh-img.gh-in { opacity: 1; clip-path: inset(0 0 0 0 round 0); transform: none; }

/* Dividers draw outwards */
.gh-line {
	opacity: 0;
	transform: scaleX(0);
	transition: opacity .8s var(--gh-fade), transform 1.2s var(--gh-ease);
	transition-delay: var(--d, 0ms);
}
.gh-line.gh-in { opacity: 1; transform: none; }

/* Icons settle with a gentle spring */
.gh-pop {
	opacity: 0;
	transform: scale(.7);
	transition: opacity .8s var(--gh-fade), transform 1.1s cubic-bezier(.3, 1.35, .5, 1);
	transition-delay: var(--d, 0ms);
}
.gh-pop.gh-in { opacity: 1; transform: none; }

/* Carousels: slides arrive one after another, then the controls */
.gh-car .swiper-slide {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .9s var(--gh-fade), transform 1.05s var(--gh-ease);
	transition-delay: 300ms;
}
.gh-car .swiper-slide:nth-child(1) { transition-delay: 0ms; }
.gh-car .swiper-slide:nth-child(2) { transition-delay: 100ms; }
.gh-car .swiper-slide:nth-child(3) { transition-delay: 200ms; }
.gh-car.gh-in .swiper-slide { opacity: 1; transform: none; }
.gh-car .elementor-swiper-button,
.gh-car .swiper-pagination {
	opacity: 0;
	transition: opacity .8s var(--gh-fade) .4s;
}
.gh-car.gh-in .elementor-swiper-button,
.gh-car.gh-in .swiper-pagination { opacity: 1; }

/* Hero backgrounds drift on scroll */
.gh-plx {
	will-change: transform;
	transform: translate3d(0, var(--gh-y, 0), 0) scale(1.14);
}

/* Hover: images ease in. Only for devices that really hover. */
@media (hover: hover) and (pointer: fine) {
	.elementor-widget-image img,
	.e-loop-item img {
		transition: transform 1.4s var(--gh-ease);
	}
	.swiper-slide:hover .elementor-widget-image img { transform: scale(1.04); }
}

/* Menu panels glide in */
.e-n-menu-content > .e-con,
.e-n-menu-content .e-active {
	animation: gh-panel .7s var(--gh-ease) both;
}
@keyframes gh-panel {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* Popups: the backdrop fades and the form settles in order. Elementor owns the panel's
   entrance and exit, so setting an animation on the panel itself would run it twice. */
.gh-m .elementor-popup-modal {
	animation: gh-backdrop .5s var(--gh-fade) both;
}
.gh-m .elementor-popup-modal:has(.dialog-widget-content.reverse) {
	animation: gh-backdrop-out .45s var(--gh-fade) both;
}
.gh-m .elementor-popup-modal .dialog-widget-content.animated {
	animation-timing-function: var(--gh-ease);
}
.gh-m .gh-booking-form > * {
	animation: gh-field .7s var(--gh-ease) both;
}
.gh-m .gh-booking-form > :nth-child(1) { animation-delay: .12s; }
.gh-m .gh-booking-form > :nth-child(2) { animation-delay: .18s; }
.gh-m .gh-booking-form > :nth-child(3) { animation-delay: .24s; }
.gh-m .gh-booking-form > :nth-child(4) { animation-delay: .3s; }
.gh-m .gh-booking-form > :nth-child(5) { animation-delay: .36s; }
.gh-m .gh-booking-form > :nth-child(6) { animation-delay: .42s; }
.gh-m .gh-booking-form > :nth-child(n+7) { animation-delay: .48s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item,
.gh-m #elementor-popup-modal-1648 .elementor-widget-button {
	animation: gh-field .7s var(--gh-ease) both;
}
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(1) { animation-delay: .1s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(2) { animation-delay: .15s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(3) { animation-delay: .2s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(4) { animation-delay: .25s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(5) { animation-delay: .3s; }
.gh-m #elementor-popup-modal-1648 .elementor-icon-list-item:nth-child(6) { animation-delay: .35s; }
.gh-m #elementor-popup-modal-1648 .elementor-widget-button { animation-delay: .4s; }
@keyframes gh-backdrop {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes gh-backdrop-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes gh-field {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* First-visit reveal */
.gh-intro {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #3B4432;
	transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
}
.gh-intro img {
	width: 190px;
	max-width: 50vw;
	height: auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .9s var(--gh-fade), transform 1.1s var(--gh-ease);
}
.gh-intro.gh-show img { opacity: 1; transform: none; }
.gh-intro.gh-out { transform: translateY(-101%); }
.gh-intro.gh-out img { opacity: 0; transform: translateY(-20px); }

/* Phones: shorter travel, and no parallax. */
@media (max-width: 767px) {
	.gh-r,
	.gh-car .swiper-slide { transform: translateY(14px); }
	.gh-img { transform: scale(1.05); }
	.gh-plx { transform: none; }
}