/* Frontend only. The theme keeps geometry, overlay, typography and source URL.
 * The placeholder sits below ::before (image), ::after (overlay) and content. */
:is(.asca-heading-area, .aw-service-heading) > .asca-image-placeholder {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-position: center;
	background-size: cover;
	transform: scale(1.12);
	pointer-events: none;
}

/* The explicit block supplies the image; avoid fetching the CSS fallback too. */
:is(.asca-heading-area, .aw-service-heading):has(.has-heading-background-image img)::before {
	background-image: none;
}

:is(.asca-heading-area, .aw-service-heading).is-asca-image-pending::before,
:is(.asca-heading-area, .aw-service-heading).is-asca-image-error::before,
img.is-asca-image-pending,
img.is-asca-image-error,
.asca-image-placeholder.is-asca-image-loaded {
	opacity: 0;
}

:is(.asca-heading-area, .aw-service-heading).is-asca-image-loaded::before,
img.is-asca-image-loaded,
.asca-image-placeholder {
	transition: opacity 450ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:is(.asca-heading-area, .aw-service-heading)::before,
	img.is-asca-image-pending,
	img.is-asca-image-loaded,
	.asca-image-placeholder {
		transition: none !important;
	}
}

@media print {
	:is(.asca-heading-area, .aw-service-heading) > .asca-image-placeholder,
	:is(.asca-heading-area, .aw-service-heading) .has-heading-background-image {
		display: none !important;
	}
	.aw-hero-carousel img.is-asca-image-pending {
		opacity: 1;
	}
}