/* Sitto Motion: Finlance-style micro interactions. Loaded only on matching pages (body.sitto-motion). */

/* ---------------------------------------------------------------- Anti flash
   Hero intro targets stay hidden until the script has set their start state (or the 3.5s failsafe fires). */
html.sm-js:not(.sm-ready) body.sitto-motion-hero .custom-hero-h7 .elementor-widget:not([class*="sitto-anim--"]) h1.pxl-heading__title,
html.sm-js:not(.sm-ready) body.sitto-motion-hero .custom-hero-h7 .sitto-hero-badge:not([class*="sitto-anim--"]),
html.sm-js:not(.sm-ready) body.sitto-motion-hero .custom-hero-h7 .elementor-element-sitto_desc_text:not([class*="sitto-anim--"]),
html.sm-js:not(.sm-ready) body.sitto-motion-hero .custom-hero-h7 .elementor-widget-pxl_button:not([class*="sitto-anim--"]),
html.sm-js:not(.sm-ready) body.sitto-motion-hero .custom-hero-h7 .custom-overlay-h8:not([class*="sitto-anim--"]) {
	visibility: hidden !important;
}

/* Per-element "page load" effects stay hidden until their start state is set. */
html.sm-js:not(.sm-ready) [class*="sitto-mo--intro"] { visibility: hidden !important; }

/* GSAP drives these: no CSS transition may lag behind the inline transform. */
.sm-rv { transition: none !important; }
.sm-hero-el { will-change: transform, opacity; transition: none !important; }

/* ---------------------------------------------------------- Split text parts */
.sm-w { display: inline-block; white-space: nowrap; }
.sm-c { display: inline-block; will-change: transform, opacity; }

/* ------------------------------------------------------------------ Text roll
   Label duplicated: copy A slides up and out, copy B slides in from below (0.4s, power2.inOut).
   Hover in and out are exact mirrors, like Finlance. */
.sm-roll {
	position: relative;
	display: inline-block;
	overflow: hidden;
	overflow: clip;
	vertical-align: top;
}
.sm-roll__a,
.sm-roll__b {
	display: block;
	transition: transform var(--sm-roll-dur, 0.4s) cubic-bezier(0.645, 0.045, 0.355, 1);
}
.sm-roll__b {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateY(101%);
}

/* The roll wraps a bare label in extra spans. Theme rules such as
   ".pxl-icon-box__item-button span" style EVERY span as the arrow pill (white
   background, padding, flex), so the wrapper spans are reset (doubled class
   outranks them) and kept inline like the text they replace. */
.sm-host .sm-textwrap.sm-textwrap,
.sm-host .sm-roll.sm-roll,
.sm-host .sm-roll__a.sm-roll__a,
.sm-host .sm-roll__b.sm-roll__b {
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	min-width: 0;
	z-index: auto;
}
.pxl-icon-box__item-button a .sm-textwrap.sm-textwrap,
.pxl-icon-box__item-button a .sm-roll.sm-roll {
	display: inline-block;
}
.pxl-icon-box__item-button a .sm-roll__a.sm-roll__a,
.pxl-icon-box__item-button a .sm-roll__b.sm-roll__b {
	display: block;
}
.pxl-icon-box__item-button a .sm-textwrap.sm-textwrap {
	flex: 1 1 auto;
	padding: 7px 0 7px 12px;
}

/* Arrow icon swap: the icon leaves to the right while its copy arrives from the left. */
.sm-icon {
	position: relative;
	display: inline-flex;
	overflow: hidden;
	overflow: clip;
	vertical-align: middle;
}
.sm-icon__a,
.sm-icon__b {
	display: inline-flex;
	align-items: center;
	transition: transform var(--sm-roll-dur, 0.4s) cubic-bezier(0.645, 0.045, 0.355, 1);
}
.sm-icon__b {
	position: absolute;
	inset: 0;
	transform: translateX(-130%);
}

@media (hover: hover) {
	.sm-host:hover .sm-roll__a,
	.sm-host:focus-visible .sm-roll__a { transform: translateY(-101%); }
	.sm-host:hover .sm-roll__b,
	.sm-host:focus-visible .sm-roll__b { transform: translateY(0); }
	.sm-host:hover .sm-icon__a,
	.sm-host:focus-visible .sm-icon__a { transform: translateX(130%); }
	.sm-host:hover .sm-icon__b,
	.sm-host:focus-visible .sm-icon__b { transform: translateX(0); }
}

/* The old per-widget arrow nudges would double up with the icon swap. */
body.sitto-motion .sitto-cmp .sitto-cmp__btn:hover svg,
body.sitto-motion .sitto-cmp .sitto-cmp__btn:focus-visible svg { transform: none; }
body.sitto-motion a.sitto-link-card--link:hover .sitto-link-card__arrow,
body.sitto-motion a.sitto-link-card--link:focus-visible .sitto-link-card__arrow { transform: none; }
body.sitto-motion .sitto-cta__btn:hover .sitto-cta__btn-icon,
body.sitto-motion .sitto-cta__btn:focus-visible .sitto-cta__btn-icon { transform: none; }

/* Menu roll: same height as the link so the nav pill measures the same width. */
#pxl-header-elementor .pxl-menu__primary > li > a > .pxl-menu__text > .sm-roll { display: block; }