/* ============================================================
   bokami — 3D parallax hero (front-end + admin preview share this).
   ============================================================ */

.bk-hero {
	position: relative;
	width: 100%;
	min-height: 420px;
	overflow: hidden;
	border-radius: 0;
	background: var(--surface-page, #FBF6F0);
	isolation: isolate;
}

/* React renders this empty mount; the engine owns its subtree (keeps React
   and the imperative shader from fighting over the DOM). */
.bk-hero-mount {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* stage holds the parallax planes / canvas, slightly over-scanned so
   edges never reveal the page during tilt */
.bk-hero-stage {
	position: absolute;
	inset: -4%;
	z-index: 0;
}
.bk-hero-stage--layers { pointer-events: none; }

.bk-hero-plane {
	position: absolute;
	inset: 0;
	will-change: transform;
	transform: translate3d(0,0,0) scale(1.06);
	transition: transform .06s linear;
}
.bk-hero-plane img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	user-select: none;
}

.bk-hero-stage--depth { background-size: cover; background-position: center; }
.bk-hero-depth-fallback,
.bk-hero-3d-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

/* nameplate / copy overlay */
.bk-hero-inner {
	position: relative;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	min-height: 420px;
	padding: 40px 44px;
	pointer-events: none;
}
.bk-hero-eyebrow {
	font-family: var(--font-hand, "Courgette", cursive);
	font-size: 18px;
	margin: 0;
	opacity: .92;
}
.bk-hero-title {
	font-family: var(--font-display, "Baloo 2", cursive);
	font-weight: 800;
	font-size: clamp(36px, 6vw, 72px);
	line-height: 1.02;
	margin: 0;
	text-transform: lowercase;
}
.bk-hero-caption {
	font-family: var(--font-body, "Plus Jakarta Sans", sans-serif);
	font-size: 16px;
	margin: 4px 0 0;
	max-width: 52ch;
	opacity: .9;
}

/* in-town building header: hero image is the full backdrop, nameplate overlaid.
   Height follows the image's aspect ratio (set from JS as --bk-hero-ar) so the
   whole image shows; capped by max-height so tall images don't dominate. */
.bk-hero--building { width: 100%; aspect-ratio: var(--bk-hero-ar, 21 / 9); max-height: 72vh; min-height: 240px; border-radius: 0; }
/* don't let the base inner's min-height force the hero taller than its image ratio */
.bk-hero--building .bk-hero-inner { min-height: 0; height: 100%; padding: 30px 40px 34px; }
/* top scrim so the overlaid logo + back button stay legible over the image */
.bk-hero--building::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 96px; z-index: 4; background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0)); pointer-events: none; }
/* the handwriting eyebrow + title inherit the (cream) overlay color so they read on the image */
.bk-hero--building .rm-title__hand { color: inherit; opacity: .95; font-family: var(--font-hand, "Courgette", cursive); font-size: 20px; }
.bk-hero--building .bk-hero-title { color: inherit; }
@media (max-width: 640px) {
	.bk-hero--building { min-height: clamp(220px, 38vh, 360px); }
	.bk-hero--building .bk-hero-inner { padding: 20px 26px 24px; }
	.bk-hero--building .bk-hero-title { font-size: clamp(30px, 9vw, 46px) !important; }
	.bk-hero--building .bk-hero-caption { font-size: 14px; }
}

/* soft legibility veil at the bottom */
.bk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,0) 46%);
}

/* "tap to tilt" badge (iOS gyro permission) */
.bk-hero-tilt-cta {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display, "Baloo 2", cursive);
	font-weight: 700;
	font-size: 13px;
	padding: 9px 16px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,.92);
	color: #5A3E3C;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,.5);
	cursor: pointer;
	animation: bk-cta-pulse 1.8s ease-in-out infinite;
}
.bk-hero-tilt-cta.is-gone { opacity: 0; transform: translateX(-50%) translateY(6px); }
.bk-hero-tilt-cta__dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #F4AB9A;
	box-shadow: 0 0 0 0 rgba(244,171,154,.7);
	animation: bk-cta-ring 1.8s ease-out infinite;
}
@keyframes bk-cta-pulse { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-3px);} }
@keyframes bk-cta-ring { 0%{ box-shadow:0 0 0 0 rgba(244,171,154,.6);} 100%{ box-shadow:0 0 0 10px rgba(244,171,154,0);} }

@media (prefers-reduced-motion: reduce) {
	.bk-hero-plane, .bk-hero-3d-canvas, .bk-hero-depth-fallback { transition: none !important; transform: none !important; }
	.bk-hero-tilt-cta { animation: none; }
}