:root {
	--mesto-glow: #8df2bd;
	--mesto-glow-soft: rgba(141, 242, 189, .34);
	--mesto-glow-faint: rgba(141, 242, 189, .16);
}

a,
button,
summary,
input,
select,
textarea {
	-webkit-tap-highlight-color: rgba(141, 242, 189, .28);
}

a,
button,
summary,
[role="button"] {
	cursor: pointer;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-color: var(--mesto-glow);
}

.button,
.mesto-booking-form button,
.mascot-story-card,
.mascot-story-replay,
.mobile-actions a,
.card .text-link,
.section-links a,
.footer a,
.nav a,
.brand,
.faq-list summary {
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, text-shadow .2s ease, transform .18s ease;
}

.place-card,
.review-card,
.home-journal-card,
.contact-location,
.rating-badge,
.rating-link {
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .22s ease, text-shadow .2s ease, transform .18s ease;
}

main a:not(.button):not(.rating-badge):not(.rating-link),
.breadcrumbs a,
.footer a,
.nav a {
	transition: color .18s ease, background-color .18s ease, text-shadow .2s ease, opacity .18s ease;
}

main a:not(.button):not(.rating-badge):not(.rating-link):hover,
main a:not(.button):not(.rating-badge):not(.rating-link):focus-visible,
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
	color: var(--mesto-glow);
	text-shadow: 0 0 13px rgba(141, 242, 189, .5);
}

main a:not(.button):not(.rating-badge):not(.rating-link):active,
.breadcrumbs a:active {
	color: #d9ffea;
	opacity: .84;
}

.button:hover,
.button:focus-visible,
.mesto-booking-form button:hover,
.mesto-booking-form button:focus-visible,
.mascot-story-card:hover,
.mascot-story-card:focus-visible,
.mascot-story-replay:hover,
.mascot-story-replay:focus-visible,
.section-links a:hover,
.section-links a:focus-visible {
	border-color: var(--mesto-glow);
	box-shadow: 0 0 0 1px rgba(141, 242, 189, .32), 0 0 18px var(--mesto-glow-soft), 0 12px 34px rgba(0, 0, 0, .24);
	transform: translateY(-2px);
}

.button:active,
.mesto-booking-form button:active,
.mascot-story-card:active,
.mascot-story-replay:active,
.section-links a:active {
	border-color: var(--mesto-glow);
	box-shadow: 0 0 0 2px rgba(141, 242, 189, .3), 0 0 26px rgba(141, 242, 189, .58);
	transform: translateY(1px) scale(.985);
}

.nav a:hover,
.nav a:focus-visible,
.footer a:hover,
.footer a:focus-visible,
.brand:hover,
.brand:focus-visible,
.card .text-link:hover,
.card .text-link:focus-visible,
.faq-list summary:hover,
.faq-list summary:focus-visible {
	color: var(--mesto-glow);
	text-shadow: 0 0 14px rgba(141, 242, 189, .6);
}

.nav a:active,
.footer a:active,
.brand:active,
.card .text-link:active,
.faq-list summary:active {
	color: #c5ffdf;
	text-shadow: 0 0 18px rgba(141, 242, 189, .85);
}

.mobile-actions a:hover,
.mobile-actions a:focus-visible,
.mobile-actions a:active {
	background: rgba(141, 242, 189, .18);
	color: #d9ffea;
	box-shadow: inset 0 0 0 1px rgba(141, 242, 189, .36), inset 0 0 22px rgba(141, 242, 189, .12), 0 0 20px rgba(141, 242, 189, .3);
	text-shadow: 0 0 12px rgba(141, 242, 189, .55);
}

.mobile-actions a[href^="tel:"]:hover,
.mobile-actions a[href^="tel:"]:focus-visible,
.mobile-actions a[href^="tel:"]:active {
	background: rgba(141, 242, 189, .2);
	color: #e5fff0;
}

.mesto-booking-form input:hover,
.mesto-booking-form select:hover,
.mesto-booking-form textarea:hover {
	border-color: rgba(64, 145, 105, .56);
}

.mesto-booking-form input:focus,
.mesto-booking-form select:focus,
.mesto-booking-form textarea:focus {
	border-color: #3c9b70;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(73, 178, 126, .18), 0 0 20px rgba(73, 178, 126, .24);
}

.place-card:hover,
.review-card:hover,
.home-journal-card:hover,
.contact-location:hover,
.fact:hover {
	background-color: #111613;
	border-color: rgba(141, 242, 189, .34);
	box-shadow: 0 0 0 1px rgba(141, 242, 189, .12), 0 0 26px var(--mesto-glow-faint), 0 16px 38px rgba(0, 0, 0, .22);
	transform: translateY(-2px);
}

.rating-badge:hover,
.rating-badge:focus-visible,
.rating-link:hover,
.rating-link:focus-visible {
	background: rgba(210, 168, 92, .14);
	border-color: rgba(210, 168, 92, .72);
	color: #f2ca7f !important;
	box-shadow: 0 0 18px rgba(210, 168, 92, .22);
	transform: translateY(-1px);
}

.rating-badge:active,
.rating-link:active {
	background: rgba(210, 168, 92, .22);
	transform: translateY(1px) scale(.985);
}

@media (hover: none) {
	.button:active,
	.mesto-booking-form button:active,
	.mascot-story-card:active,
	.mascot-story-replay:active,
	.mobile-actions a:active,
	.card .text-link:active,
	.section-links a:active,
	.footer a:active,
	.nav a:active,
		.faq-list summary:active {
		filter: brightness(1.08);
	}

	.place-card:active,
	.review-card:active,
	.home-journal-card:active,
	.contact-location:active,
	.fact:active,
	.rating-badge:active,
	.rating-link:active {
		background-color: #111613;
		filter: brightness(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.button,
	.mesto-booking-form button,
	.mascot-story-card,
	.mascot-story-replay,
	.mobile-actions a,
	.card .text-link,
	.section-links a,
	.footer a,
	.nav a,
		.brand,
		.faq-list summary,
		.place-card,
		.review-card,
		.home-journal-card,
		.contact-location,
		.rating-badge,
		.rating-link {
		transition: none;
	}
}
