/* Memories layer behind the homepage hero (section.e-hero). */
.e-hero { position: relative; isolation: isolate; }
.e-hero > :not(.hbm) { position: relative; z-index: 1; }

.hbm {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	/* Fade memories out before the hero blends into the page below. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 92%);
	        mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 92%);
}

.hbm-photo {
	position: absolute;
	margin: 0;
	padding: 6px 6px 22px;
	background: #f3e9d6;
	border-radius: 3px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translate3d(0, 14px, 0) rotate(var(--hbm-rot, 0deg)) scale(1.06);
	animation: hbm-memory var(--hbm-dur, 11s) cubic-bezier(.4, 0, .2, 1) forwards;
	will-change: opacity, transform, filter;
}
.hbm-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1px;
}
/* Soft vignette, like an old print. */
.hbm-photo::after {
	content: "";
	position: absolute;
	inset: 6px 6px 22px;
	box-shadow: inset 0 0 40px rgba(60, 35, 10, .45);
	border-radius: 1px;
}

@keyframes hbm-memory {
	0% {
		opacity: 0;
		filter: sepia(.95) blur(7px) brightness(1.15);
		transform: translate3d(0, 14px, 0) rotate(var(--hbm-rot, 0deg)) scale(1.06);
	}
	28% {
		opacity: var(--hbm-peak, .45);
		filter: sepia(.2) blur(0) brightness(1);
	}
	62% {
		opacity: var(--hbm-peak, .45);
		filter: sepia(.3) blur(0) brightness(1);
	}
	100% {
		opacity: 0;
		filter: sepia(1) blur(9px) brightness(1.2);
		transform: translate3d(0, -22px, 0) rotate(var(--hbm-rot, 0deg)) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hbm-photo { animation-name: hbm-memory-still; filter: sepia(.35); transform: rotate(var(--hbm-rot, 0deg)); }
	@keyframes hbm-memory-still {
		0%, 100% { opacity: 0; }
		30%, 70% { opacity: var(--hbm-peak, .4); }
	}
}