/* Original Kumyu motion studies. The host owns play/replay controls. */
.motion-demo { position:relative; isolation:isolate; overflow:hidden; width:100%; aspect-ratio:16/10; min-height:160px; background:#132b30; color:#eeeadd; font-family:Arial,Helvetica,sans-serif; container-type:inline-size; }
.motion-demo * { box-sizing:border-box; animation-play-state:paused!important; }
.motion-demo.playing *, .playing .motion-demo * { animation-play-state:running!important; }
.motion-demo .md-index, .motion-demo .md-footer { position:absolute; z-index:4; left:7%; font-size:9px; font-size:clamp(8px,2.5cqw,12px); font-weight:500; letter-spacing:.14em; line-height:1.5; }
.motion-demo .md-index { top:8%; }.motion-demo .md-footer { bottom:8%; opacity:.68; }
.motion-demo i, .motion-demo b { display:block; }

.md-split-type { background:#e7e2d7; color:#25443d; }
.md-split-word { position:absolute; width:86%; height:38%; top:30%; left:7%; }
.md-split-word span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24cqw; line-height:1; letter-spacing:-.085em; font-weight:800; animation:md-split 4.8s cubic-bezier(.76,0,.24,1) infinite; }
.md-split-word span:nth-child(1) { clip-path:inset(0 0 66% 0); --shift:-14%; }
.md-split-word span:nth-child(2) { clip-path:inset(33% 0 33% 0); --shift:8%; animation-delay:-.08s; }
.md-split-word span:nth-child(3) { clip-path:inset(66% 0 0 0); --shift:-5%; animation-delay:-.16s; }
@keyframes md-split { 0%,18%,84%,100% { transform:translateX(0); } 36%,52% { transform:translateX(var(--shift)); } }

.md-type-echo { background:#172838; color:#d8bda7; }
.md-echo-word { position:absolute; inset:28% 3% 27%; }
.md-echo-word span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22cqw; font-weight:800; letter-spacing:-.065em; line-height:1; }
.md-echo-word span:nth-child(1), .md-echo-word span:nth-child(2) { color:transparent; -webkit-text-stroke:1px #d8bda7; animation:md-echo 4.4s cubic-bezier(.22,1,.36,1) infinite; }
.md-echo-word span:nth-child(1) { --x:8%; --y:-20%; opacity:.3; }
.md-echo-word span:nth-child(2) { --x:4%; --y:-10%; opacity:.6; animation-delay:-.15s; }
.md-echo-word span:nth-child(3) { animation:md-echo-front 4.4s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes md-echo { 0%,20%,88%,100% { transform:translate(calc(var(--x)*.5),calc(var(--y)*.5)); } 42%,58% { transform:translate(var(--x),var(--y)); } }
@keyframes md-echo-front { 0%,20%,88%,100% { transform:translate(0,0); } 42%,58% { transform:translate(-3%,7%); } }

.md-aperture { background:#223e43; color:#f5eadb; }
.md-aperture-base, .md-aperture-next { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.md-aperture-base span, .md-aperture-next span { position:relative; z-index:2; font-size:12cqw; letter-spacing:-.06em; font-weight:800; }
.md-aperture-base i { position:absolute; width:28%; aspect-ratio:1; border:1px solid #799493; border-radius:50%; transform:translate(-75%,0); }
.md-aperture-next { background:#b97151; clip-path:circle(0% at 50% 50%); animation:md-aperture 5s cubic-bezier(.65,0,.35,1) infinite; }
.md-aperture-next i { position:absolute; width:30%; aspect-ratio:1; border:1px solid #e9bf9c; border-radius:50%; transform:translate(65%,-5%); }
@keyframes md-aperture { 0%,15%,100% { clip-path:circle(0% at 50% 50%); } 42%,72% { clip-path:circle(75% at 50% 50%); } 92% { clip-path:circle(0% at 50% 50%); } }

.md-horizon { background:#d9d5ca; color:#21403d; }
.md-horizon-lines { position:absolute; inset:28% 10%; display:flex; flex-direction:column; justify-content:space-around; }
.md-horizon-lines i { height:1px; background:#819690; }
.md-horizon-panel { position:absolute; inset:0; display:grid; place-items:center; color:#e7ded0; background:#38594e; clip-path:inset(49.5% 0); animation:md-horizon 4.6s cubic-bezier(.83,0,.17,1) infinite; }
.md-horizon-panel span { font-size:20cqw; letter-spacing:-.06em; font-weight:800; line-height:.6; text-align:center; animation:md-horizon-title 4.6s cubic-bezier(.83,0,.17,1) infinite; }
.md-horizon-panel small { font-size:4.1cqw; letter-spacing:.3em; font-weight:500; }
@keyframes md-horizon { 0%,16%,100% { clip-path:inset(49.5% 0); } 42%,72% { clip-path:inset(0% 0); } 92% { clip-path:inset(49.5% 0); } }
@keyframes md-horizon-title { 0%,28%,94%,100% { transform:translateY(10%); opacity:0; } 49%,70% { transform:translateY(0); opacity:1; } }

.md-capsule { background:#e4e5d8; color:#2f5144; }
.md-capsule-control { position:absolute; top:39%; left:25%; width:50%; height:25%; border-radius:50px; background:#345747; color:#f0eddc; box-shadow:0 7px 0 #c2c8b6; animation:md-capsule 4.2s cubic-bezier(.34,1.56,.64,1) infinite; }
.md-capsule-control span { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 17%; font-size:5cqw; font-weight:500; }
.md-capsule-control b { font-weight:400; }
.md-capsule-before { animation:md-capsule-before 4.2s ease infinite; }.md-capsule-after { opacity:0; animation:md-capsule-after 4.2s ease infinite; }
@keyframes md-capsule { 0%,17%,83%,100% { transform:translateY(0) scale(1); box-shadow:0 7px 0 #c2c8b6; } 25% { transform:translateY(6px) scale(.96,.9); box-shadow:0 1px 0 #c2c8b6; } 37% { transform:translateY(-2px) scale(1.02,1.03); } 47%,70% { transform:translateY(0) scale(1); box-shadow:0 7px 0 #c2c8b6; } }
@keyframes md-capsule-before { 0%,24%,90%,100% { opacity:1; transform:translateY(0); } 36%,78% { opacity:0; transform:translateY(-8%); } }
@keyframes md-capsule-after { 0%,24%,90%,100% { opacity:0; transform:translateY(8%); } 36%,78% { opacity:1; transform:translateY(0); } }

.md-focus { background:#232d3b; color:#dec6ac; }
.md-focus-track { position:absolute; width:40%; aspect-ratio:1; top:20%; left:30%; border:1px solid #546274; border-radius:50%; }
.md-focus-track > i { position:absolute; width:7%; aspect-ratio:1; border-radius:50%; background:#dec6ac; margin:-3.5%; }
.md-focus-track > i:nth-child(1) { left:50%; top:0; }.md-focus-track > i:nth-child(2) { left:100%; top:50%; }.md-focus-track > i:nth-child(3) { left:50%; top:100%; }.md-focus-track > i:nth-child(4) { left:0; top:50%; }
.md-focus-track > span { position:absolute; inset:0; display:grid; place-items:center; font-size:2.6cqw; letter-spacing:.2em; }
.md-focus-carrier { position:absolute; inset:0; animation:md-focus-orbit 5.2s cubic-bezier(.65,0,.35,1) infinite; }
.md-focus-carrier b { position:absolute; width:20%; aspect-ratio:1; top:0; left:50%; margin:-10%; border:1px solid #dcad86; border-radius:50%; box-shadow:0 0 0 5px #dcad8610; }
@keyframes md-focus-orbit { 0%,15% { transform:rotate(0deg); } 52%,80% { transform:rotate(450deg); } 100% { transform:rotate(720deg); } }

.md-stagger { background:#ddd8cb; color:#2b3f36; }
.md-card-row { position:absolute; inset:27% 9% 23%; display:flex; align-items:stretch; gap:4%; }
.md-card-row > div { flex:1; border-radius:4px; background:#f1ede3; padding:4%; box-shadow:0 4px 14px #343b3310; animation:md-card-in 5.4s cubic-bezier(.22,1,.36,1) infinite; }
.md-card-row > div:nth-child(2) { animation-delay:-.12s; }.md-card-row > div:nth-child(3) { animation-delay:-.24s; }
.md-card-row i { font-size:2.1cqw; font-style:normal; }.md-card-row b { width:80%; aspect-ratio:1; border-radius:50%; background:#aebda2; margin:15% auto; }.md-card-row > div:nth-child(2) b { border-radius:4px; background:#ba8066; }.md-card-row > div:nth-child(3) b { border-radius:50% 50% 0 0; background:#768e8b; }.md-card-row span { display:block; font-size:2.2cqw; letter-spacing:.09em; text-align:center; }
@keyframes md-card-in { 0%,15%,90%,100% { transform:translateY(0); opacity:1; } 32% { transform:translateY(27%); opacity:.45; } 56%,76% { transform:translateY(0); opacity:1; } }

.md-accordion { background:#d8d9cf; color:#283e39; }
.md-panel-row { position:absolute; inset:25% 8% 22%; display:flex; gap:3%; }
.md-panel-row > div { position:relative; min-width:22%; flex-grow:3; border-radius:3px; background:#405c51; color:#f0eadb; overflow:hidden; animation:md-panel 6s cubic-bezier(.76,0,.24,1) infinite; }
.md-panel-row > div:nth-child(2) { background:#b57959; animation-delay:-3s; }
.md-panel-row span { position:absolute; top:12%; left:15%; font-size:2.5cqw; }.md-panel-row b { position:absolute; bottom:12%; left:15%; font-size:3.2cqw; font-weight:500; letter-spacing:.08em; }.md-panel-row i { position:absolute; width:22cqw; aspect-ratio:1; border:1px solid #ede4d760; border-radius:50%; top:7%; left:25%; }
@keyframes md-panel { 0%,17%,100% { flex-grow:3; } 45%,68% { flex-grow:1; } }

.md-orbit-loader { background:#1d373b; color:#d6cdb8; }
.md-orbit-ring { position:absolute; width:37%; aspect-ratio:1; top:22%; left:31.5%; border-radius:50%; border:1px solid #53716e; }
.md-orbit-ring > div { position:absolute; inset:-1px; border-radius:50%; animation:md-orbit-spin 3.6s linear infinite; }.md-orbit-ring > div:nth-child(2) { animation-delay:-1.2s; }.md-orbit-ring > div:nth-child(3) { animation-delay:-2.4s; }
.md-orbit-ring i { position:absolute; top:0; left:50%; width:10%; aspect-ratio:1; margin:-5%; background:#d6cdb8; border-radius:50%; }.md-orbit-ring > div:nth-child(2) i { width:7%; margin:-3.5%; background:#a6bdad; }.md-orbit-ring > div:nth-child(3) i { width:5%; margin:-2.5%; background:#8ba4a0; }
.md-orbit-ring span { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:3cqw; letter-spacing:.15em; line-height:1.5; }
@keyframes md-orbit-spin { to { transform:rotate(360deg); } }

.md-meter { background:#212e34; color:#bdcbb6; }
.md-meter-bars { position:absolute; inset:30% 20%; display:flex; gap:6%; align-items:center; }
.md-meter-bars i { flex:1; height:100%; background:#bdcbb6; border-radius:20px; transform:scaleY(.25); animation:md-meter-pulse 2.8s ease-in-out infinite; animation-delay:calc(var(--n)*-.17s); }
@keyframes md-meter-pulse { 0%,100% { transform:scaleY(.25); opacity:.45; } 50% { transform:scaleY(1); opacity:1; } }

.md-moire { background:#dcd8cc; color:#304e49; }
.md-moire-window { position:absolute; inset:22% 17%; overflow:hidden; border-radius:50%; border:1px solid #36574d60; background:#e9e4d6; }
.md-moire-window i { position:absolute; inset:-40%; background:repeating-linear-gradient(0deg,transparent 0 6px,#36574d70 6px 7px); animation:md-moire-turn 12s linear infinite; }
.md-moire-window i:nth-child(2) { --angle:28deg; animation-direction:reverse; opacity:.65; }
.md-moire-window span { position:absolute; inset:0; display:grid; place-items:center; font-size:2.5cqw; letter-spacing:.12em; font-weight:600; }
@keyframes md-moire-turn { from { transform:rotate(var(--angle,0deg)); } to { transform:rotate(calc(var(--angle,0deg) + 180deg)); } }

.md-lattice { background:#1e353f; color:#d4c7af; }
.md-lattice-grid { position:absolute; inset:25% 18%; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); gap:2cqw; }
.md-lattice-grid i { border-radius:50%; width:100%; aspect-ratio:1; background:#d4c7af; transform:scale(.45); animation:md-lattice-pulse 4.8s ease-in-out infinite; animation-delay:calc(var(--n)*-.24s); }
.md-lattice-grid i:nth-child(3n) { background:#96afa2; }
@keyframes md-lattice-pulse { 0%,100% { transform:scale(.45); opacity:.55; } 50% { transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion:reduce) { .motion-demo *, .motion-demo.playing *, .playing .motion-demo * { animation:none!important; } .md-aperture-next { clip-path:circle(35% at 50% 50%); }.md-horizon-panel { clip-path:inset(13% 0); }.md-horizon-panel span { opacity:1; }.md-lattice-grid i { transform:scale(.75); } }