/* LekkerResults site motion — shipped as motion/motion.css with motion/motion.js; the portal's
   Motion tab preview uses the same text. Every rule is scoped to [data-lr-motion], which only the
   motion script sets, so without the script this file changes nothing. */

/* Subtle still has to read as ITS style, not as a fade (Tomek, 2026-10-05: every style looked like Fade). */
[data-lr-motion] {
  --lr-d: 26px; --lr-t: .75s; --lr-ease: cubic-bezier(.2, .7, .2, 1);
  --lr-z: .86; --lr-pz: .7; --lr-pzh: .92; --lr-rx: 55deg; --lr-blur: 12px;
}
[data-lr-motion][data-lr-strength="lively"] {
  --lr-d: 48px; --lr-t: .9s; --lr-ease: cubic-bezier(.3, 1.35, .5, 1);
  --lr-z: .75; --lr-pz: .5; --lr-pzh: .85; --lr-rx: 80deg; --lr-blur: 18px;
}
[data-lr-motion].lr-reset, [data-lr-motion].lr-reset * { transition: none !important; animation: none !important; }

/* ── how things appear ── */
[data-lr-motion] .lr-part {
  transition: opacity var(--lr-t) ease, transform var(--lr-t) var(--lr-ease), filter var(--lr-t) ease;
  transition-delay: var(--lr-delay, 0s);
}
[data-lr-motion][data-lr-appear="rise"] .lr-part:not(.lr-in) { opacity: 0; transform: translateY(var(--lr-d)); }
[data-lr-motion][data-lr-appear="slide"] .lr-part:not(.lr-in) { opacity: 0; transform: translateX(calc(var(--lr-d) * -1.4)); }
[data-lr-motion][data-lr-appear="slide"] .lr-part[data-lr-side="right"]:not(.lr-in) { transform: translateX(calc(var(--lr-d) * 1.4)); }
[data-lr-motion][data-lr-appear="focus"] .lr-part:not(.lr-in) { opacity: 0; filter: blur(var(--lr-blur)); transform: scale(.97); }
[data-lr-motion][data-lr-appear="fade"] .lr-part:not(.lr-in) { opacity: 0; }
[data-lr-motion][data-lr-appear="zoom"] .lr-part:not(.lr-in) { opacity: 0; transform: scale(var(--lr-z)); }
[data-lr-motion][data-lr-appear="pop"] .lr-part { transition-timing-function: ease, cubic-bezier(.3, 1.7, .5, 1), ease; }
[data-lr-motion][data-lr-appear="pop"] .lr-part:not(.lr-in) { opacity: 0; transform: scale(var(--lr-pzh)); }
[data-lr-motion][data-lr-appear="pop"] .lr-item:not(.lr-in) { transform: scale(var(--lr-pz)); }
[data-lr-motion][data-lr-appear="flip"] .lr-part { transform-origin: 50% 0; }
[data-lr-motion][data-lr-appear="flip"] .lr-part:not(.lr-in) { opacity: 0; transform: perspective(600px) rotateX(var(--lr-rx)); }
[data-lr-motion][data-lr-appear="still"] .lr-part { transition: none; }

/* THE TOP HEADING IS NEVER HIDDEN: it starts readable and settles; never blurred, never clipped. */
[data-lr-motion] .lr-hero:not(.lr-in) { filter: none !important; visibility: visible !important; clip-path: none !important; }
/* a site that moves starts the heading faint and lets it settle; a still site shows it whole from the first moment */
[data-lr-motion]:not([data-lr-appear="still"]) .lr-hero:not(.lr-in) { opacity: .4 !important; }
[data-lr-motion][data-lr-appear="still"] .lr-hero { opacity: 1 !important; }
[data-lr-motion] .lr-hero { filter: none !important; }

/* Icons in a chip or card arrive with their card, a beat later. */
[data-lr-motion] .lr-item .lr-icon {
  transition: opacity .5s ease, transform .6s cubic-bezier(.3, 1.5, .5, 1);
  transition-delay: calc(var(--lr-delay, 0s) + .18s);
}
[data-lr-motion] .lr-item:not(.lr-in) .lr-icon { opacity: 0; transform: scale(.6); }
[data-lr-motion][data-lr-appear="still"] .lr-icon { transition: none; opacity: 1; transform: none; }

/* Figures keep their width while they count. */
[data-lr-motion] .lr-num { font-variant-numeric: tabular-nums; }

/* ── the highlighted words ── */
[data-lr-motion] .lr-has-hl { position: relative; isolation: isolate; }
[data-lr-motion] .lr-hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-lr-motion] .lr-w { display: inline-block; transition: color .35s ease var(--lr-wd, 0s); }
[data-lr-motion] .lr-marks { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
[data-lr-motion] .lr-marks.lr-k-marker, [data-lr-motion] .lr-marks.lr-k-brush, [data-lr-motion] .lr-marks.lr-k-block { z-index: -1; }
[data-lr-motion] .lr-marks path {
  fill: none; stroke: var(--lr-motion-second, currentColor); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
[data-lr-motion] .lr-in > .lr-marks path { stroke-dashoffset: 0; }
[data-lr-motion] .lr-k-swoosh path { stroke-width: 3; }
[data-lr-motion] .lr-k-scribble path { stroke-width: 2.2; }
[data-lr-motion] .lr-k-pen path { stroke-width: 2.6; }
[data-lr-motion] .lr-k-ring path { stroke-width: 3.6; }
[data-lr-motion] .lr-k-brush path { stroke-width: var(--lr-bw, 18px); stroke: color-mix(in srgb, var(--lr-motion-second, currentColor) 38%, transparent); }
[data-lr-motion] .lr-k-marker path { stroke-width: var(--lr-bw, 16px); stroke-linecap: butt; stroke: color-mix(in srgb, var(--lr-motion-second, currentColor) 42%, transparent); }
[data-lr-motion] .lr-k-underline path { stroke-width: var(--lr-bw, 2px); stroke-linecap: butt; }
[data-lr-motion] .lr-k-block path { stroke-width: var(--lr-bw, 40px); stroke-linecap: butt; stroke: var(--lr-motion-second, currentColor); }

/* colour change: the whole phrase turns at once, a soft fade, when the highlight's timeline starts */
[data-lr-motion][data-lr-hl="change"] .lr-w { transition: color .8s ease var(--lr-hl-start, .45s); }
[data-lr-motion][data-lr-hl="change"] .lr-in .lr-hl .lr-w,
[data-lr-motion][data-lr-hl="colour"] .lr-in .lr-hl .lr-w,
[data-lr-motion][data-lr-hl="italic"] .lr-in .lr-hl .lr-w { color: var(--lr-motion-second, currentColor); }
[data-lr-motion][data-lr-hl="italic"] .lr-hl { font-style: italic; }
[data-lr-motion][data-lr-hl="sweep"] .lr-in .lr-hl .lr-w { color: var(--lr-wc, var(--lr-motion-second, currentColor)); }
/* colour block (in the second colour, like every highlight): the block's ink is wiped across each word exactly as
   the block passes it */
[data-lr-motion][data-lr-hl="block"] .lr-hl .lr-w {
  color: transparent;
  background: linear-gradient(90deg, var(--lr-block-ink, #fff) 50%, var(--lr-ink, #222) 50%) no-repeat 100% 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position var(--lr-wdur, .2s) linear var(--lr-ws, 0s);
}
[data-lr-motion][data-lr-hl="block"] .lr-in .lr-hl .lr-w { background-position: 0 0; }

/* the highlight's own switch: "Already drawn" = no drawing motion */
[data-lr-motion][data-lr-hldraw="off"] .lr-w,
[data-lr-motion][data-lr-hldraw="off"] .lr-marks path { transition: none !important; }

/* finish with a pulse: one swell after the highlight lands, never a loop */
[data-lr-motion][data-lr-pulse="on"]:not([data-lr-hl="none"]) .lr-in .lr-hl .lr-w { animation: lr-pulse .75s ease-in-out var(--lr-pulse-at, 1.5s) 1; }
[data-lr-motion][data-lr-pulse="on"] .lr-in > .lr-marks { animation: lr-glow .75s ease-in-out var(--lr-pulse-at, 1.5s) 1; }
@keyframes lr-pulse { 0%, 100% { transform: none; } 45% { transform: scale(1.06); } }
@keyframes lr-glow { 0%, 100% { opacity: 1; } 45% { opacity: .65; } }

/* ── hero focus: only the heading, up to its highlighted words; then those words and the rest of the heading at once;
   then the highlight look; then the page. The script sets data-lr-fs only while it plays (wait → heading → words →
   look), so a page without the script, or after the intro, is untouched. ── */
[data-lr-motion][data-lr-fs] .lr-fhide { opacity: 0 !important; visibility: hidden !important; }
[data-lr-motion] .lr-fhide:not(.lr-part) { transition: opacity .6s ease; }
[data-lr-motion][data-lr-fs] .lr-hero.lr-hero { opacity: 1 !important; filter: none !important; transform: none !important; transition: opacity var(--lr-fs-in, .9s) ease !important; }
/* the empty page is empty at once: nothing fades OUT on the way in */
[data-lr-motion][data-lr-fs="wait"] .lr-hero.lr-hero { opacity: 0 !important; transition: none !important; }
[data-lr-motion][data-lr-fs="words"] .lr-hl, [data-lr-motion][data-lr-fs="words"] .lr-after { transition: opacity .5s ease; }
[data-lr-motion][data-lr-fs="wait"] .lr-hl, [data-lr-motion][data-lr-fs="wait"] .lr-after,
[data-lr-motion][data-lr-fs="heading"] .lr-hl, [data-lr-motion][data-lr-fs="heading"] .lr-after { opacity: 0; }

/* ── a visitor who asked for less motion: the finished page, nothing moving ── */
[data-lr-motion][data-lr-calm] .lr-part, [data-lr-motion][data-lr-calm] .lr-icon,
[data-lr-motion][data-lr-calm] .lr-w, [data-lr-motion][data-lr-calm] .lr-marks, [data-lr-motion][data-lr-calm] .lr-marks path {
  transition: none !important; animation: none !important;
}
[data-lr-motion][data-lr-calm] .lr-part, [data-lr-motion][data-lr-calm] .lr-icon { opacity: 1 !important; transform: none !important; filter: none !important; }
[data-lr-motion][data-lr-calm] .lr-marks path { stroke-dashoffset: 0; }