/* Motion uses existing AniZen layout and colours. No video or backend simulation. */
html[data-theme=day]{--bg:#F1EDF8;--s1:#F9F7FC;--s2:#E5DFF0;--tx:#221A32;--sec:#5E526D;--glass:rgba(250,247,255,.92);--stroke:rgba(68,48,95,.28)}
html[data-theme=day] .wall::after{background:linear-gradient(rgba(244,239,252,.65),rgba(244,239,252,.94))}
html[data-theme=day] .glass{background:var(--glass)}
html[data-theme=day] .bottomnav{background:rgba(248,244,255,.96)}
.theme-choice{background:none;border:0;color:var(--tx);font:inherit;width:100%;text-align:left;cursor:pointer}
.pflinks button{display:flex;justify-content:center;align-items:center;width:100%;min-height:48px;border:1px solid var(--stroke);border-radius:28px;background:transparent;color:var(--tx);font-family:Bebas,sans-serif;font-size:16px;letter-spacing:1px;margin-bottom:12px}
:where(a,button,select):focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.shell{perspective:1000px}
.pfsec,.pfavatar,.pflinks>*{backface-visibility:hidden;transform-style:preserve-3d}
.pfavatar{box-shadow:0 12px 26px #0005,inset 0 2px 2px #fff6;animation:avatar-float 5s ease-in-out infinite}
.pfsec{box-shadow:0 15px 30px #0003;animation:card-arrive .65s ease-out both}
.pfsec:nth-of-type(4){animation-delay:.10s}
.pflinks>*{transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
@media(hover:hover){.pflinks>*:hover{transform:translateY(-3px) rotateX(4deg);box-shadow:0 9px 18px #0004;background:var(--glass)}}
.pflinks>*:active{transform:translateY(1px) scale(.985)}
.settings-panel{margin:auto;width:min(440px,calc(100% - 28px));max-height:80dvh;overflow:auto;border:1px solid var(--stroke);border-radius:24px;background:var(--s1);color:var(--tx);padding:24px;box-shadow:0 30px 70px #0009;font:18px BarlowCond,sans-serif}
.settings-panel[open]{animation:panel-arrive .3s ease-out}
.settings-panel::backdrop{background:#05030cb8;backdrop-filter:blur(6px)}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.panel-top h2{font:24px Bebas,sans-serif;letter-spacing:1px}.panel-top button{border:1px solid var(--stroke);border-radius:16px;background:var(--s2);color:var(--tx);padding:10px 14px;font:inherit}
.settings-panel h3{margin:20px 0 6px;font-size:20px}.settings-panel p{line-height:1.5;color:var(--sec);margin:10px 0}.setting-field{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}.setting-field select{max-width:55%;padding:10px;background:var(--s2);color:var(--tx);border:1px solid var(--stroke);border-radius:12px;font:inherit}
@keyframes avatar-float{0%,100%{transform:translateY(0) rotateY(-9deg)}50%{transform:translateY(-5px) rotateY(9deg)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(16px) rotateX(-8deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes panel-arrive{from{opacity:0;transform:perspective(900px) translateY(18px) rotateX(-6deg)}to{opacity:1;transform:none}}
html[data-motion=reduced] *,html[data-motion=reduced] *::before,html[data-motion=reduced] *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.card,.logincard{transition:transform .35s ease,box-shadow .35s ease}
@media(hover:hover){.item:hover .card{transform:perspective(900px) translateY(-4px) rotateY(-3deg);box-shadow:8px 14px 28px #0005}}
/* Keep focused/scrolled settings clear of the fixed dock and preview notice. */
html{scroll-padding-bottom:150px}.pflinks>*,.signout{scroll-margin-block:24px 160px}
/* v10: the approved More depth/entrance language across every preview screen. */
.motion-enter{animation:card-arrive .65s ease-out both;backface-visibility:hidden;transform-style:preserve-3d}
.logincard,.profcard,.poster,.dlrow{box-shadow:0 15px 30px #0003;backface-visibility:hidden}
.pillbtn,.gbtn,.signin,.epplay,.backbtn,.pback,.pround,.chip,.bottomnav a,.profcard,.erow{transition:transform .22s ease,box-shadow .22s ease,background .22s ease;transform-style:preserve-3d}
@media(hover:hover){.pillbtn:hover,.gbtn:hover,.signin:hover,.profcard:hover,.epplay:hover{transform:perspective(900px) translateY(-3px) rotateX(4deg);box-shadow:0 9px 18px #0004}.pround:hover{transform:perspective(900px) translateY(-3px) rotateY(-5deg)}}
.pillbtn:active,.signin:active,.pround:active,.bottomnav a:active,.chip:active{transform:translateY(1px) scale(.985)}
.field{transition:box-shadow .22s ease,border-color .22s ease}.field:focus{box-shadow:0 0 0 3px #a78bfa33}
.stkcard{backface-visibility:hidden;transition:transform .45s ease,opacity .45s ease,filter .45s ease;box-shadow:0 16px 32px #0005}
/* Static player art is never animated as if it were playing a video. */
@media(prefers-reduced-motion:reduce){.motion-enter{animation:none!important}}
html{overflow-x:clip}
.stackwrap{overflow:clip}