/* =========================================================
   Cypher+ motion
   Hover effects apply only on devices with a mouse or trackpad.
   Animated states only apply once motion.js has prepared an element
   (.is-split, .is-ready), so pages stay readable without JavaScript.
   Hovers use black and grey, per the README colour rule.
   Everything is switched off for "reduce motion" users at the end.
   ========================================================= */

/* ---------------------------------------------------------------- Links and buttons */
.cp-nav .cp-menu a,
.cp-footer .is-style-cp-plain a,
.cp-footer__legal a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size .35s var(--cp-ease), color .2s;
}
.cp-nav .cp-menu a:focus-visible,
.cp-footer .is-style-cp-plain a:focus-visible { background-size: 100% 1px; }

.wp-block-button__link { transition: transform .15s var(--cp-ease), background-color .2s, color .2s; }
.wp-block-button__link:active { transform: scale(.97); }
.wp-block-button.is-style-cp-arrow-link .wp-block-button__link::after { transition: transform .3s var(--cp-ease); }
.wp-block-button.is-style-cp-arrow-link .wp-block-button__link:focus-visible::after { transform: translateX(5px); }
.cp-logo mark { transition: transform .5s var(--cp-ease); }

@media (hover: hover) {
	.cp-nav .cp-menu a:hover,
	.cp-footer .is-style-cp-plain a:hover,
	.cp-footer__legal a:hover { background-size: 100% 1px; }
	.wp-block-button.is-style-cp-arrow-link .wp-block-button__link:hover { color: var(--cp-muted); }
	.cp-dark .wp-block-button.is-style-cp-arrow-link .wp-block-button__link:hover { color: var(--cp-faint); }
	.wp-block-button.is-style-cp-arrow-link .wp-block-button__link:hover::after { transform: translateX(5px); }
	.cp-logo a:hover mark { transform: rotate(90deg); }
}

/* ---------------------------------------------------------------- Reveal words */
.cp-w { display: inline-block; }
.is-style-cp-reveal-words.is-split:not(.is-in) .cp-w { opacity: 0; transform: translateY(.35em); }
.is-style-cp-reveal-words.is-split .cp-w {
	transition: opacity .7s var(--cp-ease), transform .7s var(--cp-ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* ---------------------------------------------------------------- Marquee strip */
.cp-marquee { overflow: hidden; }
.cp-marquee__track {
	display: flex;
	width: max-content;
	animation: cp-marquee var(--cp-marquee-duration, 38s) linear infinite;
}
.cp-marquee:hover .cp-marquee__track,
.cp-marquee:focus-within .cp-marquee__track { animation-play-state: paused; }
.cp-strip .cp-marquee ul { flex-wrap: nowrap; max-width: none; margin: 0; padding: 32px 28px 32px 0; white-space: nowrap; justify-content: flex-start; }
.cp-strip .cp-marquee li:first-child::before { display: inline-block; }
.cp-strip li { transition: color .2s; }
@media (hover: hover) {
	.cp-strip li:hover { color: var(--cp-muted); }
}
@keyframes cp-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- Rows with hover */
.is-style-cp-rows > .cp-row::before {
	content: "";
	position: absolute;
	inset: 0 -16px;
	z-index: -1;
	border-radius: 12px;
	background: var(--cp-white);
	opacity: 0;
	transform: scaleX(.96);
	transition: opacity .3s var(--cp-ease), transform .4s var(--cp-ease);
}
.cp-industries .is-style-cp-rows > .cp-row::before { background: var(--cp-panel); }
.cp-row__num { transition: color .25s; }
/* Padding instead of transform, so the title never becomes the containing block of the stretched link */
.cp-row__title { transition: padding-inline-start .4s var(--cp-ease); }
.is-style-cp-rows > .cp-row:has(a)::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background: var(--cp-black);
	-webkit-mask: var(--cp-arrow) center / contain no-repeat;
	mask: var(--cp-arrow) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .3s, transform .4s var(--cp-ease);
}
@media (hover: hover) {
	.is-style-cp-rows > .cp-row:hover::before { opacity: 1; transform: none; }
	.is-style-cp-rows > .cp-row:hover .cp-row__num { color: var(--cp-black); }
	.is-style-cp-rows > .cp-row:hover .cp-row__title { padding-inline-start: 8px; }
	.is-style-cp-rows > .cp-row:hover::after { opacity: 1; transform: none; }
}
.is-style-cp-rows > .cp-row:focus-within::before { opacity: 1; transform: none; }
.is-style-cp-rows > .cp-row:focus-within::after { opacity: 1; transform: none; }
.cp-row__title a:focus-visible { outline: none; }
.cp-row:has(a:focus-visible) { outline: 2px solid var(--cp-black); outline-offset: 4px; border-radius: 8px; }

/* ---------------------------------------------------------------- Steps with scroll progress
   At rest it looks exactly like the design (black top lines, black numbers).
   Once motion.js is ready, each top line draws in and the number darkens as you reach it. */
.is-style-cp-steps.is-ready > .cp-step { border-top-color: var(--cp-line); }
.is-style-cp-steps.is-ready > .cp-step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--cp-black);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .9s var(--cp-ease);
}
.is-style-cp-steps.is-ready > .cp-step.is-on::before { transform: none; }
.is-style-cp-steps .cp-step__num,
.is-style-cp-steps .cp-step__title,
.is-style-cp-steps .cp-step__text { transition: opacity .6s var(--cp-ease), color .6s; }
.is-style-cp-steps.is-ready > .cp-step:not(.is-on) .cp-step__num { color: var(--cp-line-strong); }
.is-style-cp-steps.is-ready > .cp-step:not(.is-on) .cp-step__title,
.is-style-cp-steps.is-ready > .cp-step:not(.is-on) .cp-step__text { opacity: .4; }

/* ---------------------------------------------------------------- FAQ: smooth open where the browser supports it */
@supports (interpolate-size: allow-keywords) {
	.cp-faq { interpolate-size: allow-keywords; }
	.cp-faq details::details-content { height: 0; overflow: clip; transition: height .4s var(--cp-ease), content-visibility .4s allow-discrete; }
	.cp-faq details[open]::details-content { height: auto; }
}

/* ---------------------------------------------------------------- Workflow sequence */
.is-style-cp-sequence > .cp-chip { transition: opacity .5s var(--cp-ease), border-color .5s, background-color .5s, color .5s; }
.is-style-cp-sequence.is-ready > .cp-chip:not(.is-on) { opacity: .35; }
.is-style-cp-sequence.is-ready > .cp-chip.is-final:not(.is-on) { background: transparent; color: var(--cp-white); border-color: var(--cp-dark-line); }
.is-style-cp-sequence.is-ready > .cp-chip.is-final:not(.is-on) .cp-chip__step { color: var(--cp-faint); }
.is-style-cp-sequence > .cp-chip.is-on:not(.is-final) { border-color: #737373; }

/* ---------------------------------------------------------------- Smooth anchor scrolling */
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------- Reduce motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0ms !important;
	}
	.cp-marquee__track { animation: none; }
}

/* ---------------------------------------------------------------- Solutions */
.cp-teams > .cp-team::before {
	content: "";
	position: absolute;
	inset: 0 -16px;
	z-index: -1;
	border-radius: 12px;
	background: var(--cp-panel);
	opacity: 0;
	transform: scaleX(.97);
	transition: opacity .3s var(--cp-ease), transform .4s var(--cp-ease);
}
@media (hover: hover) {
	.cp-teams > .cp-team:hover::before { opacity: 1; transform: none; }
}
/* Starter workflow steps light up in order; the last one turns black */
.is-style-cp-sequence > .cp-wfstep { transition: opacity .5s var(--cp-ease), transform .5s var(--cp-ease), background-color .5s, color .5s; }
.is-style-cp-sequence.is-ready > .cp-wfstep:not(.is-on) { opacity: .4; transform: translateY(6px); }
.is-style-cp-sequence.is-ready > .cp-wfstep.is-final:not(.is-on) { background: var(--cp-white); color: var(--cp-black); }
.is-style-cp-sequence.is-ready > .cp-wfstep.is-final:not(.is-on) .cp-wfstep__num { color: var(--cp-muted); }