/* Rotating reviews (hero) */
.reviews {
	margin-top: var(--sp-3);
	max-width: 28rem;
}

.reviews__stage {
	display: grid;
}

.review {
	grid-area: 1 / 1;
	margin: 0;
	padding: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	background: rgba(17, 17, 17, 0.6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
}

.review.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.review__text {
	margin: 0 0 var(--sp-2);
	color: var(--text);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.review__by {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem var(--sp-2);
	font-size: 0.75rem;
	color: var(--text-2);
}

.review__stars {
	color: #f5b301;
	letter-spacing: 0.1em;
}

.review__name {
	color: var(--text);
	font-weight: 600;
}

.reviews__dots {
	display: flex;
	gap: 0.25rem;
	margin-top: var(--sp-2);
}

.reviews__dot {
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.reviews__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.25rem 0 0 -0.25rem;
	border-radius: 50%;
	background: var(--line-strong);
	transition: background 0.3s ease, transform 0.3s ease;
}

.reviews__dot.is-active::after {
	background: var(--red-hover);
	transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
	.review,
	.review.is-active {
		transition: none;
		transform: none;
	}
}