/* pixel2motion — "Burst" reveal for the 5-stroke mark  (GENERATED — do not hand-edit)
 * Personality: energetic, fluid, confident. Timeline 20:50:30 on 1400ms.
 * One shared clock; phases are intra-keyframe percentages so ?t=<ms> maps 1:1.
 * Every timing function inside @keyframes is a LITERAL cubic-bezier (Chromium
 * drops var() there):
 *   p2m-ease-draw   = cubic-bezier(0.16, 1, 0.3, 1)     explosive out
 *   p2m-ease-settle = cubic-bezier(0.34, 1.56, 0.64, 1) gentle overshoot settle
 *
 * Brush reveal: each stroke's mask is a chain of width-matched overlapping
 * sub-spines. A segment fades in exactly while the eased sweep front crosses
 * it, so the leading edge follows the ink width — hairline at the tip, full
 * belly at the cap — with a soft feathered front instead of a hard butt cut.
 */

:root {
  --p2m-duration: 1400ms;
  --p2m-ease-draw: cubic-bezier(0.16, 1, 0.3, 1);
  --p2m-ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 仅在允许动效时应用遮罩与展开动画；reduce 时保持完整静态 logo */
@media (prefers-reduced-motion: no-preference) {

/* ---- masks: static logo.svg untouched; reveals only under motion ---- */
#stroke-nw { mask: url(#wipe-nw); }
#stroke-ne { mask: url(#wipe-ne); }
#stroke-w { mask: url(#wipe-w); }
#stroke-s { mask: url(#wipe-s); }
#stroke-se { mask: url(#wipe-se); }

/* ---- root: anticipation coil -> explosive release -> smooth rest (no end shake) ---- */
#mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: p2m-root var(--p2m-duration) both;
}
@keyframes p2m-root {
  0% {
    transform: scale(0.85) rotate(-28deg);
    animation-timing-function: linear; /* hold the coil through anticipation */
  }
  20% {
    transform: scale(0.85) rotate(-28deg);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* p2m-ease-draw (release) */
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* ---- brush reveals: segments fade in as the eased front crosses them ---- */
/* stroke-nw: 14 segments, tip -> cap */
#seg-nw-00 { animation: p2m-seg-nw-00 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-00 {
  0%, 20.0% { opacity: 0; }
  21.2%, 100% { opacity: 1; }
}
#seg-nw-01 { animation: p2m-seg-nw-01 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-01 {
  0%, 20.697% { opacity: 0; }
  21.897%, 100% { opacity: 1; }
}
#seg-nw-02 { animation: p2m-seg-nw-02 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-02 {
  0%, 21.431% { opacity: 0; }
  22.631%, 100% { opacity: 1; }
}
#seg-nw-03 { animation: p2m-seg-nw-03 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-03 {
  0%, 22.207% { opacity: 0; }
  23.407%, 100% { opacity: 1; }
}
#seg-nw-04 { animation: p2m-seg-nw-04 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-04 {
  0%, 23.031% { opacity: 0; }
  24.231%, 100% { opacity: 1; }
}
#seg-nw-05 { animation: p2m-seg-nw-05 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-05 {
  0%, 23.913% { opacity: 0; }
  25.113%, 100% { opacity: 1; }
}
#seg-nw-06 { animation: p2m-seg-nw-06 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-06 {
  0%, 24.862% { opacity: 0; }
  26.062%, 100% { opacity: 1; }
}
#seg-nw-07 { animation: p2m-seg-nw-07 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-07 {
  0%, 25.894% { opacity: 0; }
  27.094%, 100% { opacity: 1; }
}
#seg-nw-08 { animation: p2m-seg-nw-08 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-08 {
  0%, 27.03% { opacity: 0; }
  28.3%, 100% { opacity: 1; }
}
#seg-nw-09 { animation: p2m-seg-nw-09 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-09 {
  0%, 28.3% { opacity: 0; }
  29.753%, 100% { opacity: 1; }
}
#seg-nw-10 { animation: p2m-seg-nw-10 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-10 {
  0%, 29.753% { opacity: 0; }
  31.474%, 100% { opacity: 1; }
}
#seg-nw-11 { animation: p2m-seg-nw-11 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-11 {
  0%, 31.474% { opacity: 0; }
  33.635%, 100% { opacity: 1; }
}
#seg-nw-12 { animation: p2m-seg-nw-12 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-12 {
  0%, 33.635% { opacity: 0; }
  36.717%, 100% { opacity: 1; }
}
#seg-nw-13 { animation: p2m-seg-nw-13 var(--p2m-duration) linear both; }
@keyframes p2m-seg-nw-13 {
  0%, 36.717% { opacity: 0; }
  48.571%, 100% { opacity: 1; }
}
/* stroke-ne: 18 segments, tip -> cap */
#seg-ne-00 { animation: p2m-seg-ne-00 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-00 {
  0%, 25.0% { opacity: 0; }
  26.2%, 100% { opacity: 1; }
}
#seg-ne-01 { animation: p2m-seg-ne-01 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-01 {
  0%, 25.539% { opacity: 0; }
  26.739%, 100% { opacity: 1; }
}
#seg-ne-02 { animation: p2m-seg-ne-02 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-02 {
  0%, 26.1% { opacity: 0; }
  27.3%, 100% { opacity: 1; }
}
#seg-ne-03 { animation: p2m-seg-ne-03 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-03 {
  0%, 26.685% { opacity: 0; }
  27.885%, 100% { opacity: 1; }
}
#seg-ne-04 { animation: p2m-seg-ne-04 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-04 {
  0%, 27.296% { opacity: 0; }
  28.496%, 100% { opacity: 1; }
}
#seg-ne-05 { animation: p2m-seg-ne-05 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-05 {
  0%, 27.937% { opacity: 0; }
  29.137%, 100% { opacity: 1; }
}
#seg-ne-06 { animation: p2m-seg-ne-06 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-06 {
  0%, 28.612% { opacity: 0; }
  29.812%, 100% { opacity: 1; }
}
#seg-ne-07 { animation: p2m-seg-ne-07 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-07 {
  0%, 29.325% { opacity: 0; }
  30.525%, 100% { opacity: 1; }
}
#seg-ne-08 { animation: p2m-seg-ne-08 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-08 {
  0%, 30.084% { opacity: 0; }
  31.284%, 100% { opacity: 1; }
}
#seg-ne-09 { animation: p2m-seg-ne-09 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-09 {
  0%, 30.894% { opacity: 0; }
  32.094%, 100% { opacity: 1; }
}
#seg-ne-10 { animation: p2m-seg-ne-10 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-10 {
  0%, 31.767% { opacity: 0; }
  32.967%, 100% { opacity: 1; }
}
#seg-ne-11 { animation: p2m-seg-ne-11 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-11 {
  0%, 32.716% { opacity: 0; }
  33.916%, 100% { opacity: 1; }
}
#seg-ne-12 { animation: p2m-seg-ne-12 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-12 {
  0%, 33.761% { opacity: 0; }
  34.961%, 100% { opacity: 1; }
}
#seg-ne-13 { animation: p2m-seg-ne-13 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-13 {
  0%, 34.929% { opacity: 0; }
  36.265%, 100% { opacity: 1; }
}
#seg-ne-14 { animation: p2m-seg-ne-14 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-14 {
  0%, 36.265% { opacity: 0; }
  37.848%, 100% { opacity: 1; }
}
#seg-ne-15 { animation: p2m-seg-ne-15 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-15 {
  0%, 37.848% { opacity: 0; }
  39.835%, 100% { opacity: 1; }
}
#seg-ne-16 { animation: p2m-seg-ne-16 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-16 {
  0%, 39.835% { opacity: 0; }
  42.669%, 100% { opacity: 1; }
}
#seg-ne-17 { animation: p2m-seg-ne-17 var(--p2m-duration) linear both; }
@keyframes p2m-seg-ne-17 {
  0%, 42.669% { opacity: 0; }
  53.571%, 100% { opacity: 1; }
}
/* stroke-w: 12 segments, tip -> cap */
#seg-w-00 { animation: p2m-seg-w-00 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-00 {
  0%, 30.0% { opacity: 0; }
  31.2%, 100% { opacity: 1; }
}
#seg-w-01 { animation: p2m-seg-w-01 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-01 {
  0%, 30.817% { opacity: 0; }
  32.017%, 100% { opacity: 1; }
}
#seg-w-02 { animation: p2m-seg-w-02 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-02 {
  0%, 31.685% { opacity: 0; }
  32.885%, 100% { opacity: 1; }
}
#seg-w-03 { animation: p2m-seg-w-03 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-03 {
  0%, 32.613% { opacity: 0; }
  33.813%, 100% { opacity: 1; }
}
#seg-w-04 { animation: p2m-seg-w-04 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-04 {
  0%, 33.612% { opacity: 0; }
  34.812%, 100% { opacity: 1; }
}
#seg-w-05 { animation: p2m-seg-w-05 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-05 {
  0%, 34.699% { opacity: 0; }
  35.899%, 100% { opacity: 1; }
}
#seg-w-06 { animation: p2m-seg-w-06 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-06 {
  0%, 35.894% { opacity: 0; }
  37.231%, 100% { opacity: 1; }
}
#seg-w-07 { animation: p2m-seg-w-07 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-07 {
  0%, 37.231% { opacity: 0; }
  38.761%, 100% { opacity: 1; }
}
#seg-w-08 { animation: p2m-seg-w-08 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-08 {
  0%, 38.761% { opacity: 0; }
  40.572%, 100% { opacity: 1; }
}
#seg-w-09 { animation: p2m-seg-w-09 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-09 {
  0%, 40.572% { opacity: 0; }
  42.848%, 100% { opacity: 1; }
}
#seg-w-10 { animation: p2m-seg-w-10 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-10 {
  0%, 42.848% { opacity: 0; }
  46.091%, 100% { opacity: 1; }
}
#seg-w-11 { animation: p2m-seg-w-11 var(--p2m-duration) linear both; }
@keyframes p2m-seg-w-11 {
  0%, 46.091% { opacity: 0; }
  58.571%, 100% { opacity: 1; }
}
/* stroke-s: 12 segments, tip -> cap */
#seg-s-00 { animation: p2m-seg-s-00 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-00 {
  0%, 35.0% { opacity: 0; }
  36.2%, 100% { opacity: 1; }
}
#seg-s-01 { animation: p2m-seg-s-01 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-01 {
  0%, 35.817% { opacity: 0; }
  37.017%, 100% { opacity: 1; }
}
#seg-s-02 { animation: p2m-seg-s-02 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-02 {
  0%, 36.685% { opacity: 0; }
  37.885%, 100% { opacity: 1; }
}
#seg-s-03 { animation: p2m-seg-s-03 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-03 {
  0%, 37.613% { opacity: 0; }
  38.813%, 100% { opacity: 1; }
}
#seg-s-04 { animation: p2m-seg-s-04 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-04 {
  0%, 38.612% { opacity: 0; }
  39.812%, 100% { opacity: 1; }
}
#seg-s-05 { animation: p2m-seg-s-05 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-05 {
  0%, 39.699% { opacity: 0; }
  40.899%, 100% { opacity: 1; }
}
#seg-s-06 { animation: p2m-seg-s-06 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-06 {
  0%, 40.894% { opacity: 0; }
  42.231%, 100% { opacity: 1; }
}
#seg-s-07 { animation: p2m-seg-s-07 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-07 {
  0%, 42.231% { opacity: 0; }
  43.761%, 100% { opacity: 1; }
}
#seg-s-08 { animation: p2m-seg-s-08 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-08 {
  0%, 43.761% { opacity: 0; }
  45.572%, 100% { opacity: 1; }
}
#seg-s-09 { animation: p2m-seg-s-09 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-09 {
  0%, 45.572% { opacity: 0; }
  47.848%, 100% { opacity: 1; }
}
#seg-s-10 { animation: p2m-seg-s-10 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-10 {
  0%, 47.848% { opacity: 0; }
  51.091%, 100% { opacity: 1; }
}
#seg-s-11 { animation: p2m-seg-s-11 var(--p2m-duration) linear both; }
@keyframes p2m-seg-s-11 {
  0%, 51.091% { opacity: 0; }
  63.571%, 100% { opacity: 1; }
}
/* stroke-se: 14 segments, tip -> cap */
#seg-se-00 { animation: p2m-seg-se-00 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-00 {
  0%, 40.0% { opacity: 0; }
  41.2%, 100% { opacity: 1; }
}
#seg-se-01 { animation: p2m-seg-se-01 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-01 {
  0%, 40.697% { opacity: 0; }
  41.897%, 100% { opacity: 1; }
}
#seg-se-02 { animation: p2m-seg-se-02 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-02 {
  0%, 41.431% { opacity: 0; }
  42.631%, 100% { opacity: 1; }
}
#seg-se-03 { animation: p2m-seg-se-03 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-03 {
  0%, 42.207% { opacity: 0; }
  43.407%, 100% { opacity: 1; }
}
#seg-se-04 { animation: p2m-seg-se-04 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-04 {
  0%, 43.031% { opacity: 0; }
  44.231%, 100% { opacity: 1; }
}
#seg-se-05 { animation: p2m-seg-se-05 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-05 {
  0%, 43.913% { opacity: 0; }
  45.113%, 100% { opacity: 1; }
}
#seg-se-06 { animation: p2m-seg-se-06 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-06 {
  0%, 44.862% { opacity: 0; }
  46.062%, 100% { opacity: 1; }
}
#seg-se-07 { animation: p2m-seg-se-07 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-07 {
  0%, 45.894% { opacity: 0; }
  47.094%, 100% { opacity: 1; }
}
#seg-se-08 { animation: p2m-seg-se-08 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-08 {
  0%, 47.03% { opacity: 0; }
  48.3%, 100% { opacity: 1; }
}
#seg-se-09 { animation: p2m-seg-se-09 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-09 {
  0%, 48.3% { opacity: 0; }
  49.753%, 100% { opacity: 1; }
}
#seg-se-10 { animation: p2m-seg-se-10 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-10 {
  0%, 49.753% { opacity: 0; }
  51.474%, 100% { opacity: 1; }
}
#seg-se-11 { animation: p2m-seg-se-11 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-11 {
  0%, 51.474% { opacity: 0; }
  53.635%, 100% { opacity: 1; }
}
#seg-se-12 { animation: p2m-seg-se-12 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-12 {
  0%, 53.635% { opacity: 0; }
  56.717%, 100% { opacity: 1; }
}
#seg-se-13 { animation: p2m-seg-se-13 var(--p2m-duration) linear both; }
@keyframes p2m-seg-se-13 {
  0%, 56.717% { opacity: 0; }
  68.571%, 100% { opacity: 1; }
}
}