/*! @egenverk/design web part hero 1.9.0+web-0.1 · generated by web/build.mjs from web/tokens, web/registry and web/src. Do not edit. */
/* Hero and ambient backgrounds (1.6.0, brand motion gate 3). One family: three layers of slanted bars and the product's
   motif (its glyph's middle row). Tier 1: the inline SVG, the finished picture, what first paint and LCP see (never the
   LCP element). Tier 2: CSS only, the layers drift along the slope with the scroll (scroll-driven, composited: each layer
   is its own <svg>); nothing runs while the page is still. Tier 3 (optional): hero-bg.js draws the same shapes on a canvas
   in a worker, loaded by heroBootScript only when allowed; it fades in over tier 1.
   On the site: tier 3 on product pages only, home keeps tiers 1 + 2; the ambient background is a package asset, off.
   Reduced motion (fade only): no drift; the motifs still fade in once; tier 3 never loads.
   Markup: <section class="hb-host" data-hero-bg="2|3"><HeroBackground/>…</section> */
.hb-host { position: relative; isolation: isolate; }
.hb-bg {
	position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
	contain: strict; content-visibility: auto; contain-intrinsic-size: auto 600px;
	-webkit-mask: var(--hb-mask, linear-gradient(100deg, transparent 0 28%, var(--egv-natt) 62%)); mask: var(--hb-mask, linear-gradient(100deg, transparent 0 28%, var(--egv-natt) 62%));
}
@media (max-width: 48rem) { .hb-bg { --hb-mask: linear-gradient(to bottom, transparent 0 45%, var(--egv-natt) 85%); } }
/* each layer is its own <svg>: an HTML element, so its transform is composited (an SVG <g> would repaint) */
.hb-l { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.hb-l path { fill: var(--egv-ink); }
.hb-l[data-l="1"] path { fill-opacity: var(--egv-hero-a1); }
.hb-l[data-l="2"] path { fill-opacity: var(--egv-hero-a2); }
.hb-l[data-l="3"] path { fill-opacity: var(--egv-hero-a3); }
.hb-l path.a { fill: var(--egv-accent); fill-opacity: var(--egv-hero-accent-alpha); }
.hb-l path.x { fill: var(--egv-faint); }
.hb-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity var(--egv-d6) var(--egv-ease); }
.hb-bg[data-hb-state="live"] .hb-canvas, .hb-bg[data-hb-state="paused"] .hb-canvas, .hb-bg[data-hb-state="settled"] .hb-canvas { opacity: 1; }
.hb-bg[data-hb-state="live"] .hb-l, .hb-bg[data-hb-state="paused"] .hb-l, .hb-bg[data-hb-state="settled"] .hb-l { opacity: 0; transition: opacity var(--egv-d6) var(--egv-ease); }
/* once the canvas has faded in over them (hero-bg.js sets data-hb-cover), the SVG layers stop: nothing animates out of sight */
.hb-bg[data-hb-cover] .hb-l { animation: none; visibility: hidden; }
.hb-toggle { position: absolute; inset: auto var(--egv-s4) var(--egv-s4) auto; z-index: 1; font: 500 12px/1 var(--egv-font-ui); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--egv-line); background: color-mix(in srgb, var(--egv-surface) 85%, transparent); color: var(--egv-muted); cursor: pointer; }
.hb-toggle:focus-visible { outline: 2px solid var(--egv-focus); outline-offset: 2px; }

/* Ambient page background: far layer only, fixed behind everything, drifts with the scroll. */
.hb-ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; contain: strict; }
.hb-ambient .hb-l path { fill-opacity: var(--egv-ambient-alpha); }

/* the product motifs sit in their own layer-3 <svg> (.hb-acc), so their one-time fade is composited too */
@keyframes hb-in { from { opacity: 0; } }
.hb-acc { animation: hb-in var(--egv-d6) var(--egv-ease) var(--egv-d4) both; }

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes hb-drift-1 { to { transform: translate(14px, -28px); } }
		@keyframes hb-drift-2 { to { transform: translate(28px, -56px); } }
		@keyframes hb-drift-3 { to { transform: translate(48px, -96px); } }
		[data-hero-bg] .hb-l, .hb-ambient .hb-l { animation: hb-drift-1 linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
		[data-hero-bg] .hb-l[data-l="2"] { animation-name: hb-drift-2; }
		[data-hero-bg] .hb-l[data-l="3"] { animation-name: hb-drift-3; }
		[data-hero-bg] .hb-l.hb-acc { animation: hb-in var(--egv-d6) var(--egv-ease) var(--egv-d4) both, hb-drift-3 linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 100vh; }
		.hb-ambient .hb-l { animation-range: 0 100%; }
	}
}
@media print { .hb-bg, .hb-ambient, .hb-toggle { display: none; } }