/* ═══════════════════════════════════════════════════════════
   Webverix — Selected Work widget  (v1.2)
   Base styles + the image scroll-animation engine.
   Every value here is overridable from the Elementor panel.
   ═══════════════════════════════════════════════════════════ */

.wvx-work {
	--wvx-fire: #8B5CF6;
	--wvx-text: #FFFFFF;
	--wvx-text-2: rgba(255, 255, 255, 0.62);
	--wvx-dim: rgba(255, 255, 255, 0.45);
	--wvx-line: rgba(255, 255, 255, 0.08);
	--wvx-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
	--wvx-hover-dur: 250ms;
}

/* ── Section header ─────────────────────────── */
.wvx-work .wvx-shead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 64px;
}
.wvx-work .wvx-kicker {
	display: block;
	font-family: var(--wvx-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wvx-fire);
}
.wvx-work .wvx-heading {
	margin: 12px 0 0;
	font-size: clamp(32px, 5.4vw, 64px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-transform: uppercase;
	color: var(--wvx-text);
}
.wvx-work .wvx-heading span,
.wvx-work .wvx-heading em {
	display: block;
}
.wvx-work .wvx-heading em {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wvx-text);
}
.wvx-work .wvx-shead p {
	margin: 0;
	max-width: 38ch;
	color: var(--wvx-text-2);
	font-size: 15px;
	line-height: 1.6;
}

/* ── Stack ──────────────────────────────────── */
.wvx-work .wvx-stack {
	display: grid;
	gap: 26px;
}

/* ── Card ───────────────────────────────────── */
.wvx-work .wvx-case {
	display: grid;
	grid-template-columns: 46% 1fr;
	min-height: 420px;
	border: 1px solid var(--wvx-line);
	border-radius: 22px;
	/* Must stay OPAQUE: sticky-stacked cards slide over each other, and any
	   transparency lets the covered card's text bleed through. */
	background: linear-gradient(165deg, #161426, #0F0D1B);
	overflow: hidden;
	text-decoration: none;
	color: var(--wvx-text);
	transition:
		border-color var(--wvx-hover-dur) ease,
		box-shadow var(--wvx-hover-dur) ease,
		background var(--wvx-hover-dur) ease;
}
a.wvx-case:hover {
	border-color: rgba(139, 92, 246, 0.45);
}

/* Sticky stacking (opt-in via panel) */
.wvx-stack--sticky .wvx-case {
	position: sticky;
	top: calc(var(--wvx-sticky-top, 96px) + var(--wvx-i, 0) * var(--wvx-sticky-step, 16px));
}

/* ── Info column ────────────────────────────── */
.wvx-work .wvx-case-info {
	padding: 44px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wvx-work .wvx-case-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-family: var(--wvx-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wvx-dim);
	transition: color var(--wvx-hover-dur) ease;
}
.wvx-work .wvx-case-idx {
	margin: 18px 0 6px;
	font-size: clamp(60px, 7vw, 108px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);
	font-variant-numeric: tabular-nums;
	transition: -webkit-text-stroke-color var(--wvx-hover-dur) ease, color var(--wvx-hover-dur) ease;
}
.wvx-work .wvx-case-title {
	margin: 0 0 10px;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 850;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--wvx-text);
	transition: color var(--wvx-hover-dur) ease;
}
.wvx-work .wvx-case-desc {
	margin: 0;
	color: var(--wvx-text-2);
	font-size: 14.5px;
	line-height: 1.6;
	max-width: 40ch;
}
.wvx-work .wvx-kpi {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	font-family: var(--wvx-mono);
	font-size: 13px;
	color: var(--wvx-text-2);
	font-variant-numeric: tabular-nums;
}
.wvx-work .wvx-kpi b {
	color: var(--wvx-fire);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-family: inherit;
}

/* ── Screenshot column ──────────────────────── */
.wvx-work .wvx-case-img {
	position: relative;
	border-left: 1px solid var(--wvx-line);
	border-style: none none none solid;
	overflow: hidden;
	min-width: 0;
}
.wvx-work .wvx-case-img-frame {
	position: absolute;
	top: 7%;
	left: 7%;
	right: 7%;
	bottom: 0;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.5);
	background: #14122A;
}
.wvx-work .wvx-case-img-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: background var(--wvx-hover-dur) ease;
}
.wvx-work .wvx-case-img-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Image on the left variant */
.wvx-img-left .wvx-case-info { order: 2; }
.wvx-img-left .wvx-case-img {
	order: 1;
	border-style: none solid none none;
}

/* ═════════════════════════════════════════════
   IMAGE SCROLL ENGINE
   Classes set by the panel land on the widget
   wrapper:  .wvx-scroll-yes  (master switch)
             .wvx-trig-card | -image | -always
             .wvx-dir-v | -v-rev | -h | -h-rev
             .wvx-loop-yes   .wvx-pauseh-yes
             .wvx-ret-smooth | -instant
   Vars: --wvx-scr-start/end/dur/delay/ease
         --wvx-scr-ret-dur/ret-delay/ret-ease
   ═════════════════════════════════════════════ */

/* Rest positions per direction (+ the return transition) */
.wvx-scroll-yes .wvx-case-img-frame img {
	transition: object-position var(--wvx-scr-ret-dur, 1.2s) var(--wvx-scr-ret-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-ret-delay, 0s);
}
.wvx-scroll-yes.wvx-dir-v     .wvx-case-img-frame img { object-position: center var(--wvx-scr-start, 0%); }
.wvx-scroll-yes.wvx-dir-v-rev .wvx-case-img-frame img { object-position: center var(--wvx-scr-end, 100%); }
.wvx-scroll-yes.wvx-dir-h     .wvx-case-img-frame img { object-position: var(--wvx-scr-start, 0%) center; }
.wvx-scroll-yes.wvx-dir-h-rev .wvx-case-img-frame img { object-position: var(--wvx-scr-end, 100%) center; }

/* Instant snap-back: no transition at rest (hover rules below still animate in) */
.wvx-scroll-yes.wvx-ret-instant .wvx-case-img-frame img { transition-duration: 0s; }

/* Hover → destination. Trigger: whole card */
.wvx-scroll-yes.wvx-trig-card .wvx-case:hover .wvx-case-img-frame img {
	transition: object-position var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s);
}
.wvx-scroll-yes.wvx-trig-card.wvx-dir-v     .wvx-case:hover .wvx-case-img-frame img { object-position: center var(--wvx-scr-end, 100%); }
.wvx-scroll-yes.wvx-trig-card.wvx-dir-v-rev .wvx-case:hover .wvx-case-img-frame img { object-position: center var(--wvx-scr-start, 0%); }
.wvx-scroll-yes.wvx-trig-card.wvx-dir-h     .wvx-case:hover .wvx-case-img-frame img { object-position: var(--wvx-scr-end, 100%) center; }
.wvx-scroll-yes.wvx-trig-card.wvx-dir-h-rev .wvx-case:hover .wvx-case-img-frame img { object-position: var(--wvx-scr-start, 0%) center; }

/* Trigger: image only */
.wvx-scroll-yes.wvx-trig-image .wvx-case-img:hover .wvx-case-img-frame img {
	transition: object-position var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s);
}
.wvx-scroll-yes.wvx-trig-image.wvx-dir-v     .wvx-case-img:hover .wvx-case-img-frame img { object-position: center var(--wvx-scr-end, 100%); }
.wvx-scroll-yes.wvx-trig-image.wvx-dir-v-rev .wvx-case-img:hover .wvx-case-img-frame img { object-position: center var(--wvx-scr-start, 0%); }
.wvx-scroll-yes.wvx-trig-image.wvx-dir-h     .wvx-case-img:hover .wvx-case-img-frame img { object-position: var(--wvx-scr-end, 100%) center; }
.wvx-scroll-yes.wvx-trig-image.wvx-dir-h-rev .wvx-case-img:hover .wvx-case-img-frame img { object-position: var(--wvx-scr-start, 0%) center; }

/* Keyframes (loop + auto modes) */
@keyframes wvx-scr-v {
	from { object-position: center var(--wvx-scr-start, 0%); }
	to   { object-position: center var(--wvx-scr-end, 100%); }
}
@keyframes wvx-scr-v-rev {
	from { object-position: center var(--wvx-scr-end, 100%); }
	to   { object-position: center var(--wvx-scr-start, 0%); }
}
@keyframes wvx-scr-h {
	from { object-position: var(--wvx-scr-start, 0%) center; }
	to   { object-position: var(--wvx-scr-end, 100%) center; }
}
@keyframes wvx-scr-h-rev {
	from { object-position: var(--wvx-scr-end, 100%) center; }
	to   { object-position: var(--wvx-scr-start, 0%) center; }
}

/* Loop (ping-pong) while hovered */
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-card.wvx-dir-v     .wvx-case:hover .wvx-case-img-frame img,
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-image.wvx-dir-v     .wvx-case-img:hover .wvx-case-img-frame img {
	animation: wvx-scr-v var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate;
}
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-card.wvx-dir-v-rev .wvx-case:hover .wvx-case-img-frame img,
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-image.wvx-dir-v-rev .wvx-case-img:hover .wvx-case-img-frame img {
	animation: wvx-scr-v-rev var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate;
}
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-card.wvx-dir-h     .wvx-case:hover .wvx-case-img-frame img,
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-image.wvx-dir-h     .wvx-case-img:hover .wvx-case-img-frame img {
	animation: wvx-scr-h var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate;
}
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-card.wvx-dir-h-rev .wvx-case:hover .wvx-case-img-frame img,
.wvx-scroll-yes.wvx-loop-yes.wvx-trig-image.wvx-dir-h-rev .wvx-case-img:hover .wvx-case-img-frame img {
	animation: wvx-scr-h-rev var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate;
}

/* Always playing (auto) */
.wvx-scroll-yes.wvx-trig-always.wvx-dir-v     .wvx-case-img-frame img { animation: wvx-scr-v     var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate; }
.wvx-scroll-yes.wvx-trig-always.wvx-dir-v-rev .wvx-case-img-frame img { animation: wvx-scr-v-rev var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate; }
.wvx-scroll-yes.wvx-trig-always.wvx-dir-h     .wvx-case-img-frame img { animation: wvx-scr-h     var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate; }
.wvx-scroll-yes.wvx-trig-always.wvx-dir-h-rev .wvx-case-img-frame img { animation: wvx-scr-h-rev var(--wvx-scr-dur, 3s) var(--wvx-scr-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) var(--wvx-scr-delay, 0s) infinite alternate; }

/* Pause auto-play on hover */
.wvx-scroll-yes.wvx-trig-always.wvx-pauseh-yes .wvx-case:hover .wvx-case-img-frame img {
	animation-play-state: paused;
}

/* ── Tablet ─────────────────────────────────── */
@media (max-width: 1024px) {
	.wvx-work .wvx-case-info { padding: 32px; }
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 767px) {
	.wvx-work .wvx-case {
		grid-template-columns: 1fr !important;
		min-height: 0;
	}
	.wvx-work .wvx-case-img {
		order: 2;
		min-height: 240px;
		border-style: solid none none none;
	}
	.wvx-img-left .wvx-case-info { order: 1; }
	.wvx-sticky-mobile-off-yes .wvx-stack--sticky .wvx-case {
		position: static;
	}
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wvx-work .wvx-case,
	.wvx-work .wvx-case-title,
	.wvx-work .wvx-case-meta,
	.wvx-work .wvx-case-idx,
	.wvx-work .wvx-case-img-frame img {
		transition: none !important;
		animation: none !important;
	}
}