/*
 * Homepage banner (Cover block with class "bd-hero"): a small stage.
 * Layers, back to front: velvet backdrop drawn in CSS, an optional photo from
 * the settings or else the rabbit and the bear (.bd-cast), the front curtains
 * (::before/::after), the text, and two drapes that open on the first visit
 * of a browser session (.bd-drape; the head script adds .bd-seen afterwards).
 */
.wp-block-cover.bd-hero {
	isolation: isolate;
	overflow: hidden;
	background-color: #5c0b13;
	background-image:
		radial-gradient(ellipse 55% 60% at 50% 40%, rgb(255 120 110 / 0.2), transparent 70%),
		linear-gradient(180deg, rgb(25 0 4 / 0.6), transparent 24%, transparent 70%, rgb(25 0 4 / 0.55)),
		repeating-linear-gradient(90deg, transparent 0 1.2%, rgb(0 0 0 / 0.16) 2%, transparent 3%, rgb(255 95 95 / 0.09) 3.7%, transparent 4.5%),
		repeating-linear-gradient(90deg, #6a0e17 0, #961925 2.3%, #b4212d 3.2%, #88151f 4.4%, #5a0a13 6.3%, #6a0e17 7.3%);
}

.wp-block-cover.bd-hero .wp-block-cover__image-background {
	object-position: 50% 100%;
}

/* ---------- The cast: rabbit and bear, sized by the banner height ---------- */
.bd-cast {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	container-type: size;
}

.bd-cast__rabbit,
.bd-cast__bear {
	position: absolute;
	pointer-events: auto;
	cursor: pointer;
}

.bd-cast__rabbit {
	left: 40cqh;
	bottom: 5cqh;
	height: 38cqh;
	aspect-ratio: 606 / 819;
	transform-origin: 50% 100%;
	animation: bd-hop-in 1.1s linear 1.3s both;
}

.bd-cast__bear {
	right: 5cqh;
	bottom: 2cqh;
	height: 62cqh;
	aspect-ratio: 857 / 1335;
	transform-origin: 100% 40%;
	animation: bd-peek-in 1s cubic-bezier(0.23, 1, 0.32, 1) 1.9s both;
}

.bd-cast__sweep,
.bd-cast__peek {
	position: relative;
	height: 100%;
}

.bd-cast__img {
	display: block;
	height: 100%;
	width: auto;
}

/* Rabbit: sweeps the floor, with a puff of dust at the broom. */
.bd-cast__sweep {
	transform-origin: 50% 100%;
	animation: bd-sweep 0.7s ease-in-out 2.4s infinite alternate;
}

.bd-dust {
	position: absolute;
	left: 62%;
	top: 86%;
	width: 7%;
	aspect-ratio: 1;
	margin: -3.5% 0 0 -3.5%;
	border-radius: 50%;
	background: rgb(236 214 182 / 0.85);
	filter: blur(1px);
	opacity: 0;
	animation: bd-puff 1.4s cubic-bezier(0.23, 1, 0.32, 1) 2.4s infinite;
}
.bd-dust:nth-of-type(2) { --dx: 220%; animation-delay: 3.1s; }
.bd-dust:nth-of-type(3) { --dx: -160%; animation-delay: 2.75s; width: 5%; }

/* Bear: now and then ducks behind the curtain and peeks out again. */
.bd-cast__peek {
	transform-origin: 100% 40%;
	animation: bd-peekaboo 9s ease-in-out 5s infinite;
}

/* ---------- Front curtains ---------- */
.wp-block-cover.bd-hero::before,
.wp-block-cover.bd-hero::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	aspect-ratio: 1192 / 2160;
	z-index: 2;
	pointer-events: none;
	background: no-repeat top / 100% 100%;
}

.wp-block-cover.bd-hero::before {
	left: 0;
	background-image: url(../images/curtain-left.webp);
	transform-origin: 0 0;
	animation: bd-sway-left 7s ease-in-out infinite alternate;
}

.wp-block-cover.bd-hero::after {
	right: 0;
	background-image: url(../images/curtain-right.webp);
	transform-origin: 100% 0;
	animation: bd-sway-right 8s ease-in-out -3s infinite alternate;
}

.wp-block-cover.bd-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

/* Keep the text between the rabbit and the bear. */
.wp-block-cover.bd-hero .wp-block-cover__inner-container > * {
	max-width: 640px;
	margin-inline: auto;
}

/* ---------- Drapes that open on load ---------- */
.bd-drape {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51%;
	z-index: 4;
	pointer-events: none;
	background-color: #7a1019;
	background-image:
		linear-gradient(180deg, rgb(25 0 4 / 0.45), transparent 30%, transparent 75%, rgb(25 0 4 / 0.5)),
		repeating-linear-gradient(90deg, #7c111a 0, #a81e2a 3%, #c42a36 4.2%, #9a1823 5.8%, #660b14 8%, #7c111a 9.4%);
	animation: bd-open-left 1.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

.bd-drape--left {
	left: 0;
	transform-origin: 0 50%;
	box-shadow: inset -24px 0 30px -12px rgb(20 0 3 / 0.55);
}

.bd-drape--right {
	right: 0;
	transform-origin: 100% 50%;
	box-shadow: inset 24px 0 30px -12px rgb(20 0 3 / 0.55);
	animation-name: bd-open-right;
}

/* Later pages in the same visit: the stage is already open. */
.bd-seen .bd-drape { display: none; }
.bd-seen .bd-cast__rabbit,
.bd-seen .bd-cast__bear { animation: none; }

/* ---------- Keyframes ---------- */
@keyframes bd-open-left {
	to { transform: translateX(-100%) scaleX(0.4); visibility: hidden; }
}

@keyframes bd-open-right {
	to { transform: translateX(100%) scaleX(0.4); visibility: hidden; }
}

@keyframes bd-sway-left {
	to { transform: skewX(-1deg); }
}

@keyframes bd-sway-right {
	to { transform: skewX(1deg); }
}

@keyframes bd-hop-in {
	0%   { transform: translate(-150%, 0); opacity: 0; animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
	8%   { opacity: 1; }
	25%  { transform: translate(-104%, -14%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
	50%  { transform: translate(-55%, 0) scale(1.05, 0.94); animation-timing-function: cubic-bezier(0.3, 0.6, 0.5, 1); }
	75%  { transform: translate(-22%, -10%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4); }
	90%  { transform: translate(0, 0) scale(1.05, 0.94); }
	100% { transform: none; opacity: 1; }
}

@keyframes bd-peek-in {
	0%   { transform: translateX(60%) rotate(10deg); }
	60%  { transform: translateX(-2%) rotate(-6deg); }
	82%  { transform: rotate(2deg); }
	100% { transform: none; }
}

@keyframes bd-sweep {
	from { transform: rotate(-2.5deg); }
	to   { transform: rotate(2.5deg); }
}

@keyframes bd-puff {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
	15%  { opacity: 0.9; }
	100% { opacity: 0; transform: translate(var(--dx, 120%), -90%) scale(1.8); }
}

@keyframes bd-peekaboo {
	0%, 62%   { transform: none; }
	68%, 76%  { transform: translateX(56%) rotate(6deg); }
	84%       { transform: translateX(-2%) rotate(-7deg); }
	90%       { transform: rotate(3deg); }
	96%, 100% { transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 781px) {
	/* Room under the text for the animals. */
	.wp-block-cover.bd-hero--stage {
		padding-bottom: 34vh !important;
	}

	.wp-block-cover.bd-hero::before {
		background-image: url(../images/curtain-left-1080.webp);
		translate: -74% 0;
	}

	.wp-block-cover.bd-hero::after {
		background-image: url(../images/curtain-right-1080.webp);
		translate: 74% 0;
	}

	.bd-cast__rabbit {
		left: 5%;
		bottom: 2cqh;
		height: 30cqh;
	}

	/* The bear hangs past the right edge, so only its head peeks in. */
	.bd-cast__bear {
		right: -9cqh;
		bottom: 0;
		height: 38cqh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.bd-hero::before,
	.wp-block-cover.bd-hero::after,
	.bd-cast__rabbit,
	.bd-cast__bear,
	.bd-cast__sweep,
	.bd-cast__peek,
	.bd-dust {
		animation: none;
	}

	.bd-drape {
		display: none;
	}
}