/* ==========================================================================
   Animations — scroll reveals, sticky-header transition, micro-interactions.

   Honors prefers-reduced-motion.
   ========================================================================== */

:root {
	--bk-reveal-distance: 24px;
	--bk-reveal-duration: 720ms;
	--bk-reveal-easing: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reveal initial states ---------------------------------------------- */

[data-bk-reveal] {
	opacity: 0;
	transition:
		opacity var(--bk-reveal-duration) var(--bk-reveal-easing),
		transform var(--bk-reveal-duration) var(--bk-reveal-easing);
	transition-delay: var(--bk-reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-bk-reveal=""],
[data-bk-reveal="up"] {
	transform: translate3d(0, var(--bk-reveal-distance), 0);
}

[data-bk-reveal="left"] {
	transform: translate3d(calc(-1 * var(--bk-reveal-distance)), 0, 0);
}

[data-bk-reveal="right"] {
	transform: translate3d(var(--bk-reveal-distance), 0, 0);
}

[data-bk-reveal="fade"] {
	transform: none;
}

[data-bk-reveal="scale"] {
	transform: scale(0.96);
}

/* ----- Revealed end state ------------------------------------------------- */

[data-bk-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ----- Reduced motion: skip animation, show end-state immediately --------- */

@media (prefers-reduced-motion: reduce) {
	[data-bk-reveal],
	[data-bk-reveal].is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ----- Sticky header transition ------------------------------------------- */

.bk-header {
	transition:
		background-color 240ms var(--bk-reveal-easing),
		box-shadow 240ms var(--bk-reveal-easing),
		border-color 240ms var(--bk-reveal-easing);
}

body.is-scrolled .bk-header {
	background-color: rgba(252, 249, 244, 0.92);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	box-shadow:
		0 1px 0 rgba(31, 26, 20, 0.06),
		0 12px 40px -28px rgba(31, 26, 20, 0.18);
}

/* ----- Smooth scroll fallback (browsers without JS) ----------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ----- Hairline divider utility ------------------------------------------- */

.bk-hairline {
	border: 0;
	border-top: 1px solid rgba(31, 26, 20, 0.08);
	margin: 0;
}

/* ----- Section number eyebrow polish ------------------------------------- */

.bk-section-num {
	display: inline-block;
	font-family: var(--bk-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bk-stone-700, #6b6359);
	padding: 4px 10px;
	border: 1px solid rgba(31, 26, 20, 0.12);
	border-radius: 999px;
	margin-bottom: 1.25rem;
}

/* ----- Button micro-interactions ----------------------------------------- */

.bk-btn {
	transition:
		transform 160ms var(--bk-reveal-easing),
		box-shadow 240ms var(--bk-reveal-easing),
		background-color 200ms var(--bk-reveal-easing),
		color 200ms var(--bk-reveal-easing);
}

.bk-btn:hover {
	transform: translateY(-1px);
}

.bk-btn:active {
	transform: translateY(0);
	transition-duration: 80ms;
}

.bk-btn--primary:hover {
	box-shadow:
		0 14px 28px -16px rgba(31, 26, 20, 0.45),
		0 4px 10px -4px rgba(31, 26, 20, 0.20);
}

@media (prefers-reduced-motion: reduce) {
	.bk-btn,
	.bk-btn:hover,
	.bk-btn:active {
		transition: none !important;
		transform: none !important;
	}
}

/* ----- Link underline grow ------------------------------------------------ */

.bk-link-grow {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: background-size 280ms var(--bk-reveal-easing);
}

.bk-link-grow:hover {
	background-size: 0 1px;
	background-position: 100% 100%;
}

/* ----- Image fade-in once loaded ----------------------------------------- */

.bk-img-fade {
	opacity: 0;
	transition: opacity 480ms var(--bk-reveal-easing);
}

.bk-img-fade.is-loaded,
.bk-img-fade[loading="eager"] {
	opacity: 1;
}