/* ==========================================================================
   Statement — motion styles
   Initial states only apply when html.fx-js is set (JS running, no reduced motion),
   so content is never hidden if scripts fail.
   ========================================================================== */

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Pre-animation states ---------- */
.fx-js .fx-reveal,
.fx-js .fx-fade,
.fx-js .fx-stagger > .elementor-element,
.fx-js .fx-stagger > .e-con-inner > .elementor-element { visibility: hidden; }

.fx-js .fx-mask { clip-path: inset(100% 0 0 0); }
.fx-js .fx-mask-left { clip-path: inset(0 100% 0 0); }
.fx-js .fx-split { visibility: hidden; }
.fx-js .fx-line .elementor-divider-separator,
.fx-js .fx-line hr { transform: scaleX(0); transform-origin: left; }

/* Split-text word wrappers */
/* Generous mask so script swashes/ascenders/descenders are never clipped */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.35em 0.4em 0.5em; margin: -0.35em -0.4em -0.5em; }
.fx-wi { display: inline-block; will-change: transform; }

/* ---------- Media containers ---------- */
.fx-parallax, .fx-zoom, .fx-mask, .fx-mask-left, .fx-hover-zoom { overflow: hidden; }
.fx-parallax .elementor-widget-container,
.fx-zoom .elementor-widget-container,
.fx-hover-zoom .elementor-widget-container { overflow: hidden; }
.fx-parallax img, .fx-parallax video,
.fx-zoom img, .fx-zoom video { will-change: transform; }

/* Hover zoom (product cards, collection tiles) */
.fx-hover-zoom img { transition: transform 1.4s var(--ease-lux); }
.fx-hover-zoom:hover img { transform: scale(1.06); }

/* Image swap on hover: put two images in a container with .fx-swap */
.fx-swap { position: relative; }
.fx-swap > .elementor-element:nth-child(2),
.fx-swap > .e-con-inner > .elementor-element:nth-child(2) {
	position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease-lux);
}
.fx-swap:hover > .elementor-element:nth-child(2),
.fx-swap:hover > .e-con-inner > .elementor-element:nth-child(2) { opacity: 1; }

/* ---------- Marquee (add .fx-marquee to a Heading) ---------- */
.fx-marquee { overflow: hidden; white-space: nowrap; }
.fx-marquee .fx-track { display: inline-flex; animation: fx-marquee var(--fx-marquee-speed, 32s) linear infinite; }
.fx-marquee .fx-track > span { padding-right: 0.6em; }
.fx-marquee.fx-reverse .fx-track { animation-direction: reverse; }
.fx-marquee:hover .fx-track { animation-play-state: paused; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- Film grain overlay (add .fx-grain to a dark section) ---------- */
.fx-grain { position: relative; }
.fx-grain::after {
	content: "";
	position: absolute;
	inset: -50%;
	pointer-events: none;
	z-index: 2;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: fx-grain 1s steps(6) infinite;
}
@keyframes fx-grain {
	0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
	60% { transform: translate(-6%, 2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- Custom cursor ---------- */
.fx-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	.fx-cursor-on .fx-cursor {
		display: grid;
		place-items: center;
		position: fixed;
		top: 0; left: 0;
		z-index: 99999;
		width: 10px; height: 10px;
		margin: -5px 0 0 -5px;
		border-radius: 50%;
		background: var(--c-ivory);
		mix-blend-mode: difference;
		pointer-events: none;
		transition: width 0.5s var(--ease-lux), height 0.5s var(--ease-lux), margin 0.5s var(--ease-lux), background-color 0.4s;
	}
	.fx-cursor span {
		font-family: var(--f-sub);
		font-size: 10px;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--c-ink);
		opacity: 0;
		transition: opacity 0.3s;
	}
	.fx-cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
	.fx-cursor.is-view { width: 88px; height: 88px; margin: -44px 0 0 -44px; mix-blend-mode: normal; background: var(--c-ivory); }
	.fx-cursor.is-view span { opacity: 1; }
	.fx-cursor.is-hidden { opacity: 0; }
}

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
	.fx-marquee .fx-track, .fx-grain::after { animation: none; }
	.fx-hover-zoom img { transition: none; }
}