/* Features page only (enqueued by inc/helpers/assets.php). Tokens live in @wp-rollback/site-chrome/tokens.css, loaded globally by global.css. *//*
 * Features page (components/pages/features/). The UI images are crops of the Pro UI kit
 * (packages/pro-plugin/bin/ui-kit) in assets/images/features/. Every loop here replays a
 * real moment of that UI: a note being typed, a WP-CLI run, package checks passing.
 */

.wpr-features {
	overflow-x: clip;
	background: var(--wpr-surface);
	color: var(--wpr-text);
}

/* inc/setup.php forces `font-family: var(--font-primary) !important` on headings, so
   switch the face through the variable, as the blog and support pages do. Balanced
   wrapping keeps a lone word off the last line. */
.wpr-features__display {
	--font-primary: var(--wpr-font-display);

	font-family: var(--font-primary);
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.wpr-features__mono {
	font-family: var(--wpr-font-mono);
}

.wpr-features__accent {
	background: var(--wpr-accent-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------------------------------------------------------------------------
 * Links. Kadence recolors links on hover, focus and active (a:hover, 0,1,1), so
 * link colors here start at .wpr-features a.class (0,2,1).
 * ------------------------------------------------------------------------ */

.wpr-features a:is(.wpr-features__tile, .wpr-features__row, .wpr-features__drow, .wpr-features__link) {
	text-decoration: none;
}

.wpr-features :is(.wpr-features__tile, .wpr-features__tab, .wpr-features__motion):focus-visible {
	outline: 2px solid var(--wpr-accent-text);
	outline-offset: 3px;
}

.wpr-features a.wpr-features__link {
	color: var(--wpr-accent-text);
}

.wpr-features a.wpr-features__link:hover {
	color: #fff;
}

.wpr-features__link svg,
.wpr-features__more svg,
.wpr-features__drow-go svg {
	transition: transform 0.2s ease;
}

.wpr-features__link:hover svg,
.wpr-features__row:hover .wpr-features__more svg,
.wpr-features__drow:hover .wpr-features__drow-go svg {
	transform: translateX(3px);
}

/* Kadence styles blockquote; the closing review is plain text. */
.wpr-features blockquote.wpr-features__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

/* ---------------------------------------------------------------------------
 * Hero: three UI cards dealt onto a slow aurora
 * ------------------------------------------------------------------------ */

/*
 * The aurora (FeaturesAurora) fades in over a still glow in the same colors, kept faint
 * and faded out toward the bottom so it sits behind the copy rather than competing.
 */
.wpr-features__aurora {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 45% at 25% 0%, rgb(58 41 255 / 22%), transparent 70%),
		radial-gradient(55% 45% at 75% 0%, rgb(255 148 180 / 14%), transparent 70%);
	opacity: 0.45;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
	mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}

.wpr-features__aurora canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.wpr-features__aurora canvas.is-drawn {
	opacity: 1;
}

.wpr-features__card {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 30px 60px -20px rgb(20 4 24 / 75%);
}

/* Dealt in once, then drifting on the card's outer box; the drift's length and start come inline. */
.wpr-features__deal {
	animation: wpr-features-deal 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.wpr-features__drift {
	animation: wpr-features-bob ease-in-out infinite;
}

.wpr-features__rise {
	animation: wpr-features-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------------------------------------------------------------------------
 * Feature tiles
 * ------------------------------------------------------------------------ */

/* Each tile names its area (FeatureBento's Tile). */
.wpr-features__bento {
	display: grid;
	grid-template-areas:
		"vault vault dash dash"
		"vault vault hist cli"
		"free rep rep safe"
		"free cmd multi safe";
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 240px;
	gap: 16px;
}

@media (max-width: 1023px) {

	.wpr-features__bento {
		grid-template-areas:
			"vault vault"
			"vault vault"
			"dash dash"
			"hist cli"
			"free safe"
			"free safe"
			"rep rep"
			"cmd multi";
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {

	.wpr-features__bento {
		grid-template-areas:
			"vault"
			"vault"
			"dash"
			"hist"
			"cli"
			"free"
			"free"
			"safe"
			"safe"
			"rep"
			"cmd"
			"multi";
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 228px;
	}
}

.wpr-features__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 22px;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.wpr-features__tile:hover {
	box-shadow: 0 28px 56px -28px rgb(0 0 0 / 85%);
	transform: translateY(-4px);
}

.wpr-features__marker {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wpr-features__marker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentcolor;
}

.wpr-features__tile-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--wpr-font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.wpr-features__go {
	flex: none;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wpr-features__tile:is(:hover, :focus-visible) .wpr-features__go {
	opacity: 1;
	transform: none;
}

/* Text beside a picture in the wide tiles; on phones the picture drops below it. */
.wpr-features__split-text {
	width: calc(46% - 48px);
}

.wpr-features__split-shot {
	top: 28px;
	left: 46%;
}

@media (max-width: 599px) {

	.wpr-features__split-text {
		right: 24px;
		width: auto;
	}

	.wpr-features__split-shot {
		top: 116px;
		left: 24px;
	}

	.wpr-features__split-text .wpr-features__tile-text {
		display: none;
	}
}

.wpr-features__pan {
	transform-origin: 0 0;
	transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wpr-features__tile:hover .wpr-features__pan {
	transform: scale(1.04);
}

.wpr-features__tilt {
	transform: rotate(-2.5deg);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wpr-features__tile:hover .wpr-features__tilt {
	transform: rotate(-1deg) scale(1.03);
}

.wpr-features__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid #3a3352;
	border-bottom-width: 4px;
	border-radius: 12px;
	background: #251e3d;
	color: var(--wpr-text);
	font-family: var(--wpr-font-mono);
}

.wpr-features__caret {
	display: inline-block;
	width: 2px;
	height: 16px;
	margin-left: 2px;
	vertical-align: -3px;
	background: var(--wpr-accent-text);
	animation: wpr-features-blink 1s steps(1) infinite;
}

/*
 * Masks over the UI crops. Each covers text in the image and shrinks away in steps,
 * so the note types itself out, the WP-CLI command and its steps run, and each package
 * check lights up. They sit in percentages of the image (UiCrop's children).
 */
.wpr-features__mask {
	position: absolute;
}

.wpr-features__type1,
.wpr-features__type2,
.wpr-features__cmd {
	transform-origin: right center;
}

.wpr-features__type1 {
	animation: wpr-features-type1 9s steps(32) infinite;
}

.wpr-features__type2 {
	animation: wpr-features-type2 9s steps(12) infinite;
}

.wpr-features__cmd {
	animation: wpr-features-cmd 9s steps(26) infinite;
}

.wpr-features__lines {
	transform-origin: center bottom;
	animation: wpr-features-lines 9s steps(8) infinite;
}

.wpr-features__check {
	background: rgb(255 255 255 / 78%);
	animation: 9s ease infinite;
}

.wpr-features__check:nth-child(2) { animation-name: wpr-features-check1; }

.wpr-features__check:nth-child(3) { animation-name: wpr-features-check2; }

.wpr-features__check:nth-child(4) { animation-name: wpr-features-check3; }

.wpr-features__check:nth-child(5) { animation-name: wpr-features-check4; }

/* ---------------------------------------------------------------------------
 * Free rollbacks: pick a version, the checks pass, done, on a loop
 * ------------------------------------------------------------------------ */

.wpr-features__frame {
	opacity: 0;
	animation: 13.5s ease infinite;
}

.wpr-features__frame--2 { animation-name: wpr-features-frame2; }

.wpr-features__frame--3 { animation-name: wpr-features-frame3; }

.wpr-features__fill {
	transform: scaleX(0);
	transform-origin: left center;
	animation: 13.5s linear infinite;
}

/* Steps dim rather than recolor, so the loop stays on the compositor. */
.wpr-features__step {
	opacity: 0.6;
	animation: 13.5s linear infinite;
}

.wpr-features__steps > :nth-child(1) .wpr-features__fill { animation-name: wpr-features-fill1; }

.wpr-features__steps > :nth-child(2) .wpr-features__fill { animation-name: wpr-features-fill2; }

.wpr-features__steps > :nth-child(3) .wpr-features__fill { animation-name: wpr-features-fill3; }

.wpr-features__steps > :nth-child(1) .wpr-features__step { animation-name: wpr-features-step1; }

.wpr-features__steps > :nth-child(2) .wpr-features__step { animation-name: wpr-features-step2; }

.wpr-features__steps > :nth-child(3) .wpr-features__step { animation-name: wpr-features-step3; }

.wpr-features a.wpr-features__row {
	border: 1px solid transparent;
	color: #111827;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wpr-features a.wpr-features__row:hover {
	border-color: #e5e7eb;
	background: #fff;
}

.wpr-features__more {
	color: var(--wpr-accent-deep);
	transition: color 0.2s ease;
}

.wpr-features__row:hover .wpr-features__more {
	color: var(--wpr-accent-deep-hover);
}

/* ---------------------------------------------------------------------------
 * Premium rollbacks
 * ------------------------------------------------------------------------ */

.wpr-features__float {
	animation: wpr-features-bob 7s ease-in-out infinite;
}

.wpr-features__float-tilt {
	transform: rotate(3deg);
	animation: wpr-features-float-tilt 9s ease-in-out infinite;
}

.wpr-features a.wpr-features__drow {
	color: var(--wpr-text);
	transition: background-color 0.2s ease;
}

.wpr-features a.wpr-features__drow:hover {
	background: rgb(255 255 255 / 4%);
}

.wpr-features__drow-go {
	color: var(--wpr-faint);
	transition: color 0.2s ease;
}

.wpr-features__drow:hover .wpr-features__drow-go {
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Pro tools tabs. Two classes beat Kadence's button rules.
 * ------------------------------------------------------------------------ */

.wpr-features__tabs .wpr-features__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	box-sizing: border-box;
	min-height: 64px;
	margin: 0;
	padding: 12px 16px;
	overflow: hidden;
	border: 1px solid var(--wpr-border);
	border-radius: 14px;
	background: rgb(255 255 255 / 2%);
	box-shadow: none;
	color: var(--wpr-dim);
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wpr-features__tabs .wpr-features__tab:not(.is-active):hover {
	border-color: var(--wpr-border-strong);
	background: rgb(255 255 255 / 4%);
	color: var(--wpr-dim);
}

.wpr-features__tabs .wpr-features__tab.is-active {
	border-color: rgb(139 92 246 / 70%);
	background: var(--wpr-accent-soft);
	color: #fff;
}

.wpr-features__tab-num {
	color: var(--wpr-faint);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 16px;
	letter-spacing: 0.04em;
}

.is-active .wpr-features__tab-num {
	color: var(--wpr-accent-text);
}

.wpr-features__tab-label {
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
}

.wpr-features__tab-bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--wpr-accent);
	transform-origin: left center;
	animation: wpr-features-grow linear both;
}

.wpr-features__shot {
	transition: opacity 0.6s ease;
}

.wpr-features__fade {
	animation: wpr-features-fade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------------------------------------------------------------------------
 * Pausing the page's motion (FeaturesPage's button) stops every loop on its finished
 * frame. The one-time entrances are left alone, so playing again doesn't replay them.
 * ------------------------------------------------------------------------ */

.wpr-features .wpr-features__motion {
	position: fixed;
	bottom: calc(20px + env(safe-area-inset-bottom));
	left: 20px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 50%;
	background: rgb(20 17 34 / 80%);
	box-shadow: 0 8px 24px -8px rgb(0 0 0 / 60%);
	color: var(--wpr-soft);
	cursor: pointer;
	backdrop-filter: blur(12px);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.wpr-features .wpr-features__motion:hover {
	border-color: rgb(255 255 255 / 30%);
	background: rgb(20 17 34 / 80%);
	color: #fff;
}

.wpr-features--still :not(.wpr-features__rise, .wpr-features__deal),
.wpr-features--still ::before,
.wpr-features--still ::after {
	animation: none !important;
}

.wpr-features--still .wpr-features__mask {
	display: none;
}

.wpr-features--still .wpr-features__steps > :nth-child(1) .wpr-features__fill {
	transform: none;
}

.wpr-features--still .wpr-features__steps > :nth-child(1) .wpr-features__step {
	opacity: 1;
}

/* Sections off screen hold their loops (FeaturesPage marks them). */
.wpr-features .is-offscreen *,
.wpr-features .is-offscreen ::before,
.wpr-features .is-offscreen ::after {
	animation-play-state: paused;
}

/*
 * Visitors who prefer less motion get no entrances or transitions either. The page is
 * also still for them (FeaturesPage), so each loop shows its finished frame.
 */
@media (prefers-reduced-motion: reduce) {

	.wpr-features *,
	.wpr-features *::before,
	.wpr-features *::after {
		animation: none !important;
		transition: none !important;
	}
}

@keyframes wpr-features-rise { from { opacity: 0; transform: translateY(18px); } }

@keyframes wpr-features-fade { from { opacity: 0; transform: translateY(8px); } }

@keyframes wpr-features-deal { from { opacity: 0; transform: translateY(48px) scale(0.94); } }

@keyframes wpr-features-bob { 50% { transform: translateY(-10px); } }

@keyframes wpr-features-float-tilt { 50% { transform: rotate(3deg) translateY(-12px); } }

@keyframes wpr-features-grow { from { transform: scaleX(0); } }

@keyframes wpr-features-blink { 50% { opacity: 0; } }

@keyframes wpr-features-type1 { 0%, 8% { transform: scaleX(1); }

 38%, 92% { transform: scaleX(0); }

 100% { transform: scaleX(1); } }

@keyframes wpr-features-type2 { 0%, 40% { transform: scaleX(1); }

 52%, 92% { transform: scaleX(0); }

 100% { transform: scaleX(1); } }

@keyframes wpr-features-cmd { 0%, 4% { transform: scaleX(1); }

 22%, 92% { transform: scaleX(0); }

 100% { transform: scaleX(1); } }

@keyframes wpr-features-lines { 0%, 26% { transform: scaleY(1); }

 58%, 92% { transform: scaleY(0); }

 100% { transform: scaleY(1); } }

@keyframes wpr-features-check1 { 0%, 10% { opacity: 1; }

 16%, 90% { opacity: 0; }

 96%, 100% { opacity: 1; } }

@keyframes wpr-features-check2 { 0%, 22% { opacity: 1; }

 28%, 90% { opacity: 0; }

 96%, 100% { opacity: 1; } }

@keyframes wpr-features-check3 { 0%, 34% { opacity: 1; }

 40%, 90% { opacity: 0; }

 96%, 100% { opacity: 1; } }

@keyframes wpr-features-check4 { 0%, 46% { opacity: 1; }

 52%, 90% { opacity: 0; }

 96%, 100% { opacity: 1; } }

@keyframes wpr-features-frame2 { 0%, 30% { opacity: 0; transform: scale(1.03); }

 34%, 70% { opacity: 1; transform: none; }

 74%, 100% { opacity: 0; } }

@keyframes wpr-features-frame3 { 0%, 64% { opacity: 0; transform: scale(1.03); }

 68%, 96% { opacity: 1; transform: none; }

 100% { opacity: 0; } }

@keyframes wpr-features-fill1 { 0% { transform: scaleX(0); }

 32%, 97% { transform: none; opacity: 1; }

 100% { transform: none; opacity: 0; } }

@keyframes wpr-features-fill2 { 0%, 33% { transform: scaleX(0); }

 65%, 97% { transform: none; opacity: 1; }

 100% { transform: none; opacity: 0; } }

@keyframes wpr-features-fill3 { 0%, 66% { transform: scaleX(0); }

 96%, 97% { transform: none; opacity: 1; }

 100% { transform: none; opacity: 0; } }

@keyframes wpr-features-step1 { 0%, 32% { opacity: 1; }

 34%, 100% { opacity: 0.6; } }

@keyframes wpr-features-step2 { 0%, 32% { opacity: 0.6; }

 34%, 65% { opacity: 1; }

 67%, 100% { opacity: 0.6; } }

@keyframes wpr-features-step3 { 0%, 65% { opacity: 0.6; }

 67%, 98% { opacity: 1; }

 100% { opacity: 0.6; } }

/*
 * The closing call to action on grain (components/common/ClosingCta.jsx), shared by the
 * homepage and the features page.
 */

.wpr-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 32px;
	border-radius: 6px;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Kadence recolors links on hover, focus and active (a:hover, 0,1,1). */
.wpr-cta a.wpr-cta__btn--white,
.wpr-cta a.wpr-cta__btn--white:is(:hover, :focus, :active, :visited) {
	background: #fff;
	color: #2b1a73;
}

.wpr-cta a.wpr-cta__btn--white:hover {
	background: #ede9fe;
}

.wpr-cta a.wpr-cta__btn--glass,
.wpr-cta a.wpr-cta__btn--glass:is(:hover, :focus, :active, :visited) {
	border: 1px solid rgb(255 255 255 / 35%);
	background: rgb(255 255 255 / 6%);
	color: #fff;
}

.wpr-cta a.wpr-cta__btn--glass:hover {
	border-color: #fff;
}

.wpr-cta a.wpr-cta__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}