/**
 * EFPIC — title image: start showing the BOTTOM of the photo, drift to the TOP, then back.
 * Image layer is taller than the header band so the bottom is actually reachable.
 */

@keyframes efpic-header-rise {
	0%,
	100% {
		/* Align bottom of tall layer with bottom of band → photo bottom visible */
		transform: translate3d(0, calc(var(--efpic-header-h, 350px) - 100%), 0);
	}
	50% {
		/* Align top of tall layer with top of band → photo top visible */
		transform: translate3d(0, 0, 0);
	}
}

#masthead #header-image-main,
#masthead #header-image-main-inside {
	overflow: hidden;
	position: relative;
}

/* ---- Cropped: background div ---- */
.efpic-cropped-headerimage #masthead div.header-image {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 100% !important;
	height: calc(var(--efpic-header-h, 350px) * 1.7) !important;
	margin: 0 !important;
	background-attachment: scroll !important;
	background-size: cover !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	will-change: transform;
	animation: efpic-header-rise 36s ease-in-out infinite;
}

.efpic-cropped-headerimage #masthead img.header-image {
	/* Markup kept; motion uses the background div */
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ---- Responsive: <img> (band height forced via --efpic-header-h) ---- */
.efpic-responsive-headerimage #masthead div.header-image {
	display: none !important;
}

.efpic-responsive-headerimage #masthead img.header-image {
	display: block !important;
	position: absolute !important;
	left: 0;
	top: 0;
	width: 100% !important;
	max-width: none !important;
	height: calc(var(--efpic-header-h, 350px) * 1.7) !important;
	max-height: none !important;
	object-fit: cover;
	object-position: 50% 50%;
	will-change: transform;
	animation: efpic-header-rise 36s ease-in-out infinite;
}

/* Keep section title above the moving image; do NOT change position
   (theme uses position:absolute; bottom:0 over the header band). */
#header-page-title {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.efpic-cropped-headerimage #masthead div.header-image,
	.efpic-responsive-headerimage #masthead img.header-image {
		animation: none !important;
		/* Rest near bottom crop */
		transform: translate3d(0, calc(var(--efpic-header-h, 350px) - 100%), 0) !important;
	}
}