/*
 * Homepage services, after the 2020 mockups (PSDs desktop/Home_desktop.psd, PSDs Mobile/Home v2-01.psd).
 * Markup: inc/shortcodes/templates/services-temp.php ("slider" layout). Behaviour: assets/js/home-services.js.
 * Shares the Services page's tab strip, illustrations and keyframes (services.css).
 *
 * Desktop: the sliding tab strip; each slide is the title, summary, Explore and a "‹ 01 | 06 ›" counter
 * beside the service's illustration, and the next service peeks in at the right edge.
 * Phones: the illustration on top, then the counter, title, summary and Explore (mobile mockup).
 * The slides are a native scroll-snap row, so swipe, trackpad and keyboard all move them; tabs and
 * arrows move them on the same "move" curve as the Services page. Deep Data turns the band dark.
 *
 * Classes set by home-services.js:
 *   .rt-hs.has-motion          entrances will play (not with reduced motion)
 *   .rt-hs.is-seen             the band has come into view (the first slide's copy enters)
 *   .rt-hs.is-dark             Deep Data is the current slide
 *   .rt-hs__slide.is-current   the slide at the left edge
 *   .rt-hs__slide.is-live      its illustration has been built (the first time it became current)
 *   .rt-hs__slide.is-past      a slide before the current one (hidden: it would show in the margin)
 */

.rt-hs {
	--rt-header: 87px;
	--tabs-h: 72px;
	--ink: #424242;
	--copy: #8d9092;
	--mist: #f4f8fa;
	--deep: #012e38;
	--t-exit: 180ms;
	--e-exit: cubic-bezier(0.4, 0, 1, 1);
	--t-move: 600ms;
	--e-move: cubic-bezier(0.65, 0, 0.35, 1);
	--t-enter: 550ms;
	--e-enter: cubic-bezier(0.22, 1, 0.36, 1);
	--stagger: 40ms;
	--e-back: cubic-bezier(0.34, 1.4, 0.64, 1);
	--rise: 16px;
	/* mockup (1812 wide): tabs start at 11%, slide copy at 16.5%, a slide is ~72% of the width */
	--gutter: clamp(24px, 11vw, 220px);
	--hs-left: calc(var(--gutter) + clamp(0px, 5.5vw, 110px));
	--hs-w: min(calc(100vw - var(--hs-left) - 12vw), 1320px);
	--hs-gap: clamp(32px, 5vw, 96px);
	position: relative;
	z-index: 2;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	color: var(--copy);
}

.rt-hs *,
.rt-hs *::before,
.rt-hs *::after {
	box-sizing: border-box;
}

/* full-bleed band: rooteam.css makes .container a scroll box on small screens; trim at the page */
.container:has(.rt-hs) {
	overflow: visible !important;
}

body:has(.rt-hs) {
	overflow-x: clip;
}

/* the WPBakery row around it: mockup spacing, and its dark Deep Data layer on the move curve */
.home-services:has(.rt-hs) {
	padding: clamp(70px, 8vw, 130px) 0 clamp(70px, 8vw, 120px) !important;
}

.home-services:has(.rt-hs) {
	position: relative;
	isolation: isolate;
}

.home-services:has(.rt-hs)::after {
	z-index: 0 !important;
	transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Deep Data: its particle wave fills the whole band (home-services.js moves it into the row) */
.home-services > .rt-deepwave {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.home-services.deep-data > .rt-deepwave {
	opacity: 1;
}

@media (max-width: 760px) {
	.home-services.deep-data > .rt-deepwave {
		opacity: 0.55;
	}
}

/* ---------- Tabs (the Services page strip, not pinned here) ---------- */

.rt-hs .rt-tabs {
	position: relative;
	top: auto;
	z-index: 2;
	margin-bottom: clamp(48px, 7vw, 120px);
	background: transparent !important;
}

.rt-hs .rt-tabs__track a {
	transition: color var(--t-move) var(--e-move);
}

.rt-hs.is-dark .rt-tabs__track a { color: #2f7586; }
.rt-hs.is-dark .rt-tabs__track a[aria-current],
.rt-hs.is-dark .rt-tabs__track a:hover { color: #47c7ef; }
.rt-hs.is-dark .rt-tabs__ink { background: #47c7ef; }

/* ---------- The row of slides ---------- */

.rt-hs__rail {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--hs-left);
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	outline: none;
}

.rt-hs__rail::-webkit-scrollbar {
	display: none;
}

/* while the page moves the row itself (tabs, arrows) snapping would fight the easing */
.rt-hs__rail.is-driving {
	scroll-snap-type: none;
}

.rt-hs__track {
	display: flex;
	gap: var(--hs-gap);
	width: max-content;
	/* room after the last slide so it can come to rest at the left edge too */
	padding: 4px max(0px, calc(100vw - var(--hs-left) - var(--hs-w))) 4px var(--hs-left);
}

.rt-hs .rt-hs__slide {
	flex: 0 0 var(--hs-w);
	display: grid;
	grid-template-columns: minmax(0, 430fr) minmax(0, 568fr);
	grid-template-areas:
		"text art"
		"count .";
	column-gap: clamp(40px, 9vw, 180px);
	row-gap: clamp(28px, 3.4vw, 64px);
	align-items: start;
	padding: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	transition: opacity var(--t-move) var(--e-move);
}

/* the next service peeks in, quieter; those already passed would show in the left margin */
.rt-hs .rt-hs__slide:not(.is-current) {
	opacity: 0.4;
	cursor: pointer;
}

.rt-hs .rt-hs__slide.is-past {
	opacity: 0;
}

.rt-hs .rt-hs__slide:not(.is-current) .rt-hs__count {
	visibility: hidden;
}

/* ---------- Copy ---------- */

.rt-hs__text {
	grid-area: text;
	padding-top: clamp(0px, 1.6vw, 28px);
	max-width: 430px;
}

.rt-hs .rt-hs__h {
	margin: 0 0 clamp(20px, 2.6vw, 44px) !important;
	color: var(--ink);
	font-family: 'Cirka-Bold', serif !important;
	font-weight: normal !important;
	font-size: clamp(28px, 2.5vw, 38px) !important;
	line-height: 1.1 !important;
	letter-spacing: -1px;
	transition: color var(--t-move) var(--e-move);
}

.rt-hs .rt-hs__copy {
	margin: 0 !important;
	color: var(--copy);
	font-size: 16px !important;
	line-height: 24px !important;
	transition: color var(--t-move) var(--e-move);
}

.rt-hs .rt-hs__cta {
	margin: clamp(28px, 4.4vw, 80px) 0 0 !important;
}

.rt-hs .rt-hs__explore {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 232px;
	max-width: 100%;
	padding: 17px 20px;
	background: transparent;
	font-size: 16px;
	line-height: 1.3;
}

.rt-hs .rt-hs__explore svg {
	flex: 0 0 auto;
	transition: transform 0.25s var(--e-enter);
}

.rt-hs .rt-hs__explore:hover,
.rt-hs .rt-hs__explore:focus-visible {
	background: #3fd87d;
	color: #ffffff;
}

.rt-hs .rt-hs__explore:hover svg,
.rt-hs .rt-hs__explore:focus-visible svg {
	transform: translateX(3px);
}

.rt-hs.is-dark .rt-hs__slide.is-dark .rt-hs__h { color: #ffffff; }
.rt-hs.is-dark .rt-hs__slide.is-dark .rt-hs__copy { color: #d2d4d6; }

/* the "‹ 01 | 06 ›" counter (mockup), under the copy */
.rt-hs__count {
	grid-area: count;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: -8px;
	color: #8d9092;
	font-family: 'graphik_regularregular', sans-serif;
	font-size: 15px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.rt-hs__sep {
	opacity: 0.6;
}

.rt-hs__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.rt-hs__step:hover:not(:disabled) {
	color: var(--ink);
	background: rgba(66, 66, 66, 0.06);
}

.rt-hs__step:disabled {
	opacity: 0.3;
	cursor: default;
}

.rt-hs.is-dark .rt-hs__count { color: #8fb3bd; }
.rt-hs.is-dark .rt-hs__step:hover:not(:disabled) { color: #ffffff; background: rgba(255, 255, 255, 0.08); }

/* ---------- Illustrations (the Services page's, sized for a slide) ---------- */

.rt-hs .rt-hs__art {
	grid-area: art;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* one height for every slide, so nothing below the drawing moves from service to service */
	height: clamp(300px, 27vw, 430px);
	margin: 0;
}

.rt-hs .rt-hs__art .rt-art {
	height: 100%;
}

.rt-hs .rt-hs__art .rt-svg {
	max-height: 100%;
}

.rt-hs .rt-art--browser .rt-svg { width: 100%; }
.rt-hs .rt-art--phone .rt-svg { width: auto; height: clamp(280px, 25vw, 390px); }
.rt-hs .rt-art--planes .rt-svg { width: 92%; }
.rt-hs .rt-art--clouds .rt-svg { width: 86%; }
.rt-hs .rt-art--bars { justify-content: center; }
.rt-hs .rt-art--bars .rt-svg { width: 100%; margin: 0; }
.rt-hs .rt-shape--pill { width: min(92%, 460px); height: clamp(170px, 15vw, 235px); }

/* Deep Data: its particle wave, bleeding off the band's edges */
.rt-hs__wave {
	position: absolute;
	inset: -14% -14vw -18% -6%;
	pointer-events: none;
}

.rt-hs__wave .rt-wave {
	-webkit-mask-image: radial-gradient(60% 70% at 45% 55%, #000 30%, transparent 78%);
	mask-image: radial-gradient(60% 70% at 45% 55%, #000 30%, transparent 78%);
}

/* ---------- Motion ---------- */

/* the first slide's copy enters when the band comes into view */
.rt-hs.has-motion:not(.is-seen) .rt-hs__r {
	opacity: 0;
}

.rt-hs.is-seen .rt-hs__slide.is-intro .rt-hs__r {
	animation: rt-enter var(--t-enter) var(--e-enter) calc(140ms + var(--k, 0) * 70ms) backwards;
}

/* a slide's illustration builds the first time that slide becomes current (it is already sliding in) */
.rt-hs.has-motion .rt-hs__slide:not(.is-live) .rt-hs__art {
	opacity: 0;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art {
	animation: rt-fade-in 0.35s ease backwards;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-grow {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--d, 0ms) * 0.8) backwards;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-spin {
	animation: rt-spin 0.7s var(--e-enter) calc(var(--d, 0ms) * 0.6) backwards;
}

/* then each keeps the quiet motion it has on the Services page */
.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-plane {
	animation: rt-in 0.8s var(--e-enter) calc(var(--d, 0ms) * 0.6) backwards, rt-cruise 3.4s ease-in-out calc(1.4s + var(--i, 0) * -0.9s) infinite alternate;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-pr-pill {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--d, 0ms) * 0.8) backwards, rt-flow 2.6s ease-in-out calc(1s + var(--i, 0) * -0.45s) infinite alternate;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-pr-rail,
.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-pr-dot {
	animation: rt-grow 0.65s var(--e-enter) calc(var(--d, 0ms) * 0.8) backwards;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art .rt-float {
	animation: rt-in 0.8s var(--e-enter) calc(var(--d, 0ms) * 0.6) backwards, rt-drift calc(3.2s + var(--i, 0) * 0.7s) ease-in-out calc(1.2s + var(--i, 0) * -1.1s) infinite alternate;
}

.rt-hs .rt-hs__slide.is-live .rt-hs__art [id$="green-circle"] {
	transform-box: fill-box;
	transform-origin: center;
	animation: rt-in 0.8s var(--e-back) calc(var(--d, 0ms) * 0.6) backwards, rt-pulse 2.4s ease-in-out 1.4s infinite;
}

/* one nudge the first time the slides come into view on a touch screen: there is more to swipe */
.rt-hs__rail.is-hinting .rt-hs__track {
	animation: rt-nudge 1.1s var(--e-move) 0.6s both;
}

/* ---------- Tablets ---------- */

@media (max-width: 999px) {
	.rt-hs {
		--gutter: 32px;
		--hs-left: 32px;
		--hs-w: calc(100vw - 64px - 9vw);
	}

	.rt-hs .rt-hs__slide {
		column-gap: 36px;
	}
}

/* ---------- Phones (mobile mockup: illustration, counter, title, copy, Explore) ---------- */

@media (max-width: 760px) {
	.rt-hs {
		--gutter: 24px;
		--hs-left: 24px;
		--hs-w: calc(100vw - 48px);
		--hs-gap: 24px;
		--tabs-h: 58px;
	}

	.rt-hs .rt-tabs__track {
		gap: 20px;
	}

	.rt-hs .rt-tabs__track a {
		font-size: 14px;
	}

	.rt-hs .rt-tabs {
		margin-bottom: 26px;
	}

	.rt-hs .rt-hs__slide {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"art"
			"count"
			"text";
		row-gap: 0;
	}

	.rt-hs .rt-hs__slide:not(.is-current) {
		opacity: 1;
	}

	.rt-hs .rt-hs__slide:not(.is-current) .rt-hs__count {
		visibility: visible;
	}

	.rt-hs .rt-hs__art {
		height: 240px;
		margin-bottom: 14px;
	}

	.rt-hs .rt-art--browser .rt-svg { width: 92%; }
	.rt-hs .rt-art--phone .rt-svg { height: 240px; }
	.rt-hs .rt-shape--pill { height: 150px; }

	.rt-hs__wave {
		inset: -10% -24px -10% -24px;
	}

	.rt-hs__count {
		margin: 0 0 28px -8px;
	}

	.rt-hs__text {
		padding-top: 0;
		max-width: none;
	}

	.rt-hs .rt-hs__h {
		margin-bottom: 20px !important;
		font-size: 30px !important;
	}

	.rt-hs .rt-hs__cta {
		margin-top: 32px !important;
	}
}

/* ---------- Reduced motion: no movement; everything in its final place ---------- */

@media (prefers-reduced-motion: reduce) {
	.rt-hs *,
	.rt-hs *::before,
	.rt-hs *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}