/* Additive motion layer. All shop and studio controls retain their original layout. */
html[data-motion] body{isolation:isolate}
.motion-wallpaper,.motion-hero-art{pointer-events:none;user-select:none;overflow:hidden}
.motion-wallpaper{position:fixed;inset:0;z-index:-1;contain:strict;background:radial-gradient(ellipse at 85% 15%,#a5f3260a,transparent 55%)}
.motion-wallpaper i{position:absolute;width:min(70vw,850px);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse,#a5f32623,transparent 68%);animation:ambient-drift 24s ease-in-out infinite alternate}
.motion-wallpaper i:first-child{top:-35%;right:-20%}
.motion-wallpaper i:last-child{bottom:-55%;left:-20%;animation-delay:-12s;animation-direction:alternate-reverse;background:radial-gradient(ellipse,#a5f32617,transparent 67%)}
.motion-hero-art{position:absolute;inset:0;z-index:0;contain:strict;mix-blend-mode:screen}
.motion-hero-art::before{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 57% 60%,#a5f3262b,transparent 36%),radial-gradient(ellipse at 82% 38%,#a5f32617,transparent 26%);animation:hero-light 16s ease-in-out infinite alternate}
.motion-hero-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#08080836,transparent 55%),linear-gradient(0deg,#10101055,transparent 28%)}
.motion-hero-art.motion-out-of-view::before{animation-play-state:paused}
.marketplace-hero:has(.motion-hero-art) .marketplace-hero-inner{position:relative;z-index:1}
.marketplace-hero:has(.motion-hero-art) .hero-track-mark{z-index:1}
.motion-toggle{font-family:inherit!important;display:inline-flex;align-items:center;gap:9px;background:#161616db!important;border:1px solid #ffffff30!important;border-radius:999px!important;color:#d5d5d5!important;padding:9px 13px!important;font-size:12px!important;font-weight:400!important;line-height:1.4!important;cursor:pointer;white-space:nowrap;min-height:36px;box-shadow:none!important;text-transform:none;letter-spacing:0!important}
.motion-toggle:hover{border-color:#a5f326!important;color:#fff!important}
.motion-toggle:focus-visible{outline:2px solid #a5f326;outline-offset:4px}
.motion-toggle:disabled{cursor:default;opacity:.7}
.motion-toggle-icon{width:12px;height:12px;display:flex;align-items:center;justify-content:center;gap:3px}
.motion-toggle-icon::before,.motion-toggle-icon::after{content:'';display:block;width:2px;height:10px;background:currentColor;border-radius:1px}
[data-motion=off] .motion-toggle-icon::before{width:8px;height:8px;clip-path:polygon(0 0,100% 50%,0 100%)}
[data-motion=off] .motion-toggle-icon::after{display:none}
.marketplace-hero>.motion-toggle{position:absolute;right:24px;top:18px;z-index:2}
.page>.motion-toggle{margin-top:24px}
.beat-studio footer:has(.motion-toggle){flex-wrap:wrap;gap:14px}
[data-motion=on] .beat-store .motion-card{transition:transform .48s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s;transform:perspective(1000px) rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg)) translateY(var(--motion-lift,0px));transform-origin:center;isolation:isolate}
[data-motion=on] .beat-store .motion-card::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(500px circle at var(--motion-x,50%) var(--motion-y,50%),#ffffff0e,transparent 65%);opacity:0;transition:opacity .4s}
[data-motion=on] .beat-store .motion-card:hover{--motion-lift:-7px;box-shadow:0 18px 42px #0007,0 0 0 1px #a5f32625;border-color:#a5f326}
[data-motion=on] .beat-store .motion-card:hover::after{opacity:1}
[data-motion=on] .beat-store .track-art img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
[data-motion=on] .beat-store .motion-card:hover .track-art img{transform:scale(1.035)}
[data-motion=on] :is(.market-button,.button,.btn,.hero-studio-link){transition:translate .22s ease,box-shadow .25s ease,background-color .2s ease,border-color .2s ease}
[data-motion=on] :is(.market-button,.button,.btn,.hero-studio-link):hover{translate:0 -2px}
[data-motion=on] :is(.market-button,.button,.btn):active{translate:0 0;scale:.98}
[data-motion=on] .beat-store .market-buy:hover{box-shadow:0 5px 24px #a5f32635}
[data-motion=on] .beat-store .discovery-search{transition:box-shadow .4s,border-color .4s}
[data-motion=on] .beat-store .discovery-search:focus-within{border-color:#a5f326;box-shadow:0 0 0 4px #a5f32614,0 12px 40px #0005}
[data-motion=on] dialog[open]{animation:motion-dialog .3s cubic-bezier(.2,.8,.2,1)}
[data-motion=on] dialog[open]::backdrop{animation:motion-backdrop .3s ease-out}
[data-motion=on] .beat-store .track.is-playing{box-shadow:0 0 0 1px #a5f32666,0 10px 40px #a5f32612}
[data-motion=on] .beat-store .round-play.is-playing{animation:playing-halo 2.4s ease-in-out infinite}
[data-motion=on] .beat-store .player:not([hidden]){animation:player-arrive .4s cubic-bezier(.2,.8,.2,1)}
[data-motion=on] .motion-arrival{animation:page-arrive .5s cubic-bezier(.2,.8,.2,1)}
html[data-motion=off]{scroll-behavior:auto}
[data-motion=off] .motion-wallpaper i,[data-motion=off] .motion-hero-art::before,[data-motion-suspended] .motion-wallpaper i,[data-motion-suspended] .motion-hero-art::before{animation-play-state:paused}
[data-motion=off] .motion-card{--motion-rx:0deg!important;--motion-ry:0deg!important;--motion-lift:0px!important}
@keyframes ambient-drift{to{transform:translate(-12%,18%) scale(1.2)}}
@keyframes hero-light{0%{transform:translate(-3%,-2%) scale(.94);opacity:.5}100%{transform:translate(5%,3%) scale(1.08);opacity:1}}
@keyframes motion-dialog{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@keyframes motion-backdrop{from{background-color:#0000}}
@keyframes playing-halo{0%,100%{box-shadow:0 0 0 0 #a5f32600}50%{box-shadow:0 0 0 7px #a5f32616}}
@keyframes player-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes page-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes page-leave{to{opacity:0;translate:0 -6px}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-leave .18s ease-out both}
::view-transition-new(root){animation:page-arrive .42s cubic-bezier(.2,.8,.2,1) both}
[data-motion=off]::view-transition-old(root),[data-motion=off]::view-transition-new(root){animation:none}
@media(hover:none),(pointer:coarse){
  [data-motion=on] .beat-store .motion-card:hover{transform:none;--motion-lift:0px}
  [data-motion=on] .beat-store .motion-card:hover .track-art img{transform:none}
}
@media(max-width:640px){
  .marketplace-hero>.motion-toggle{top:10px;right:12px;font-size:11px!important;padding:6px 10px!important;min-height:30px}
  .motion-wallpaper i{width:110vw}
}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion=on]){scroll-behavior:auto!important}
  html:not([data-motion=on]) :is(.motion-wallpaper i,.motion-hero-art::before){animation:none!important}
  html:not([data-motion=on]) :is(.motion-card,.track-art img,.market-button,.button,.btn,.hero-studio-link,.discovery-search,dialog,.round-play,.player,.motion-arrival){animation:none!important;transition:none!important;translate:none!important}
  html:not([data-motion=on]) .motion-card{transform:none!important}
}

/* Home entrance decoration: four DAW logos replace the ribbons and notes. */
.hero-platform-symbol{position:absolute;left:var(--logo-x);top:var(--logo-y);width:var(--logo-size);height:var(--logo-size);transform:translate(-50%,-50%);opacity:.72;mix-blend-mode:screen}
.hero-platform-symbol img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(1.25);animation:hero-platform-float var(--logo-duration,18s) ease-in-out var(--logo-delay,0s) infinite;will-change:transform}
.hero-platform-symbol[data-paper] img{filter:invert(1) contrast(6)}
.hero-platform-symbol[data-ink] img{filter:brightness(0) invert(1)}
.hero-platform-symbol:nth-child(1){--logo-x:14%;--logo-y:78%;--logo-size:88px;--logo-duration:18s;--logo-delay:-3s}
.hero-platform-symbol:nth-child(2){--logo-x:42%;--logo-y:77%;--logo-size:148px;--logo-duration:22s;--logo-delay:-9s}
.hero-platform-symbol:nth-child(3){--logo-x:75%;--logo-y:36%;--logo-size:96px;--logo-duration:20s;--logo-delay:-6s}
.hero-platform-symbol:nth-child(4){--logo-x:89%;--logo-y:59%;--logo-size:86px;--logo-duration:24s;--logo-delay:-14s}
@keyframes hero-platform-float{0%,100%{transform:translate3d(-12px,8px,0) rotate(-7deg)}50%{transform:translate3d(15px,-17px,0) rotate(7deg)}}
[data-motion=off] .hero-platform-symbol img,[data-motion-suspended] .hero-platform-symbol img,.motion-out-of-view .hero-platform-symbol img{animation-play-state:paused;will-change:auto}
@media(max-width:700px){
  .hero-platform-symbol{opacity:.58}
  .hero-platform-symbol:nth-child(1){--logo-x:12%;--logo-y:84%;--logo-size:52px}
  .hero-platform-symbol:nth-child(2){--logo-x:39%;--logo-y:90%;--logo-size:91px}
  .hero-platform-symbol:nth-child(3){--logo-x:67%;--logo-y:82%;--logo-size:58px}
  .hero-platform-symbol:nth-child(4){--logo-x:88%;--logo-y:91%;--logo-size:52px}
}