/* SPDX-License-Identifier: MIT */
.motion-art{position:relative;display:block;overflow:hidden;isolation:isolate;pointer-events:none;background:transparent;--motion-duration:18s;--motion-pulse-scale:1}
.motion-art>.motion-art-image{display:block;width:100%;height:100%;object-fit:cover;transform-origin:center}
.motion-art::before{content:"";position:absolute;z-index:1;inset:-25%;pointer-events:none;opacity:0}
.motion-art[data-enabled=true][data-preset=drift]>.motion-art-image{animation:motion-drift var(--motion-duration) ease-in-out infinite alternate}
.motion-art[data-enabled=true][data-preset=float]>.motion-art-image{animation:motion-float var(--motion-duration) ease-in-out infinite alternate}
.motion-art[data-enabled=true][data-preset=smoke]::before{background:radial-gradient(ellipse at 25% 60%,#d9e6e5aa,transparent 45%),radial-gradient(ellipse at 70% 25%,#fff8,transparent 40%),radial-gradient(ellipse at 50% 70%,#8fa6ac88,transparent 48%);opacity:var(--motion-opacity);animation:motion-smoke var(--motion-duration) ease-in-out infinite alternate}
.motion-art[data-enabled=true][data-preset=pulse]>.motion-art-image{transform:scale(var(--motion-pulse-scale));transition:transform .12s linear}
.motion-particles{position:absolute;inset:0;z-index:1;pointer-events:none;display:none}
.motion-art[data-enabled=true][data-preset=particles]>.motion-particles{display:block}
.motion-particles i{position:absolute;width:3px;height:3px;background:#fae9b1;border-radius:50%;opacity:var(--motion-opacity);box-shadow:0 0 3px #fff9;animation:motion-particle var(--motion-duration) linear infinite;left:calc(12% + var(--particle-index)*14%);top:calc(15% + var(--particle-index)*13%);animation-delay:calc(var(--particle-index)*-2.5s)}
.motion-art[data-running=false]>.motion-art-image,.motion-art[data-running=false]::before,.motion-art[data-running=false] .motion-particles i{animation-play-state:paused}
.motion-art[data-enabled=false]>.motion-art-image{transform:none;transition:none}.motion-art[data-enabled=false]::before{opacity:0}.motion-art[data-enabled=false]>.motion-particles{display:none}
@keyframes motion-drift{from{transform:scale(var(--motion-scale)) translate(0,0)}to{transform:scale(var(--motion-scale)) translate(var(--motion-x),var(--motion-y))}}
@keyframes motion-float{from{transform:perspective(900px) scale(1.01) rotateY(0deg)}to{transform:perspective(900px) scale(var(--motion-zoom)) rotateY(var(--motion-tilt)) translate(var(--motion-x),var(--motion-y))}}
@keyframes motion-smoke{from{transform:translate(0,0) scale(1)}to{transform:translate(var(--motion-x),var(--motion-y)) scale(1.12)}}
@keyframes motion-particle{from{transform:translate(0,20px);opacity:0}25%{opacity:var(--motion-opacity)}to{transform:translate(var(--motion-travel-x),var(--motion-travel-y));opacity:0}}
.motion-controls{border:1px solid #24434d;border-radius:7px;padding:9px;margin:10px 0;color:inherit;min-width:0}.motion-controls summary{cursor:pointer;color:#74deec;font-size:14px}.motion-controls>div{display:grid;gap:10px;padding-top:10px}.motion-controls label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;min-width:0}.motion-controls input:not([type=checkbox]),.motion-controls select{width:58%;min-width:0;color:inherit;background:#081216;border:1px solid #24434d;border-radius:4px;padding:5px}.motion-controls small{font-size:12px;color:#abbfc7;line-height:1.5}.motion-live-preview{aspect-ratio:1;max-width:100%;margin:8px 0;border-radius:7px}.motion-pause{border:1px solid #24434d;background:#081216;color:#74deec;padding:7px 10px;border-radius:5px}.motion-preview-song{max-width:100%;width:100%}.motion-dj-art{aspect-ratio:1;width:130px;margin:8px auto;border-radius:10px}.motion-dj-controls{width:100%}
.profile-cover>.motion-art{height:100%;width:100%}.profile-motion-avatar{width:120px;height:120px;flex-shrink:0;border-radius:50%}.motion-cover{aspect-ratio:1;border-radius:8px}.motion-hover-art{transition:transform .2s ease}a:hover .motion-hover-art,.music-grid article:hover .motion-hover-art,.music-lane article:hover .motion-hover-art{transform:scale(1.025)}
@media(max-width:640px){.motion-particles i:nth-child(n+4){display:none}.motion-controls{padding:8px}.motion-controls label{flex-wrap:wrap}.profile-motion-avatar{width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.motion-art>.motion-art-image{animation:none!important;transform:none!important;transition:none!important}.motion-art::before,.motion-art .motion-particles{display:none!important}.motion-hover-art{transition:none!important;transform:none!important}}