/* Scroll-linked 3D motion for the homepage sections.
 *
 * Elements opt in with data-3d="text|rise|flip|swing-l|swing-r|zoom" (+ optional --d for stagger).
 * - Supported browsers: native scroll-driven animations (animation-timeline: view()). Motion is
 *   tied to scroll position, runs off the main thread, and needs no JavaScript.
 * - Keyframes animate the individual translate/rotate/scale properties, so they compose with any
 *   `transform` an element already uses (e.g. pointer tilt).
 * - Other browsers: a simple fade-up via reveal.js (.is-in). Reduced motion: nothing moves.
 *
 * Pointer tilt: [data-tilt] reads --rx/--ry written by sections/tilt.js. */

/* Depth for children that turn in 3D. */
.section__inner, .quote__inner, .tracking__inner, .why__top, .faq__inner,
.dest__featured, .bento, .reviews__list, .cta { perspective: 1600px; }

[data-3d] { transform-origin: 50% 100%; }
[data-3d="swing-l"] { transform-origin: 0% 50%; }
[data-3d="swing-r"] { transform-origin: 100% 50%; }
[data-3d="zoom"], [data-3d="curtain"] { transform-origin: 50% 50%; }

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-3d] {
			animation: m3d-rise linear both;
			animation-timeline: view();
			animation-range: entry calc(4% + var(--d, 0) * 7%) cover calc(34% + var(--d, 0) * 6%);
		}
		[data-3d="text"]    { animation-name: m3d-text; animation-range: entry 10% cover 30%; }
		[data-3d="flip"]    { animation-name: m3d-flip; }
		[data-3d="swing-l"] { animation-name: m3d-swing-l; }
		[data-3d="swing-r"] { animation-name: m3d-swing-r; }
		[data-3d="curtain"] { animation-name: m3d-curtain; }
		/* Near the page end: finish once fully on screen, or it could never complete. */
		[data-3d="zoom"]    { animation-name: m3d-zoom; animation-range: entry 0% entry 100%; }

		/* The closing horizon rises like the edge of the globe coming into view. */
		/* Driven by the CTA section's timeline: the horizon itself is far larger than the viewport. */
		.cta { view-timeline: --cta-view; }
		.cta__horizon { animation: m3d-horizon linear both; animation-timeline: --cta-view; animation-range: entry 0% entry 100%; }
	}
}

/* Headings tip up from the floor. */
@keyframes m3d-text {
	from { opacity: 0; translate: 0 40px; rotate: x 20deg; } /* gentle: steeper angles skew off-centre text */
	to   { opacity: 1; translate: 0 0; rotate: x 0deg; }
}
/* Panels stand up from a backward lean, coming forward in depth. */
@keyframes m3d-rise {
	from { opacity: 0; translate: 0 90px -140px; rotate: x 16deg; }
	to   { opacity: 1; translate: 0 0 0; rotate: x 0deg; }
}
/* Tiles flip up from the floor, slightly smaller. */
@keyframes m3d-flip {
	from { opacity: 0; translate: 0 80px -120px; rotate: x 30deg; scale: .94; }
	to   { opacity: 1; translate: 0 0 0; rotate: x 0deg; scale: 1; }
}
/* Cards swing in on a hinge, like doors opening toward the viewer. */
@keyframes m3d-swing-l {
	from { opacity: 0; translate: -40px 60px -220px; rotate: y 24deg; }
	to   { opacity: 1; translate: 0 0 0; rotate: y 0deg; }
}
@keyframes m3d-swing-r {
	from { opacity: 0; translate: 40px 60px -220px; rotate: y -24deg; }
	to   { opacity: 1; translate: 0 0 0; rotate: y 0deg; }
}
/* Photo opens from a framed crop (negative end inset keeps the drop shadow visible). */
@keyframes m3d-curtain {
	from { opacity: .25; clip-path: inset(16% 12% 16% 12% round 28px); scale: .94; }
	to   { opacity: 1; clip-path: inset(-80px round 28px); scale: 1; }
}
@keyframes m3d-zoom {
	from { opacity: 0; translate: 0 60px -280px; scale: .9; }
	to   { opacity: 1; translate: 0 0 0; scale: 1; }
}
@keyframes m3d-horizon {
	from { translate: 0 30%; scale: .9; }
	to   { translate: 0 0; scale: 1; }
}

/* Fallback (no scroll-driven animations): fade-up once, via reveal.js. */
@supports not (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		html.has-reveal [data-3d]:not(.is-in) { opacity: 0; translate: 0 22px; }
		html.has-reveal [data-3d] { transition: opacity 1s var(--ease), translate 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
	}
}

/* ---------- pointer tilt ---------- */
[data-tilt] {
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .8s var(--ease), border-color .4s var(--ease);
	will-change: transform;
}
[data-tilt].is-tilting { transition: transform .25s ease-out, border-color .4s var(--ease); }
@media (prefers-reduced-motion: reduce) {
	[data-tilt] { transform: none; }
}