/*
 * SMAHO FX v1 (staging): page transitions and scroll / hover effects.
 * Loaded by the child theme (functions.php). Everything that moves is skipped
 * for visitors who ask for reduced motion. Add ?nofx to any URL to compare.
 */
:root {
	--fx-lime: #AFE67F;
	--fx-green: #233F2E;
	--fx-orange: #DB7B33;
	--fx-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Anti-aliasing: smoother, cleaner text across the whole site */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Background videos: never show the browser's play button (iOS shows it when autoplay is blocked,
   e.g. in Low Power Mode); the home hero shows the same rosemary scene as a still photo behind the video */
.elementor-background-video-hosted::-webkit-media-controls,
.elementor-background-video-hosted::-webkit-media-controls-panel,
.elementor-background-video-hosted::-webkit-media-controls-overlay-play-button,
.elementor-background-video-hosted::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}
.elementor-element-7629215 > .elementor-background-video-container {
	background: url("/wp-content/uploads/2026/09/HOME_SMAHO_HORTICULTURE_hero_bg.jpg") center / cover no-repeat;
}

/* 1. Reading progress bar */
.fx-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	height: 3px;
	z-index: 99999;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--fx-lime), var(--fx-orange));
}
@supports (animation-timeline: scroll()) {
	.fx-progress {
		animation: fx-progress linear both;
		animation-timeline: scroll(root block);
	}
	@keyframes fx-progress {
		to { transform: scaleX(1); }
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* Anti-aliasing: a transparent outline makes browsers smooth the edges of everything we tilt or scale in 3D */
	.fx-dock,
	.fx-card,
	.fx-tilt,
	.fx3-layer,
	.fx3-wi,
	.fx3-unit {
		outline: 1px solid transparent;
	}

	/* 2. Page transitions: the old page sinks and blurs into green, the new one wipes up */
	@view-transition { navigation: auto; }
	::view-transition { background: var(--fx-green); }
	::view-transition-old(root) { animation: fx-vt-out .6s var(--fx-ease) both; }
	::view-transition-new(root) { animation: fx-vt-in .85s var(--fx-ease) .1s both; }
	[data-elementor-type="cmsmasters_header"] { view-transition-name: fx-header; }
	@keyframes fx-vt-out {
		to { transform: scale(.92) translateY(-4%); opacity: 0; filter: blur(8px); }
	}
	@keyframes fx-vt-in {
		from { clip-path: inset(100% 0 0 0 round 48px 48px 0 0); transform: translateY(6%); }
		to { clip-path: inset(0 0 0 0 round 0); transform: none; }
	}

	/* 3. Big headings: words rise out of a mask */
	.fx-split-host.elementor-invisible { visibility: visible !important; }
	.fx-split-host.animated { animation-name: none !important; }
	.fx-w {
		display: inline-block;
		overflow: hidden;
		vertical-align: top;
		padding-bottom: .1em;
		margin-bottom: -.1em;
	}
	.fx-wi {
		display: inline-block;
		transform: translateY(110%) rotate(6deg);
		transform-origin: 0 100%;
		transition: transform 1s var(--fx-ease);
		transition-delay: calc(var(--i, 0) * 60ms);
	}
	.fx-split.fx-in .fx-wi { transform: none; }

	/* 4. Hero: content drifts up, blurs and fades while the photo darkens */
	@supports (animation-timeline: view()) {
		.fx-hero { view-timeline: --fx-hero block; }
		.fx-hero > :not(.elementor-background-overlay, .elementor-background-video-container, .elementor-background-slideshow) {
			animation: fx-hero-out linear both;
			animation-timeline: --fx-hero;
			animation-range: exit 0% exit 90%;
		}
		/* A split heading sitting directly in the hero keeps the hero exit, not Elementor's entrance */
		.fx-hero > .fx-split-host,
		.fx-hero > .fx-split-host.animated {
			animation-name: fx-hero-out !important;
		}
		.fx-hero::before {
			animation: fx-hero-dark linear both;
			animation-timeline: --fx-hero;
			animation-range: exit 0% exit 100%;
		}
		@keyframes fx-hero-out {
			to { transform: translateY(-16vh) scale(.94); opacity: 0; filter: blur(6px); }
		}
		@keyframes fx-hero-dark {
			to { opacity: .85; }
		}

		/* 5. Coloured sections rise into place as floating cards (card shape: section 10) */
		.fx-expand {
			animation: fx-expand linear backwards;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}
		@keyframes fx-expand {
			from { scale: .9; translate: 0 80px; opacity: .35; }
			to { scale: 1; translate: 0 0; opacity: 1; }
		}

		/* 6. Images reveal from a soft rounded window */
		:is([data-elementor-type="wp-page"], [data-elementor-type="cmsmasters_singular"]) :is(.elementor-widget-image, .elementor-widget-cmsmasters-image) img {
			animation: fx-img linear backwards;
			animation-timeline: view();
			animation-range: entry 0% cover 35%;
		}
		@keyframes fx-img {
			from { clip-path: inset(16% 10% 16% 10% round 32px); scale: 1.12; opacity: .3; }
			to { clip-path: inset(0 round 0); scale: 1; opacity: 1; }
		}
	}

	/* 7. Cards tilt in 3D toward the pointer, with a moving light reflection */
	.fx-tilt {
		transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
		transform-style: preserve-3d;
		transition: scale .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
		will-change: transform;
	}
	.fx-tilt.fx-hover { scale: 1.02; z-index: 2; }
	.fx-glare {
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%);
		mix-blend-mode: screen;
		opacity: 0;
		transition: opacity .45s var(--fx-ease);
	}
	.fx-hover > .fx-glare { opacity: 1; }

	/* 8. Magnetic buttons (uses `translate`, so the theme's own hover transforms still work) */
	.fx-mag { transition: all .3s ease, translate .55s var(--fx-ease); }

	/* 9. Cursor follower */
	.fx-cursor,
	.fx-cursor-dot {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2147483000;
		pointer-events: none;
		border-radius: 50%;
		mix-blend-mode: difference;
		opacity: 0;
		transition: opacity .3s, width .4s var(--fx-ease), height .4s var(--fx-ease), margin .4s var(--fx-ease), background-color .4s;
	}
	.fx-cursor {
		width: 36px;
		height: 36px;
		margin: -18px 0 0 -18px;
		border: 1.5px solid #fff;
	}
	.fx-cursor-dot {
		width: 6px;
		height: 6px;
		margin: -3px 0 0 -3px;
		background: #fff;
	}
	.fx-cursor-on .fx-cursor,
	.fx-cursor-on .fx-cursor-dot { opacity: 1; }
	.fx-cursor.fx-cursor--hover {
		width: 70px;
		height: 70px;
		margin: -35px 0 0 -35px;
		background-color: rgba(255, 255, 255, .12);
	}

	/* 10. Floating cards: coloured sections sit on the beige page with space, rounded corners and depth */
	.fx-card {
		width: auto !important;
		margin: clamp(20px, 3.5vw, 56px) clamp(12px, 2.5vw, 40px) !important;
		border-radius: clamp(20px, 2.4vw, 36px);
		overflow: clip;
		box-shadow: 0 40px 80px -40px rgba(35, 63, 46, .55), 0 18px 36px -24px rgba(0, 0, 0, .35);
	}

	/* 12. Dock: closing banner + footer rise together as one 3D slab (transform set by smaho-fx.js) */
	/* No transition: Elementor gives containers a .4s transform transition, which made the banner lag behind the footer (gap at the seam) */
	/* Real 3D: the slab keeps its children in 3D, so the content can hover above it (translateZ) */
	.fx-dock,
	.fx-dock :has(.fx3-layer) { transform-style: preserve-3d; }
	.fx-dock { backface-visibility: hidden; transition: none !important; --fx-depth: 55vh; --fx-lift: 240px; }
	/* Content lagging past the footer must not lengthen the page (the slab's progress depends on its length) */
	html.fx-docked body { overflow-y: clip; }
	/* Hover: content trails below its place, lifted toward the viewer, with a gentle drift (JS eases --fx-lag, --fx-bob) */
	.fx3-layer {
		translate: 0 calc(var(--fx-lag, 0) * var(--z, .6) * var(--fx-depth) + var(--fx-bob, 0px) * var(--z, .6)) calc(var(--fx-lag, 0) * var(--z, .6) * var(--fx-lift));
		will-change: translate;
	}
	@media (max-width: 767px) {
		.fx-dock { --fx-depth: 40vh; --fx-lift: 120px; }
	}
	/* Overlap by 2px so no hairline gap shows at the seam while the slab is tilted (both edges are the same orange) */
	/* The footer is two stacked orange blocks: paint the footer itself orange so no hairline of page shows between them while tilted */
	footer.fx-dock { margin-top: -2px; background-color: #B75925; }
	.fx-dock .elementor-invisible { visibility: visible !important; }
	.fx-dock .animated { animation-name: none !important; }

	/* Slow 3D text: each word and icon lies flat, then flips up to standing, in reading order */
	.fx3-w {
		display: inline-block;
		perspective: 700px;
	}
	.fx3-wi {
		display: inline-block;
	}
	.fx3-wi,
	.fx3-unit {
		transform-origin: 50% 100%;
		transform: perspective(700px) rotateX(-85deg) translateZ(-24px);
		opacity: 0;
		/* Hidden words are tilted almost edge-on in 3D, which can project their hit area over the whole page: never clickable until revealed */
		pointer-events: none;
		transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease;
		transition-delay: var(--d, 0ms);
	}
	.fx3-in .fx3-wi,
	.fx3-in .fx3-unit {
		transform: none;
		opacity: 1;
		pointer-events: auto;
	}
}