/* in_place.css — the lit states and loops for the site's own pictures (WI-WEB-28). Every timing × --tempo (1 when the
   page has none); the accent is --mxi-accent, set from the person's look. Transform and opacity, box-shadow on the lit row. */
:root { --mxi-t: var(--tempo, 1); }   /* for the whole page: a kept site's own parts move too (WI-WEB-37), not only its pictures */
[data-mx-move] .mxi-on { position: relative; z-index: 1; transform: translateY(-2px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mxi-accent, #2563eb) 55%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--mxi-accent, #2563eb) 60%, transparent);
  transition: transform calc(220ms * var(--mxi-t)) ease, box-shadow calc(220ms * var(--mxi-t)) ease; border-radius: 10px; }
[data-mx-move] > *, [data-mx-move] * { transition: transform calc(220ms * var(--mxi-t)) ease, box-shadow calc(220ms * var(--mxi-t)) ease; }
.mxi-float { animation: mxi-float calc(3.2s * var(--mxi-t)) ease-in-out infinite alternate; }
@keyframes mxi-float { from { transform: translateY(-6px) rotate(-0.4deg); } to { transform: translateY(6px) rotate(0.4deg); } }
.mxi-shine { position: relative; overflow: hidden; }
.mxi-shine::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%); animation: mxi-shine calc(2.6s * var(--mxi-t)) ease-in-out infinite; }
@keyframes mxi-shine { 0%, 20% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .mxi-float, .mxi-shine::after { animation: none; } }

/* ---------- WI-WEB-37: the hero card, and a kept site's own parts ---------- */
.mxi-enrich { --rx: 0deg; --ry: 0deg; position: relative; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform calc(400ms * var(--mxi-t)) ease-out; }
.mxi-scan { position: relative; overflow: hidden; }   /* the light stays inside its block */
.mxi-scan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--mxi-accent, #2563eb) 18%, transparent) 45%, rgba(255,255,255,.6) 50%, transparent 70%);
  animation: mxi-scan calc(700ms * var(--mxi-t)) ease-out forwards; }
@keyframes mxi-scan { from { transform: translateX(-100%); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.mxi-cursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: transform calc(450ms * var(--mxi-t)) cubic-bezier(.3,.7,.2,1), opacity calc(200ms * var(--mxi-t)) ease; }
.mxi-cursor.mxi-shown { opacity: 1; }
.mxi-ripple { position: absolute; z-index: 19; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none;
  background: color-mix(in srgb, var(--mxi-accent, #2563eb) 40%, transparent); animation: mxi-ripple calc(560ms * var(--mxi-t)) ease-out forwards; }
@keyframes mxi-ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* the step row: a line that fills across (or down) and a pulse that runs along it */
/* the track: grey and dotted until the blue fills it, following the scroll (the owner, 2026-10-07) */
.mxi-tl { position: absolute; z-index: 1; pointer-events: none; display: block;
  background: repeating-linear-gradient(90deg, #c3c9d2 0 6px, transparent 6px 12px); }
.mxi-tl.mxi-down { background: repeating-linear-gradient(180deg, #c3c9d2 0 6px, transparent 6px 12px); }
.mxi-tl > b { position: absolute; inset: 0; display: block; border-radius: 2px; background: var(--mxi-accent, #2563eb); transform-origin: 0 0; transform: scaleX(0);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mxi-accent, #2563eb) 60%, transparent); transition: transform calc(120ms * var(--mxi-t)) linear; }
.mxi-tl.mxi-down > b { transform: scaleY(0); }
.mxi-tl-dot { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: var(--mxi-accent, #2563eb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mxi-accent, #2563eb) 25%, transparent); }
.mxi-tl.mxi-down .mxi-tl-dot { left: -4px; top: -5px; }
.mxi-tl-dot.mxi-run { animation: mxi-run calc(1400ms * var(--mxi-t)) ease-in-out; }
.mxi-tl.mxi-down .mxi-tl-dot.mxi-run { animation-name: mxi-run-down; }
@keyframes mxi-run { 0% { opacity: 0; transform: translateX(0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--len)); } }
@keyframes mxi-run-down { 0% { opacity: 0; transform: translateY(0); } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--len)); } }
[data-mx-step] { transition: opacity calc(300ms * var(--mxi-t)) ease, transform calc(300ms * var(--mxi-t)) ease; }
/* grey until the blue reaches it — the box itself stays solid, so the line never shows through it; only its contents fade */
[data-mx-step].mxi-step-wait > :first-child { filter: grayscale(1); }
[data-mx-step].mxi-step-wait > :first-child > * { opacity: .5; }
[data-mx-step] > :first-child { transition: filter calc(300ms * var(--mxi-t)) ease, opacity calc(300ms * var(--mxi-t)) ease, border-color calc(300ms * var(--mxi-t)) ease, box-shadow calc(300ms * var(--mxi-t)) ease; }
[data-mx-step].mxi-step-wait > :not(:first-child) { opacity: .65; }
[data-mx-step] > :not(:first-child), [data-mx-step] > :first-child > * { transition: opacity calc(300ms * var(--mxi-t)) ease; }
[data-mx-step].mxi-step-on > :first-child { border-color: var(--mxi-accent, #2563eb) !important; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--mxi-accent, #2563eb) 70%, transparent); }

/* a pair of cards comes in from the sides */
.mxi-from-left, .mxi-from-right { transition: transform calc(650ms * var(--mxi-t)) cubic-bezier(.2,.8,.2,1), opacity calc(500ms * var(--mxi-t)) ease; }
.mxi-from-left:not(.mxi-in) { transform: translateX(-36px); opacity: .25; }
.mxi-from-right:not(.mxi-in) { transform: translateX(36px); opacity: .25; }
/* the offset must never widen the page (akamai's live check, 2026-10-07: 402px wide at 390); on a narrow screen the
   cards are stacked, so they rise in from below instead */
[data-mx-pair] { overflow-x: clip; }
@media (max-width: 760px) { .mxi-from-left:not(.mxi-in), .mxi-from-right:not(.mxi-in) { transform: translateY(24px); } }

/* a tick list ticks itself off */
[data-mx-ticks] > * { transition: opacity calc(260ms * var(--mxi-t)) ease, transform calc(260ms * var(--mxi-t)) ease; }
[data-mx-ticks] > .mxi-tick-wait { opacity: .3; transform: translateY(6px); }

/* a bar grows to its own width (transform only) */
[data-mx-bar] { transform-origin: 0 50%; transition: transform calc(1000ms * var(--mxi-t)) cubic-bezier(.2,.8,.2,1); }
[data-mx-bar].mxi-bar-wait { transform: scaleX(0); }

/* an arrow steps forward now and then */
.mxi-nudge { animation: mxi-nudge calc(2800ms * var(--mxi-t)) ease-in-out infinite; }
@keyframes mxi-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .mxi-enrich { transform: none; } .mxi-scan::after, .mxi-tl-dot, .mxi-nudge { animation: none; }
  .mxi-from-left, .mxi-from-right, [data-mx-ticks] > *, [data-mx-bar], [data-mx-step] { transform: none !important; opacity: 1 !important; transition: none; }
  .mxi-tl > b { transform: none; transition: none; }
}

/* the hero around its product card (WI-WEB-37) — decorative, behind and around; clipped so nothing widens the page */
.mxi-hero { position: relative; isolation: isolate; overflow-x: clip; }
.mxi-hero-ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --px: 0; --py: 0; }
.mxi-hg-dots { position: absolute; inset: -10%; opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--mxi-accent, #2563eb) 45%, transparent) 1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 70%);
  transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px)); transition: transform calc(600ms * var(--mxi-t)) ease-out; }
.mxi-hg-glow { position: absolute; width: 46vw; max-width: 720px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle, color-mix(in srgb, var(--mxi-accent, #2563eb) 55%, transparent), transparent 68%);
  animation: mxi-hg-drift calc(12s * var(--mxi-t)) ease-in-out infinite alternate; }
.mxi-hg-glow.a { right: -6vw; top: -12%; }
.mxi-hg-glow.b { right: 18vw; bottom: -30%; opacity: .35; background: radial-gradient(circle, color-mix(in srgb, #8b5cf6 50%, transparent), transparent 68%);
  animation-duration: calc(15s * var(--mxi-t)); animation-direction: alternate-reverse; }
@keyframes mxi-hg-drift { from { translate: -3vw -2vw; scale: .92; } to { translate: 4vw 3vw; scale: 1.1; } }
.mxi-signals { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }   /* under the words and the card */
.mxi-sig { fill: none; stroke: color-mix(in srgb, var(--mxi-accent, #2563eb) 35%, transparent); stroke-width: 1.4; stroke-dasharray: 3 7;
  animation: mxi-sig-flow calc(1.6s * var(--mxi-t)) linear infinite; }
@keyframes mxi-sig-flow { to { stroke-dashoffset: -20; } }
.mxi-sig-dot { fill: var(--mxi-accent, #2563eb); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mxi-accent, #2563eb) 80%, transparent)); }
.mxi-ghost-card { position: absolute; inset: 0; border-radius: 16px; background: var(--mxi-card, #fff); border: 1px solid var(--mxi-card-line, #e4e6eb); pointer-events: none;
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35); }
.mxi-ghost-card.one { transform: translate(14px, 14px) rotate(2.2deg); opacity: .75; }
.mxi-ghost-card.two { transform: translate(26px, 26px) rotate(4.4deg); opacity: .45; }
.mxi-breathe { animation: mxi-breathe calc(4.5s * var(--mxi-t)) ease-in-out infinite; position: relative; z-index: 1; }
@keyframes mxi-breathe { 0%, 100% { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .25), 0 0 0 0 color-mix(in srgb, var(--mxi-accent, #2563eb) 0%, transparent); }
  50% { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .25), 0 0 46px 2px color-mix(in srgb, var(--mxi-accent, #2563eb) 28%, transparent); } }
.mxi-bob { animation: mxi-bob calc(4s * var(--mxi-t)) ease-in-out infinite; animation-delay: var(--bob-delay, 0s); z-index: 3; }
@keyframes mxi-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.mxi-bob.mxi-lit { box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 45%, transparent), 0 12px 30px -10px rgba(34, 197, 94, .55) !important; transition: box-shadow .3s; }
@media (max-width: 760px) { .mxi-ghost-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .mxi-hg-glow, .mxi-sig, .mxi-breathe, .mxi-bob { animation: none; } .mxi-sig-dot { display: none; } }