/*
 * Swiss Sport Physio — supplementary styles.
 *
 * theme.json owns tokens, colours, type, spacing and layout. This file only
 * covers what theme.json cannot express: hover/focus motion, the mobile-menu
 * clip-path wipe, and reveal animations. Keep design tokens OUT of here — read
 * them from the generated CSS vars (--wp--preset--*, --wp--custom--*).
 */

/* ---- Buttons: red lift + brightness + tinted shadow on hover ------------- */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: var(--wp--custom--shadow--button);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.wp-block-button__link {
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

/* ---- Links turn red (accent) on hover ------------------------------------ */
a:where(:not(.wp-block-button__link)):hover {
	color: var(--wp--preset--color--accent);
}

/* ---- Header: sticky, 66px --------------------------------------------- */
/* The template-part wrapper is only as tall as the header, which traps the
   sticky inside a 66px box (it scrolls away). display:contents removes the
   wrapper box so the header sticks against the page. */
.wp-block-template-part {
	display: contents;
}
.ssp-header {
	position: sticky;
	top: 0;
	z-index: 50;
}
.ssp-header__row {
	min-height: 66px;
}
.ssp-nav {
	gap: clamp(14px, 2vw, 26px);
}
.ssp-nav__link {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
.ssp-nav__link a,
.ssp-header .ssp-langswitch a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.ssp-nav__link a:hover {
	color: var(--wp--preset--color--accent);
}
.ssp-nav__link a.is-active {
	color: var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 3px;
}
.ssp-menu__link.is-active {
	color: var(--wp--preset--color--accent);
}
.ssp-header .ssp-langswitch {
	display: flex;
	gap: 8px;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
/* Light vertical divider between the menu links and the language switcher. */
.ssp-header__row .ssp-nav > nav {
	border-left: 1px solid var(--wp--preset--color--border-mid);
	padding-left: clamp(12px, 1.6vw, 22px);
	align-self: stretch;
	display: flex;
	align-items: center;
}
/* Header CTA: lock the height so font swap / wrapping can't change it between
   pages (the label must always stay on one line). */
.ssp-header .ssp-cta .wp-block-button__link {
	white-space: nowrap;
	line-height: 1.65;
}
.ssp-header .ssp-langswitch .current-lang a,
.ssp-header .ssp-langswitch a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---- Hero (logo + tagline + nav + photo grid, one screen) --------------- */
.ssp-hero {
	min-height: calc(100vh - 66px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* The section is also is-layout-constrained, which puts margin:auto on children.
   On flex items that overrides stretch and collapses them to content width — so
   pin the direct children to full width. */
.ssp-hero > * {
	width: 100%;
}
.ssp-hero__intro {
	align-items: center;
	text-align: center;
	gap: 26px;
}
.ssp-hero__logo img {
	width: min(620px, 82vw);
	height: auto;
}
.ssp-hero__tagline {
	font-size: clamp(13px, 1.5vw, 16px);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	opacity: 0.7;
	max-width: 680px;
	margin: 0;
}
.ssp-hero__nav {
	gap: 6px 0.5em;
	margin-top: 6px;
	justify-content: center;
}
/* Bullet separator between hero nav items. */
.ssp-hero__nav .ssp-herolink:not( :last-child )::after {
	content: "·";
	margin-left: 0.7em;
	color: var(--wp--preset--color--muted-2);
	font-weight: 700;
}
.ssp-hero .ssp-photorow {
	margin-top: clamp(36px, 6vh, 68px);
}
.ssp-herolink {
	margin: 0;
}
.ssp-herolink a {
	font-size: clamp(18px, 2.4vw, 26px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.ssp-herolink--accent a,
.ssp-herolink a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---- Photo row: outline CTA + hover ------------------------------------- */
.ssp-photo .wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
	transition: background 0.18s ease, color 0.18s ease;
}
.ssp-photo .wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
	transform: none;
	box-shadow: none;
	filter: none;
}

/* ---- About: kicker with flanking red rules ------------------------------ */
.ssp-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 4px;
}
.ssp-kicker::before,
.ssp-kicker::after {
	content: "";
	width: 30px;
	height: 3px;
	background: var(--wp--preset--color--accent);
}

/* ---- Footer: wordmark left, contact right, copyright bar ---------------- */
.ssp-footer__row {
	gap: 30px;
	align-items: flex-start;
}
.ssp-footer__contact {
	font-size: 14px;
	line-height: 1.7;
}
.ssp-footer__line {
	gap: 6px;
}
.ssp-footer__line p,
.ssp-footer__social p {
	margin: 0;
}
.ssp-footer__social {
	gap: 18px;
	margin-top: 10px;
}
.ssp-footer a {
	color: #fff;
	text-decoration: none;
}
.ssp-footer__book a {
	border-bottom: 1px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}
.ssp-footer a:hover {
	color: var(--wp--preset--color--accent);
}
.ssp-footer__fine {
	margin-top: 34px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--footer-rule);
	font-size: 12px;
	color: #777;
	letter-spacing: 0.04em;
}

/* ---- Single 820px breakpoint -------------------------------------------- */
@media (max-width: 820px) {
	.ssp-header__row .ssp-nav {
		display: none;
	}
	html .ssp-burger {
		display: inline-flex;
	}
	/* Stack the photo columns the way WP natively does below 782px: wrap each
	   column to full width. Do NOT use flex-direction:column — that leaves
	   flex-basis:0 on the columns and the aspect-ratio covers overlap. */
	.ssp-photorow.wp-block-columns {
		flex-wrap: wrap;
	}
	.ssp-photorow.wp-block-columns > .wp-block-column {
		flex-basis: 100%;
	}
	/* Footer: centered on mobile */
	.ssp-footer__row {
		justify-content: center;
		text-align: center;
	}
	.ssp-footer__contact {
		text-align: center;
	}
	.ssp-footer__line,
	.ssp-footer__social {
		justify-content: center;
	}
	.ssp-footer__fine {
		text-align: center;
	}
}

/* ========================================================================= *
 * Inner pages (Services, Team, Contact, Booking, legal)
 * ========================================================================= */

/* Section rhythm for a standard page section */
.ssp-section {
	padding-top: clamp(48px, 8vh, 96px);
	padding-bottom: 110px;
}
/* Left-align content: WP's constrained layout centers max-width-limited children
   (the H1 at 14ch, the lead paragraphs) with margin:auto !important — the comp
   aligns them left, so we must override with !important too. */
.ssp-section.is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Left-aligned page kicker: short red rule + red label */
.ssp-pagekicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.ssp-pagekicker::before {
	content: "";
	width: 34px;
	height: 3px;
	background: var(--wp--preset--color--accent);
	flex: none;
}
.ssp-pagekicker .ssp-kicker__label {
	margin: 0;
}

/* Lead paragraphs under an H1 */
.ssp-lead {
	max-width: 56ch;
}

/* Photo placeholders (hatched box + [ label ]) — swapped for real <img> later */
.ssp-ph {
	background-image: repeating-linear-gradient(135deg, #ededed 0 13px, #f7f7f7 13px 26px);
	border: 1px solid var(--wp--preset--color--border-mid);
	display: flex;
	align-items: flex-end;
	padding: 14px;
	overflow: hidden;
}
.ssp-ph--gray {
	filter: grayscale(1);
}
.ssp-ph__label {
	margin: 0;
	font-family: ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--label);
	text-transform: uppercase;
}

/* ---- Services: numbered rows + dark CTA --------------------------------- */
.ssp-services__list {
	margin-top: clamp(40px, 6vh, 72px);
}
.ssp-service {
	border-top: 1px solid var(--wp--preset--color--border-mid);
	align-items: center;
}
.ssp-service__no {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	margin: 0 0 6px;
}
.ssp-service__text {
	padding: 34px 40px 34px 0;
}
.ssp-service__desc {
	max-width: 46ch;
	color: var(--wp--preset--color--subtle);
}
.ssp-service .ssp-ph {
	aspect-ratio: 16 / 10;
	transition: border-color 0.25s ease, filter 0.25s ease;
}
.ssp-service .ssp-ph:hover {
	border-color: var(--wp--preset--color--accent);
	filter: brightness(0.97);
}
.ssp-ctablock {
	margin-top: clamp(48px, 7vh, 80px);
	padding: clamp(32px, 5vw, 56px);
}

/* ---- Team --------------------------------------------------------------- */
.ssp-teamgrid {
	margin-top: clamp(28px, 4vh, 44px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}
/* Reset WP flow-layout's margin-block-start on grid items (it pushes every card
   but the first down 24px, misaligning row 1). Grid gap handles spacing. */
.ssp-teamgrid > *,
.ssp-steps > * {
	margin-block-start: 0 !important;
}
.ssp-teamcard {
	transition: transform 0.28s ease;
}
.ssp-teamcard:hover {
	transform: translateY(-6px);
}
.ssp-teamcard .ssp-ph {
	aspect-ratio: 4 / 5;
	transition: border-color 0.28s ease;
}
.ssp-teamcard:hover .ssp-ph {
	border-color: var(--wp--preset--color--accent);
}
.ssp-teamcard__name {
	margin: 16px 0 0;
	font-size: 21px;
}
.ssp-teamcard__role {
	margin: 4px 0 0;
	color: var(--wp--preset--color--accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ssp-teamcard__focus {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--subtle);
}

/* ---- Contact: two-column + map card ------------------------------------- */
.ssp-contactgrid {
	margin-top: clamp(28px, 4vh, 44px);
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 40px;
	align-items: start;
}
.ssp-fieldlabel {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}
.ssp-addr p {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
}
.ssp-reach a {
	display: block;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
}
.ssp-reach a.ssp-reach__mail {
	color: var(--wp--preset--color--accent);
}
.ssp-hours__row {
	display: flex;
	justify-content: space-between;
	max-width: 300px;
	padding: 4px 0;
	border-bottom: 1px solid #eee;
}
.ssp-hours__row p {
	margin: 0;
	font-size: 16px;
}
.ssp-social {
	gap: 12px;
}
.ssp-social .wp-block-button__link {
	font-size: 14px;
}
/* Real OpenStreetMap embed (open source, no API key) + Google Maps CTA chip */
.ssp-mapembed {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid #e2e2e2;
	overflow: hidden;
}
.ssp-mapembed__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.ssp-mapembed__chip {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 2;
	background: #fff;
	padding: 9px 14px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ssp-mapembed__chip:hover {
	color: var(--wp--preset--color--accent);
}

.ssp-mapcard {
	position: relative;
	aspect-ratio: 4 / 3;
	display: block;
	background-image: repeating-linear-gradient(135deg, #e9e9e9 0 13px, #f4f4f4 13px 26px);
	border: 1px solid #e2e2e2;
	overflow: hidden;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.ssp-mapcard:hover {
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.13);
}
.ssp-mapcard__roadh {
	position: absolute;
	left: 0;
	top: 54%;
	width: 100%;
	height: 14px;
	background: #e2e2e2;
}
.ssp-mapcard__roadv {
	position: absolute;
	left: 38%;
	top: 0;
	width: 12px;
	height: 100%;
	background: #e2e2e2;
}
.ssp-mapcard__pin {
	position: absolute;
	left: 38%;
	top: 54%;
	width: 26px;
	height: 26px;
	background: var(--wp--preset--color--accent);
	border-radius: 50% 50% 50% 0;
	transform: translate(-50%, -100%) rotate(-45deg);
	border: 3px solid #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.ssp-mapcard__chip {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: #fff;
	padding: 9px 14px;
	border-radius: 2px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ---- Booking / Termin --------------------------------------------------- */
.ssp-steps {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border-mid);
	border: 1px solid var(--wp--preset--color--border-mid);
}
.ssp-step {
	background: #fff;
	padding: 22px 20px;
}
.ssp-step__no {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: 18px;
}
.ssp-step__title {
	margin: 8px 0 0;
}
.ssp-step__text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--subtle);
}
.ssp-medionline {
	margin-top: clamp(28px, 4vh, 40px);
	border: 1px dashed var(--wp--preset--color--input-border);
	background: #fafafa;
	padding: clamp(28px, 5vw, 48px);
	text-align: center;
}

/* ---- FAQ ---------------------------------------------------------------- */
.ssp-faq__item + .ssp-faq__item {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--border-mid);
}
.ssp-faq__q {
	line-height: 1.2;
}
.ssp-faq__a {
	max-width: 66ch;
}

/* ---- Legal pages -------------------------------------------------------- */
.ssp-legal :where(h2) {
	margin-top: 2em;
	font-size: 22px;
}
.ssp-legal :where(p, li) {
	color: var(--wp--preset--color--subtle);
	max-width: 70ch;
}

/* ---- Utilities ---------------------------------------------------------- */
.ssp-w14 {
	max-width: 14ch;
}

/* ---- Button style: outline on light (ink border) ------------------------ */
.wp-block-button.is-style-outline-ink > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--input-border);
	font-weight: 600;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
}
.wp-block-button.is-style-outline-ink > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	transform: translateY(-2px);
	box-shadow: none;
	filter: none;
}

/* ---- Contact reach: phone/email as plain (bound) text links ------------- */
.ssp-reach__links.wp-block-buttons {
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}
.ssp-reach__links .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	padding: 0;
	border-radius: 0;
	font-size: 18px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
}
.ssp-reach__links .ssp-reach__mail .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}
.ssp-reach__links .wp-block-button__link:hover {
	transform: none;
	box-shadow: none;
	filter: none;
	color: var(--wp--preset--color--accent);
}

/* ---- Inner-page responsive (single 820px breakpoint) -------------------- */
@media (max-width: 820px) {
	.ssp-service {
		display: flex;
		flex-direction: column;
	}
	.ssp-service__text {
		padding: 18px 0;
	}
	.ssp-teamgrid {
		grid-template-columns: 1fr;
	}
	.ssp-contactgrid {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================= *
 * Mobile menu (hamburger + full-screen overlay)
 * ========================================================================= */
.ssp-burger {
	display: none; /* shown ≤820 via the breakpoint rule above */
	flex-direction: column;
	justify-content: center;
	align-items: flex-end; /* bars flush to the content-wrapper right edge */
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 70;
}
.ssp-burger span {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--ink);
}

/* Close = the burger's twin inside the overlay: same 46px box + flush-right bars,
   morphing into a larger white X when the menu opens (no circle). Since it sits
   exactly where the burger is, the burger appears to morph into the X. */
.ssp-menu__close {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.ssp-menu__close span {
	display: block;
	width: 34px;
	height: 2px;
	background: #fff;
	transform-origin: center;
	transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
html.ssp-menu-open .ssp-menu__close span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
html.ssp-menu-open .ssp-menu__close span:nth-child(2) {
	opacity: 0;
}
html.ssp-menu-open .ssp-menu__close span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.ssp-menu {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 60;
	padding: 0 28px 40px;
	background: var(--wp--preset--color--ink);
	color: #fff;
	visibility: hidden;
	pointer-events: none;
	clip-path: circle(0 at calc(100% - 38px) 38px);
	-webkit-clip-path: circle(0 at calc(100% - 38px) 38px);
	transition: clip-path 0.55s cubic-bezier(0.45, 0, 0.1, 1), -webkit-clip-path 0.55s cubic-bezier(0.45, 0, 0.1, 1);
}
html.ssp-menu-open .ssp-menu {
	visibility: visible;
	pointer-events: auto;
	clip-path: circle(160% at calc(100% - 38px) 38px);
	-webkit-clip-path: circle(160% at calc(100% - 38px) 38px);
}
.ssp-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 66px;
}
.ssp-menu__nav {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
}
.ssp-menu__link {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 17px 0;
	border-bottom: 1px solid #222;
	color: #fff;
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	text-decoration: none;
}
.ssp-menu__link:hover {
	color: var(--wp--preset--color--accent);
}
.ssp-menu__no {
	min-width: 26px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #5c5c5c;
}
.ssp-menu__footer {
	margin-top: auto;
	padding-top: 24px;
}
.ssp-menu__cta {
	display: block;
	padding: 18px;
	margin-bottom: 18px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
}
.ssp-menu__lang {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ssp-menu__lang a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.ssp-menu__lang .current-lang a {
	color: var(--wp--preset--color--accent);
}
@media (min-width: 821px) {
	.ssp-menu {
		display: none;
	}
}

/* ========================================================================= *
 * Reveal animations + smooth page transitions
 * ========================================================================= */
/* Smooth cross-document navigation (progressive — Chrome et al.). */
@view-transition {
	navigation: auto;
}

/* Reveal targets — keep this list in sync with SEL in reveal.js. The transition
   lives on the base so both the reveal and later hover transforms are smooth; the
   hidden state only applies until .is-visible, so revealed elements keep their
   natural transform (hover lift etc. still work). Gated by .ssp-anim, which an
   inline <head> script adds before first paint (no flash) only when motion is OK. */
.ssp-anim :is(
		.ssp-pagekicker,
		.ssp-section > h1,
		.ssp-lead,
		.ssp-section > .ssp-ph,
		.ssp-service,
		.ssp-teamcard,
		.ssp-step,
		.ssp-photorow,
		.ssp-ctablock,
		.ssp-medionline,
		.ssp-contactgrid,
		.ssp-hero__logo,
		.ssp-hero__tagline,
		.ssp-hero__nav,
		.ssp-about > .ssp-kicker,
		.ssp-about > h2,
		.ssp-about > p
	) {
	transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ssp-anim :is(
		.ssp-pagekicker,
		.ssp-section > h1,
		.ssp-lead,
		.ssp-section > .ssp-ph,
		.ssp-service,
		.ssp-teamcard,
		.ssp-step,
		.ssp-photorow,
		.ssp-ctablock,
		.ssp-medionline,
		.ssp-contactgrid,
		.ssp-hero__logo,
		.ssp-hero__tagline,
		.ssp-hero__nav,
		.ssp-about > .ssp-kicker,
		.ssp-about > h2,
		.ssp-about > p
	):not( .is-visible ) {
	opacity: 0;
	transform: translateY(18px);
}
/* Kicker rule draws in from the left. */
.ssp-anim .ssp-pagekicker::before {
	transform-origin: left center;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s;
}
.ssp-anim .ssp-pagekicker:not( .is-visible )::before {
	transform: scaleX(0);
}

/* ---- Respect reduced-motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}