/* Отель «Галерея»: светлый и спокойный, сакуровый акцент. */
body.era-hotel {
	background: #fbf8f9;
	color: #2e2329;
}

body.era-hotel a {
	color: #8e2f5a;
}

.era-hotel .venue-bar__name {
	font-weight: 500;
	font-size: 22px;
}

.hot-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	padding-block: 48px 72px;
}

.hot-hero__text {
	flex: 1 1 400px;
}

.hot-hero h1 {
	margin: 0 0 20px;
	font-weight: 500;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
}

.hot-hero__meta {
	color: #6b5c64;
}

.hot-btn {
	display: inline-block;
	padding: 16px 28px;
	background: #8e2f5a;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
}

.hot-hero__frame {
	position: relative;
	flex: 1 1 460px;
	min-width: 0;
}

.hot-hero__photo {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
}

.era-hotel .venue-about {
	padding-bottom: 32px;
}

.era-hotel .venue-about table {
	width: 100%;
	border-collapse: collapse;
}

.era-hotel .venue-about th,
.era-hotel .venue-about td {
	padding: 10px 12px;
	border-bottom: 1px solid #e3d6dc;
	text-align: left;
}

.era-hotel .venue-about figure {
	margin: 0 0 16px;
	overflow-x: auto;
}

.era-hotel .venue-gallery {
	padding-bottom: 56px;
}

.era-hotel .venue-book {
	background: #f1e4ea;
}

.era-hotel .booking h2 {
	margin-top: 0;
	font-weight: 500;
	font-size: 44px;
}

.era-hotel .booking__field input {
	border-color: #b9a2ad;
	background: #fff;
}

.era-hotel .booking__submit {
	background: #8e2f5a;
	color: #fff;
}

.era-hotel .venue-contacts {
	padding-block: 32px;
}

.era-hotel .site-footer {
	border-top: 1px solid #e3d6dc;
}

/* Табличка на ручке двери: покачивается, по нажатию переворачивается. */
.hot-hanger {
	position: absolute;
	top: 22px;
	right: 28px;
	z-index: 2;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	perspective: 600px;
	transform-origin: 50% 0;
	animation: hot-sway 4s ease-in-out infinite;
}

.hot-hanger::before {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto -14px;
	border: 5px solid #fbf8f9;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

@keyframes hot-sway {
	50% {
		transform: rotate(4deg);
	}
}

.hot-hanger__card {
	position: relative;
	display: block;
	width: 120px;
	height: 190px;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.hot-hanger[aria-pressed="true"] .hot-hanger__card {
	transform: rotateY(180deg);
}

.hot-hanger__face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 12px 16px;
	border-radius: 10px;
	backface-visibility: hidden;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}

.hot-hanger__face--front {
	background: #8e2f5a;
	color: #fff;
}

.hot-hanger__face--back {
	background: #fff;
	color: #8e2f5a;
	transform: rotateY(180deg);
}

/* Лепестки сакуры. */
.hot-petals {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hot-petals i {
	position: absolute;
	top: -20px;
	left: var(--x, 50%);
	width: 12px;
	height: 9px;
	border-radius: 80% 0 80% 0;
	background: #f4b6c9;
	opacity: 0.85;
	animation: hot-fall var(--d, 11s) linear var(--w, 0s) infinite;
}

.hot-petals i:nth-child(1) { --x: 8%; --d: 12s; --w: 0s; }
.hot-petals i:nth-child(2) { --x: 22%; --d: 14s; --w: 3s; }
.hot-petals i:nth-child(3) { --x: 37%; --d: 11s; --w: 6s; }
.hot-petals i:nth-child(4) { --x: 51%; --d: 15s; --w: 1s; }
.hot-petals i:nth-child(5) { --x: 63%; --d: 13s; --w: 8s; }
.hot-petals i:nth-child(6) { --x: 74%; --d: 12s; --w: 4s; }
.hot-petals i:nth-child(7) { --x: 86%; --d: 16s; --w: 2s; }
.hot-petals i:nth-child(8) { --x: 95%; --d: 13s; --w: 7s; }

@keyframes hot-fall {
	0% {
		transform: translate(0, 0) rotate(0);
	}

	50% {
		transform: translate(-40px, 300px) rotate(200deg);
	}

	100% {
		transform: translate(20px, 640px) rotate(420deg);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hot-hanger {
		animation: none;
	}

	.hot-petals {
		display: none;
	}
}

@media (max-width: 640px) {
	.hot-hanger {
		top: 12px;
		right: 12px;
	}

	.hot-hanger__card {
		width: 96px;
		height: 150px;
	}

	.hot-hanger__face {
		font-size: 15px;
	}
}