/*! @egenverk/design web part motion 1.9.0+web-0.1 · generated by web/build.mjs from web/tokens, web/registry and web/src. Do not edit. */
/* Brand motion (1.6.0, brand motion gate 1): logo reveal, glyph signatures, hover and press, scroll entrance, and the
   stacked-bar loader drawn as the mark's own geometry. Pure CSS on inline SVG (AnimatedLogo, Glyph animation): no JS
   plays anything. Transform and opacity only; the static markup is the end state.
   Reduced motion (brand rule "bara toning"): only opacity changes. Layer 1 is opacity only and applies always, layer 2 adds
   movement under no-preference, layer 3 replaces every moving signature with a fade under reduce.
   Triggers: an ancestor .egv-play on :hover / :focus-visible (or .is-playing, which sets --egv-on), data-motion~="reveal" (once, on load),
   data-motion~="enter" (scroll-driven). */

/* opacity-only keyframes (allowed under reduce) */
@keyframes egvm-in { from { opacity: 0; } }
@keyframes egvm-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes egvm-pulse { 0%, 100% { opacity: 1; } 40% { opacity: .2; } }
@keyframes egvm-dim { 0%, 100% { opacity: 1; } 45% { opacity: .3; } }
@keyframes egvm-out-in { 0%, 100% { opacity: 1; } 40%, 45% { opacity: 0; } }
/* moving keyframes (only used under no-preference) */
@keyframes egvm-rise { from { opacity: 0; transform: translate(-8px, 16px); } }
@keyframes egvm-type-cursor { from { transform: translateX(-177.4px); } to { transform: none; } }

/* ================= Layer 1 · opacity only, both preferences ================= */

/* Logo reveal (once, on load, only where the markup asks for it): bars fade in 60 ms apart, the wordmark types in
   one letter per stagger, the trailing marker blinks twice and stays. Layer 2 adds the rise and the riding caret. */
.egv-mark[data-motion~="reveal"] :is(.b1, .b2, .b3) { animation: egvm-in var(--egv-d5) var(--egv-ease) both; }
.egv-mark[data-motion~="reveal"] .b2 { animation-delay: var(--egv-stagger); }
.egv-mark[data-motion~="reveal"] .b3 { animation-delay: calc(2 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path { animation: egvm-in var(--egv-d1) linear both; }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(1) { animation-delay: calc(4 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(2) { animation-delay: calc(5 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(3) { animation-delay: calc(6 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(4) { animation-delay: calc(7 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(5) { animation-delay: calc(8 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(6) { animation-delay: calc(9 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(7) { animation-delay: calc(10 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .wm path:nth-child(8) { animation-delay: calc(11 * var(--egv-stagger)); }
.egv-mark[data-motion~="reveal"] .cur {
	animation:
		egvm-in var(--egv-d3) var(--egv-ease) calc(11 * var(--egv-stagger)) both,
		egvm-blink var(--egv-blink) linear calc(12 * var(--egv-stagger)) 2;
}
.egv-mark.symbol[data-motion~="reveal"] .b2 {
	animation: egvm-in var(--egv-d5) var(--egv-ease) var(--egv-stagger) both,
		egvm-blink var(--egv-blink) linear var(--egv-d5) 1;
}

/* Signatures that are fades by nature (same under both preferences).
   The trigger is stated once: it defines --egv-on (empty value); every signature starts its shorthand with var(--egv-on),
   which is invalid at computed-value time while the trigger is off, so the animation is none at rest and restarts on each hover. */
.egv-play:is(:hover, :focus-visible), .is-playing { --egv-on: ; }
svg.egv-glyph[data-glyph="egenverk"] .m1 { animation: var(--egv-on) egvm-blink var(--egv-blink) linear 2; }
svg.egv-glyph[data-glyph="snippets"] .m1 { animation: var(--egv-on) egvm-in var(--egv-d1) linear calc(2 * var(--egv-stagger)) both; }
svg.egv-glyph[data-glyph="snippets"] .m2 { animation: var(--egv-on) egvm-in var(--egv-d1) linear calc(4 * var(--egv-stagger)) both; }
svg.egv-glyph[data-glyph="snippets"] .m3 { animation: var(--egv-on) egvm-blink var(--egv-blink) linear calc(6 * var(--egv-stagger)) 2; }
/* Shipping: small, medium, large parcel arrive one after the other */
svg.egv-glyph[data-glyph="shipping"] .gm { animation: var(--egv-on) egvm-in var(--egv-d4) var(--egv-ease) both; }
svg.egv-glyph[data-glyph="shipping"] .m2 { animation-delay: calc(3 * var(--egv-stagger)); }
svg.egv-glyph[data-glyph="shipping"] .m3 { animation-delay: calc(6 * var(--egv-stagger)); }
/* Customer Hub (and Claims): the queue is handled case by case */
svg.egv-glyph[data-glyph="customer-hub"] .gm { animation: var(--egv-on) egvm-dim var(--egv-d5) var(--egv-ease-in-out) both; }
svg.egv-glyph[data-glyph="customer-hub"] .m2 { animation-delay: calc(2 * var(--egv-stagger)); }
svg.egv-glyph[data-glyph="customer-hub"] .m3 { animation-delay: calc(4 * var(--egv-stagger)); }
svg.egv-glyph[data-glyph="customer-hub"] .m4 { animation-delay: calc(6 * var(--egv-stagger)); }

/* ================= Layer 2 · movement, prefers-reduced-motion: no-preference ================= */
@media (prefers-reduced-motion: no-preference) {
	/* reveal: the bars rise along the slope; the trailing marker rides the caret while the word is typed */
	.egv-mark[data-motion~="reveal"] :is(.b1, .b2, .b3) { animation-name: egvm-rise; }
	.egv-mark[data-motion~="reveal"] .cur {
		animation:
			egvm-in var(--egv-d3) var(--egv-ease) calc(2 * var(--egv-stagger)) both,
			egvm-type-cursor calc(8 * var(--egv-stagger)) steps(8, jump-start) calc(4 * var(--egv-stagger)) both,
			egvm-blink var(--egv-blink) linear calc(12 * var(--egv-stagger)) 2;
	}
	.egv-mark.symbol[data-motion~="reveal"] .b2 {
		animation: egvm-rise var(--egv-d5) var(--egv-ease) var(--egv-stagger) both,
			egvm-blink var(--egv-blink) linear var(--egv-d5) 1;
	}

	/* hover: the marker steps 4 units along its row (brand: arrow +3 px), 140 ms; press .97 for 80 ms.
	   Transitions, so leaving mid-way reverses smoothly. */
	.egv-play :is(.egv-mark .b2, .egv-mark .cur) { transition: transform var(--egv-d2) var(--egv-ease); }
	.egv-play:is(:hover, :focus-visible) :is(.egv-mark .b2, .egv-mark .cur) { transform: translateX(4px); }
	.egv-play :is(.egv-mark, .egv-glyph) { transition: transform var(--egv-d1) var(--egv-ease); }
	.egv-play:active :is(.egv-mark, .egv-glyph) { transform: scale(.97); }

	/* Lagom: the level fills to the brim, drops below, settles at lagom (fill sits at translate(-18) at rest) */
	@keyframes egvm-lagom { 0% { transform: translateX(-18px); } 35% { transform: translateX(0); } 70% { transform: translateX(-23px); } 100% { transform: translateX(-18px); } }
	svg.egv-glyph[data-glyph="lagom"] .gf { animation: var(--egv-on) egvm-lagom var(--egv-d6) var(--egv-ease-in-out) both; }

	/* Babbla: the three typing dots hop in turn */
	@keyframes egvm-hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
	svg.egv-glyph[data-glyph="babbla"] .gm { animation: var(--egv-on) egvm-hop var(--egv-d5) var(--egv-ease-in-out) both; }
	svg.egv-glyph[data-glyph="babbla"] .m2 { animation-delay: calc(2 * var(--egv-stagger)); }
	svg.egv-glyph[data-glyph="babbla"] .m3 { animation-delay: calc(4 * var(--egv-stagger)); }

	/* Shipping: the parcel nudges forward and lands */
	@keyframes egvm-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(5px); } }
	svg.egv-glyph[data-glyph="shipping"] .m3 { animation: var(--egv-on) egvm-in var(--egv-d4) var(--egv-ease) calc(6 * var(--egv-stagger)) both, egvm-nudge var(--egv-d5) var(--egv-ease-in-out) calc(8 * var(--egv-stagger)) both; }

	/* Sluice MCP: the gate lifts along the slope, the flow moves through, the gate closes */
	@keyframes egvm-gate { 0%, 100% { transform: none; opacity: 1; } 30%, 65% { transform: translate(2.5px, -5px); opacity: .35; } }
	@keyframes egvm-flow { 0%, 25%, 100% { transform: none; } 50% { transform: translateX(4px); } }
	svg.egv-glyph[data-glyph="sluice"] .m1 { animation: var(--egv-on) egvm-gate var(--egv-d6) var(--egv-ease-in-out) both; }
	svg.egv-glyph[data-glyph="sluice"] .m2 { animation: var(--egv-on) egvm-flow var(--egv-d6) var(--egv-ease-in-out) both; }

	/* Conversion Relay: the arrow is passed on, out to the right and in again from the left */
	@keyframes egvm-relay {
		0% { transform: none; opacity: 1; animation-timing-function: var(--egv-ease-in); }
		40% { transform: translateX(10px); opacity: 0; }
		40.1% { transform: translateX(-10px); opacity: 0; animation-timing-function: var(--egv-ease); }
		100% { transform: none; opacity: 1; }
	}
	svg.egv-glyph[data-glyph="relay"] .m1 { animation: var(--egv-on) egvm-relay var(--egv-d6) linear both; }

	/* Docs Viewer: the search hit is highlighted again, a sweep from the left inside the row */
	@keyframes egvm-sweep { from { transform: translateX(-48px); } }
	svg.egv-glyph[data-glyph="docs"] .gh { animation: var(--egv-on) egvm-sweep var(--egv-d5) var(--egv-ease) both; }

	/* Mailroom: the envelope goes up and out along the slope and drops back in, delivered */
	@keyframes egvm-post {
		0% { transform: none; opacity: 1; animation-timing-function: var(--egv-ease-in); }
		35% { transform: translate(4px, -8px); opacity: 0; }
		35.1% { transform: translate(-4px, 8px); opacity: 0; animation-timing-function: var(--egv-ease); }
		100% { transform: none; opacity: 1; }
	}
	svg.egv-glyph[data-glyph="mailroom"] .m1 { animation: var(--egv-on) egvm-post var(--egv-d6) linear both; }

	/* Scroll entrance: the bars rise in as the element enters (CSS scroll-driven, no JS) */
	@supports (animation-timeline: view()) {
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gt, .gm, .gu, .b1, .b2, .b3, .wm, .cur) { animation: egvm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gm, .b2, .wm, .cur) { animation-range: entry 15% entry 85%; }
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gu, .b3) { animation-range: entry 30% entry 100%; }
	}
}

/* ================= Layer 3 · reduce: the moving signatures as fades ================= */
@media (prefers-reduced-motion: reduce) {
	svg.egv-glyph[data-glyph="lagom"] .gf { animation: var(--egv-on) egvm-dim var(--egv-d6) var(--egv-ease-in-out) both; }
	svg.egv-glyph[data-glyph="babbla"] .gm { animation: var(--egv-on) egvm-pulse var(--egv-d5) var(--egv-ease-in-out) both; }
	svg.egv-glyph[data-glyph="babbla"] .m2 { animation-delay: calc(2 * var(--egv-stagger)); }
	svg.egv-glyph[data-glyph="babbla"] .m3 { animation-delay: calc(4 * var(--egv-stagger)); }
	svg.egv-glyph[data-glyph="sluice"] .m1 { animation: var(--egv-on) egvm-dim var(--egv-d6) var(--egv-ease-in-out) both; }
	svg.egv-glyph:is([data-glyph="relay"], [data-glyph="mailroom"]) .m1 { animation: var(--egv-on) egvm-out-in var(--egv-d6) var(--egv-ease-in-out) both; }
	svg.egv-glyph[data-glyph="docs"] .gh { animation: var(--egv-on) egvm-in var(--egv-d5) var(--egv-ease) both; }
	@supports (animation-timeline: view()) {
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gt, .gm, .gu, .b1, .b2, .b3, .wm, .cur) { animation: egvm-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gm, .b2, .wm, .cur) { animation-range: entry 15% entry 85%; }
		:is(.egv-glyph, .egv-mark)[data-motion~="enter"] :is(.gu, .b3) { animation-range: entry 30% entry 100%; }
	}
}

/* ---------- 5. Stacked-bar loader, SVG port of brand/egenverk-loader.css ----------
   Same choreography and timing (2.2 s cycle, top bar takes off, marker follows elastically, bottom last,
   in from the left bottom first), drawn as the mark's own geometry. Rects skewed by the brand slope, so the
   marker's stretch keeps the 1:2 slant. Units: 64 grid (the CSS loader's 22 px box × 2.909).
   <svg class="egv-loader-svg" viewBox="0 0 64 64" role="status" aria-label="Laddar"><rect class="l1" …/>…</svg> */
.egv-loader-svg rect { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; transform: skewX(-26.565deg); }
.egv-loader-svg .l2 { fill: var(--egv-accent); transform-origin: 100% 50%; }
.egv-loader-svg .l3 { transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) {
	.egv-loader-svg rect { animation: egvm-load0 var(--egv-loader-cycle) infinite both; }
	.egv-loader-svg .l2 { animation-name: egvm-load1; }
	.egv-loader-svg .l3 { animation-name: egvm-load2; }
}
@media (prefers-reduced-motion: reduce) {
	.egv-loader-svg rect { animation: egvm-load-rm var(--egv-sweep) var(--egv-ease-in-out) infinite alternate; }
}
@keyframes egvm-load-rm { from { opacity: .35; } to { opacity: 1; } }
@keyframes egvm-load0 {
	0% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	5.45% { transform: skewX(-26.565deg) translateX(-8.73px) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.5,0,.75,0); }
	15.45% { transform: skewX(-26.565deg) translateX(29.09px) scaleX(1); opacity: .85; animation-timing-function: linear; }
	20.91% { transform: skewX(-26.565deg) translateX(52.36px) scaleX(1); opacity: 0; }
	20.95%, 51.82% { transform: skewX(-26.565deg) translateX(-52.36px) scaleX(1); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	62.73% { transform: skewX(-26.565deg) translateX(5.82px) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
	68.18%, 100% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; }
}
@keyframes egvm-load1 {
	0%, 7.27% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	12.73% { transform: skewX(-26.565deg) translateX(-5.82px) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.5,0,.75,0); }
	20.45% { transform: skewX(-26.565deg) translateX(23.27px) scaleX(1.35); opacity: .9; animation-timing-function: linear; }
	28.18% { transform: skewX(-26.565deg) translateX(52.36px) scaleX(1.1); opacity: 0; }
	28.23%, 46.36% { transform: skewX(-26.565deg) translateX(-52.36px) scaleX(1.35); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	52.73% { transform: skewX(-26.565deg) translateX(-11.64px) scaleX(1.3); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
	57.27% { transform: skewX(-26.565deg) translateX(8.73px) scaleX(.92); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
	62.73%, 100% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; }
}
@keyframes egvm-load2 {
	0%, 18.18% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	20% { transform: skewX(-26.565deg) translateX(-2.91px) scaleX(1); opacity: 1; animation-timing-function: cubic-bezier(.5,0,.75,0); }
	27.73% { transform: skewX(-26.565deg) translateX(26.18px) scaleX(1.15); opacity: .9; animation-timing-function: linear; }
	35.45% { transform: skewX(-26.565deg) translateX(52.36px) scaleX(1.05); opacity: 0; }
	35.5%, 40.91% { transform: skewX(-26.565deg) translateX(-52.36px) scaleX(1.15); opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
	47.27% { transform: skewX(-26.565deg) translateX(-8.73px) scaleX(1.12); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
	51.82% { transform: skewX(-26.565deg) translateX(5.82px) scaleX(.96); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
	57.27%, 100% { transform: skewX(-26.565deg) translateX(0) scaleX(1); opacity: 1; }
}