/* Design Movements previews (.x-mov-*). */
.x-mov-col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.x-mov-p { position: relative; width: 240px; height: 128px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #2a2a31; }
.x-mov-lab { font: 9px var(--mono); color: var(--key); letter-spacing: .02em; }
.x-mov-a { position: absolute; box-sizing: border-box; }
.x-mov-spin { animation: x-mov-spin 12s linear infinite; }
.x-mov-spin.slow { animation-duration: 30s; }
@keyframes x-mov-spin { to { transform: rotate(360deg); } }
.x-mov-slide { animation: x-mov-slide 3.4s ease-in-out infinite; }
@keyframes x-mov-slide { 50% { transform: translateX(-14px); } }
.x-mov-fl { animation: x-mov-fl 3.6s ease-in-out infinite; }
.x-mov-fl.d1 { animation-delay: -1.2s; } .x-mov-fl.d2 { animation-delay: -2.4s; }
@keyframes x-mov-fl { 50% { transform: translateY(-6px); } }
.x-mov-fade { animation: x-mov-fade 3.4s ease-in-out infinite; }
@keyframes x-mov-fade { 50% { opacity: .25; } }
.x-mov-vib { animation: x-mov-vib 3s ease-in-out infinite; }
@keyframes x-mov-vib { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(6deg); } }
.x-mov-pop { animation: x-mov-pop 2.6s ease-in-out infinite; }
@keyframes x-mov-pop { 50% { transform: scale(1.1) rotate(-2deg); } }
.x-mov-dots { animation: x-mov-dots 3s linear infinite; }
@keyframes x-mov-dots { to { background-position: 9px 9px; } }
.x-mov-jit { animation: x-mov-jit 3s steps(1) infinite; }
@keyframes x-mov-jit { 0%, 100% { margin-top: 0; } 25% { margin-top: 2px; } 50% { margin-top: -2px; } 75% { margin-top: 1px; } }
.x-mov-flick { animation: x-mov-flick 3s steps(1) infinite; }
@keyframes x-mov-flick { 0%, 100% { opacity: 1; } 20% { opacity: .5; } 25% { opacity: 1; } 70% { opacity: .7; } 72% { opacity: 1; } }
.x-mov-hue { animation: x-mov-hue 3.4s linear infinite; }
@keyframes x-mov-hue { to { filter: hue-rotate(360deg); } }
.x-mov-cur { display: inline-block; width: 5px; height: 9px; margin-left: 2px; background: #000; vertical-align: -1px; animation: x-mov-blink 1s steps(1) infinite; }
@keyframes x-mov-blink { 50% { opacity: 0; } }
.x-mov-needle { position: absolute; left: 50%; top: 50%; width: 2px; height: 34px; margin-left: -1px; background: #e8631a; transform-origin: 1px 0; transform: rotate(180deg); animation: x-mov-needle 3.6s ease-in-out infinite; }
@keyframes x-mov-needle { 0%, 100% { transform: rotate(120deg); } 50% { transform: rotate(240deg); } }
.x-mov-mq { overflow: hidden; white-space: nowrap; font: 9px Times, serif; background: #ffff99; margin-top: 3px; border: 1px solid #000; }
.x-mov-mq span { display: inline-block; padding-left: 100%; animation: x-mov-mq 6s linear infinite; }
@keyframes x-mov-mq { to { transform: translateX(-100%); } }
.x-mov-shine { position: absolute; top: 0; bottom: 0; width: 22px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); animation: x-mov-shine 3s ease-in-out infinite; }
@keyframes x-mov-shine { from { left: -30px; } 60%, to { left: 140px; } }
.x-mov-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(#ddd, #888); box-shadow: 0 1px 2px #000; animation: x-mov-knob 3.4s ease-in-out infinite; }
@keyframes x-mov-knob { 0%, 35% { transform: none; } 50%, 85% { transform: translateX(30px); } }
.x-mov-tile { animation: x-mov-tile 3.6s ease-in-out infinite; }
.x-mov-tile:nth-child(odd) { animation-delay: -1.8s; }
@keyframes x-mov-tile { 50% { transform: scale(.96); } }
.x-mov-ripple { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, .5); animation: x-mov-ripple 2.8s ease-out infinite; }
@keyframes x-mov-ripple { 0% { transform: scale(0); opacity: 1; } 60%, 100% { transform: scale(5); opacity: 0; } }
.x-mov-nknob { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #e0e5ec; box-shadow: 3px 3px 6px #a3b1c6, -3px -3px 6px #fff; animation: x-mov-nk 3.4s ease-in-out infinite; }
@keyframes x-mov-nk { 0%, 35% { transform: none; } 50%, 85% { transform: translateX(42px); } }
.x-mov-drift { animation: x-mov-drift 5s ease-in-out infinite; }
.x-mov-drift.b { animation-direction: reverse; }
@keyframes x-mov-drift { 50% { transform: translate(60px, 14px); } }
.x-mov-press { animation: x-mov-press 2.6s ease-in-out infinite; }
@keyframes x-mov-press { 0%, 100% { transform: none; box-shadow: 4px 4px 0 #000; } 50% { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; } }
.x-mov-bento { position: absolute; inset: 8px; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); gap: 5px; }
.x-mov-bt { border-radius: 10px; border: 1px solid #2f2f38; padding: 7px; display: flex; flex-direction: column; gap: 4px; animation: x-mov-bt 3.6s ease-in-out infinite; }
.x-mov-bt u { display: block; width: 40%; height: 4px; border-radius: 2px; background: #5a5a66; }
.x-mov-bt s { display: block; width: 26%; height: 4px; border-radius: 2px; background: #33333b; }
.x-mov-bt.a { grid-column: span 2; grid-row: span 2; } .x-mov-bt.b { grid-column: span 2; } .x-mov-bt.d { grid-column: span 2; }
@keyframes x-mov-bt { 0%, 30%, 100% { border-color: #2f2f38; } 12% { border-color: var(--key); } }
.x-mov-lens { animation: x-mov-lens 4s ease-in-out infinite; }
@keyframes x-mov-lens { 0%, 100% { transform: translateX(12px); } 50% { transform: translateX(150px); } }
.x-mov-breath { animation: x-mov-breath 3.6s ease-in-out infinite; }
@keyframes x-mov-breath { 50% { transform: scale(1.12); opacity: .85; } }
.x-mov-floor { position: absolute; left: -60%; right: -60%; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #ff5fa2 0 1px, transparent 1px 24px), repeating-linear-gradient(0deg, #ff5fa2 0 1px, transparent 1px 12px); transform: perspective(60px) rotateX(48deg); transform-origin: top; animation: x-mov-floor 1.2s linear infinite; }
@keyframes x-mov-floor { to { background-position: 0 0, 0 12px; } }