/* Voreva Motion — quiet by design.
   Rules: transform/opacity only (a few paint-only exceptions on tiny elements),
   ease-out, hover only on real pointers, everything off under reduced motion. */

:root {
	--vm-ink: #0b0b0b;
	--vm-paper: #fff;
	--vm-tint: #f3f3f1;
	--vm-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--vm-ratio: 3 / 4;     /* product image frame */
	--vm-grain: 0.025;     /* 0 = off */
}

/* ---------- Grain (static, never animates) ---------- */
.vm-grain {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: var(--vm-grain);
	background-size: 180px 180px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Preloader (first visit per session, front page) ---------- */
#vm-pre {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--vm-paper);
	color: var(--vm-ink);
	transition: opacity 0.45s var(--vm-ease), visibility 0s linear 0.45s;
}
.vm-pre-on #vm-pre {
	display: flex;
	/* Failsafe: if JS never runs, the overlay still leaves after 2.6s (the head script drops .vm-pre-on at 3.4s). */
	animation: vm-gone 0s linear 2.6s forwards;
}
/* Scroll lock only while the cover is up; the reserved gutter stops the page jumping sideways when the scrollbar returns. */
.vm-pre-on:not(.vm-pre-done) { overflow: hidden; scrollbar-gutter: stable; }
.vm-pre-done #vm-pre { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes vm-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.vm-pre-word {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-indent: 0.42em; /* optical centring for tracked text */
	text-transform: uppercase;
	opacity: 0;
	animation: vm-fade 0.5s var(--vm-ease) 0.05s forwards;
}
.vm-pre-line {
	position: relative;
	width: 120px;
	height: 1px;
	background: color-mix(in srgb, var(--vm-ink) 14%, transparent);
	overflow: hidden;
}
.vm-pre-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vm-ink);
	transform: scaleX(0);
	transform-origin: left;
	animation: vm-line 0.65s var(--vm-ease) 0.05s forwards; /* completes by the 0.7s minimum */
}
@keyframes vm-fade { to { opacity: 1; } }
@keyframes vm-line { to { transform: scaleX(1); } }

/* ---------- Hero: content waits for the background image ----------
   Only while <html> has .vm-hero-wait (front page, set in the head script). JS adds .vm-hero-ready
   to the hero container once the slide image is decoded; the animation is a no-JS failsafe.
   The selector uses the container's data-settings (present in the server HTML), not the slideshow node,
   which Elementor's JS only creates later. */
.vm-hero-wait [data-settings*="background_slideshow_gallery"] > .e-con-inner {
	opacity: 0;
	transition: opacity 0.6s var(--vm-ease);
	animation: vm-hero-show 0s linear 3s forwards;
}
.vm-hero-wait .vm-hero-ready > .e-con-inner { opacity: 1; animation: none; }
@keyframes vm-hero-show { to { opacity: 1; } }

/* ---------- Hero headline: word-by-word mask reveal ----------
   Never hidden by CSS: JS only splits it while the preloader covers the page. */
.vm-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}
.vm-w > span {
	display: inline-block;
	transform: translateY(105%);
}
.vm-in > .vm-w > span { /* .vm-in sits on the split heading, even when .vm-split is on a wrapper */
	transform: none;
	transition: transform 0.8s var(--vm-ease);
	transition-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- Scroll reveal ---------- */
.vm-r { opacity: 0; transform: translateY(14px); }
.vm-r.vm-r-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--vm-ease), transform 0.6s var(--vm-ease);
	transition-delay: var(--vm-d, 0ms);
}

/* ---------- Product cards ---------- */
.vm-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--vm-ratio);
	background: var(--vm-tint);
	margin: 0 0 0.9em;
}
.vm-media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0 !important;
	object-fit: cover;
	transition: transform 0.6s var(--vm-ease), opacity 0.3s var(--vm-ease);
}
.vm-media > img.vm-hover { opacity: 0; }

.vm-quick { display: none; }

@media (hover: hover) and (pointer: fine) {
	.vm-quick {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 13px 12px;
		text-align: center;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--vm-ink);
		background: color-mix(in srgb, var(--vm-paper) 92%, transparent);
		transform: translateY(101%);
		transition: transform 0.3s var(--vm-ease);
	}
	li.product:hover .vm-media > img { transform: scale(1.03); }
	li.product:hover .vm-media > img.vm-hover { opacity: 1; }
	li.product:hover .vm-quick,
	li.product a:focus-visible .vm-quick { transform: none; }
}

/* Cleaner cards: the quick bar replaces the default loop button. */
.vm-hide-loop-btn ul.products li.product .button { display: none; }

/* ---------- Buttons: fill rises from the bottom ---------- */
.vm-btn,
.elementor-widget-button .elementor-button,
.single_add_to_cart_button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.vm-btn::before,
.elementor-widget-button .elementor-button::before,
.single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--vm-paper);
	box-shadow: inset 0 0 0 1px var(--vm-ink);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.3s var(--vm-ease);
}
@media (hover: hover) and (pointer: fine) {
	.vm-btn:hover::before,
	.elementor-widget-button .elementor-button:hover::before,
	.single_add_to_cart_button:hover::before { transform: scaleY(1); }
	.vm-btn:hover,
	.elementor-widget-button .elementor-button:hover,
	.single_add_to_cart_button:hover { color: var(--vm-ink) !important; }
}
.vm-btn:active,
.elementor-widget-button .elementor-button:active { transform: scale(0.98); }

/* ---------- Links: underline draws in ---------- */
.vm-link,
.wd-footer li a,
.site-footer li a,
.elementor-location-footer li a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.3s var(--vm-ease);
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.vm-link:hover,
	.wd-footer li a:hover,
	.site-footer li a:hover,
	.elementor-location-footer li a:hover { background-size: 100% 1px; }
}

/* ---------- Magnetic CTA / parallax / marquee ---------- */
.vm-magnet { transition: transform 0.3s var(--vm-ease); }

.vm-parallax { overflow: hidden; }
.vm-parallax img {
	transform: translate3d(0, var(--vm-py, 0px), 0) scale(1.12);
	will-change: transform;
}

.vm-marquee {
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vm-marquee-track {
	display: inline-flex;
	animation: vm-marq var(--vm-marq-dur, 34s) linear infinite;
}
.vm-marquee-track > span { padding: 0 2.25rem; }
.vm-marquee:hover .vm-marquee-track,
.vm-marquee:focus-within .vm-marquee-track { animation-play-state: paused; }
@keyframes vm-marq { to { transform: translateX(-50%); } }

/* ---------- Category banners (WoodMart .promo-banner): fade-up, image settles ---------- */
.promo-banner.vm-r { transform: translateY(28px); }
.vm-r .main-wrapp-img { overflow: hidden; }
.vm-r .banner-image img { transform: scale(var(--vm-banner-zoom, 1.1)); }
.vm-r.vm-r-in .banner-image img {
	transform: none;
	transition: transform 1.1s var(--vm-ease);
	transition-delay: var(--vm-d, 0ms);
}

/* ---------- Hero content drifts slower than the page while scrolling ---------- */
.vm-hero-ready > .e-con-inner {
	transform: translate3d(0, var(--vm-hp, 0px), 0);
	will-change: transform;
}

/* ---------- Scroll progress hairline ---------- */
.vm-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 9995;
	pointer-events: none;
	background: var(--vm-ink);
	transform-origin: 0 50%;
	transform: scaleX(var(--vm-p, 0));
}

/* ---------- Reduced motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
	#vm-pre { display: none !important; }
	.vm-w > span { transform: none !important; transition: none !important; }
	.vm-r { opacity: 1 !important; transform: none !important; }
	.vm-marquee-track { animation: none; }
	.vm-progress { display: none; }
	.vm-parallax img { transform: none; }
	.vm-media > img,
	.vm-quick,
	.vm-btn::before,
	.elementor-widget-button .elementor-button::before,
	.single_add_to_cart_button::before { transition: none; }
}