/* LENO Motion 4.2.0
   Hidden states live behind .leno-motion-armed, which only exists when the browser
   can run the animations and the library actually loaded. Nothing here can leave
   content permanently invisible on its own. */

.leno-motion-armed .elementor .leno-inner > *,
.leno-motion-armed .elementor .leno-split > .e-con > * {
	opacity: 0;
}

/* Counters keep their space while they run, so nothing reflows. */
.leno-motion-armed [data-leno-count] {
	font-variant-numeric: tabular-nums;
}

/* Hero media is scaled by Motion; the wrapper clips it. */
.elementor [id="hero"],
.elementor [id="top"] {
	overflow: hidden;
}

/* card hover, unchanged from 3.2.0: CSS does this well and needs no library */
.elementor .leno-card img,
.elementor .leno-card-l img { transition: transform .6s cubic-bezier(.23,1,.32,1); }
.elementor .leno-card:hover img,
.elementor .leno-card-l:hover img { transform: scale(1.04); }
.elementor .leno-card-foot,
.elementor .leno-card-foot-l { transition: border-color .3s ease; }
.elementor .leno-card:hover .leno-card-foot { border-color: var(--LenoBrass); }
.elementor .leno-card-l:hover .leno-card-foot-l { border-color: var(--LenoBrassDark); }

/* sticky header shrink, unchanged from 3.2.0 */
.elementor .elementor-element.elementor-sticky { transition: padding .25s ease; }
.elementor .elementor-element.elementor-sticky--effects.elementor-sticky--effects {
	padding-block-start: 8px;
	padding-block-end: 8px;
}

/* cart icon feedback */
@keyframes lenoCartBump {
	0%, 100% { transform: none; }
	30%      { transform: scale(1.18); }
	60%      { transform: scale(0.96); }
}
.leno-cart-bump { animation: lenoCartBump .55s cubic-bezier(.23,1,.32,1); }

@media (prefers-reduced-motion: reduce) {
	.leno-motion-armed .elementor .leno-inner > *,
	.leno-motion-armed .elementor .leno-split > .e-con > * { opacity: 1; }
	.elementor .leno-card img,
	.elementor .leno-card-l img,
	.elementor .elementor-element.elementor-sticky { transition: none; }
	.elementor .leno-card:hover img,
	.elementor .leno-card-l:hover img { transform: none; }
	.leno-cart-bump { animation: none; }
}

/* Before / after comparison, built by leno-motion.js from the two case study images */
.leno-compare { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--LenoCard); touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.leno-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.leno-compare-before { clip-path: inset(0 50% 0 0); transition: clip-path 140ms cubic-bezier(.23,1,.32,1); }
.leno-compare.is-dragging .leno-compare-before,
.leno-compare.is-dragging .leno-compare-handle { transition: none; }
.leno-compare-handle { position: absolute; inset-block: 0; inset-inline-start: 50%; width: 2px; margin-inline-start: -1px; padding: 0; border: 0; background: var(--LenoBrass); cursor: ew-resize; transition: inset-inline-start 140ms cubic-bezier(.23,1,.32,1); }
.leno-compare-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); background: var(--LenoBrass); }
.leno-compare-handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 12px; transform: translate(-50%, -50%); border-inline: 2px solid var(--LenoOnBrass); z-index: 1; }
.leno-compare-handle:focus-visible { outline: 2px solid var(--LenoBrassLight); outline-offset: 4px; }
.leno-compare-label { position: absolute; bottom: 14px; font: 500 .6875rem/1 var(--LenoBodyFont), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--LenoText); background: rgba(12,14,13,.72); padding: 8px 10px; pointer-events: none; }
.leno-compare-label.is-before { left: 14px; }
.leno-compare-label.is-after { right: 14px; }
@media (prefers-reduced-motion: reduce) { .leno-compare-before, .leno-compare-handle { transition: none; } }
