/* ============================================================================
   bz-hero — full-screen crossfade hero + positioning statement
   Self-contained, front-page only. Every selector is scoped under .bz-hero
   or .bz-statement. No global/element selectors. Safe to remove by deleting
   this file + its enqueue + the two get_template_part() calls.
   ========================================================================== */

/* ── Full-screen crossfade hero ─────────────────────────────────────────── */
.bz-hero{
	position:relative;
	width:100%;
	height:100vh;        /* fallback */
	height:100svh;       /* small viewport */
	height:100dvh;       /* dynamic viewport (mobile chrome) */
	overflow:hidden;
	background:#161513;
}

.bz-hero__slide{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0;
	transition:opacity var(--bz-fade,1.2s) cubic-bezier(.16,1,.3,1);
	will-change:opacity;
}
.bz-hero__slide.on{ opacity:1; }

/* Legibility gradient over the imagery */
.bz-hero__grad{
	position:absolute;
	inset:0;
	pointer-events:none;
	background:linear-gradient(180deg,
		rgba(14,14,13,.32) 0%,
		rgba(14,14,13,0)   22%,
		rgba(14,14,13,0)   60%,
		rgba(14,14,13,.5)  100%);
}

/* Title / credits block, bottom-left */
.bz-hero__credits{
	position:absolute;
	left:40px;
	bottom:40px;
	z-index:2;
	color:#edebe4;
	font-weight:500;
	line-height:1.18;
	letter-spacing:-.005em;
	font-size:clamp(20px,1.9vw,26px);
	text-shadow:0 1px 24px rgba(0,0,0,.28);
}
.bz-hero__credits > div{ display:block; }
.bz-hero__credits > div + div{ opacity:.82; }

/* Scroll cue, bottom-centre — invites the move to the statement below */
.bz-hero__cue{
	position:absolute;
	left:50%;
	bottom:26px;
	transform:translateX(-50%);
	z-index:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;height:40px;
	color:#edebe4;
	text-decoration:none;
	opacity:.72;
	transition:opacity .3s ease,transform .3s ease;
	animation:bz-hero-cue 2.4s ease-in-out infinite;
}
.bz-hero__cue:hover{ opacity:1; }
.bz-hero__cue svg{ width:22px;height:22px;display:block; }
@keyframes bz-hero-cue{
	0%,100%{ transform:translateX(-50%) translateY(0); }
	50%{ transform:translateX(-50%) translateY(6px); }
}

@media (max-width:767px){
	.bz-hero__credits{ left:20px; bottom:20px; font-size:clamp(16px,4.2vw,20px); }
	.bz-hero__cue{ bottom:16px; }
}

/* ── Positioning statement (section reached on scroll) ──────────────────── */
.bz-statement{
	background:#ECEAE3;
	color:#1b1a17;
	/* Asymmetric padding: bottom > top so the block reads optically centered.
	   Type carries more visual weight at the top (cap-height vs descenders),
	   so a slightly larger bottom margin balances the perceived centre. */
	padding-top:clamp(40px,6vh,72px);
	padding-bottom:clamp(64px,10vh,120px);
	padding-left:clamp(24px,6vw,120px);
	padding-right:clamp(24px,6vw,120px);
	display:flex;
	align-items:center;
	box-sizing:border-box;
}
.bz-statement__inner{ max-width:60rem; }
.bz-statement__eyebrow{
	font-size:clamp(12px,1vw,14px);
	letter-spacing:.14em;
	text-transform:uppercase;
	opacity:.55;
	margin:0 0 clamp(20px,3vh,40px);
	font-weight:500;
}
.bz-statement__body{
	font-family:var(--font-sans);   /* match .studio-title */
	font-size:30px;
	line-height:1.1;
	letter-spacing:-.025em;
	font-weight:500;
	color:var(--black);
	margin:0;
}
/* ZH: keep optical proportion with the EN statement. Same size and weight; only
   drop the negative tracking (meaningless for CJK) and ease the line-height
   just enough that stacked Chinese glyphs do not collide. */
html[lang^="zh"] .bz-statement__body{
	letter-spacing:0;
	line-height:1.25;
}
.bz-statement__body p{ margin:0 0 .5em; }
.bz-statement__body p:last-child{ margin-bottom:0; }

/* ── Mobile: shrink the statement body ~20% so it sits in proportion to the
   tighter viewport. Em-based line-height and letter-spacing scale with it. */
@media (max-width:640px){
	.bz-statement{
		padding-top:clamp(32px,5vh,56px);
		padding-bottom:clamp(52px,8vh,96px);
	}
	.bz-statement__body{
		font-size:24px;
	}
}

/* ── Reduced motion: no rotation, no cue bounce ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
	.bz-hero__slide{ transition:none; }
	.bz-hero__cue{ animation:none; }
}