/* ============================================================
   BYR — MOBILE HEADER AUTO-HIDE
   Slides the site header up and fades it out after idle on
   screens <900px. JS (byr-header-autohide.js) toggles the
   .byr-header-hidden class.
============================================================ */

@media (max-width: 899px) {

	/* Base transition = the "show" curve (fast start, soft land). */
	#byr-header,
	.byr-header,
	#masthead,
	.site-header {
		transition:
			transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1),
			opacity   0.28s ease-out;
		will-change: transform, opacity;
	}

	/* Hidden state = the "hide" curve (slow start, accelerates off-screen). */
	#byr-header.byr-header-hidden,
	.byr-header.byr-header-hidden,
	#masthead.byr-header-hidden,
	.site-header.byr-header-hidden {
		transform: translateY(-150%);
		opacity: 0;
		pointer-events: none;
		transition:
			transform 0.55s cubic-bezier(0.7, 0, 0.84, 0),
			opacity   0.45s cubic-bezier(0.55, 0, 1, 1);
	}

	/* Reduced motion: fade only, no slide */
	@media (prefers-reduced-motion: reduce) {

		#byr-header,
		.byr-header,
		#masthead,
		.site-header {
			transition: opacity 0.2s ease;
		}

		#byr-header.byr-header-hidden,
		.byr-header.byr-header-hidden,
		#masthead.byr-header-hidden,
		.site-header.byr-header-hidden {
			transform: none;
		}
	}
}