/* blz_hero — full/interior/minimal variants, ported from
   editorial-tech-green.html (.hero) + build-practice.py (.hero-int) +
   build-pages2.py (.hero-min), tokens swapped to --blz-*. */

/* CLS: use 100dvh, NOT 100svh. svh was the culprit — mobile browsers painted
   100svh at the large viewport height, then re-resolved to the small one ~4s in,
   a 28px drop that moved the bottom-anchored (align-items:flex-end) hero (~0.25
   CLS, Google "poor"). dvh is resolved eagerly to the live viewport and has no
   svh-style lazy re-resolution, so the hero paints at its final height on frame
   one → no shift.

   Pure CSS on purpose: an earlier JS pin (set --app-h=innerHeight at first paint)
   worked locally but WP Rocket on staging/prod combines + defers all JS into one
   bundle and does NOT honor the inline-exclusion filters, so the setter ran after
   the hero painted and the var() fell back to the old behavior. dvh needs no JS,
   so nothing can strip it. Do NOT reintroduce svh. See SESSION-HANDOFF for the
   layout-shift trace. */
.blz-hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; background: var(--blz-dark-bg); color: var(--blz-on-accent); font-family: var(--blz-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
.blz-hero--interior { min-height: 74dvh; }
.blz-hero--minimal { min-height: 56dvh; }

.blz-hero .hero-bg { position: absolute; inset: 0; }
/* the poster <picture> (art-directed mobile/desktop) must not add a box — the
   <img> inside is the absolutely-positioned layer. */
.blz-hero .hero-bg picture { display: contents; }
.blz-hero .hero-bg img, .blz-hero .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 1.1s ease-in-out; }
.blz-hero .hero-bg img { animation: blzHeroZoom 9s ease-out both; animation-play-state: paused; }
.blz-hero .hero-bg img.on, .blz-hero .hero-bg video.on { opacity: 1; }
/* the lazy-attached bg video snaps in at frame 0 (identical to the poster); a
   fade would dissolve the frozen poster into an already-advanced video and read
   as a stutter, so no opacity transition here. */
.blz-hero .hero-bg video.hero-video { transition: none; }
.blz-hero .hero-bg img.on { animation-play-state: running; }
.blz-hero .hero-bg img.no-zoom { animation: none; }
@keyframes blzHeroZoom { from { transform: scale(1.03); } to { transform: scale(1.11); } }

.blz-hero .hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 27, 19, .58) 0%, rgba(24, 27, 19, .36) 40%, rgba(24, 27, 19, .92) 92%); }
.blz-hero .hero-veil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 28% 72%, rgba(24, 27, 19, .42), transparent 70%); }
.blz-hero .hero-grain { position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* rule: padding-top/bottom ONLY on the .blz-wrap-sharing element (mobile inset) */
.blz-hero .hero-in { position: relative; z-index: 2; width: 100%; padding-top: 170px; padding-bottom: 64px; }
.blz-hero--interior .hero-in { padding-top: 160px; padding-bottom: 58px; }
.blz-hero--minimal .hero-in { padding-top: 150px; padding-bottom: 54px; }

.blz-hero h1 { font-family: var(--blz-head-face, var(--blz-serif)); font-weight: var(--blz-hero-weight, 340); font-size: var(--blz-hero-size, clamp(46px, 7.6vw, 110px)); line-height: .99; letter-spacing: var(--blz-hero-track, -.025em); max-width: 12ch; color: var(--blz-on-accent); text-shadow: 0 2px 26px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35); }
.blz-hero--interior h1 { max-width: 17ch; font-size: clamp(40px, 6.2vw, 88px); }
.blz-hero--minimal h1 { max-width: 16ch; font-size: clamp(38px, 5.6vw, 76px); }
/* LCP: the H1 is the largest above-the-fold text, so it must paint on the FIRST
   frame — the words are never masked/hidden (no overflow clip, no opacity, no
   off-screen translate). A small transform-only rise keeps the staggered motion
   while every word is visible from frame one, so first paint counts for LCP.
   (No overflow clip also means the italic descenders show naturally.) */
.blz-hero h1 .w { display: inline-block; vertical-align: bottom; }
.blz-hero h1 .w span { display: inline-block; transform: translateY(.24em); animation: blzWordUp 1s cubic-bezier(.2, .7, .2, 1) forwards; }
.blz-hero h1 .w:nth-child(1) span { animation-delay: .15s; }
.blz-hero h1 .w:nth-child(2) span { animation-delay: .24s; }
.blz-hero h1 .w:nth-child(3) span { animation-delay: .33s; }
.blz-hero h1 .w:nth-child(4) span { animation-delay: .42s; }
.blz-hero h1 .w:nth-child(5) span { animation-delay: .51s; }
.blz-hero h1 .w:nth-child(6) span { animation-delay: .6s; }
.blz-hero h1 .w:nth-child(n+7) span { animation-delay: .69s; }
@keyframes blzWordUp { to { transform: translateY(0); } }
.blz-hero h1 em { font-style: italic; color: var(--blz-hero-em, #D9D1A0); font-family: var(--blz-em-face, inherit); font-weight: var(--blz-em-weight, inherit); letter-spacing: var(--blz-em-track, inherit); }

.blz-hero .hero-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 44px; flex-wrap: wrap; }
.blz-hero .hero-sub { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; max-width: 46ch; color: rgba(244, 240, 232, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .4); }
.blz-hero .hero-sub b { font-weight: 600; color: #fff; }
.blz-hero .hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.blz-hero .hero-fine { font-size: 13px; color: rgba(244, 240, 232, .7); margin-top: 14px; }
.blz-hero .blz-btn--ghost { border-color: rgba(244, 240, 232, .45); color: var(--blz-on-accent); }
.blz-hero .blz-btn--ghost:hover { border-color: #fff; background: rgba(244, 240, 232, .08); }
.blz-hero .hero-proof { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: rgba(244, 240, 232, .8); min-width: 230px; }
.blz-hero .hero-proof .row { display: flex; align-items: center; gap: 10px; }
.blz-hero .hero-proof .stars { color: var(--blz-accent-3); letter-spacing: 2px; }
.blz-hero .hero-proof b { color: #fff; font-weight: 700; }

.blz-hero .fade-item { opacity: 0; transform: translateY(22px); animation: blzRise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.blz-hero .fade-item.f3 { animation-delay: .55s; }
.blz-hero .fade-item.f4 { animation-delay: .7s; }
.blz-hero .fade-item.f5 { animation-delay: .85s; }
@keyframes blzRise { to { opacity: 1; transform: none; } }
/* LCP: the subtitle is the 2nd-largest above-the-fold text — it uses a
   transform-ONLY rise (no opacity fade) so it, too, is painted on frame one. */
.blz-hero .hero-sub { animation: blzRiseT .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes blzRiseT { from { transform: translateY(16px); } to { transform: none; } }

/* parent-theme heading colors must not beat the cream title */
#page-container .blz-hero h1 { color: var(--blz-on-accent) !important; }
#page-container .blz-hero h1 em { color: var(--blz-hero-em, #D9D1A0) !important; }

@media (max-width: 900px) {
	.blz-hero .hero-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.blz-hero .hero-in { padding-bottom: 104px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.blz-hero .fade-item, .blz-hero .hero-sub { animation: none; opacity: 1; transform: none; }
	.blz-hero h1 .w span { animation: none; transform: none; }
	.blz-hero .hero-bg img { animation: none; transition: none; }
}
/* Visual Builder: no invisible content */
.et-fb .blz-hero .fade-item, .et-fb .blz-hero .hero-sub, .et-fb .blz-hero h1 .w span { animation: none; opacity: 1; transform: none; }

/* ============================================================================
   flight / scrub / collage variants + scroll cue, ported from the Bizlift
   mockups (template-bizlift-home.php hero + .whero + .ec-hero), tokens
   swapped to --blz-*. Only neutral rgba/white-alpha washes stay literal.
   ========================================================================== */

/* -- scroll cue (any variant; renders only when the field is set) ---------- */
.blz-hero .hero-cue { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--blz-on-dark-soft); }
.blz-hero .hero-cue span { writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.blz-hero .hero-cue i { width: 1px; height: 54px; background: linear-gradient(180deg, var(--blz-on-dark-soft), transparent); animation: blzCueDrop 2.4s ease-in-out infinite; }
@keyframes blzCueDrop { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(10px); opacity: .35; } }

/* -- flight: header = scroll length, .hero-pin = sticky viewport ----------- */
/* overflow:clip (not hidden) so the sticky child still tracks the viewport */
.blz-hero--flight { display: block; overflow: clip; }
.blz-hero--flight .hero-pin { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.blz-hero--flight { min-height: var(--blz-pin-h, 158vh); }
	.blz-hero--flight .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
}
/* VB: collapse the pin so editors see one settled viewport */
.et-fb .blz-hero--flight { min-height: 100svh; }
.et-fb .blz-hero--flight .hero-pin { position: relative; height: auto; min-height: 100svh; }

/* effects slot: empty neutral layer; site skins inject + style their own
   one-off art (blobs / particle canvas / SVG) and manage its z-index */
.blz-hero--flight .hero-fx { position: absolute; inset: 0; pointer-events: none; }

.blz-hero--flight h1 .w.lift em,
#page-container .blz-hero--flight h1 .w.lift em { background: var(--blz-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* faux dashboard card — glass over the hero media */
.blz-hero--flight .hero-console { flex: 0 0 auto; min-width: 300px; max-width: 400px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--blz-line-inv); border-radius: var(--blz-radius); padding: 20px 22px 8px; box-shadow: var(--blz-shadow); font-size: 13.5px; }
.blz-hero--flight .hero-console .hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.blz-hero--flight .hero-console .hdr b { font-size: 15px; font-weight: 700; color: var(--blz-on-dark-strong); }
.blz-hero--flight .hero-console .hdr span { font-size: 11px; color: var(--blz-on-dark-soft); letter-spacing: .12em; text-transform: uppercase; }
.blz-hero--flight .hero-console .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.blz-hero--flight .hero-console .pill { font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 5px 12px; border-radius: 20px; background: rgba(255, 255, 255, .12); color: var(--blz-on-dark-strong); }
.blz-hero--flight .hero-console .pill.ok { color: var(--blz-accent-3); background: rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--blz-accent-3) 16%, transparent); }
.blz-hero--flight .hero-console .pill.brand { color: var(--blz-accent-2); background: rgba(255, 255, 255, .1); background: color-mix(in srgb, var(--blz-accent-2) 18%, transparent); }
.blz-hero--flight .hero-console .pill.info { color: var(--blz-on-dark); background: rgba(255, 255, 255, .12); }
.blz-hero--flight .hero-console .dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; animation: blzBlink 1.6s ease-in-out infinite; }
@keyframes blzBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.blz-hero--flight .hero-console .row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); color: var(--blz-on-dark-soft); }
.blz-hero--flight .hero-console .row:last-child { border-bottom: none; }
.blz-hero--flight .hero-console .row b { color: var(--blz-on-dark-strong); font-weight: 600; }

/* -- scrub: poster hero until JS + the scrolly-video library add .is-scrub - */
.blz-hero--scrub { display: block; overflow: clip; }
.blz-hero--scrub .hero-pin { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.blz-hero--scrub.is-scrub { min-height: 200vh; }
.blz-hero--scrub.is-scrub .hero-pin { position: sticky; top: 0; height: 100svh; min-height: 0; }
@media (max-width: 600px) { .blz-hero--scrub.is-scrub { min-height: 175vh; } }

.blz-hero--scrub .hero-scrub-media { position: absolute; inset: 0; }
.blz-hero--scrub .hero-scrub-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.blz-hero--scrub .hero-scrub-sv { position: absolute; inset: 0; overflow: hidden; }
.blz-hero--scrub .hero-scrub-sv canvas, .blz-hero--scrub .hero-scrub-sv video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.blz-hero--scrub .hero-scrub-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blz-on-dark-soft); white-space: nowrap; }

/* -- collage: interior-height dark hero, copy left, shots stacked right ---- */
.blz-hero--collage { min-height: 74dvh; }
.blz-hero--collage .hero-in { padding-top: 160px; padding-bottom: 58px; }
.blz-hero--collage h1 { max-width: 15ch; font-size: clamp(40px, 6.2vw, 88px); }
.blz-hero--collage .hero-sub { max-width: 42ch; }
/* left-heavy wash keeps the copy readable over the shots */
.blz-hero--collage .hero-veil { z-index: 1; background: linear-gradient(90deg, rgba(24, 27, 19, .96) 0%, rgba(24, 27, 19, .82) 38%, rgba(24, 27, 19, .42) 72%, rgba(24, 27, 19, .62) 100%), linear-gradient(0deg, rgba(24, 27, 19, .92), transparent 55%); }
.blz-hero--collage .hero-veil::after { content: none; }
.blz-hero--collage .hero-grain { z-index: 1; }
.blz-hero--collage .hero-shots { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.blz-hero--collage .shot { position: absolute; width: 30vw; max-width: 420px; border-radius: var(--blz-radius-sm); overflow: hidden; border: 1px solid var(--blz-line-inv); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); background: var(--blz-dark-bg); will-change: transform; }
.blz-hero--collage .shot img { display: block; width: 100%; height: auto; }
.blz-hero--collage .shot.s1 { right: 4%; top: 27%; z-index: 2; transform: rotate(-4deg); }
.blz-hero--collage .shot.s2 { right: 25%; top: 7%; z-index: 1; transform: rotate(5deg); }
.blz-hero--collage .shot.s3 { right: 17%; bottom: 7%; z-index: 3; transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) {
	.blz-hero--collage .shot.s1 { animation: blzFloat1 16s ease-in-out infinite; }
	.blz-hero--collage .shot.s2 { animation: blzFloat2 13s ease-in-out infinite .4s; }
	.blz-hero--collage .shot.s3 { animation: blzFloat3 18s ease-in-out infinite .9s; }
}
@keyframes blzFloat1 { 0%, 100% { transform: rotate(-4deg) translate(0, 0); } 50% { transform: rotate(-2.5deg) translate(-12px, -28px); } }
@keyframes blzFloat2 { 0%, 100% { transform: rotate(5deg) translate(0, 0); } 50% { transform: rotate(6.5deg) translate(10px, -32px); } }
@keyframes blzFloat3 { 0%, 100% { transform: rotate(2deg) translate(0, 0); } 50% { transform: rotate(.5deg) translate(-8px, -24px); } }

@media (max-width: 900px) {
	/* console drops below the copy (hero-foot already stacks); shots stack under it */
	.blz-hero--flight .hero-console { min-width: 0; width: 100%; max-width: 460px; }
	.blz-hero--collage { flex-direction: column; justify-content: flex-end; }
	.blz-hero--collage .hero-shots { position: relative; inset: auto; order: 2; z-index: 2; display: flex; gap: 14px; padding: 0 22px 34px; overflow: visible; }
	.blz-hero--collage .shot { position: static; width: 33.33%; transform: rotate(0); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.blz-hero--flight .hero-console .dot-live { animation: none; }
	.blz-hero .hero-cue i { animation: none; }
}

/* Optional hero eyebrow (eyebrow field) — sits above the H1 on the media. */
.blz-hero .hero-eyebrow { display: inline-flex; margin-bottom: 22px; color: var(--blz-on-dark-soft); }
.blz-hero .hero-eyebrow::before { background: var(--blz-accent-3); }