/**
 * Disappearing Header — layout and hide transition (duration from CSS variables).
 */

.dh-wrap {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

.dh-heading {
	margin: 0;
	padding: 0;
	font: inherit;
	opacity: 1;
	transform: none;
	transition:
		opacity var(--dh-hide-dur, 0.5s) ease,
		transform var(--dh-hide-dur, 0.5s) ease;
	will-change: opacity, transform;
}

.dh-wrap.dh-hide-active .dh-heading[data-dh-effect="fade"] {
	opacity: 0;
}

.dh-wrap.dh-hide-active .dh-heading[data-dh-effect="slide-up"] {
	opacity: 0;
	transform: translateY(calc(-1 * var(--dh-slide, 16px)));
}

.dh-wrap.dh-hide-active .dh-heading[data-dh-effect="slide-left"] {
	opacity: 0;
	transform: translateX(calc(-1 * var(--dh-slide, 24px)));
}

/* Screen readers: when fully hidden we rely on JS for aria-hidden; keep visual hidden state */
.dh-wrap.dh-fully-hidden {
	visibility: hidden;
	pointer-events: none;
}

.dh-wrap.dh-fully-hidden.dh-collapse-space {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.dh-heading {
		transition-duration: 0.01ms;
	}
}