/* Pixels Motion: signature animations (markup: tools/motion-anims.js).
   One colour drives everything: --c (pack colour, or the brand colour picked above the grid).
   Easing: --ma-out for arrivals, --ma-spring for small overshoots. Each scene loops on a 6 s timeline. */

@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

/* --c comes from the grid (pack or picked brand colour). Theme tokens below; [data-ma-theme='dark'] swaps them. */
.ma {
  --surface: #fff;
  --surface-2: #fbfcfd;
  --stage: #f6f7f9;
  --skel: #eef0f3;
  --skel-2: #f3f4f6;
  --skel-3: #e4e7ec;
  --skel-4: #d0d5dd;
  --hair: rgb(16 24 40 / 0.07);
  --chip: #101828;
  --chip-ink: #fff;
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #98a2b3;
  --line: #eaecf0;
  --ok: #12b76a;
  --ok-soft: #ecfdf3;
  --ok-ink: #067647;
  --warn-soft: #fffaeb;
  --c-soft: color-mix(in oklab, var(--c) 12%, var(--surface));
  --c-mid: color-mix(in oklab, var(--c) 35%, var(--surface));
  --glow: color-mix(in oklab, var(--c) 34%, transparent);
  --ma-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ma-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t: 6s;
  position: relative;
  display: grid;
  place-items: center;
  height: 236px;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 55%, color-mix(in oklab, var(--c) 11%, transparent), transparent 70%),
    linear-gradient(180deg, var(--stage), color-mix(in oklab, var(--stage) 94%, var(--c)));
  color: var(--ink);
  font: 500 13px/1.35 var(--font-family, 'Poppins', system-ui, sans-serif);
  isolation: isolate;
  perspective: 900px;
}
[data-ma-theme='dark'] .ma,
.ma[data-ma-theme='dark'] {
  --surface: #161b26;
  --surface-2: #121722;
  --stage: #0b0f17;
  --skel: #232a38;
  --skel-2: #1d2330;
  --skel-3: #2b3343;
  --skel-4: #3a4456;
  --hair: rgb(255 255 255 / 0.08);
  --chip: #f2f4f7;
  --chip-ink: #101828;
  --ink: #f2f4f7;
  --ink-2: #b4bccb;
  --ink-3: #7a8598;
  --line: #2b3343;
  --ok-soft: rgb(18 183 106 / 0.16);
  --ok-ink: #47cd89;
  --warn-soft: rgb(247 144 9 / 0.16);
  --c-soft: color-mix(in oklab, var(--c) 22%, var(--surface));
  --c-mid: color-mix(in oklab, var(--c) 45%, var(--surface));
  --glow: color-mix(in oklab, var(--c) 55%, transparent);
}
/* stage: fine grid fading out from the centre, and a slow brand aurora */
.ma::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(60% 65% at 50% 50%, #000, transparent 75%);
  mask: radial-gradient(60% 65% at 50% 50%, #000, transparent 75%);
}
.ma::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  left: 15%;
  top: 10%;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--glow), transparent 30%, color-mix(in oklab, var(--c) 18%, transparent) 55%, transparent 80%, var(--glow));
  filter: blur(42px);
  opacity: 0.55;
  animation: ma-aurora 14s linear infinite;
}
@keyframes ma-aurora {
  to { transform: rotate(1turn); }
}
/* .ma-s: device frame + pointer tilt; .ma-in: cinematic blur-in / blur-out on every loop */
.ma-s {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--fs, 1));
  translate: 0 var(--fy, 0);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ma-out), translate 0.5s var(--ma-out);
}
.ma-in {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: ma-scene var(--t) var(--ma-out) infinite;
}
@keyframes ma-scene {
  0% { opacity: 0; filter: blur(10px); translate: 0 10px; scale: 0.96; }
  7%, 92% { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
  100% { opacity: 0; filter: blur(8px); translate: 0 -6px; scale: 1.02; }
}
/* a soft light sweep crosses every surface once per loop */
.ma-in::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.55) 50%, transparent 58%);
  mix-blend-mode: soft-light;
  translate: -60% 0;
  animation: ma-sweep var(--t) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes ma-sweep {
  0%, 46% { translate: -60% 0; }
  70%, 100% { translate: 60% 0; }
}
/* floating brand particles */
.ma-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ma-fx i {
  position: absolute;
  left: var(--x);
  bottom: -8px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  filter: blur(var(--b, 0px));
  animation: ma-bubble var(--d) linear infinite;
  animation-delay: var(--w);
}
@keyframes ma-bubble {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: var(--o, 0.35); }
  85% { opacity: var(--o, 0.35); }
  100% { opacity: 0; transform: translateY(-250px); }
}
/* device frames: canvas (default), website, product, mobile */
.ma-dev {
  position: absolute;
  display: none;
  pointer-events: none;
}
[data-ma-frame='web'] .ma-dev,
[data-ma-frame='app'] .ma-dev,
[data-ma-frame='phone'] .ma-dev {
  display: block;
}
[data-ma-frame='web'] .ma,
[data-ma-frame='app'] .ma { --fs: 0.84; --fy: 10px; }
[data-ma-frame='phone'] .ma { --fs: 0.5; --fy: 26px; }
[data-ma-frame='web'] .ma-dev,
[data-ma-frame='app'] .ma-dev {
  inset: 14px 18px -14px;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--hair), 0 20px 40px -24px rgb(16 24 40 / 0.35);
}
[data-ma-frame='web'] .ma-dev::before,
[data-ma-frame='app'] .ma-dev::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 26px;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid var(--hair);
  background:
    radial-gradient(circle, #ff5f57 3.5px, transparent 4px) 12px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #febc2e 3.5px, transparent 4px) 26px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #28c840 3.5px, transparent 4px) 40px 50% / 12px 12px no-repeat,
    var(--surface);
}
[data-ma-frame='web'] .ma-dev::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38%;
  height: 12px;
  translate: -50% 0;
  border-radius: 99px;
  background: var(--skel-2);
}
[data-ma-frame='app'] .ma-dev::after {
  content: '';
  position: absolute;
  top: 26px;
  bottom: 0;
  left: 0;
  width: 54px;
  border-right: 1px solid var(--hair);
  background:
    linear-gradient(var(--c-soft), var(--c-soft)) 10px 14px / 34px 8px no-repeat,
    linear-gradient(var(--skel), var(--skel)) 10px 32px / 28px 6px no-repeat,
    linear-gradient(var(--skel), var(--skel)) 10px 46px / 32px 6px no-repeat,
    linear-gradient(var(--skel), var(--skel)) 10px 60px / 24px 6px no-repeat,
    var(--surface);
}
[data-ma-frame='app'] .ma { --fs: 0.78; }
[data-ma-frame='app'] .ma-s { translate: 26px var(--fy); }
[data-ma-frame='phone'] .ma-dev {
  left: 50%;
  top: 14px;
  width: 188px;
  height: 360px;
  translate: -50% 0;
  border-radius: 34px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 6px #0b0f17, inset 0 0 0 7px #2b3343, 0 24px 48px -20px rgb(16 24 40 / 0.45);
}
[data-ma-frame='phone'] .ma-dev::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 50%;
  width: 52px;
  height: 15px;
  translate: -50% 0;
  border-radius: 99px;
  background: #0b0f17;
}
.ma-s,
.ma-dev { z-index: 0; }
/* in the phone, the scene is clipped to the screen */
[data-ma-frame='phone'] .ma-s {
  clip-path: inset(-6px calc(50% - 82px / var(--fs)) round 20px);
}
.ma *,
.ma *::before,
.ma *::after {
  box-sizing: border-box;
}
.ma svg {
  display: block;
  max-width: none;
  overflow: visible;
}
.ma i,
.ma em,
.ma b {
  font-style: normal;
}
.ma-ic svg,
.ma [class$='__ico'] svg {
  width: 100%;
  height: 100%;
}
.ma-card {
  position: relative;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:
    0 0 0 1px var(--hair),
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 1px 2px rgb(16 24 40 / 0.05),
    0 12px 28px -12px color-mix(in oklab, var(--c) 28%, rgb(16 24 40 / 0.3)),
    0 34px 60px -34px rgb(16 24 40 / 0.22);
}
.ma-cap {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
}
.ma-line {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: var(--skel);
}
.ma-line--w70 { width: 70%; }
.ma-line--w60 { width: 60%; }
.ma-line--w40 { width: 40%; }
.ma-line--soft { background: var(--skel-2); }
.ma-btn {
  position: relative;
  display: inline-grid;
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--c) 84%, #fff), var(--c) 60%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex: none;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 0 0 1px color-mix(in oklab, var(--c) 82%, #000),
    0 8px 18px -8px var(--c);
}
.ma-btn > em {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ma-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* two labels that swap: first em, then second em */
.ma-swap > em:first-child,
.ma [class$='__t'] > em:first-child,
.ma .ma-btn > em:first-child {
  animation: ma-out-a var(--t) var(--ma-out) infinite;
}
.ma-swap > em:last-child,
.ma [class$='__t'] > em:last-child,
.ma .ma-btn > em:last-child {
  animation: ma-in-b var(--t) var(--ma-out) infinite;
}
@keyframes ma-out-a {
  0%, 52% { opacity: 1; transform: none; }
  58%, 92% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}
@keyframes ma-in-b {
  0%, 52% { opacity: 0; transform: translateY(8px); }
  58%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(8px); }
}
.ma [class$='__t'] {
  display: grid;
}
.ma [class$='__t'] > em {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ma [class$='__t'] svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* number that counts up to --to */
.ma-count {
  counter-reset: n var(--n);
  animation: ma-count var(--t) var(--ma-out) infinite;
}
.ma-count::after {
  content: counter(n);
}
@keyframes ma-count {
  0%, 8% { --n: 0; }
  45%, 92% { --n: var(--to); }
  100% { --n: 0; }
}

/* ============================== E-commerce ============================== */
/* Add to cart: the product flies along an arc into the cart; the badge flips 2 -> 3 */
.ma-cart { position: relative; width: 250px; height: 190px; }
.ma-cart__top { position: absolute; inset: 0 0 auto auto; }
.ma-cart__ico { position: relative; display: block; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); animation: ma-cart-bump var(--t) var(--ma-spring) infinite; }
.ma-cart__ico svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-cart__ico b { position: absolute; top: -6px; right: -6px; display: grid; width: 18px; height: 18px; overflow: hidden; border-radius: 99px; background: var(--c); color: #fff; font-size: 10px; box-shadow: 0 0 0 2px var(--stage); }
.ma-cart__ico b em { grid-area: 1/1; display: grid; place-items: center; animation: ma-out-a var(--t) var(--ma-spring) infinite; }
.ma-cart__ico b em + em { animation-name: ma-in-b; }
.ma-cart__card { position: absolute; left: 0; bottom: 0; width: 190px; padding: 10px; }
.ma-cart__img { display: grid; place-items: center; height: 92px; border-radius: 9px; background: var(--c-soft); }
.ma-cart__img i { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(140deg, var(--c-mid), var(--c)); animation: ma-cart-src var(--t) var(--ma-out) infinite; }
.ma-cart__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.ma-cart__row .ma-line { flex: 1 1 auto; width: auto; }
.ma-cart__btn { flex: none; animation: ma-cart-press var(--t) ease infinite; }
.ma-cart__btn em + em { color: #fff; }
.ma-cart__fly { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(140deg, var(--c-mid), var(--c)); offset-path: path('M 84 98 C 120 10, 200 -10, 228 18'); offset-rotate: 0deg; opacity: 0; animation: ma-cart-fly var(--t) cubic-bezier(0.5, 0, 0.2, 1) infinite; }
@keyframes ma-cart-press { 0%, 22% { transform: none; } 25% { transform: scale(0.94); } 30%, 100% { transform: none; } }
@keyframes ma-cart-src { 0%, 26% { transform: none; opacity: 1; } 30% { transform: scale(0.6); opacity: 0.4; } 60%, 100% { transform: none; opacity: 1; } }
@keyframes ma-cart-fly { 0%, 27% { offset-distance: 0%; opacity: 0; transform: scale(1); } 30% { opacity: 1; } 50% { offset-distance: 100%; opacity: 1; transform: scale(0.6); } 53%, 100% { offset-distance: 100%; opacity: 0; transform: scale(0.3); } }
@keyframes ma-cart-bump { 0%, 50% { transform: none; } 55% { transform: scale(1.14) rotate(-6deg); } 62%, 100% { transform: none; } }

/* Product reveal: image wipes in, text lines stagger, price rises */
.ma-reveal { width: 200px; padding: 10px; display: grid; gap: 8px; }
.ma-reveal__img { position: relative; height: 104px; border-radius: 9px; background: var(--c-soft); overflow: hidden; clip-path: inset(0 100% 0 0 round 9px); animation: ma-wipe var(--t) var(--ma-out) infinite; }
.ma-reveal__img i { position: absolute; inset: 22px 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--c-mid) 30%, var(--c) 75%); animation: ma-float 3s ease-in-out infinite; }
.ma-reveal__img i + i { inset: auto 40px 10px; height: 8px; border-radius: 50%; background: rgb(16 24 40 / 0.12); animation: ma-shadow 3s ease-in-out infinite; }
.ma-reveal__tag { position: absolute; top: 18px; left: 18px; padding: 2px 8px; border-radius: 99px; background: var(--surface); color: var(--c); font-size: 10px; animation: ma-pop var(--t) var(--ma-spring) infinite; --d: 0.18; }
.ma-reveal .ma-line, .ma-reveal__price { animation: ma-rise var(--t) var(--ma-out) infinite; }
.ma-reveal .ma-line + .ma-line { animation-delay: 0.08s; }
.ma-reveal__price { font-weight: 600; font-size: 18px; color: var(--ink); animation-delay: 0.16s; }
@keyframes ma-wipe { 0%, 4% { clip-path: inset(0 100% 0 0 round 9px); } 22%, 88% { clip-path: inset(0 0 0 0 round 9px); } 96%, 100% { clip-path: inset(0 0 0 100% round 9px); } }
@keyframes ma-rise { 0%, 14% { opacity: 0; transform: translateY(10px); } 30%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes ma-pop { 0%, 18% { opacity: 0; transform: scale(0.6); } 26%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes ma-float { 50% { transform: translateY(-6px); } }
@keyframes ma-shadow { 50% { transform: scaleX(0.8); opacity: 0.6; } }

/* Size picker: a raised pill glides between sizes with a spring */
.ma-size { width: 230px; padding: 14px; display: grid; gap: 10px; }
.ma-size__row { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ma-size__opt { position: relative; z-index: 1; display: grid; place-items: center; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 12px; }
.ma-size__glide { position: absolute; z-index: 2; top: 0; left: 0; width: calc((100% - 24px) / 5); height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--c), 0 4px 10px -2px color-mix(in oklab, var(--c) 40%, transparent); animation: ma-glide var(--t) var(--ma-spring) infinite; }
.ma-size__left { justify-self: start; padding: 3px 8px; border-radius: 99px; background: #fef3f2; color: #b42318; font-size: 11px; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 1.2s; }
@keyframes ma-glide { 0%, 10% { transform: translateX(calc(100% + 6px)); } 25%, 45% { transform: translateX(calc(200% + 12px)); } 60%, 90% { transform: translateX(calc(300% + 18px)); } 100% { transform: translateX(calc(100% + 6px)); } }

/* Free shipping: bar fills to the goal, the truck hops, the message swaps */
.ma-ship { width: 240px; padding: 16px; display: grid; gap: 14px; }
.ma-ship__msg { display: grid; font-size: 12px; color: var(--ink-2); }
.ma-ship__msg em { grid-area: 1/1; display: flex; align-items: center; gap: 5px; animation: ma-out-a var(--t) var(--ma-out) infinite; }
.ma-ship__msg em + em { color: var(--ok); animation-name: ma-in-b; }
.ma-ship__msg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ma-ship__track { position: relative; height: 8px; border-radius: 99px; background: var(--skel); }
.ma-ship__fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-mid), var(--c)); transform-origin: left; animation: ma-fill var(--t) var(--ma-out) infinite; }
.ma-ship__fill::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent) -60px 0 / 60px 100% no-repeat; animation: ma-sheen var(--t) linear infinite; }
.ma-ship__goal { position: absolute; right: -6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 5px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); animation: ma-goal-hop var(--t) var(--ma-spring) infinite; }
.ma-ship__goal svg { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; }
@keyframes ma-fill { 0%, 6% { transform: scaleX(0.08); } 20% { transform: scaleX(0.62); } 34% { transform: scaleX(0.66); } 52%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0.08); } }
@keyframes ma-sheen { 0%, 52% { background-position: -60px 0; } 70%, 100% { background-position: 260px 0; } }
@keyframes ma-goal-hop { 0%, 50% { transform: none; background: var(--surface); } 56% { transform: translateY(-6px) scale(1.1); } 62%, 92% { transform: none; background: var(--c-soft); } }

/* Coupon: the stamp lands, the old price is struck through and the new one drops in */
.ma-coupon { width: 230px; padding: 14px; display: grid; gap: 14px; }
.ma-coupon__code { position: relative; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; border: 1.5px dashed var(--c-mid); border-radius: 10px; background: var(--c-soft); color: var(--c); letter-spacing: 0.06em; font-weight: 600; }
.ma-coupon__stamp { padding: 2px 8px; border-radius: 6px; background: var(--c); color: #fff; font-size: 11px; transform: rotate(-8deg); animation: ma-stamp var(--t) var(--ma-spring) infinite; }
.ma-coupon__total { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 2px; }
.ma-coupon__old { position: relative; justify-self: end; color: var(--ink-3); font-size: 12px; }
.ma-coupon__old::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: var(--ink-3); transform-origin: left; animation: ma-strike var(--t) var(--ma-out) infinite; }
.ma-coupon__new { grid-column: 2; justify-self: end; font-size: 20px; font-weight: 600; animation: ma-drop var(--t) var(--ma-spring) infinite; }
@keyframes ma-stamp { 0%, 14% { opacity: 0; transform: rotate(-8deg) scale(2.2); } 22%, 90% { opacity: 1; transform: rotate(-8deg) scale(1); } 100% { opacity: 0; } }
@keyframes ma-strike { 0%, 26% { transform: scaleX(0); } 36%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ma-drop { 0%, 34% { opacity: 0; transform: translateY(-12px); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Checkout steps: dots fill one by one, the line draws between them */
.ma-steps { display: flex; align-items: center; width: 260px; }
.ma-steps__dot { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); font-size: 12px; animation: ma-step var(--t) var(--ma-spring) infinite; animation-delay: calc(var(--k) * 0.9s); }
.ma-steps__dot b, .ma-steps__dot svg { grid-area: 1/1; }
.ma-steps__dot svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ma-step-chk var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 0.9s); }
.ma-steps__dot em { position: absolute; top: 38px; color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.ma-steps__bar { flex: 1; height: 2px; margin: 0 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ma-steps__bar i { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; animation: ma-step-bar var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 0.9s - 0.5s); }
@keyframes ma-step { 0%, 8% { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); transform: none; } 13% { transform: scale(1.15); } 18%, 70% { background: var(--c); box-shadow: 0 0 0 5px var(--c-soft); color: transparent; transform: none; } 80%, 100% { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-3); } }
@keyframes ma-step-chk { 0%, 14% { stroke-dashoffset: 24; } 22%, 70% { stroke-dashoffset: 0; } 80%, 100% { stroke-dashoffset: 24; } }
@keyframes ma-step-bar { 0%, 6% { transform: scaleX(0); } 16%, 70% { transform: scaleX(1); } 80%, 100% { transform: scaleX(0); } }

/* Payment success: ring draws, check strokes in, a quiet burst */
.ma-paid { position: relative; display: grid; justify-items: center; gap: 4px; }
.ma-paid__ring { width: 68px; height: 68px; }
.ma-paid__ring circle { fill: none; stroke: var(--c); stroke-width: 4; stroke-dasharray: 176; stroke-dashoffset: 176; transform: rotate(-90deg); transform-origin: center; animation: ma-ring var(--t) var(--ma-out) infinite; }
.ma-paid__ring path { fill: none; stroke: var(--c); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ma-tick var(--t) var(--ma-out) infinite; }
.ma-paid__t { margin-top: 8px; font-size: 15px; font-weight: 600; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 0.6s; }
.ma-paid__s { color: var(--ink-3); font-size: 12px; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 0.7s; }
.ma-paid__burst { position: absolute; top: 34px; left: 50%; }
.ma-paid__spark { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 99px; background: var(--c); opacity: 0; transform: rotate(calc(var(--k) * 45deg)); animation: ma-spark var(--t) var(--ma-out) infinite; }
.ma-paid__spark:nth-child(even) { width: 4px; height: 4px; margin: -2px; background: var(--c-mid); }
@keyframes ma-ring { 0%, 6% { stroke-dashoffset: 176; } 24%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 176; opacity: 0; } }
@keyframes ma-tick { 0%, 20% { stroke-dashoffset: 40; } 32%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 40; } }
@keyframes ma-spark { 0%, 24% { opacity: 0; transform: rotate(calc(var(--k) * 45deg)) translateY(0) scale(0.4); } 30% { opacity: 1; } 44%, 100% { opacity: 0; transform: rotate(calc(var(--k) * 45deg)) translateY(-56px) scale(1); } }

/* Out for delivery: the van drives the route, the done part draws behind it, ETA ticks down */
.ma-deliver { width: 260px; padding: 12px; display: grid; gap: 10px; }
.ma-deliver__map { position: relative; height: 92px; border-radius: 9px; background: linear-gradient(var(--skel-2), var(--skel-2)), radial-gradient(var(--skel-3) 1px, transparent 1px) 0 0/12px 12px; background-blend-mode: multiply; }
.ma-deliver__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ma-deliver__road { fill: none; stroke: #dfe3ea; stroke-width: 6; stroke-linecap: round; }
.ma-deliver__done { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: ma-route var(--t) linear infinite; }
.ma-deliver__van { position: absolute; left: 0; top: 0; width: 26px; height: 26px; padding: 4px; border-radius: 8px; background: var(--surface); box-shadow: 0 2px 6px rgb(16 24 40 / 0.18); offset-path: path('M 10 70 C 60 70, 70 20, 120 30 S 190 75, 230 22'); offset-rotate: 0deg; animation: ma-van var(--t) linear infinite; }
.ma-deliver__van svg, .ma-deliver__home svg { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linejoin: round; }
.ma-deliver__home { position: absolute; right: 2px; top: 2px; width: 24px; height: 24px; animation: ma-pinpulse 1.6s ease-in-out infinite; }
.ma-deliver__home svg { fill: var(--c-soft); }
.ma-deliver__eta { display: flex; align-items: baseline; justify-content: space-between; }
.ma-deliver__eta b { display: inline-grid; font-size: 16px; font-weight: 600; grid-template-columns: auto auto; gap: 4px; }
.ma-deliver__eta b em { grid-area: 1/1; text-align: right; opacity: 0; animation: ma-eta var(--t) steps(1) infinite; }
.ma-deliver__eta b em:nth-child(2) { animation-delay: calc(var(--t) / -3 * 2); }
.ma-deliver__eta b em:nth-child(3) { animation-delay: calc(var(--t) / -3); }
@keyframes ma-route { 0% { stroke-dashoffset: 320; } 85%, 100% { stroke-dashoffset: 0; } }
@keyframes ma-van { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }
@keyframes ma-eta { 0%, 33% { opacity: 1; } 33.4%, 100% { opacity: 0; } }
@keyframes ma-pinpulse { 50% { transform: translateY(-3px); } }

/* ============================== Healthcare ============================== */
.ma-hr { width: 250px; padding: 14px; display: grid; gap: 8px; }
.ma-hr__top { display: flex; align-items: center; gap: 10px; }
.ma-hr__heart { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--c-soft); animation: ma-beat 1s var(--ma-spring) infinite; }
.ma-hr__heart svg { fill: var(--c); }
.ma-hr__bpm { color: var(--ink-3); font-size: 12px; }
.ma-hr__bpm b { color: var(--ink); font-size: 20px; font-weight: 600; }
.ma-hr__ecg { width: 100%; height: 56px; }
.ma-hr__ecg .ma-hr__base { stroke: color-mix(in oklab, var(--c) 18%, var(--surface)); stroke-dasharray: none; animation: none; filter: none; }
.ma-hr__ecg path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 150 330; animation: ma-ecg 2s linear infinite; filter: drop-shadow(0 2px 4px color-mix(in oklab, var(--c) 40%, transparent)); }
@keyframes ma-beat { 0%, 100% { transform: none; } 12% { transform: scale(1.16); } 24% { transform: scale(0.96); } 36% { transform: scale(1.08); } 50% { transform: none; } }
@keyframes ma-ecg { 0% { stroke-dashoffset: 150; } 100% { stroke-dashoffset: -330; } }

.ma-breath { position: relative; display: grid; place-items: center; width: 200px; height: 200px; --t: 10s; }
.ma-breath__ring, .ma-breath__core { position: absolute; border-radius: 50%; }
.ma-breath__ring { inset: 26px; background: var(--c-soft); animation: ma-breathe var(--t) ease-in-out infinite; }
.ma-breath__ring--2 { inset: 44px; background: color-mix(in oklab, var(--c) 22%, var(--surface)); animation-delay: 0.15s; }
.ma-breath__core { inset: 64px; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--c) 55%, var(--surface)), var(--c)); box-shadow: 0 10px 30px -8px var(--c); animation: ma-breathe var(--t) ease-in-out infinite; animation-delay: 0.3s; }
.ma-breath__t { position: relative; z-index: 1; color: #fff; font-size: 13px; font-weight: 600; }
.ma-breath__t em { animation: ma-b3 var(--t) ease infinite !important; opacity: 0; }
.ma-breath__t em:nth-child(2) { animation-delay: calc(var(--t) * -0.6) !important; }
.ma-breath__t em:nth-child(3) { animation-delay: calc(var(--t) * -0.25) !important; }
@keyframes ma-breathe { 0%, 100% { transform: scale(0.72); } 40%, 55% { transform: scale(1.12); } }
@keyframes ma-b3 { 0%, 2% { opacity: 0; } 5%, 36% { opacity: 1; } 40%, 100% { opacity: 0; } }

.ma-pill { display: flex; align-items: center; gap: 12px; width: 250px; padding: 14px; }
.ma-pill__cap { display: flex; flex: none; width: 40px; height: 18px; border-radius: 99px; overflow: hidden; transform: rotate(-30deg); animation: ma-pill-turn var(--t) var(--ma-spring) infinite; box-shadow: 0 4px 10px -3px rgb(16 24 40 / 0.25); }
.ma-pill__cap i { flex: 1; background: var(--c); }
.ma-pill__cap i + i { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 0 99px 99px 0; }
.ma-pill__txt { display: grid; flex: 1; gap: 2px; }
.ma-pill__txt b { font-size: 13px; }
.ma-pill__txt .ma-cap { display: grid; }
.ma-pill__txt .ma-cap em { grid-area: 1/1; animation: ma-out-a var(--t) var(--ma-out) infinite; }
.ma-pill__txt .ma-cap em + em { color: var(--ok); animation-name: ma-in-b; }
.ma-pill__chk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); animation: ma-chkfill var(--t) var(--ma-spring) infinite; }
.ma-pill__chk svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ma-step-chk var(--t) var(--ma-out) infinite; animation-delay: 1.8s; }
@keyframes ma-pill-turn { 0%, 40% { transform: rotate(-30deg); } 50%, 92% { transform: rotate(150deg) scale(0.9); } 100% { transform: rotate(-30deg); } }
@keyframes ma-chkfill { 0%, 48% { background: transparent; transform: none; } 53% { transform: scale(1.18); } 58%, 92% { background: var(--ok); box-shadow: none; transform: none; } 100% { background: transparent; } }

.ma-score { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.ma-score svg { position: absolute; inset: 0; transform: rotate(135deg); }
.ma-score circle { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 235.6 314.2; }
.ma-score__track { stroke: var(--skel); }
.ma-score__arc { stroke: var(--c); stroke-dashoffset: 235.6; animation: ma-score var(--t) var(--ma-out) infinite; filter: drop-shadow(0 4px 8px color-mix(in oklab, var(--c) 35%, transparent)); }
.ma-score__n { display: grid; justify-items: center; }
.ma-score__n b { font-size: 34px; font-weight: 600; line-height: 1; }
@keyframes ma-score { 0%, 8% { stroke-dashoffset: 235.6; } 45%, 92% { stroke-dashoffset: 33; } 100% { stroke-dashoffset: 235.6; } }

.ma-book { display: flex; align-items: center; gap: 12px; width: 272px; padding: 14px; }
.ma-book__day { display: grid; place-items: center; flex: none; width: 46px; height: 52px; border-radius: 12px; background: var(--c); color: #fff; perspective: 200px; animation: ma-flipin var(--t) var(--ma-out) infinite; }
.ma-book__day em { font-size: 10px; opacity: 0.85; }
.ma-book__day b { margin-top: -6px; font-size: 20px; font-weight: 600; }
.ma-book__txt { display: grid; gap: 1px; flex: 1; }
.ma-book__slots { display: flex; gap: 4px; margin-top: 6px; }
.ma-book__slots i { padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 10px; }
.ma-book__slots i:nth-child(2) { animation: ma-slot var(--t) var(--ma-spring) infinite; }
.ma-book__ok { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok-ink); font-size: 10px; animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 1.8s; }
.ma-book__ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ma-flipin { 0%, 4% { transform: rotateX(90deg); } 18%, 90% { transform: none; } 100% { transform: rotateX(-90deg); } }
@keyframes ma-slot { 0%, 22% { background: transparent; color: var(--ink-2); } 28%, 90% { background: var(--c); color: #fff; box-shadow: none; } 100% { background: transparent; } }

.ma-lab { position: relative; display: grid; justify-items: center; }
.ma-lab__doc { position: relative; display: grid; gap: 9px; width: 150px; padding: 18px 16px; overflow: hidden; }
.ma-lab__l:nth-child(1) { width: 55%; height: 10px; background: var(--skel-3); }
.ma-lab__l:nth-child(3) { width: 80%; }
.ma-lab__l:nth-child(5) { width: 65%; }
.ma-lab__scan { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--c) 22%, transparent), transparent); border-bottom: 1.5px solid var(--c); animation: ma-scan var(--t) ease-in-out infinite; }
.ma-lab__badge { position: absolute; bottom: -12px; display: flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 99px; background: var(--chip); color: var(--chip-ink); font-size: 11px; box-shadow: 0 6px 16px -4px rgb(16 24 40 / 0.4); animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 2.4s; }
.ma-lab__badge svg { width: 12px; height: 12px; fill: none; stroke: #6ce9a6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ma-scan { 0% { transform: translateY(-40px); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateY(130px); opacity: 1; } 46%, 100% { transform: translateY(130px); opacity: 0; } }

.ma-call { display: grid; grid-template-columns: auto 90px auto; align-items: center; gap: 10px; }
.ma-call__av { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 99px; background: var(--c-soft); color: var(--c); font-weight: 600; box-shadow: 0 0 0 4px var(--surface), 0 6px 16px -6px rgb(16 24 40 / 0.3); }
.ma-call__av--b { background: var(--skel); color: var(--ink-2); font-size: 12px; }
.ma-call__av--a { animation: ma-ringpulse 2s ease-out infinite; }
.ma-call__link { display: flex; justify-content: space-between; }
.ma-call__dot { width: 6px; height: 6px; border-radius: 99px; background: var(--c-mid); animation: ma-dots 1.2s ease-in-out infinite; animation-delay: calc(var(--k) * 0.12s); }
.ma-call__t { grid-column: 1 / -1; justify-self: center; margin-top: 10px; color: var(--ink-2); font-size: 12px; }
.ma-call__t em + em i { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); }
@keyframes ma-ringpulse { 0% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 4px var(--c-mid); } 100% { box-shadow: 0 0 0 4px var(--surface), 0 0 0 18px transparent; } }
@keyframes ma-dots { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 1; background: var(--c); } }

.ma-sleep { width: 250px; padding: 14px; display: grid; gap: 12px; }
.ma-sleep__top { display: flex; align-items: center; gap: 8px; }
.ma-sleep__top b { font-size: 18px; font-weight: 600; }
.ma-sleep__moon { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--c-soft); animation: ma-tilt 4s ease-in-out infinite; }
.ma-sleep__moon svg { fill: var(--c); }
.ma-sleep__bars { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.ma-sleep__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(var(--c), var(--c-mid)); transform-origin: bottom; animation: ma-bar var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 0.06s); }
@keyframes ma-bar { 0%, 4% { transform: scaleY(0.05); } 30%, 88% { transform: none; } 100% { transform: scaleY(0.05); } }
@keyframes ma-tilt { 50% { transform: rotate(-12deg); } }

/* ============================== Finance ============================== */
.ma-bal { width: 250px; padding: 16px; display: grid; gap: 4px; }
.ma-bal__n { display: flex; font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 40px; }
.ma-odo { display: flex; height: 40px; overflow: hidden; }
.ma-odo > i { line-height: 40px; }
.ma-odo__col { display: flex; flex-direction: column; animation: ma-odo var(--t) var(--ma-out) infinite; }
.ma-odo__col:nth-child(n + 3) { animation-delay: 0.08s; }
.ma-odo__col:nth-child(n + 5) { animation-delay: 0.16s; }
.ma-odo__col i { height: 40px; line-height: 40px; }
.ma-bal__chip { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok-ink); font-size: 11px; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 1.2s; }
@keyframes ma-odo { 0%, 6% { transform: translateY(0); } 42%, 90% { transform: translateY(calc(var(--to) * -40px)); } 100% { transform: translateY(0); } }

.ma-chart { position: relative; width: 260px; height: 150px; padding: 14px 0 0; overflow: hidden; color: var(--c); }
.ma-chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; }
.ma-chart__line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: ma-draw300 var(--t) var(--ma-out) infinite; }
.ma-chart__area { opacity: 0; animation: ma-fadearea var(--t) ease infinite; }
.ma-chart__dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 3px var(--c); offset-path: path('M 0 122 L 30 110 L 60 114 L 90 90 L 120 96 L 150 70 L 180 76 L 210 52 L 240 44'); offset-rotate: 0deg; animation: ma-dotrun var(--t) var(--ma-out) infinite; }
.ma-chart__tip { position: absolute; right: 30px; top: 6px; padding: 4px 8px; border-radius: 8px; background: var(--chip); color: var(--chip-ink); font-size: 11px; animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 2.2s; }
@keyframes ma-draw300 { 0%, 4% { stroke-dashoffset: 300; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 300; opacity: 0; } }
@keyframes ma-fadearea { 0%, 28% { opacity: 0; } 48%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ma-dotrun { 0%, 4% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 40%, 88% { offset-distance: 100%; opacity: 1; } 96%, 100% { offset-distance: 100%; opacity: 0; } }

.ma-send { display: grid; grid-template-columns: auto 80px auto; align-items: center; gap: 8px; }
.ma-send__card { display: grid; align-content: space-between; width: 74px; height: 48px; padding: 7px; border-radius: 9px; background: linear-gradient(135deg, var(--c), color-mix(in oklab, var(--c) 60%, #101828)); color: #fff; font-size: 8px; box-shadow: 0 8px 18px -8px var(--c); }
.ma-send__card i { width: 14px; height: 10px; border-radius: 3px; background: #f5d77a; }
.ma-send__lane { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); }
.ma-send__coin { position: absolute; top: -11px; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--c); color: #fff; font-size: 11px; font-weight: 600; animation: ma-coin var(--t) cubic-bezier(0.6, 0, 0.2, 1) infinite; }
.ma-send__to { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 99px; background: var(--skel); color: var(--ink-2); font-weight: 600; animation: ma-recv var(--t) var(--ma-spring) infinite; }
.ma-send__to i { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 0 2px var(--stage); animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 2.6s; }
.ma-send__to svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ma-send__t { grid-column: 1 / -1; justify-self: center; margin-top: 14px; font-size: 12px; color: var(--ink-2); }
@keyframes ma-coin { 0%, 12% { transform: translateX(-30px) scale(0.4); opacity: 0; } 18% { opacity: 1; transform: translateX(0) scale(1); } 40% { transform: translateX(62px) scale(1); opacity: 1; } 46%, 100% { transform: translateX(80px) scale(0.3); opacity: 0; } }
@keyframes ma-recv { 0%, 42% { transform: none; } 48% { transform: scale(1.12); background: var(--c-soft); color: var(--c); } 56%, 92% { transform: none; background: var(--c-soft); color: var(--c); } 100% { background: var(--skel); } }

.ma-flip { width: 220px; height: 136px; perspective: 900px; }
.ma-flip__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: ma-flip var(--t) cubic-bezier(0.6, 0, 0.2, 1) infinite; }
.ma-flip__front, .ma-flip__back { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; color: #fff; background: radial-gradient(circle at 85% 0%, rgb(255 255 255 / 0.25), transparent 50%), linear-gradient(135deg, var(--c), color-mix(in oklab, var(--c) 45%, #0b1220)); box-shadow: 0 18px 30px -16px color-mix(in oklab, var(--c) 70%, #000); }
.ma-flip__front { display: grid; align-content: space-between; padding: 16px; font-size: 13px; letter-spacing: 0.08em; }
.ma-flip__chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #f8e3a1, #d9b25a); }
.ma-flip__name { display: flex; justify-content: space-between; align-items: center; font-size: 10px; opacity: 0.9; }
.ma-flip__name i { width: 28px; height: 18px; border-radius: 99px; background: radial-gradient(circle at 30% 50%, rgb(255 255 255 / 0.85) 0 9px, transparent 9.5px), radial-gradient(circle at 70% 50%, rgb(255 255 255 / 0.5) 0 9px, transparent 9.5px); }
.ma-flip__back { transform: rotateY(180deg); padding-top: 20px; }
.ma-flip__strip { display: block; height: 28px; background: #101828; }
.ma-flip__cvv { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 14px 16px; font-size: 10px; }
.ma-flip__cvv b { padding: 3px 10px; border-radius: 4px; background: var(--surface); color: var(--ink); letter-spacing: 0.15em; }
@keyframes ma-flip { 0%, 30% { transform: rotateY(0) rotateX(6deg); } 45%, 80% { transform: rotateY(180deg) rotateX(6deg); } 95%, 100% { transform: rotateY(360deg) rotateX(6deg); } }

.ma-donut { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.ma-donut svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ma-donut circle { fill: none; stroke-width: 14; stroke-dasharray: 0 100; stroke-dashoffset: calc(var(--a) * -1); animation: ma-seg var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 0.18s); }
.ma-donut circle:nth-child(1) { stroke: var(--c); }
.ma-donut circle:nth-child(2) { stroke: color-mix(in oklab, var(--c) 65%, var(--surface)); }
.ma-donut circle:nth-child(3) { stroke: color-mix(in oklab, var(--c) 38%, var(--surface)); }
.ma-donut circle:nth-child(4) { stroke: var(--skel-3); }
.ma-donut__n { display: grid; justify-items: center; }
.ma-donut__n b { font-size: 18px; font-weight: 600; }
@keyframes ma-seg { 0%, 6% { stroke-dasharray: 0 100; } 36%, 90% { stroke-dasharray: calc(var(--l) - 1.2) 100; } 100% { stroke-dasharray: 0 100; } }

.ma-save { width: 250px; padding: 16px; display: grid; gap: 10px; }
.ma-save__top { display: flex; justify-content: space-between; align-items: baseline; }
.ma-save__top span { color: var(--c); font-weight: 600; font-size: 16px; }
.ma-save__track { position: relative; height: 12px; border-radius: 99px; background: var(--skel); }
.ma-save__fill { position: absolute; inset: 0 25% 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--c-mid), var(--c)); transform-origin: left; animation: ma-savefill var(--t) var(--ma-out) infinite; }
.ma-save__track i { position: absolute; top: 50%; left: var(--p); width: 6px; height: 6px; margin: -3px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line); }
@keyframes ma-savefill { 0%, 8% { transform: scaleX(0); } 45%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

.ma-sec { display: grid; justify-items: center; gap: 8px; }
.ma-sec__fp { width: 74px; height: 74px; }
.ma-sec__fp path { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: ma-fp var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 0.12s); }
.ma-sec__lock { position: absolute; margin-top: 26px; margin-left: 52px; width: 26px; height: 26px; padding: 4px; border-radius: 99px; background: var(--surface); box-shadow: 0 2px 8px rgb(16 24 40 / 0.16); }
.ma-sec__lock svg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.ma-sec__lock .ma-shackle { animation: ma-unlock var(--t) var(--ma-spring) infinite; transform-origin: 16px 10px; }
.ma-sec__t { font-size: 12px; color: var(--ink-2); }
@keyframes ma-fp { 0%, 6% { stroke-dashoffset: 80; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
@keyframes ma-unlock { 0%, 50% { transform: none; } 58%, 90% { transform: translateY(-3px) rotateY(180deg); } }

.ma-tick { width: 260px; padding: 14px 0 0; display: grid; gap: 8px; overflow: hidden; }
.ma-tick__top { display: flex; align-items: baseline; gap: 10px; padding: 0 14px; }
.ma-tick__px, .ma-tick__chg { display: grid; }
.ma-tick__px em, .ma-tick__chg em { grid-area: 1/1; animation: ma-out-a var(--t) var(--ma-out) infinite; }
.ma-tick__px em + em, .ma-tick__chg em + em { animation-name: ma-in-b; }
.ma-tick__px { font-size: 16px; font-weight: 600; }
.ma-tick__chg { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: var(--ok-soft); color: var(--ok-ink); font-size: 11px; }
.ma-tick__win { height: 76px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.ma-tick__win svg { width: 520px; height: 70px; animation: ma-scroll 6s linear infinite; }
.ma-tick__win path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; }
@keyframes ma-scroll { to { transform: translateX(-260px); } }

/* ============================== SaaS ============================== */
.ma-onb { width: 250px; padding: 14px; display: grid; gap: 8px; }
.ma-onb__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.ma-onb__ring { width: 28px; height: 28px; }
.ma-onb__ring svg { transform: rotate(-90deg); }
.ma-onb__ring circle { fill: none; stroke: var(--skel); stroke-width: 4; }
.ma-onb__ring .ma-onb__arc { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 0 100; animation: ma-onbarc var(--t) var(--ma-out) infinite; }
.ma-onb__item { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; animation: ma-onbtxt var(--t) ease infinite; animation-delay: calc(var(--k) * 1s); }
.ma-onb__item i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line); animation: ma-onbbox var(--t) var(--ma-spring) infinite; animation-delay: calc(var(--k) * 1s); }
.ma-onb__item svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ma-step-chk var(--t) var(--ma-out) infinite; animation-delay: calc(var(--k) * 1s); }
@keyframes ma-onbarc { 0%, 12% { stroke-dasharray: 0 100; } 22% { stroke-dasharray: 33 100; } 38% { stroke-dasharray: 66 100; } 55%, 88% { stroke-dasharray: 100 100; } 100% { stroke-dasharray: 0 100; } }
@keyframes ma-onbbox { 0%, 12% { background: transparent; transform: none; } 16% { transform: scale(1.2); } 20%, 75% { background: var(--c); box-shadow: none; transform: none; } 85%, 100% { background: transparent; } }
@keyframes ma-onbtxt { 0%, 16% { color: var(--ink); } 20%, 75% { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); } 85%, 100% { color: var(--ink); text-decoration: none; } }

.ma-cmd { width: 250px; overflow: hidden; }
.ma-cmd__in { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.ma-cmd__in svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.ma-cmd__type { flex: 1; overflow: hidden; white-space: nowrap; width: 3ch; max-width: 3ch; border-right: 1.5px solid var(--c); font-size: 13px; animation: ma-type var(--t) steps(3) infinite, ma-caret 0.8s step-end infinite; }
.ma-cmd__in kbd { padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font: 500 10px var(--font-family, sans-serif); }
.ma-cmd__list { position: relative; display: grid; padding: 6px; }
.ma-cmd__list span:not(.ma-cmd__hl) { position: relative; z-index: 1; display: flex; align-items: center; height: 32px; padding: 0 10px; font-size: 12px; color: var(--ink-2); animation: ma-rise var(--t) var(--ma-out) infinite; }
.ma-cmd__list span:nth-of-type(3) { animation-delay: 0.06s; }
.ma-cmd__list span:nth-of-type(4) { animation-delay: 0.12s; }
.ma-cmd__hl { display: block; }
.ma-cmd__hl { position: absolute; z-index: 0; left: 6px; right: 6px; top: 6px; height: 32px; border-radius: 8px; background: var(--c-soft); animation: ma-hl var(--t) var(--ma-spring) infinite; }
@keyframes ma-type { 0%, 8% { max-width: 0; } 24%, 92% { max-width: 3ch; } 100% { max-width: 0; } }
@keyframes ma-caret { 50% { border-color: transparent; } }
@keyframes ma-hl { 0%, 34% { transform: translateY(0); } 46%, 58% { transform: translateY(32px); } 70%, 90% { transform: translateY(64px); } 100% { transform: translateY(0); } }

.ma-sync { display: grid; grid-template-columns: auto 100px auto; align-items: center; gap: 8px; }
.ma-sync__node { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--c); color: #fff; font-weight: 600; font-size: 16px; box-shadow: 0 10px 20px -10px var(--c); }
.ma-sync__node--b { background: var(--surface); color: var(--c); box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgb(16 24 40 / 0.4); animation: ma-recv var(--t) var(--ma-spring) infinite; animation-delay: 0.6s; }
.ma-sync__wire { position: relative; height: 2px; background: var(--line); }
.ma-sync__pkt { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 3px; background: var(--c); opacity: 0; animation: ma-pkt 1.4s linear infinite; animation-delay: calc(var(--k) * 0.35s); }
.ma-sync__t { grid-column: 1/-1; justify-self: center; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
@keyframes ma-pkt { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(92px); opacity: 0; } }

.ma-up { display: flex; align-items: center; gap: 12px; width: 268px; padding: 14px; }
.ma-up__file { position: relative; flex: none; width: 38px; height: 46px; animation: ma-drop var(--t) var(--ma-spring) infinite; }
.ma-up__file svg { width: 100%; height: 100%; fill: var(--surface); stroke: var(--skel-4); stroke-width: 1.4; stroke-linejoin: round; }
.ma-up__file b { position: absolute; left: -6px; bottom: 7px; padding: 1px 4px; border-radius: 3px; background: #d92d20; color: #fff; font-size: 8px; }
.ma-up__body { display: grid; flex: 1; gap: 6px; font-size: 12px; }
.ma-up__bar { height: 6px; border-radius: 99px; background: var(--skel); overflow: hidden; }
.ma-up__bar i { display: block; height: 100%; background: var(--c); transform-origin: left; animation: ma-upbar var(--t) cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.ma-up__body .ma-cap { display: grid; }
.ma-up__body .ma-cap em { grid-area: 1/1; animation: ma-out-a var(--t) ease infinite; }
.ma-up__body .ma-cap em + em { animation-name: ma-in-b; }
.ma-up__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--ok); animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 1.9s; }
.ma-up__ok svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ma-upbar { 0%, 10% { transform: scaleX(0); } 30% { transform: scaleX(0.45); } 40% { transform: scaleX(0.55); } 52%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

.ma-team { width: 240px; padding: 16px; display: grid; justify-items: start; gap: 12px; }
.ma-team__stack { display: flex; }
.ma-team__stack span { display: grid; place-items: center; width: 34px; height: 34px; margin-inline-end: -8px; border-radius: 99px; background: hsl(calc(var(--k) * 70 + 200) 70% 92%); color: hsl(calc(var(--k) * 70 + 200) 55% 35%); font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--surface); animation: ma-av var(--t) var(--ma-spring) infinite; animation-delay: calc(var(--k) * 0.12s); }
.ma-team__more { background: var(--skel) !important; color: var(--ink-2) !important; }
.ma-team__btn { width: 100%; }
@keyframes ma-av { 0%, 6% { opacity: 0; transform: translateX(-14px) scale(0.6); } 16%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.ma-notif { position: relative; width: 250px; height: 170px; }
.ma-notif__bell { position: absolute; right: 8px; top: 6px; width: 42px; height: 42px; padding: 9px; border-radius: 13px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transform-origin: 50% 8px; animation: ma-ring-bell var(--t) ease infinite; }
.ma-notif__bell svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-notif__bell b { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: var(--c); color: #fff; font-size: 10px; box-shadow: 0 0 0 2px var(--stage); animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 0.5s; }
.ma-notif__toast { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; gap: 10px; padding: 12px; animation: ma-toast var(--t) var(--ma-out) infinite; }
.ma-notif__toast > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 99px; background: var(--c-soft); color: var(--c); font-size: 11px; font-weight: 600; }
.ma-notif__toast > span { display: grid; font-size: 12px; }
@keyframes ma-ring-bell { 0%, 10%, 30%, 100% { transform: none; } 13% { transform: rotate(14deg); } 17% { transform: rotate(-12deg); } 21% { transform: rotate(8deg); } 25% { transform: rotate(-4deg); } }
@keyframes ma-toast { 0%, 24% { opacity: 0; transform: translateY(20px) scale(0.96); } 34%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-6px); } }

.ma-use { width: 250px; padding: 16px; display: grid; gap: 10px; }
.ma-use__top { display: flex; justify-content: space-between; font-size: 12px; }
.ma-use__seg { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; height: 22px; }
.ma-use__s { border-radius: 3px; background: var(--skel); animation: ma-segon var(--t) ease infinite; animation-delay: calc(var(--k) * 0.09s); }
.ma-use__s:nth-child(n + 17) { --on: #f79009; }
.ma-use__s:nth-child(n + 19) { animation-name: ma-segoff; }
.ma-use__warn { font-size: 11px; color: #b54708; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 2.1s; }
.ma-use__warn u { text-underline-offset: 2px; }
@keyframes ma-segon { 0%, 6% { background: var(--skel); } 10%, 90% { background: var(--on, var(--c)); } 100% { background: var(--skel); } }
@keyframes ma-segoff { 0%, 100% { background: var(--skel); } }

.ma-integ { display: grid; grid-template-columns: auto 110px auto; align-items: center; gap: 0; }
.ma-integ__app { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--c); color: #fff; font-weight: 600; font-size: 18px; box-shadow: 0 10px 20px -10px var(--c); }
.ma-integ__app--b { background: #4a154b; box-shadow: 0 10px 20px -10px #4a154b; animation: ma-recv var(--t) var(--ma-spring) infinite; animation-delay: 1s; }
.ma-integ__wire { width: 110px; height: 20px; }
.ma-integ__wire path { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 116; stroke-dashoffset: 116; animation: ma-wire var(--t) var(--ma-out) infinite; }
.ma-integ__ok { position: absolute; left: 50%; top: calc(50% - 18px); display: grid; place-items: center; width: 24px; height: 24px; margin-left: -12px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 0 4px var(--stage); animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 1.6s; }
.ma-integ__ok svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ma-integ__t { grid-column: 1/-1; justify-self: center; margin-top: 14px; font-size: 12px; color: var(--ink-2); }
@keyframes ma-wire { 0%, 8% { stroke-dashoffset: 116; } 30%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -116; } }

/* ============================== Education ============================== */
.ma-path { position: relative; width: 260px; height: 130px; }
.ma-path svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ma-path__road { fill: none; stroke: var(--skel-3); stroke-width: 4; stroke-dasharray: 2 8; stroke-linecap: round; }
.ma-path__done { fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ma-pathdraw var(--t) linear infinite; }
.ma-path__node { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 26px; height: 26px; margin: -13px; border-radius: 99px; background: var(--surface); box-shadow: 0 0 0 2px var(--line); animation: ma-node var(--t) var(--ma-spring) infinite; animation-delay: calc(var(--k) * 1.2s); }
.ma-path__node svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ma-path__node:last-child { width: 32px; height: 32px; margin: -16px; }
.ma-path__node:last-child svg { width: 16px; height: 16px; stroke-width: 0; fill: #fff; }
@keyframes ma-pathdraw { 0% { stroke-dashoffset: 100; } 75%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes ma-node { 0%, 4% { background: var(--surface); box-shadow: 0 0 0 2px var(--line); transform: none; } 9% { transform: scale(1.3); } 14%, 70% { background: var(--c); box-shadow: 0 0 0 5px var(--c-soft); transform: none; } 80%, 100% { background: var(--surface); box-shadow: 0 0 0 2px var(--line); } }

.ma-badge { position: relative; display: grid; justify-items: center; gap: 12px; }
.ma-badge__rays { position: absolute; top: 36px; left: 50%; }
.ma-badge__ray { position: absolute; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 3px; background: var(--c-mid); transform: rotate(calc(var(--k) * 30deg)) translateY(-62px); opacity: 0; animation: ma-ray var(--t) var(--ma-out) infinite; }
.ma-badge__hex { position: relative; display: grid; place-items: center; width: 74px; height: 80px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, color-mix(in oklab, var(--c) 55%, var(--surface)), var(--c)); overflow: hidden; animation: ma-badgein var(--t) var(--ma-spring) infinite; }
.ma-badge__hex svg { width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.15)); }
.ma-badge__shine { position: absolute; inset: -20px; background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.65) 50%, transparent 60%); transform: translateX(-100%); animation: ma-shine var(--t) ease infinite; }
.ma-badge__t { padding: 4px 12px; border-radius: 99px; background: var(--chip); color: var(--chip-ink); font-size: 12px; animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 0.5s; }
@keyframes ma-badgein { 0%, 6% { transform: scale(0) rotate(-40deg); } 22%, 88% { transform: none; } 100% { transform: scale(0); } }
@keyframes ma-shine { 0%, 30% { transform: translateX(-100%); } 48%, 100% { transform: translateX(100%); } }
@keyframes ma-ray { 0%, 16% { opacity: 0; transform: rotate(calc(var(--k) * 30deg)) translateY(-36px) scaleY(0.4); } 22% { opacity: 1; } 40%, 100% { opacity: 0; transform: rotate(calc(var(--k) * 30deg)) translateY(-70px) scaleY(1); } }

.ma-streak { width: 230px; padding: 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.ma-streak__flame { grid-row: span 2; width: 40px; height: 40px; }
.ma-streak__flame svg { fill: url(#none); fill: #f79009; transform-origin: 50% 100%; animation: ma-flame 1.6s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgb(247 144 9 / 0.45)); }
.ma-streak__n { display: grid; font-size: 26px; font-weight: 600; line-height: 1; overflow: hidden; height: 28px; }
.ma-streak__n em { grid-area: 1/1; animation: ma-out-a var(--t) var(--ma-spring) infinite; }
.ma-streak__n em + em { color: #f79009; animation-name: ma-in-b; }
.ma-streak__days { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 12px; }
.ma-streak__days span { display: grid; justify-items: center; gap: 4px; color: var(--ink-3); font-size: 10px; }
.ma-streak__days i { width: 18px; height: 18px; border-radius: 99px; background: var(--skel); }
.ma-streak__days span:nth-child(-n + 6) i { background: #fdb022; }
.ma-streak__days span:nth-child(7) i { animation: ma-today var(--t) var(--ma-spring) infinite; }
@keyframes ma-flame { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(0.96, 1.06) skewX(-2deg); } 50% { transform: scale(1.03, 0.97) skewX(2deg); } 75% { transform: scale(0.98, 1.04) skewX(-1deg); } }
@keyframes ma-today { 0%, 50% { background: var(--skel); transform: none; } 56% { transform: scale(1.35); } 62%, 92% { background: #f79009; transform: none; } }

.ma-quiz { position: relative; width: 250px; padding: 14px; display: grid; gap: 7px; }
.ma-quiz > b { font-size: 12px; margin-bottom: 2px; }
.ma-quiz__opt { position: relative; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line); font: 500 12px ui-monospace, Menlo, monospace; color: var(--ink-2); }
.ma-quiz__opt.is-right { animation: ma-right var(--t) var(--ma-out) infinite; }
.ma-quiz__opt i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 99px; background: var(--ok); opacity: 0; animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 1.4s; }
.ma-quiz__opt svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ma-quiz__xp { position: absolute; right: 12px; top: -11px; box-shadow: 0 0 0 3px var(--stage); padding: 2px 8px; border-radius: 99px; background: var(--c); color: #fff; font-size: 11px; animation: ma-xp var(--t) var(--ma-out) infinite; }
@keyframes ma-right { 0%, 14% { box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); transform: none; } 18% { transform: scale(0.97); box-shadow: inset 0 0 0 1.5px var(--c); } 26%, 90% { box-shadow: inset 0 0 0 1.5px var(--ok); background: var(--ok-soft); color: var(--ok-ink); transform: none; } 100% { background: var(--surface); } }
@keyframes ma-xp { 0%, 28% { opacity: 0; transform: translateY(14px); } 36%, 60% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-14px); } }

.ma-lvl { display: flex; align-items: center; gap: 14px; width: 260px; padding: 16px; }
.ma-lvl__badge { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in oklab, var(--c) 55%, var(--surface)), var(--c)); color: #fff; font-size: 22px; font-weight: 600; overflow: hidden; }
.ma-lvl__badge em { grid-area: 1/1; animation: ma-out-a var(--t) var(--ma-spring) infinite; }
.ma-lvl__badge em + em { animation-name: ma-in-b; }
.ma-lvl__body { display: grid; flex: 1; gap: 6px; }
.ma-lvl__body > b { display: grid; font-size: 13px; }
.ma-lvl__body > b em { grid-area: 1/1; animation: ma-out-a var(--t) var(--ma-out) infinite; }
.ma-lvl__body > b em + em { color: var(--c); animation-name: ma-in-b; }
.ma-lvl__bar { height: 8px; border-radius: 99px; background: var(--skel); overflow: hidden; }
.ma-lvl__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-mid), var(--c)); transform-origin: left; animation: ma-lvlbar var(--t) var(--ma-out) infinite; }
@keyframes ma-lvlbar { 0%, 8% { transform: scaleX(0.82); } 40% { transform: scaleX(1); } 52% { transform: scaleX(1); opacity: 1; } 56% { transform: scaleX(0); opacity: 0; } 60% { opacity: 1; } 80%, 92% { transform: scaleX(0.12); } 100% { transform: scaleX(0.82); } }

.ma-fc { width: 210px; height: 140px; perspective: 900px; }
.ma-fc__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: ma-flip var(--t) cubic-bezier(0.6, 0, 0.2, 1) infinite; }
.ma-fc__front, .ma-fc__back { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: 16px; background: var(--surface); backface-visibility: hidden; box-shadow: 0 0 0 1px rgb(16 24 40 / 0.06), 0 14px 28px -14px rgb(16 24 40 / 0.3); }
.ma-fc__front b, .ma-fc__back b { font-size: 18px; font-weight: 600; }
.ma-fc__back { transform: rotateY(180deg); background: var(--c-soft); }
.ma-fc__back b { color: var(--c); }
.ma-fc__ok { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; background: var(--surface); color: var(--ok-ink); font-size: 11px; }
.ma-fc__ok svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.ma-cert { position: relative; }
.ma-cert__doc { display: grid; justify-items: center; gap: 8px; width: 210px; padding: 18px 16px 16px; border-top: 4px solid var(--c); animation: ma-rise var(--t) var(--ma-out) infinite; }
.ma-cert__doc > b { font-size: 17px; font-weight: 600; font-family: Georgia, 'Times New Roman', serif; }
.ma-cert__l { width: 80%; height: 6px; }
.ma-cert__l + .ma-cert__l { width: 60%; }
.ma-cert__sign { width: 80px; height: 24px; }
.ma-cert__sign path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: ma-sign var(--t) ease infinite; }
.ma-cert__seal { position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px; background: var(--c); box-shadow: 0 0 0 4px var(--c-soft), 0 8px 16px -6px var(--c); animation: ma-stamp2 var(--t) var(--ma-spring) infinite; }
.ma-cert__seal svg { width: 20px; height: 20px; fill: #fff; }
@keyframes ma-sign { 0%, 22% { stroke-dashoffset: 160; } 48%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 160; } }
@keyframes ma-stamp2 { 0%, 48% { opacity: 0; transform: scale(2) rotate(-30deg); } 56%, 92% { opacity: 1; transform: rotate(-10deg); } 100% { opacity: 0; } }

.ma-goal { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.ma-goal svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ma-goal circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.ma-goal__track { stroke: var(--skel); }
.ma-goal__arc { stroke: var(--c); stroke-dasharray: 0 100; animation: ma-goalarc var(--t) var(--ma-out) infinite; }
.ma-goal__n { display: grid; justify-items: center; }
.ma-goal__n b { font-size: 30px; font-weight: 600; line-height: 1; }
.ma-goal__burst { position: absolute; left: 50%; top: 50%; }
.ma-goal__p { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 2px; background: var(--c); opacity: 0; animation: ma-confetti var(--t) var(--ma-out) infinite; --r: calc(var(--k) * 36deg); }
.ma-goal__p:nth-child(3n) { background: #fdb022; }
.ma-goal__p:nth-child(3n + 1) { background: var(--c-mid); }
@keyframes ma-goalarc { 0%, 6% { stroke-dasharray: 0 100; } 42%, 90% { stroke-dasharray: 100 100; } 100% { stroke-dasharray: 0 100; } }
@keyframes ma-confetti { 0%, 42% { opacity: 0; transform: rotate(var(--r)) translateY(-40px) rotate(0); } 46% { opacity: 1; } 70%, 100% { opacity: 0; transform: rotate(var(--r)) translateY(-90px) rotate(200deg); } }

/* ============================== Travel ============================== */
.ma-fly { position: relative; width: 260px; height: 140px; }
.ma-fly svg { position: absolute; inset: 0; width: 100%; height: 130px; overflow: visible; }
.ma-fly__arc { fill: none; stroke: var(--skel-4); stroke-width: 1.6; stroke-dasharray: 3 6; }
.ma-fly__done { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ma-flydraw var(--t) linear infinite; }
.ma-fly__plane { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; offset-path: path('M 24 104 Q 130 -10 236 92'); offset-rotate: auto 90deg; animation: ma-flyplane var(--t) linear infinite; }
.ma-fly__plane svg { position: static; width: 26px; height: 26px; fill: var(--c); filter: drop-shadow(0 4px 6px color-mix(in oklab, var(--c) 45%, transparent)); }
.ma-fly__a, .ma-fly__b { position: absolute; padding: 3px 8px; border-radius: 7px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 11px; font-weight: 600; }
.ma-fly__a { left: 4px; top: 112px; }
.ma-fly__b { right: 0; top: 100px; }
.ma-fly__pin { position: absolute; right: 12px; top: 64px; width: 24px; height: 24px; animation: ma-pinland var(--t) var(--ma-spring) infinite; }
.ma-fly__pin svg { position: static; width: 24px; height: 24px; fill: var(--c); stroke: #fff; stroke-width: 1.4; }
@keyframes ma-flydraw { 0%, 6% { stroke-dashoffset: 100; } 66%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes ma-flyplane { 0%, 6% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 64% { offset-distance: 100%; opacity: 1; } 70%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ma-pinland { 0%, 64% { opacity: 0; transform: translateY(-20px); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.ma-pass { perspective: 800px; }
.ma-pass__card { display: grid; gap: 12px; width: 236px; padding: 14px 16px; overflow: hidden; animation: ma-passin var(--t) var(--ma-out) infinite; }
.ma-pass__route { display: flex; align-items: center; justify-content: space-between; font-size: 20px; }
.ma-pass__route b { font-weight: 600; }
.ma-pass__route svg { width: 22px; height: 22px; fill: var(--c); transform: rotate(90deg); }
.ma-pass__info { display: flex; justify-content: space-between; }
.ma-pass__info span { display: grid; }
.ma-pass__info b { font-size: 13px; }
.ma-pass__perf { height: 0; margin: 0 -16px; border-top: 1.5px dashed var(--line); }
.ma-pass__code { position: relative; display: flex; gap: 2px; height: 30px; }
.ma-pass__b { flex: 1; background: var(--ink); border-radius: 1px; }
.ma-pass__b:nth-child(3n) { flex: 2; }
.ma-pass__b:nth-child(5n) { opacity: 0.2; }
.ma-pass__scan { position: absolute; left: -6px; right: -6px; top: 0; height: 2px; background: #f04438; box-shadow: 0 0 10px 2px rgb(240 68 56 / 0.6); animation: ma-barscan var(--t) ease-in-out infinite; }
@keyframes ma-passin { 0%, 4% { transform: translateY(40px) rotateX(30deg); opacity: 0; } 20%, 90% { transform: none; opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes ma-barscan { 0%, 30% { transform: translateY(0); opacity: 0; } 34% { opacity: 1; } 44% { transform: translateY(28px); } 54% { transform: translateY(0); } 60%, 100% { opacity: 0; } }

.ma-seat { width: 220px; padding: 16px; display: grid; gap: 12px; }
.ma-seat__grid { display: grid; grid-template-columns: repeat(3, 22px) 18px repeat(3, 22px); gap: 6px; justify-content: center; }
.ma-seat__grid i { height: 22px; border-radius: 6px 6px 4px 4px; background: var(--skel); box-shadow: inset 0 -3px 0 var(--skel-3); }
.ma-seat__grid i:nth-child(6n + 3) { margin-inline-end: 24px; }
.ma-seat__grid i.is-taken { background: var(--skel-4); box-shadow: none; }
.ma-seat__grid i.is-pick { animation: ma-seatpick var(--t) var(--ma-spring) infinite; }
.ma-seat__grid { grid-template-columns: repeat(6, 22px); column-gap: 6px; }
.ma-seat__lbl { justify-self: center; font-size: 12px; color: var(--ink-2); animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 1.4s; }
@keyframes ma-seatpick { 0%, 18% { background: var(--skel); transform: none; } 24% { transform: scale(1.3); } 30%, 90% { background: var(--c); box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--c) 70%, #000), 0 0 0 4px var(--c-soft); transform: none; } 100% { background: var(--skel); } }

.ma-map { position: relative; width: 260px; height: 190px; }
.ma-map__grid { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(115deg, transparent 47%, var(--surface) 47% 53%, transparent 53%) 0 0 / 100% 100%, linear-gradient(20deg, transparent 46%, var(--surface) 46% 52%, transparent 52%), var(--skel); box-shadow: inset 0 0 0 1px var(--line); }
.ma-map__pin { position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -34px 0 0 -17px; animation: ma-pindrop var(--t) var(--ma-spring) infinite; }
.ma-map__pin svg { fill: var(--c); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 6px 6px color-mix(in oklab, var(--c) 40%, transparent)); }
.ma-map__shadow { position: absolute; left: 50%; top: 40%; width: 14px; height: 5px; margin: -2px 0 0 -7px; border-radius: 50%; background: rgb(16 24 40 / 0.25); animation: ma-pinshadow var(--t) var(--ma-spring) infinite; }
.ma-map__ripple { position: absolute; left: 50%; top: 40%; width: 80px; height: 30px; margin: -15px 0 0 -40px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: ma-ripple var(--t) ease-out infinite; }
.ma-map__ripple--2 { animation-delay: 0.25s; }
.ma-map__label { position: absolute; left: 50%; bottom: 14px; display: grid; padding: 8px 12px; transform: translateX(-50%); animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 1.1s; }
@keyframes ma-pindrop { 0%, 6% { transform: translateY(-120px); opacity: 0; } 10% { opacity: 1; } 22%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes ma-pinshadow { 0%, 10% { transform: scale(0.2); opacity: 0; } 22%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes ma-ripple { 0%, 20% { opacity: 0; transform: scale(0.2); } 24% { opacity: 0.6; } 50%, 100% { opacity: 0; transform: scale(1.3); } }

.ma-range { width: 250px; padding: 14px; display: grid; gap: 8px; }
.ma-range__grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.ma-range__grid i { position: relative; z-index: 1; display: grid; place-items: center; height: 28px; font-size: 11px; color: var(--ink-2); }
.ma-range__grid i.is-a, .ma-range__grid i.is-b { color: #fff; }
.ma-range__grid i.is-a::before, .ma-range__grid i.is-b::before { content: ''; position: absolute; z-index: -1; inset: 0 4px; border-radius: 9px; background: var(--c); animation: ma-pop var(--t) var(--ma-spring) infinite; }
.ma-range__grid i.is-b::before { animation-delay: 1.6s; }
.ma-range__band { position: absolute; z-index: 0; top: 0; left: calc(100% / 7 * 3 + 4px); width: calc(100% / 7 * 4 - 4px); height: 28px; background: var(--c-soft); border-radius: 9px 0 0 9px; transform-origin: left; animation: ma-band var(--t) var(--ma-out) infinite; }
.ma-range__band::after { content: ''; position: absolute; top: 32px; left: calc(-300% / 4 - 4px); width: calc(300% / 4 * 5 / 3 + 4px); height: 28px; background: inherit; border-radius: 0 9px 9px 0; transform-origin: left; }
.ma-range__sum { font-size: 12px; color: var(--ink-2); animation: ma-rise var(--t) var(--ma-out) infinite; animation-delay: 1.9s; }
@keyframes ma-band { 0%, 26% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 44%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }

.ma-gate { display: grid; justify-items: center; gap: 10px; }
.ma-gate__board { display: flex; gap: 5px; padding: 8px; border-radius: 12px; background: #0b1220; box-shadow: 0 14px 28px -12px rgb(16 24 40 / 0.6); }
.ma-gate__flap { position: relative; display: grid; width: 44px; height: 60px; border-radius: 6px; background: #1d2939; color: #fdb022; font: 600 34px/60px ui-monospace, Menlo, monospace; text-align: center; overflow: hidden; perspective: 200px; }
.ma-gate__flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #0b1220; }
.ma-gate__flap em { grid-area: 1/1; animation: ma-flapout var(--t) ease-in infinite; transform-origin: 50% 50%; }
.ma-gate__flap em + em { animation-name: ma-flapin; }
.ma-gate__flap:nth-child(2) em { animation-delay: 0.12s; }
.ma-gate__flap:nth-child(3) em { animation-delay: 0.24s; }
.ma-gate__note { padding: 3px 10px; border-radius: 99px; background: var(--warn-soft); color: #b54708; font-size: 11px; animation: ma-pop var(--t) var(--ma-spring) infinite; animation-delay: 2.2s; }
@keyframes ma-flapout { 0%, 30% { transform: none; opacity: 1; } 36%, 92% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ma-flapin { 0%, 34% { transform: rotateX(-90deg); opacity: 0; } 40%, 90% { transform: none; opacity: 1; } 96%, 100% { transform: rotateX(-90deg); opacity: 0; } }

.ma-bag { width: 260px; padding: 18px 16px 14px; display: grid; gap: 30px; }
.ma-bag__line { position: relative; display: flex; justify-content: space-between; height: 4px; margin: 14px 10px 0; border-radius: 99px; background: var(--skel); }
.ma-bag__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--c); transform-origin: left; animation: ma-bagfill var(--t) cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.ma-bag__stop { position: relative; display: grid; justify-items: center; }
.ma-bag__stop i { width: 14px; height: 14px; margin-top: -5px; border-radius: 99px; background: var(--surface); box-shadow: inset 0 0 0 3px var(--skel-3); animation: ma-bagstop var(--t) var(--ma-spring) infinite; animation-delay: calc(var(--k) * 1.35s); }
.ma-bag__stop em { position: absolute; top: 14px; white-space: nowrap; color: var(--ink-3); font-size: 10px; }
.ma-bag__ico { position: absolute; left: 0; top: -36px; width: 28px; height: 28px; padding: 4px; border-radius: 8px; background: var(--c-soft); animation: ma-bagmove var(--t) cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.ma-bag__ico svg { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; }
.ma-bag__belt { font-size: 12px; color: var(--ink-2); }
@keyframes ma-bagfill { 0%, 6% { transform: scaleX(0); } 50%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ma-bagmove { 0%, 6% { left: -4px; } 50%, 90% { left: calc(100% - 24px); } 100% { left: -4px; } }
@keyframes ma-bagstop { 0%, 4% { box-shadow: inset 0 0 0 3px var(--skel-3); transform: none; } 9% { transform: scale(1.35); } 14%, 88% { box-shadow: inset 0 0 0 4px var(--c); transform: none; } 100% { box-shadow: inset 0 0 0 3px var(--skel-3); } }

.ma-wx { display: flex; align-items: center; gap: 16px; width: 240px; padding: 18px; }
.ma-wx__art { position: relative; flex: none; width: 70px; height: 60px; }
.ma-wx__sun { position: absolute; left: 0; top: 0; width: 46px; height: 46px; }
.ma-wx__sun svg { fill: #fdb022; stroke: #fdb022; stroke-width: 2; stroke-linecap: round; }
.ma-wx__sun .ma-rays { transform-origin: 12px 12px; animation: ma-spin 12s linear infinite; }
.ma-wx__cloud { position: absolute; right: -4px; bottom: 0; width: 50px; height: 40px; animation: ma-drift 5s ease-in-out infinite; }
.ma-wx__cloud svg { fill: var(--surface); stroke: var(--skel-3); stroke-width: 1; filter: drop-shadow(0 6px 8px rgb(16 24 40 / 0.12)); }
.ma-wx__txt { display: grid; }
.ma-wx__txt > b { font-size: 32px; font-weight: 600; line-height: 1.05; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
@keyframes ma-drift { 50% { transform: translateX(-10px); } }

/* paused off screen (js/motion.js toggles .is-paused) and for reduced motion */
.ma.is-paused *,
.ma.is-paused *::before,
.ma.is-paused *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  /* hold each scene on its finished frame instead of moving */
  .ma *,
  .ma *::before,
  .ma *::after {
    animation-delay: -3.9s !important;
    animation-play-state: paused !important;
  }
}