.tmpl-ai-page {
	&__banner {
		.banner-default__text-content--center {
			@include media-min($large) {
				grid-column: 2 / span 10 !important;
				padding-bottom: 80px;
				padding-top: 80px;
			}
		}
		.dashboard-widget {
			position: relative;
			margin-bottom: 60px;
			transition: all 0.3s ease;
		}

		.computation-flow {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
		}

		.data-desc {
			color: #8b96a2;
			font-weight: 300;
			font-size: 20px;
		}

		.data-block {
			background: #06111a;
			padding: 32px 10px;
			border-radius: 25px;
			text-align: center;
			position: relative;
			min-width: 140px;
			border: 1px solid rgba(255, 255, 255, 0.05);
			transition: all 0.3s ease;
			@include media-min($xlarge) {
				min-width: 200px;
			}
		}

		.data-block.active {
			border-color: currentColor;
			box-shadow: 0 0 30px -5px currentColor;
			transform: translateY(-2px);
		}

		.data-label {
			display: block;
			font-weight: 300;
			font-size: 20px;
			letter-spacing: 1.5px;
		}

		.data-value {
			display: block;
			text-shadow: 0 0 15px currentColor;
			white-space: nowrap;
			font-weight: 700;
			line-height: 1.1;
			font-size: 36px;
			@include media-min($xlarge) {
				font-size: 42px;
			}
		}

		.operator {
			font-weight: 700;
			font-size: 50px;
			line-height: 110.1px;
			color: #fff;
		}

		.tenant-block {
			color: #c76ff2;
		}
		.agent-block {
			color: #50dbd9;
		}
		.branch-block {
			color: #509dea;
		}
		.result-block {
			color: #f35048;
		}
		.result-block .data-value {
			font-size: 48px;
			min-width: 220px;
			@include media-min($xlarge) {
				font-size: 52px;
				min-width: 300px;
			}
		}

		@keyframes blink {
			0%,
			100% {
				opacity: 1;
			}
			50% {
				opacity: 0.4;
			}
		}

		.scrambling {
			opacity: 0.8;
		}

		@media (max-width: 900px) {
			.computation-flow {
				gap: 16px;
			}
			.operator {
				transform: rotate(90deg);
				margin: -10px 0;
			}
			.operator.equals {
				transform: rotate(0deg);
			}
		}
		p.desc {
			width: 100%;
			font-weight: 300;
			font-size: 22px;
			line-height: 28px;
			text-align: center;
			color: #a2adb9;
		}
	}
	.logo-wall {
		text-align: center;
		&-container {
			overflow: hidden;
			max-width: 1200px;
			height: 34px;
			margin-top: 24px;
			margin-left: auto;
			margin-right: auto;
		}
		.logo-track {
			width: max-content;
			display: flex;
			animation: logo-scroll 18s linear infinite;
			gap: 16px;
			@keyframes logo-scroll {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-50%);
				}
			}
		}
	}
	&__media-content {
		.block-inner {
			align-items: center;
			@include media-min($medium) {
				.block-columns__column:nth-of-type(2) {
					text-align: right;
				}
			}
		}
		&.reverse {
			@include media-min($medium) {
				.block-inner {
					display: flex;
					flex-direction: row-reverse;
				}
				.block-columns__column:nth-of-type(1) {
					flex: 1;
				}
				.block-columns__column:nth-of-type(2) {
					flex: 1;
					text-align: left;
				}
			}
		}
		svg {
			max-width: 100%;
		}
		h4 {
			margin-top: 40px;
		}
		ul {
			list-style: none;
		}
		li {
			color: #a2adb9;
			margin-left: 0 !important;
		}
		b,
		i {
			color: #fff;
		}
		i {
			margin-right: 2px;
		}
		.tag {
			font-weight: 700;
			font-size: 16px;
			line-height: 30px;
			color: #fff;
			background-color: #9e4ec4;
			width: max-content;
			margin-bottom: 16px;
			padding: 0 4px;
		}
		@keyframes draw-phase-1 {
			0%,
			5% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
			5% {
				opacity: 1;
			}
			35% {
				stroke-dashoffset: 0;
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
		}

		@keyframes draw-phase-2 {
			0%,
			15% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
			15% {
				opacity: 1;
			}
			50% {
				stroke-dashoffset: 0;
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
		}

		@keyframes draw-phase-3 {
			0%,
			30% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
			30% {
				opacity: 1;
			}
			75% {
				stroke-dashoffset: 0;
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
		}
		@keyframes draw-phase-4 {
			0%,
			45% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
			45% {
				opacity: 1;
			}
			80% {
				stroke-dashoffset: 0;
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				stroke-dashoffset: 1000;
				opacity: 0;
			}
		}

		@keyframes fade-phase-1 {
			0%,
			15% {
				opacity: 0;
			}
			20% {
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes fade-phase-2 {
			0%,
			20% {
				opacity: 0;
			}
			25% {
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes fade-phase-3 {
			0%,
			35% {
				opacity: 0;
			}
			40% {
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes fade-phase-4 {
			0%,
			50% {
				opacity: 0;
			}
			55% {
				opacity: 1;
			}
			85% {
				opacity: 1;
			}
			95% {
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}

		@keyframes draw-line {
			from {
				stroke-dashoffset: 1000;
				opacity: 1;
			}
			to {
				stroke-dashoffset: 0;
				opacity: 1;
			}
		}

		@keyframes fade-in {
			from {
				opacity: 0;
			}
			to {
				opacity: 1;
			}
		}

		.root-node {
			animation-delay: 0s;
			opacity: 0;
			animation: fade-in 0.8s ease-out forwards;
		}
		.main-horizontal-line {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			opacity: 0.5;
			animation-duration: 1.2s;
			animation-delay: 0.3s;
			animation: draw-line 1s ease-out forwards;
		}
		.connector-line {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation-duration: 6s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-out;
		}
		.content-box {
			opacity: 0;
			animation-duration: 6s;
			animation-iteration-count: infinite;
			animation-timing-function: ease-out;
		}

		#branch-1 .connector-line {
			animation-name: draw-phase-1;
		}
		#branch-1 .content-box {
			animation-name: fade-phase-1;
		}
		#branch-2 .connector-line {
			animation-name: draw-phase-2;
		}
		#branch-2 .content-box {
			animation-name: fade-phase-2;
		}

		#branch-3 .connector-line {
			animation-name: draw-phase-3;
		}
		#branch-3 .content-box {
			animation-name: fade-phase-3;
		}

		#branch-4 .connector-line {
			animation-name: draw-phase-4;
		}
		#branch-4 .content-box {
			animation-name: fade-phase-4;
		}
		@keyframes animateStrokeDash {
			to {
				stroke-dashoffset: 0;
			}
		}
		@keyframes animatePathFillOpacity {
			0%,
			75% {
				fill-opacity: 0;
				stroke-opacity: 0;
			}
			80%,
			100% {
				fill-opacity: 1;
				stroke-opacity: 1;
			}
		}

		@keyframes showOn10 {
			0%,
			3% {
				opacity: 0;
			}
			5%,
			100% {
				opacity: 1;
			}
		}

		@keyframes showOn25 {
			0%,
			30% {
				opacity: 0;
			}
			35%,
			100% {
				opacity: 1;
			}
		}

		@keyframes showOn70 {
			0%,
			50% {
				opacity: 0;
			}
			55%,
			100% {
				opacity: 1;
			}
		}
		.elastic-workload-1 {
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation: animateStrokeDash 5s linear infinite;
		}
		.elastic-workload-tip-1 {
			animation: showOn10 5s linear infinite;
		}
		.elastic-workload-tip-2 {
			animation: showOn25 5s linear infinite;
		}
		.elastic-workload-tip-3 {
			animation: showOn70 5s linear infinite;
		}
	}
	&__case {
		.block-icon-grid__item-container {
			gap: 48px;
		}
		@include media-min($medium) {
			.block-title.full {
				width: 80%;
			}
			.is-12 {
				--grid-num-cols: 1;
			}
			.block-icon-grid__item-container {
				gap: 60px 32px;
			}
		}
		@include media-min(1300px) {
			.block-title.full {
				width: 100%;
			}
			.is-12 {
				--grid-num-cols: 12;
			}
			.block-columns__column {
				&:first-child {
					grid-column: 1 / span 5 !important;
				}
				&:last-child {
					grid-column: span 7 !important;
				}
			}
			h5 {
				width: 80%;
			}
		}
		.tags {
			margin-bottom: 20px;
		}
	}
	&__interations {
		.title-mono {
			justify-content: center;
		}
		.interations-container {
			text-align: center;
		}
		.title-mono {
			display: flex;
			gap: 8px;
			margin-bottom: 32px;
			text-align: left;
			svg {
				width: 18px;
				height: 18px;
				--icon-play-arrow-color: #a2adb9;
				margin-top: 4px;
				min-width: 18px;
			}
		}
		.logos {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 32px;
			@include media-min(1200px) {
				width: 80%;
			}
			.logo {
				border: 1px solid #28333e;
				color: #fff;
				font-weight: 300;
				font-size: 15px;
				line-height: 21px;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				padding: 28px 16px;
				text-align: center;
				flex: 1;
				min-width: 160px;
				min-height: 160px;
				img {
					margin-bottom: 14px;
				}
				@include media-min($medium) {
					padding: 28px;
				}
				@include media-min($large) {
					width: 206px;
					height: 206px;
					flex: none;
				}
				&:hover {
					.hover-bg {
						opacity: 1;
					}
				}
			}
			.hover-bg {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #630d09;
				opacity: 0;
				transition: all 0.2s;
				cursor: pointer;
			}
		}
		.support {
			margin-top: 60px;
			display: flex;
			flex-direction: column;
			gap: 16px;
			@include media-min($large) {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				h2 {
					text-align: left;
					flex: 1;
				}
			}
			@include media-min(1200px) {
				width: 80%;
				margin-left: auto;
				margin-right: auto;
			}
			.logos {
				display: flex;
				gap: 16px;
				margin: 0;
				justify-content: space-around;
				@include media-min($large) {
					flex: 1;
					justify-content: space-between;
				}
			}
		}
	}

	&__compare {
		background-size: 100%;
		background-color: #3c174c;
		&-container {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			@include media-min($large) {
				flex-direction: row;
				width: 880px;
				margin: auto;
			}
			ul {
				list-style: none;
				margin-top: 24px;
				.icons {
					margin-right: 8px;
					color: #aa94be;
				}
				li {
					margin-left: 0;
					& + li {
						margin-top: 16px;
					}
				}
			}
			h4 {
				margin-bottom: 20px;
			}
			.cloud {
				display: flex;
				justify-content: flex-start;
				width: 100%;
				flex: 1;
				position: relative;
				padding-bottom: 40px;
				border-bottom: 1px solid rgb(170, 148, 190);
				@include media-min($large) {
					width: 50%;
					padding-right: 64px;
					padding-bottom: 0;
					width: 50%;
					border-bottom: none;
					border-right: 1px solid rgb(170, 148, 190);
				}
				.button {
					margin-top: 42px;
				}
			}
			.local {
				flex: 1;
				padding-top: 40px;
				width: 100%;
				@include media-min($large) {
					width: 50%;
					padding-top: 0;
					padding-left: 64px;
					display: flex;
					justify-content: flex-end;
				}
				p {
					color: #fff;
				}
			}
			.or {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				background-color: #fff;
				font-size: 14px;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: -20px;
				text-align: center;
				line-height: 40px;
				z-index: 1;
				font-weight: 500;
				@include media-min($large) {
					bottom: 0;
					top: 0;
					right: -20px;
					left: unset;
				}
			}
			p {
				color: #a2adb9;
			}
			pre {
				background-color: rgba(0, 0, 0, 0.3) !important;
				& > code[class*="language-"] {
					background: transparent !important;
					line-height: 2;
					color: rgb(185, 194, 202);
				}
				span {
					color: rgb(185, 194, 202) !important;
				}
			}
			.code-toolbar {
				margin-bottom: 24px;
			}
			.copy-to-clipboard-button {
				background: url(https://static.pingcap.com/files/2025/08/07020549/copy-white.svg)
					no-repeat center !important;
			}
			.command-line-prompt {
				display: block;
				float: left;
				font-size: 100%;
				letter-spacing: -1px;
				pointer-events: none;
				text-align: right;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			.command-line-prompt > span:before {
				opacity: 0.7;
				content: "$";
				display: block;
				padding-right: 0.8em;
			}
		}
	}
	&__testimonial {
		&-container {
			padding: 64px 40px;
			border: 1px solid #28333e;
			display: flex;
			flex-direction: column;
			gap: 32px;
			@include media-min($medium) {
				flex-direction: row;
				gap: 48px;
				justify-content: space-between;
			}
			.image-container {
				display: flex;
				gap: 16px;
				align-items: center;
				color: #a2adb9;
				font-size: 18px;
				img {
					border-radius: 50%;
					width: 67px;
					height: 67px;
				}
				.name {
					color: #fff;
				}
			}
			blockquote {
				flex: 1;
				max-width: 720px;
				p {
					color: #fff;
				}
				&.testimonial p::before {
					top: 4px;
					left: -24px;
				}
				&.testimonial p::after {
					position: absolute;
					right: 0;
					bottom: -8px;
				}
				&.testimonial p::before,
				&.testimonial p::after {
					color: #fff;
					font-size: 4rem;
				}
			}
		}
	}
}