/**
 * Motion · Hero (inc/elementor/widgets/hero.php, inc/elementor/page-hero.php).
 *
 * The first view of every page, run from CSS at first paint (no waiting for scripts):
 * - photo hero: dusk falls on the photo (the overlay warms, then deepens to night), the moon rises
 *   at the right, the title lights word by word like candles being lit, and the booking bar is
 *   slid across like a menu on the table. Leaving the hero, the photo steps back into a card.
 * - panel heroes: the moon rises behind the title (a soft halo opening from the top right) and
 *   the eyebrow catches a single gold glint.
 * The title stays readable throughout (never below 45% opacity) so it can be the LCP.
 *
 * Every rule sits behind the mgk-motion gate: nothing moves for reduced motion, with the site
 * switch off or in the Elementor editor, and without JavaScript the hero is as designed.
 */

.ml-hero__moon {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) {

		/* Dusk: warm evening light, then the night colour of the overlay. */
		[data-ml-motion~="dusk"]::after {
			animation: ml-dusk calc(2800ms * var(--mgk-tempo)) cubic-bezier(0.33, 0, 0.2, 1) both;
		}

		/* The moon, low and faint, rises and brightens; its shadow slides off (crescent to full). */
		.ml-hero--photo .ml-hero__moon {
			display: block;
			position: absolute;
			top: clamp(96px, 16%, 180px);
			right: max(24px, calc((100% - 1200px) / 2 + 24px));
			z-index: 0;
			width: clamp(48px, 5vw, 84px);
			aspect-ratio: 1;
			border-radius: 50%;
			background: radial-gradient(circle at 38% 36%, #fffaf0 0%, #f3e2c2 55%, #dcc49a 100%);
			box-shadow: 0 0 40px 12px rgba(255, 232, 190, 0.18), 0 0 120px 36px rgba(255, 220, 170, 0.08);
			opacity: 0.78;
			mix-blend-mode: screen;
			pointer-events: none;
			animation: ml-moonrise calc(3200ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc(400ms * var(--mgk-tempo)) both;
		}

		.ml-hero--photo .ml-hero__moon::after {
			content: "";
			position: absolute;
			inset: -2px;
			border-radius: 50%;
			background: #2e2327;
			opacity: 0.86;
			translate: 0 0;
			animation: ml-moonphase calc(4200ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.2, 1) calc(600ms * var(--mgk-tempo)) both;
		}

		/* Candles: each word starts as a warm, soft glow and settles into ink (or paper). */
		[data-ml-motion~="candle"] .ml-w {
			display: inline-block;
			animation: ml-candle calc(1400ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc((240ms + var(--i, 0) * 110ms) * var(--mgk-tempo)) both;
		}

		/* The booking bar is slid in from the right like a menu across the table. */
		[data-ml-motion~="menu-slide"] .ml-hero__bar {
			transform-origin: 100% 100%;
			animation: ml-menu-slide calc(var(--mgk-dur-spring) * 1.4 * var(--mgk-tempo)) var(--mgk-ease-spring) calc(900ms * var(--mgk-tempo)) both;
		}

		/* Panel heroes: a halo opens from the top right behind the copy. */
		[data-ml-motion~="moonrise"] {
			position: relative;
			isolation: isolate;
		}

		[data-ml-motion~="moonrise"]::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background:
				radial-gradient(circle at 84% 18%, rgba(255, 236, 200, 0.2) 0, rgba(255, 236, 200, 0.07) 9%, transparent 34%),
				radial-gradient(circle at 84% 18%, #fbf3e2 0, #f1e2c4 1.6%, #e2cb9f 2.2%, transparent 2.5%);
			pointer-events: none;
			animation: ml-halo calc(2600ms * var(--mgk-tempo)) cubic-bezier(0.22, 1, 0.36, 1) calc(200ms * var(--mgk-tempo)) both;
		}

		/* One gold glint across the eyebrow, then it rests. */
		[data-ml-motion~="gilt"] {
			background: linear-gradient(100deg, currentColor 0 40%, #e8c98a 48%, #fff3d6 50%, #e8c98a 52%, currentColor 60% 100%) 0 0 / 260% 100% no-repeat;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			animation: ml-gilt calc(1800ms * var(--mgk-tempo)) cubic-bezier(0.45, 0, 0.2, 1) calc(1100ms * var(--mgk-tempo)) both;
		}
	}
}

/* Leaving the hero, the photo steps back from the window into a rounded card (scroll-linked). */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
		:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) [data-ml-motion~="recede"] {
			animation: ml-recede linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 85%;
		}
	}
}

@keyframes ml-dusk {
	0% {
		background: #b86b3c;
		opacity: 0.18;
	}
	45% {
		background: #7a3b39;
		opacity: 0.3;
	}
}

@keyframes ml-moonrise {
	from {
		opacity: 0;
		translate: 0 calc(56px * var(--mgk-intensity));
		scale: 0.82;
	}
}

@keyframes ml-moonphase {
	from {
		translate: -22% 0;
	}
	to {
		translate: 115% 0;
		opacity: 0;
	}
}

@keyframes ml-candle {
	from {
		opacity: 0.45;
		filter: blur(6px);
		color: #ffd9a0;
		text-shadow: 0 0 18px rgba(255, 196, 120, 0.9), 0 0 42px rgba(255, 170, 90, 0.55);
		translate: 0 0.12em;
	}
	55% {
		filter: blur(0);
		color: #ffe9c8;
		text-shadow: 0 0 14px rgba(255, 206, 140, 0.55);
	}
}

@keyframes ml-menu-slide {
	from {
		opacity: 0;
		translate: calc(140px * var(--mgk-intensity)) 12px;
		rotate: calc(2.5deg * var(--mgk-intensity));
	}
}

@keyframes ml-halo {
	from {
		opacity: 0;
		clip-path: circle(0% at 84% 18%);
	}
	to {
		opacity: 1;
		clip-path: circle(150% at 84% 18%);
	}
}

@keyframes ml-gilt {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0 0;
	}
}

@keyframes ml-recede {
	to {
		clip-path: inset(0 3% 6% 3% round 0 0 32px 32px);
		filter: brightness(0.82);
	}
}