/* Motion & transitions demos. Every rule is scoped under a .mo-* root. */

/* easing */
.mo-ez { position: absolute; inset: 0; display: grid; align-content: center; gap: 10px; padding: 0 18px; }
.mo-ez-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: end; }
.mo-ez-row svg { width: 26px; height: 26px; overflow: visible; border-left: 1px solid var(--stage-line); border-bottom: 1px solid var(--stage-line); }
.mo-ez-row path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mo-ez-main { display: grid; gap: 4px; min-width: 0; }
.mo-ez-main p { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.mo-ez-main code { font: 500 11px var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-ez-main span { opacity: 0.65; white-space: nowrap; }
.mo-ez-track { position: relative; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--stage-card) 70%, transparent); border: 1px solid var(--stage-line); }
.mo-ez-track i { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); animation: mo-ez 2.8s var(--tf) infinite both; }
@keyframes mo-ez {
  0%, 8% { left: 1px; opacity: 1; }
  62%, 88% { left: calc(100% - 11px); opacity: 1; }
  94% { left: calc(100% - 11px); opacity: 0; }
  95% { left: 1px; opacity: 0; }
  100% { left: 1px; opacity: 1; }
}

/* spring */
.mo-sp { position: absolute; inset: 0; display: grid; align-content: center; gap: 12px; padding: 0 18px; }
.mo-sp-row { display: grid; gap: 5px; }
.mo-sp-row p { margin: 0; }
.mo-sp-row code { font: 500 11px var(--f-mono); opacity: 0.8; }
.mo-sp-track { position: relative; height: 30px; border-radius: 9px; border: 1px dashed var(--stage-line); }
.mo-sp-dot { position: absolute; top: 1px; left: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--d-violet); box-shadow: 0 4px 10px rgb(60 40 160 / 0.25); }
.mo-sp-dot[data-kind="ease"] { background: var(--d-blue); transition: left 500ms ease-out; }
.mo-sp-row:last-child .mo-sp-dot { background: var(--d-pink); }

/* stagger */
.mo-stg { display: grid; justify-items: center; gap: 12px; width: 100%; padding: 0 18px; }
.mo-stg-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: min(100%, 320px); }
.mo-stg-grid i {
  aspect-ratio: 1; border-radius: 8px;
  background: color-mix(in oklab, var(--d-violet), var(--d-cyan) calc(var(--d) * 14%));
  animation: mo-stg 3.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; animation-delay: calc(var(--d) * 70ms);
}
@keyframes mo-stg {
  0% { opacity: 0; transform: translateY(12px) scale(0.85); }
  14%, 76% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(-6px) scale(0.95); }
}
.mo-stg-cap { margin: 0; }
.mo-stg-cap code { font: 500 11px var(--f-mono); opacity: 0.75; }

/* shared element */
.mo-se { position: absolute; inset: 0; padding: 14px; }
.mo-se-grid { position: relative; height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; }
.mo-se-item {
  grid-row: 1; grid-column: var(--c); display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 8px; border: 0; border-radius: 12px; background: var(--stage-card); color: var(--stage-ink);
  font: inherit; text-align: left; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); transition: opacity 0.3s;
}
.mo-se-art { display: block; aspect-ratio: 1; border-radius: 8px; background: var(--g); }
.mo-se-t { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-se-d { display: none; font-size: 12px; opacity: 0.7; white-space: nowrap; }
.mo-se-item.is-open { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; padding: 10px; gap: 6px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.28); }
.mo-se-item.is-open .mo-se-art { aspect-ratio: auto; flex: 1; min-height: 0; }
.mo-se-item.is-open .mo-se-t { font-size: 17px; }
.mo-se-item.is-open .mo-se-d { display: block; animation: mo-se-in 0.3s 0.25s both; }
.mo-se.has-open .mo-se-item:not(.is-open) { opacity: 0.3; }
@keyframes mo-se-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.7; transform: none; } }

/* page transition */
.mo-pt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 16px; }
.mo-pt-phone { position: relative; width: min(46%, 180px); height: 92%; border-radius: 18px; border: 4px solid var(--stage-ink); background: var(--stage-card); overflow: hidden; }
.mo-pt-view { position: absolute; inset: 0; padding: 12px 10px; display: grid; align-content: start; gap: 8px; background: var(--stage-card); visibility: hidden; }
.mo-pt-view.is-on { visibility: visible; }
.mo-pt-h { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.mo-pt-h span { color: var(--d-violet); margin-right: 2px; }
.mo-pt-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mo-pt-row i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.mo-pt-row span { display: grid; min-width: 0; }
.mo-pt-row b { font-size: 11.5px; }
.mo-pt-row em { font-style: normal; font-size: 10.5px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-pt-msg { margin: 0; justify-self: start; max-width: 88%; padding: 6px 9px; border-radius: 12px 12px 12px 4px; background: var(--stage); font-size: 11px; line-height: 1.35; }
.mo-pt-me { justify-self: end; border-radius: 12px 12px 4px 12px; background: var(--d-violet); color: #fff; }
.mo-pt-modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 500 11.5px var(--f-mono); }
.mo-pt-modes li { opacity: 0.45; padding-left: 14px; position: relative; transition: opacity 0.2s; }
.mo-pt-modes li.is-on { opacity: 1; font-weight: 600; }
.mo-pt-modes li.is-on::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--d-violet); }

/* clip-path reveal */
.mo-cr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 0 16px; }
.mo-cr-tile { margin: 0; display: grid; gap: 7px; min-width: 0; }
.mo-cr-tile figcaption { font-size: 11.5px; text-align: center; white-space: nowrap; }
.mo-cr-tile code { font: 600 11px var(--f-mono); }
.mo-cr-box { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--stage-card); border: 1px solid var(--stage-line); }
.mo-cr-under { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 650; opacity: 0.5; }
.mo-cr-top {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800;
  background: radial-gradient(circle at 70% 28%, #ffe7a3 0 12%, transparent 13%), linear-gradient(160deg, var(--d-violet), var(--d-pink) 75%);
  animation: 3.6s cubic-bezier(0.77, 0, 0.175, 1) infinite both; animation-delay: calc(var(--i) * 0.25s);
}
.mo-cr-wipe { animation-name: mo-cr-wipe; }
.mo-cr-iris { animation-name: mo-cr-iris; }
.mo-cr-diag { animation-name: mo-cr-diag; }
@keyframes mo-cr-wipe {
  0%, 10% { clip-path: inset(0 100% 0 0); opacity: 1; }
  45%, 84% { clip-path: inset(0 0 0 0); opacity: 1; }
  94% { clip-path: inset(0 0 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 0; }
}
@keyframes mo-cr-iris {
  0%, 10% { clip-path: circle(0% at 50% 50%); opacity: 1; }
  45%, 84% { clip-path: circle(75% at 50% 50%); opacity: 1; }
  94% { clip-path: circle(75% at 50% 50%); opacity: 0; }
  100% { clip-path: circle(0% at 50% 50%); opacity: 0; }
}
@keyframes mo-cr-diag {
  0%, 10% { clip-path: polygon(0 0, 0 0, -40% 100%, 0 100%); opacity: 1; }
  45%, 84% { clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%); opacity: 1; }
  94% { clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%); opacity: 0; }
  100% { clip-path: polygon(0 0, 0 0, -40% 100%, 0 100%); opacity: 0; }
}

/* ripple */
.mo-rp { display: grid; justify-items: center; gap: 16px; width: 100%; padding: 0 18px; }
.mo-rp-target { position: relative; overflow: hidden; border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mo-rp-btn { padding: 11px 22px; border-radius: 10px; background: var(--d-violet); color: #fff; font-size: 14px; font-weight: 700; }
.mo-rp-list { width: min(100%, 300px); display: grid; border-radius: 12px; overflow: hidden; background: var(--stage-card); border: 1px solid var(--stage-line); }
.mo-rp-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; color: var(--stage-ink); text-align: left; }
.mo-rp-row + .mo-rp-row { border-top: 1px solid var(--stage-line); }
.mo-rp-row i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--c); }
.mo-rp-row span { display: grid; }
.mo-rp-row b { font-size: 13px; }
.mo-rp-row em { font-style: normal; font-size: 11.5px; opacity: 0.65; }
.mo-rp-ink { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; transform: scale(0); animation: mo-ripple 650ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards; }
@keyframes mo-ripple { 0% { transform: scale(0); opacity: 0.32; } 60% { opacity: 0.2; } 100% { transform: scale(1); opacity: 0; } }

/* micro-interaction */
.mo-mi { display: grid; justify-items: center; gap: 18px; }
.mo-mi-like, .mo-mi-copy {
  display: inline-flex; align-items: center; gap: 9px; font: inherit; color: var(--stage-ink); cursor: pointer;
  background: var(--stage-card); border: 1px solid var(--stage-line); border-radius: 999px; padding: 8px 16px 8px 12px;
}
.mo-mi-heart { position: relative; width: 24px; height: 24px; display: grid; place-items: center; }
.mo-mi-heart svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.15s, stroke 0.15s; }
.mo-mi-like[aria-pressed="true"] svg { fill: var(--d-pink); stroke: var(--d-pink); }
.mo-mi-like.is-pop svg { animation: mo-mi-pop 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.mo-mi-heart i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--d-pink); opacity: 0; }
.mo-mi-heart i:nth-of-type(even) { background: var(--d-amber); }
.mo-mi-like.is-pop .mo-mi-heart i { animation: mo-mi-burst 520ms ease-out; }
@keyframes mo-mi-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes mo-mi-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-20px) scale(0.4); } }
.mo-mi-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3ch; }
.mo-mi-copy { padding: 6px 8px 6px 14px; gap: 10px; border-radius: 10px; }
.mo-mi-copy code { font: 500 12.5px var(--f-mono); }
.mo-mi-ico { position: relative; width: 18px; height: 18px; }
.mo-mi-ico svg { position: absolute; inset: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1); }
.mo-mi-check { opacity: 0; transform: scale(0.5); stroke: #19a463 !important; }
.mo-mi-copy.is-done .mo-mi-clip { opacity: 0; transform: scale(0.5); }
.mo-mi-copy.is-done .mo-mi-check { opacity: 1; transform: none; }
.mo-mi-label { font-size: 12.5px; font-weight: 650; min-width: 6ch; padding: 4px 8px; border-radius: 7px; background: var(--stage); }

/* gooey */
.mo-goo { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 12px; }
.mo-goo-svg { position: absolute; width: 0; height: 0; }
.mo-goo-half { margin: 0; display: grid; justify-items: center; gap: 12px; }
.mo-goo-half figcaption code { font: 500 11px var(--f-mono); opacity: 0.75; }
.mo-goo-blobs { position: relative; width: 150px; height: 110px; max-width: 100%; }
.mo-goo-on { filter: url(#mo-goo-f); }
.mo-goo-blobs i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: var(--d-violet); }
.mo-goo-blobs i:nth-child(2) { width: 30px; height: 30px; margin: -15px; animation: mo-goo-a 3.2s ease-in-out infinite; }
.mo-goo-blobs i:nth-child(3) { width: 26px; height: 26px; margin: -13px; animation: mo-goo-b 3.2s ease-in-out infinite; }
@keyframes mo-goo-a { 0%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(52px, -14px); } }
@keyframes mo-goo-b { 0%, 100% { transform: translate(0, 0); } 45%, 55% { transform: translate(-50px, 18px); } }

/* shape morphing */
.mo-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; padding: 0 16px; }
.mo-ms figure { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.mo-ms figcaption code { font: 500 11px var(--f-mono); opacity: 0.75; }
.mo-ms-cell { width: 100%; aspect-ratio: 1; max-width: 110px; display: grid; place-items: center; border-radius: 14px; background: var(--stage-card); border: 1px solid var(--stage-line); }
.mo-ms-blob { width: 62%; aspect-ratio: 1; background: linear-gradient(135deg, var(--d-pink), var(--d-violet)); animation: mo-ms-blob 6s ease-in-out infinite; }
@keyframes mo-ms-blob {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0); }
  33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: rotate(60deg); }
  66% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: rotate(-30deg); }
}
.mo-ms-menu { position: relative; width: 30px; height: 30px; }
.mo-ms-menu i { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--stage-ink); animation: 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.mo-ms-menu i:nth-child(1) { top: 5px; animation-name: mo-ms-top; }
.mo-ms-menu i:nth-child(2) { top: 13.5px; animation-name: mo-ms-mid; }
.mo-ms-menu i:nth-child(3) { top: 22px; animation-name: mo-ms-bot; }
@keyframes mo-ms-top { 0%, 30%, 100% { transform: none; } 42%, 86% { transform: translateY(8.5px) rotate(45deg); } }
@keyframes mo-ms-mid { 0%, 30%, 100% { opacity: 1; transform: none; } 42%, 86% { opacity: 0; transform: scaleX(0.2); } }
@keyframes mo-ms-bot { 0%, 30%, 100% { transform: none; } 42%, 86% { transform: translateY(-8.5px) rotate(-45deg); } }
.mo-ms-play { position: relative; width: 30px; height: 34px; }
.mo-ms-play i { position: absolute; inset: 0; background: var(--d-violet); animation: 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.mo-ms-play i:nth-child(1) { animation-name: mo-ms-pl; }
.mo-ms-play i:nth-child(2) { animation-name: mo-ms-pr; }
@keyframes mo-ms-pl {
  0%, 30%, 100% { clip-path: polygon(0 0, 50% 25%, 50% 75%, 0 100%); }
  42%, 86% { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%); }
}
@keyframes mo-ms-pr {
  0%, 30%, 100% { clip-path: polygon(50% 25%, 100% 50%, 100% 50%, 50% 75%); }
  42%, 86% { clip-path: polygon(65% 0, 100% 0, 100% 100%, 65% 100%); }
}

/* origin-aware */
.mo-oa { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 18px; align-content: start; }
.mo-oa-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.mo-oa-lab { margin: 0; display: grid; gap: 2px; }
.mo-oa-lab b { font-size: 13px; }
.mo-oa-lab code { font: 500 10.5px var(--f-mono); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-oa-anchor { position: relative; justify-self: start; }
.mo-oa-trig { font: inherit; font-size: 12.5px; font-weight: 650; padding: 6px 14px; border-radius: 8px; cursor: pointer; color: var(--stage-ink); background: var(--stage-card); border: 1px solid var(--stage-line); }
.mo-oa-pop {
  position: absolute; left: 0; top: calc(100% + 6px); width: 130px; display: grid; padding: 4px; border-radius: 10px;
  background: var(--stage-card); border: 1px solid var(--stage-line); box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
  opacity: 0; transform: scale(0.4); transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mo-oa-pop span { font-size: 12px; padding: 5px 8px; border-radius: 6px; }
.mo-oa-pop span:first-child { background: color-mix(in srgb, var(--d-violet) 16%, transparent); }
.mo-oa-c { transform-origin: 50% 50%; }
.mo-oa-tl { transform-origin: top left; }
.mo-oa.is-open .mo-oa-pop { opacity: 1; transform: none; }

/* rubber-banding */
.mo-rb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 16px; }
.mo-rb-phone { position: relative; width: min(48%, 190px); height: 90%; border-radius: 18px; border: 4px solid var(--stage-ink); background: var(--stage); overflow: hidden; touch-action: none; cursor: grab; }
.mo-rb-phone:active { cursor: grabbing; }
.mo-rb-list { display: grid; gap: 6px; padding: 10px 8px; will-change: transform; }
.mo-rb-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: var(--stage-card); font-size: 11.5px; user-select: none; }
.mo-rb-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mo-rb-item b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-rb-item em { font-style: normal; font: 500 10px var(--f-mono); opacity: 0.6; }
.mo-rb-read { margin: 0; display: grid; gap: 12px; }
.mo-rb-read div { display: grid; gap: 1px; }
.mo-rb-read dt { font-size: 11.5px; opacity: 0.65; }
.mo-rb-read dd { margin: 0; font: 600 20px var(--f-mono); font-variant-numeric: tabular-nums; min-width: 6ch; }
.mo-rb-read div:last-child dd { color: var(--d-violet); }