/**
 * Utilities layer: single-purpose helpers only.
 *
 * Keep this file short. A utility that is only used once belongs in the
 * component that uses it.
 */

@layer utilities {
	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		border: 0;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.screen-reader-text:focus {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		overflow: visible;
		clip-path: none;
	}

	/*
	 * Section fade-in, for anything an editor or a template marks
	 * .hauto-reveal. assets/js/reveal.js adds the modifiers: CSS alone can
	 * only tie the fade to scroll position, which finishes at the bottom edge
	 * of the screen where nobody sees it. An animation rather than a
	 * transition so it never replaces a component's own. Screen only, so a
	 * page printed mid-scroll is not missing sections.
	 */
	@media screen {
		.hauto-reveal--hidden {
			opacity: 0;
		}
	}

	.hauto-reveal--visible {
		animation: hauto-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--hauto-reveal-delay, 0ms)
			both;
	}

	@keyframes hauto-reveal {
		from {
			opacity: 0;
			translate: 0 var(--wp--preset--spacing--50);
		}
	}
}