/*
 * Shpper motion layer. Everything is scoped to html.sm-on, which assets/js/shpper-motion.js adds
 * only when motion is allowed (not with "reduce motion", not inside the Elementor editor), so
 * without it the site renders exactly as built. The inner-page intro is scoped to html.sm-intro,
 * which a head script adds before anything paints. Carries its own dark-theme values: keep this
 * file out of the dark-mode generator's input.
 */
.sm-on,
.sm-intro {
	--sm-ease: cubic-bezier(.2, .8, .2, 1);
	--sm-spring: cubic-bezier(.3, 1.45, .55, 1);
	--sm-rise: 34px;
}

/* ---- inner-page intro -------------------------------------------------- */
/* What is on screen when an inner page opens plays in from the first frame, in reading order: by
   position in its container, then by the container's position. The script hands everything below
   the fold to the scroll reveals (sm-intro-off) and switches finished entrances off. */
.sm-intro [data-elementor-type="wp-page"] .elementor-widget:not(.elementor-widget .elementor-widget):not(.sm-intro-off):not(.elementor-widget-n-accordion):not(.elementor-widget-shpper-stats):not(.elementor-widget-shpper_card_slider):not(.elementor-widget-shpper-staggered-images),
.sm-intro [data-elementor-type="wp-page"] .e-n-accordion-item:not(.sm-intro-off) {
	animation: var(--sm-in, sm-rise) var(--sm-in-dur, .85s) var(--sm-in-ease, var(--sm-ease)) backwards;
	animation-delay: calc(var(--sm-ib, 120ms) + var(--sm-ia, 0) * 80ms + var(--sm-ic, 0) * 110ms);
}
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-heading { --sm-in: sm-rise-soft; --sm-in-dur: .95s; --sm-ib: 0ms; }
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-image,
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-google_maps,
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-video { --sm-in: sm-media; --sm-in-dur: 1.1s; --sm-ib: 120ms; }
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-icon-box,
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-image-box { --sm-in: sm-pop; --sm-in-dur: .8s; --sm-in-ease: var(--sm-spring); --sm-ib: 200ms; }
.sm-intro [data-elementor-type="wp-page"] .elementor-widget-button { --sm-ib: 260ms; }
.sm-intro [data-elementor-type="wp-page"] .e-n-accordion-item { --sm-in: sm-rise; --sm-in-dur: .75s; --sm-ib: 160ms; --sm-ia: 0; --sm-ic: 0; }

.sm-intro :is(.e-con, .e-con-inner) > .elementor-widget:nth-child(2) { --sm-ia: 1; }
.sm-intro :is(.e-con, .e-con-inner) > .elementor-widget:nth-child(3) { --sm-ia: 2; }
.sm-intro :is(.e-con, .e-con-inner) > .elementor-widget:nth-child(4) { --sm-ia: 3; }
.sm-intro :is(.e-con, .e-con-inner) > .elementor-widget:nth-child(5) { --sm-ia: 4; }
.sm-intro :is(.e-con, .e-con-inner) > .elementor-widget:nth-child(n+6) { --sm-ia: 5; }
.sm-intro .e-con:nth-child(2) { --sm-ic: 1; }
.sm-intro .e-con:nth-child(3) { --sm-ic: 2; }
.sm-intro .e-con:nth-child(n+4) { --sm-ic: 3; }
.sm-intro .e-n-accordion-item:nth-child(2) { --sm-ia: 1; }
.sm-intro .e-n-accordion-item:nth-child(3) { --sm-ia: 2; }
.sm-intro .e-n-accordion-item:nth-child(4) { --sm-ia: 3; }
.sm-intro .e-n-accordion-item:nth-child(5) { --sm-ia: 4; }
.sm-intro .e-n-accordion-item:nth-child(6) { --sm-ia: 5; }
.sm-intro .e-n-accordion-item:nth-child(n+7) { --sm-ia: 6; }

/* ---- scroll reveals ---------------------------------------------------- */
.sm-on .sm-reveal { opacity: 0; }
.sm-on .sm-reveal.sm-in {
	opacity: 1;
	animation: sm-rise .85s var(--sm-ease) backwards;
	animation-delay: var(--sm-d, 0ms);
}
.sm-on .sm-reveal--title.sm-in { animation-name: sm-rise-soft; animation-duration: .95s; }
.sm-on .sm-reveal--pop.sm-in { animation-name: sm-pop; animation-duration: .8s; animation-timing-function: var(--sm-spring); }
.sm-on .sm-reveal--card.sm-in { --sm-rise: 56px; animation-duration: 1s; }
.sm-on .sm-reveal--fade.sm-in { animation-name: sm-fade; }
.sm-on .sm-reveal--media.sm-in { animation-name: sm-media; animation-duration: 1.1s; }
.sm-on .sm-reveal--row.sm-in { --sm-rise: 18px; animation-duration: .7s; }

/* Photo panels open like a curtain instead of fading. */
.sm-on .sm-reveal--wipe { opacity: 1; clip-path: inset(0 100% 0 0); }
.sm-on[dir="rtl"] .sm-reveal--wipe { clip-path: inset(0 0 0 100%); }
.sm-on .sm-reveal--wipe.sm-in {
	clip-path: inset(0);
	animation: sm-wipe 1.2s var(--sm-ease) backwards;
	animation-delay: var(--sm-d, 0ms);
}
.sm-on[dir="rtl"] .sm-reveal--wipe.sm-in { animation-name: sm-wipe-rtl; }

/* Lazy images inside a revealed block fade in once they arrive instead of popping. */
.sm-on .sm-img { opacity: 0; transition: opacity .7s var(--sm-ease); }
.sm-on .sm-img.sm-img-in { opacity: 1; }

/* ---- cards ------------------------------------------------------------- */
.sm-on .sm-lift { transition: transform .6s var(--sm-ease), box-shadow .6s var(--sm-ease); }
/* Card images keep their own Elementor hover zoom; this clips it to the image corners and smooths it. */
.sm-on .sm-zoom { overflow: hidden; }
.sm-on .sm-zoom img { transition: transform 1s var(--sm-ease); }

/* ---- buttons ----------------------------------------------------------- */
.sm-on .sm-btn {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: transform .45s var(--sm-spring), box-shadow .45s var(--sm-ease), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sm-on .sm-btn--light::after,
.sm-on .sm-btn--dark::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 45%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
	transform: translateX(-120%) skewX(-20deg);
}
.sm-on .sm-btn--light::after { background: linear-gradient(100deg, transparent, rgba(30, 136, 229, .2), transparent); }

/* ---- rewards medals ---------------------------------------------------- */
.sm-on .sm-medal {
	position: relative;
	display: inline-flex;
	line-height: 0;
	overflow: hidden;
	border-radius: 50%;
	transition: transform .7s var(--sm-spring);
}
.sm-on .sm-medal::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .85) 48%, transparent 64%);
	transform: translateX(-130%);
}
.sm-on .sm-medal.sm-shine::after { animation: sm-shine 1.3s var(--sm-ease); }

/* ---- FAQ accordions ---------------------------------------------------- */
/* Elementor animates the height; this eases the answer in and turns the icon as it swaps. */
.sm-on .e-n-accordion-item-title-text { transition: transform .45s var(--sm-ease), color .3s ease; }
.sm-on .e-n-accordion-item-title-icon svg { transition: transform .5s var(--sm-spring); }
.sm-on .e-n-accordion-item.sm-acc-open > :not(summary) { animation: sm-acc-in .6s var(--sm-ease) .06s backwards; }
.sm-on .e-n-accordion-item.sm-acc-turn .e-n-accordion-item-title-icon svg { animation: sm-acc-icon .55s var(--sm-spring); }

/* ---- footer and forms -------------------------------------------------- */
.sm-on [data-elementor-type="footer"] .elementor-heading-title a {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	transition: background-size .45s var(--sm-ease), color .3s ease;
}
.sm-on[dir="rtl"] [data-elementor-type="footer"] .elementor-heading-title a { background-position: 100% 100%; }
.sm-on .elementor-social-icon:not([class*="elementor-animation-"]) {
	transition: transform .45s var(--sm-spring), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sm-on [data-elementor-type="footer"] .elementor-widget-image a img { transition: transform .45s var(--sm-spring), opacity .3s ease; }
.sm-on .elementor-field-textual { transition: border-color .3s ease, background-color .3s ease, box-shadow .4s var(--sm-ease); }
.sm-on .elementor-field-textual:focus { box-shadow: 0 0 0 4px rgba(243, 218, 20, .32); }

/* ---- hover (mouse and trackpad only) ---------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.sm-on .sm-lift:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 28px 56px -30px rgba(16, 38, 58, .42); }
	.sm-on[data-theme="dark"] .sm-lift:hover { box-shadow: 0 28px 56px -26px rgba(0, 0, 0, .75); }

	.sm-on .sm-btn:hover { transform: translate3d(0, -2px, 0); }
	.sm-on .sm-btn--light:hover,
	.sm-on .sm-btn--dark:hover { box-shadow: 0 14px 26px -14px rgba(16, 38, 58, .5); }
	.sm-on .sm-btn:hover::after { transform: translateX(330%) skewX(-20deg); transition: transform .9s var(--sm-ease); }

	.sm-on .elementor-widget-icon-box:hover .sm-medal { transform: rotate(-8deg) scale(1.06); }
	.sm-on .elementor-widget-icon-box:hover .sm-medal::after { animation: sm-shine 1.1s var(--sm-ease); }
	.sm-on .elementor-widget-icon-box:hover .elementor-icon:not(.sm-medal) svg { animation: sm-nudge .8s var(--sm-ease); }

	.sm-marquee__item img:hover { transform: scale(1.08); }

	.sm-on .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { transform: translate3d(6px, 0, 0); }
	.sm-on[dir="rtl"] .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { transform: translate3d(-6px, 0, 0); }
	.sm-on .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg { transform: scale(1.12); }

	.sm-on [data-elementor-type="footer"] .elementor-heading-title a:hover { background-size: 100% 1px; }
	.sm-on .elementor-social-icon:not([class*="elementor-animation-"]):hover { transform: translate3d(0, -3px, 0) scale(1.08); }
	.sm-on [data-elementor-type="footer"] .elementor-widget-image a:hover img { transform: translate3d(0, -3px, 0); }
}
.sm-on .sm-btn:active { transform: scale(.97); transition-duration: .12s; }

/* ---- press-logo strip (replaces the As Seen On carousel) -------------- */
.sm-on .sm-marquee-source { display: none !important; }
.sm-marquee {
	--sm-gap: 64px;
	position: relative;
	overflow: hidden;
	direction: ltr;
	padding: 6px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sm-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: sm-marquee var(--sm-dur, 40s) linear infinite;
}
.sm-marquee:hover .sm-marquee__track,
.sm-marquee.is-paused .sm-marquee__track { animation-play-state: paused; }
.sm-marquee__item { flex: none; padding-inline-end: var(--sm-gap); }
.sm-marquee__item img {
	display: block;
	max-width: none;
	object-fit: contain;
	transition: transform .4s var(--sm-spring);
}

/* ---- phones: shorter distances, no blur -------------------------------- */
@media (max-width: 767px) {
	.sm-on,
	.sm-intro { --sm-rise: 22px; }
	.sm-on .sm-reveal.sm-in { animation-duration: .7s; }
	.sm-on .sm-reveal--title.sm-in { animation-name: sm-rise; }
	.sm-on .sm-reveal--card.sm-in { --sm-rise: 32px; }
	.sm-intro [data-elementor-type="wp-page"] .elementor-widget-heading { --sm-in: sm-rise; --sm-in-dur: .75s; }
	.sm-marquee { --sm-gap: 36px; }
}

@keyframes sm-rise { from { opacity: 0; transform: translate3d(0, var(--sm-rise), 0); } to { opacity: 1; transform: none; } }
@keyframes sm-rise-soft { from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sm-pop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-media { from { opacity: 0; transform: translate3d(0, var(--sm-rise), 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes sm-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes sm-shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes sm-marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes sm-acc-in { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }
@keyframes sm-acc-icon { from { transform: rotate(-90deg) scale(.7); } to { transform: none; } }
@keyframes sm-nudge { 30% { transform: translate3d(0, -4px, 0) rotate(-10deg); } 60% { transform: rotate(6deg); } }