/* mm-motion.css: reusable motion for MadeMirror pages (pairs with mm-motion.js).
   Transform, opacity and filter only, so nothing shifts layout. Content stays visible without JS:
   the hidden "before" states apply only once mm-motion.js (.mm-motion) or the page script (.js) is running.
   Unlayered on purpose: it refines the page layers' reveal timing, and restates its own reduced-motion rules. */

/* ---------------- reveal: fade and blur up, staggered by --reveal-i ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv, .mm-motion [data-reveal] {
    transition: opacity 720ms var(--mm-ease-expo, cubic-bezier(.16,1,.3,1)), transform 720ms var(--mm-ease-expo, cubic-bezier(.16,1,.3,1)), filter 720ms var(--mm-ease-expo, cubic-bezier(.16,1,.3,1));
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
  }
  .js .rv:not(.in), .mm-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 22px, 0); }
  /* blur only where it is cheap: text and simple blocks, never a block holding a canvas */
  .js .rv:not(.in):not(:has(canvas)), .mm-motion [data-reveal]:not(.is-in):not(:has(canvas)) { filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-motion [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------------- count-up: digits keep their width while counting ---------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------------- marquee ---------------- */
.mm-marquee {
  --mq-gap: 30px;
  position: relative; display: flex; align-items: center; overflow: hidden; height: 46px;
  background: var(--mm-bg, #0A0A0C); color: var(--mm-fg-2, #A9A9B4);
  border-block: 1px solid var(--mm-hair-1, rgb(237 237 241 / .08));
}
.mm-marquee__track { display: flex; flex: none; width: max-content; }
.mm-marquee__list {
  display: flex; flex: none; align-items: center; gap: var(--mq-gap); margin: 0; padding: 0 var(--mq-gap) 0 0; list-style: none;
  white-space: nowrap; font: 500 11.5px/1 var(--mm-f-mono, ui-monospace, monospace); letter-spacing: .12em; text-transform: uppercase;
}
.mm-marquee__list li { display: inline-flex; align-items: center; gap: 10px; }
.mm-marquee__list:first-child li:first-child { padding-left: var(--mm-gutter, 16px); }
.mm-marquee__list i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, currentColor); box-shadow: 0 0 0 1px rgb(237 237 241 / .14); }
.mm-marquee__list b { font-weight: 500; color: var(--mm-fg-1, #EDEDF1); }
/* soft ends, drawn over the moving text and under the pause button */
.mm-marquee::before, .mm-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 40px; pointer-events: none; }
.mm-marquee::before { left: 0; background: linear-gradient(90deg, var(--mm-bg, #0A0A0C), transparent); }
.mm-marquee::after { right: 44px; background: linear-gradient(270deg, var(--mm-bg, #0A0A0C), transparent); }
.mm-marquee:not(.is-running)::after { right: 0; }
.mm-marquee.is-running .mm-marquee__list li:first-child { padding-left: 0; }
.mm-marquee.is-running .mm-marquee__track { animation: mm-marquee var(--marquee-dur, 60s) linear infinite; will-change: transform; }
.mm-marquee.is-paused .mm-marquee__track, .mm-marquee.is-offscreen .mm-marquee__track, .mm-marquee:focus-within .mm-marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .mm-marquee:hover .mm-marquee__track { animation-play-state: paused; } }
@keyframes mm-marquee { to { transform: translate3d(-50%, 0, 0); } }

.mm-marquee__toggle {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: 44px; padding: 0;
  border: 0; border-left: 1px solid var(--mm-hair-1, rgb(237 237 241 / .08)); background: var(--mm-bg, #0A0A0C); color: var(--mm-fg-2, #A9A9B4); cursor: pointer;
}
.mm-marquee__toggle::before { content: ""; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; box-sizing: border-box; }
.mm-marquee__toggle[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 9px solid currentColor; border-block: 5.5px solid transparent; margin-left: 3px; }
.mm-marquee__toggle:focus-visible { outline: 2px solid var(--mm-focus, #EDEDF1); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .mm-marquee__toggle:hover { color: var(--mm-fg-1, #EDEDF1); } }
/* reduced motion: a still strip the visitor can swipe or scroll sideways */
.mm-marquee.is-static { overflow-x: auto; scrollbar-width: none; }
.mm-marquee.is-static::-webkit-scrollbar { display: none; }
.mm-marquee.is-static::after { display: none; }
@media (prefers-reduced-motion: reduce) { .mm-marquee__track { animation: none !important; } }

/* ---------------- hero face intro canvas ---------------- */
.mm-dots { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .mm-dots { display: none; } }
@media (forced-colors: active) { .mm-dots { display: none; } .mm-marquee__toggle { border: 1px solid ButtonText; } }