/* The motion graphics demo (motion.js): an editor with the animation, its layers and a playhead to scrub. */
/* ---------- motion graphics: the editor ---------- */
.mo-host { position: absolute; inset: 0; }
.mo { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: #121216; color: #c9cad6; font-family: "Inter Tight", sans-serif; box-shadow: 0 40px 80px rgba(10, 10, 20, .32), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mo-bar { display: flex; align-items: center; gap: 14px; flex: none; height: 40px; padding: 0 14px; border-bottom: 1px solid #23232b; }
.mo-dots { display: flex; gap: 6px; }
.mo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.mo-dots i:nth-child(2) { background: #febc2e; } .mo-dots i:nth-child(3) { background: #28c840; }
.mo-file { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; color: #8d8e9c; }
.mo-ar { display: flex; flex: none; margin-left: auto; padding: 2px; border-radius: 8px; background: #1d1d24; }
.mo-ar button { height: 26px; padding: 0 11px; border-radius: 6px; font-family: var(--mono); font-size: 11px; color: #8d8e9c; transition: background-color .2s, color .2s; }
.mo-ar button:hover { color: #fff; }
.mo-ar button.on { background: #30303b; color: #fff; }
.mo-view { flex: 1; display: grid; place-items: center; min-height: 0; background: #0c0c0f radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 16px 16px; }
.mo-frame { position: relative; overflow: hidden; container-type: size; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 40px rgba(0, 0, 0, .5); }
.mo-frame.ar-169 { width: 560px; height: 315px; } .mo-frame.ar-11 { width: 315px; height: 315px; } .mo-frame.ar-916 { width: 177px; height: 315px; }
.mo.narrow .mo-frame.ar-169 { width: 384px; height: 216px; } .mo.narrow .mo-frame.ar-11 { width: 290px; height: 290px; } .mo.narrow .mo-frame.ar-916 { width: 170px; height: 302px; }
.mo-tp { display: flex; align-items: center; gap: 14px; flex: none; height: 36px; padding: 0 14px; border-top: 1px solid #23232b; font-family: var(--mono); font-size: 11px; color: #8d8e9c; }
.mo-play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #26262f; color: #fff; }
.mo-play svg { width: 13px; height: 13px; }
.mo-tc { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mo-hint { margin-left: auto; opacity: .75; }
.mo-tl { display: flex; flex: none; height: 178px; border-top: 1px solid #23232b; background: #16161b; }
.mo-names { flex: none; width: 128px; border-right: 1px solid #23232b; font-size: 11px; }
.mo-rh { height: 24px; padding: 0 12px; border-bottom: 1px solid #23232b; font-family: var(--mono); font-size: 9.5px; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; color: #6b6c7a; }
.mo-nm { display: flex; align-items: center; gap: 8px; height: 20px; padding: 0 12px; border-bottom: 1px solid #1e1e25; color: #b9bac8; white-space: nowrap; }
.mo-nm i { flex: none; width: 7px; height: 7px; border-radius: 2px; }
.mo-lanes { position: relative; flex: 1; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.mo-ruler { position: relative; height: 24px; border-bottom: 1px solid #23232b; }
.mo-ruler span { position: absolute; top: 0; bottom: 0; padding: 6px 0 0 4px; border-left: 1px solid #3a3a45; font-family: var(--mono); font-size: 9.5px; color: #6b6c7a; }
.mo-ruler i { position: absolute; bottom: 0; width: 1px; height: 5px; background: #33333d; }
.mo-rows { position: relative; }
.mo-row { position: relative; height: 20px; border-bottom: 1px solid #1e1e25; }
.mo-clip { position: absolute; top: 4px; bottom: 4px; border-radius: 3px; background: color-mix(in srgb, var(--c) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 52%, transparent); }
.mo-row i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--c); transform: rotate(45deg); box-shadow: 0 0 0 1.5px #16161b; }
.mo-ph { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 1px; background: #ff4d5e; pointer-events: none; }
.mo-ph i { position: absolute; top: 0; left: -6px; width: 13px; height: 14px; background: #ff4d5e; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.mo.scrubbing .mo-ph { box-shadow: 0 0 0 1px rgba(255, 77, 94, .35); }
.mo.narrow .mo-names { width: 92px; }
.mo.narrow .mo-nm { height: 18px; padding: 0 8px; font-size: 10px; }
.mo.narrow .mo-row { height: 18px; }
.mo.narrow .mo-tl { height: 158px; }
.mo.narrow .mo-hint, .mo.narrow .mo-fps, .mo.narrow .mo-file { display: none; }
/* the frame: one composition that re-flows for 16:9, 1:1 and 9:16 (container units throughout) */
.mo-frame .mf { position: absolute; }
.mf-bg { inset: 0; z-index: 0; background: var(--ink); }
.mf-blob { z-index: 1; right: -5cqw; top: -16cqh; width: 66cqh; height: 66cqh; border-radius: 50%; background: var(--a); }
.mf-bar { z-index: 2; left: 0; right: 0; top: 64cqh; height: 6.5cqh; background: var(--a2); }
.mf-dot { z-index: 3; left: 74cqw; top: 50cqh; width: 9cqh; height: 9cqh; border-radius: 50%; background: var(--a2); }
.mf-name { z-index: 4; left: 7cqw; right: 7cqw; bottom: 12cqh; color: var(--bg); font-family: var(--fd); font-weight: var(--fw); line-height: 1; letter-spacing: -.02em; }
.mf-name .clip { display: block; width: max-content; overflow: hidden; padding: .06em 0 .12em; white-space: nowrap; }
.mo-frame .ch { display: inline-block; white-space: pre; }
.mf-label { z-index: 5; left: 7cqw; top: 8cqh; max-width: 70cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--on); font: 700 3.6cqh/1 var(--fb); letter-spacing: .14em; text-transform: uppercase; }
.mf-lines { z-index: 5; left: 7cqw; right: 7cqw; top: 22cqh; color: var(--on); font-family: var(--fd); font-weight: var(--fw); font-size: min(15cqh, 9.6cqw); line-height: 1.04; letter-spacing: -.02em; }
.mf-lines .ln { position: relative; isolation: isolate; display: block; width: max-content; max-width: 100%; overflow: hidden; padding: 0 .08em .05em; }
.mf-lines .w { display: block; white-space: nowrap; }
.mf-hl { position: absolute; z-index: -1; left: 0; right: 0; top: .1em; bottom: .02em; background: var(--a2); }
.mf-photo { z-index: 6; right: 6cqw; top: 10cqh; width: 46cqw; height: 80cqh; overflow: hidden; clip-path: inset(0 0 0 100%); }
.mf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-count { z-index: 7; left: 6cqw; top: 25cqh; width: 40cqw; padding: 4.5cqh 3.5cqw 5cqh; border-radius: 2cqh; background: var(--bg); color: var(--ink); }
.mf-count::before { content: ""; display: block; width: 7cqh; height: 1cqh; margin-bottom: 3cqh; background: var(--a); }
.mf-count b { display: block; font-family: var(--fd); font-size: min(19cqh, 9.5cqw); font-weight: var(--fw); line-height: .92; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mf-count span { display: block; margin-top: 2.4cqh; font: 600 4cqh/1.25 var(--fb); opacity: .7; }
.mf-iris { z-index: 8; inset: 0; background: var(--ink); clip-path: circle(0% at 50% 50%); }
.mf-lock { z-index: 9; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4cqw; padding: 0 8cqw 16cqh; }
.mf-badge { position: relative; flex: none; width: 26cqh; height: 26cqh; }
.mf-ring { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; overflow: visible; }
.mf-ring circle { fill: none; stroke: var(--a2); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 290; }
.mf-mark { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--a); color: var(--on); font-family: var(--fd); font-size: 9.5cqh; font-weight: var(--fw); }
.mf-mark.has-logo { background: #fff; }
.mf-mark img { display: block; width: 74%; height: 74%; object-fit: contain; }
.mf-lt { display: flex; flex-direction: column; min-width: 0; }
.mf-lname { display: block; overflow: hidden; padding-bottom: .08em; white-space: nowrap; color: var(--bg); font-family: var(--fd); font-weight: var(--fw); line-height: 1; letter-spacing: -.02em; }
.mf-tag { margin-top: 2cqh; color: var(--bg); opacity: .6; font: 600 3.3cqh/1 var(--fb); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.mf-ctaw { z-index: 10; left: 0; right: 0; top: 68cqh; display: flex; justify-content: center; }
.mf-cta { padding: 2.6cqh 4.6cqh; border-radius: 999px; background: var(--a); color: var(--on); font: 700 3.9cqh/1 var(--fb); white-space: nowrap; }
.mf-handle { z-index: 10; left: 0; right: 0; bottom: 6cqh; text-align: center; color: var(--bg); opacity: .62; font: 500 3.2cqh/1 var(--sans); white-space: nowrap; }
.mf-grain { position: absolute; z-index: 13; inset: -50%; pointer-events: none; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: moGrain .8s steps(5) infinite; }
@keyframes moGrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.mf-safe { position: absolute; z-index: 14; inset: 5cqh 5cqw; border: 1px dashed rgba(255, 255, 255, .13); pointer-events: none; }
/* 1:1 */
.ar-11 .mf-blob { right: -12cqw; top: -12cqh; width: 62cqh; height: 62cqh; }
.ar-11 .mf-bar { top: 60cqh; height: 5cqh; }
.ar-11 .mf-dot { left: 72cqw; top: 46cqh; }
.ar-11 .mf-name { bottom: 11cqh; }
.ar-11 .mf-lines { top: 24cqh; font-size: 11.5cqh; }
.ar-11 .mf-photo { right: 6cqw; top: auto; bottom: 7cqh; width: 52cqw; height: 50cqh; }
.ar-11 .mf-count { left: 6cqw; top: 8cqh; width: 52cqw; padding: 4cqh 4cqw; }
.ar-11 .mf-count b { font-size: 13cqh; }
.ar-11 .mf-lock, .ar-916 .mf-lock { flex-direction: column; gap: 6cqh; padding: 0 8cqw 18cqh; text-align: center; }
.ar-11 .mf-lt, .ar-916 .mf-lt { align-items: center; }
.ar-11 .mf-badge { width: 24cqh; height: 24cqh; }
.ar-11 .mf-ctaw { top: 76cqh; }
/* 9:16 */
.ar-916 .mf-blob { right: -30cqw; top: -8cqh; width: 90cqw; height: 90cqw; }
.ar-916 .mf-bar { top: 56cqh; height: 3cqh; }
.ar-916 .mf-dot { left: 66cqw; top: 40cqh; width: 7cqw; height: 7cqw; }
.ar-916 .mf-name { left: 8cqw; right: 8cqw; bottom: 20cqh; }
.ar-916 .mf-label { left: 8cqw; top: 6cqh; font-size: 4.5cqw; }
.ar-916 .mf-lines { left: 8cqw; right: 8cqw; top: 30cqh; font-size: 12cqw; }
.ar-916 .mf-photo { left: 8cqw; right: 8cqw; top: 8cqh; width: auto; height: 46cqh; }
.ar-916 .mf-count { left: 8cqw; right: 8cqw; top: auto; bottom: 10cqh; width: auto; padding: 3cqh 6cqw; }
.ar-916 .mf-count b { font-size: 16cqw; }
.ar-916 .mf-count span { font-size: 4.6cqw; }
.ar-916 .mf-badge { width: 34cqw; height: 34cqw; }
.ar-916 .mf-mark { font-size: 12cqw; }
.ar-916 .mf-tag { font-size: 4cqw; }
.ar-916 .mf-ctaw { top: 72cqh; }
.ar-916 .mf-cta { padding: 2.2cqh 6cqw; font-size: 4.6cqw; }
.ar-916 .mf-handle { bottom: 5cqh; font-size: 4cqw; }
.ar-916 .mf-safe { inset: 4cqh 6cqw; }
@media (prefers-reduced-motion: reduce) { .mf-grain { animation: none; } }


.mo-stage { position: relative; width: 100%; height: var(--mh, 600px); margin-top: 8px; }
.mo-stage .mock { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.s-live { margin-bottom: 64px; }