.menu-motion{display:block;position:relative;flex:none;overflow:visible;pointer-events:none;isolation:isolate}
.satin-play>.menu-motion{width:22cqw;height:19cqw;flex:none;min-width:0}
.menu-motion-bounce{position:absolute;inset:0;display:block;transform-origin:50% 90%}
.menu-motion .menu-motion-part{position:absolute;object-fit:contain;display:block;max-width:none;pointer-events:none;user-select:none}
.part-club{left:4%;top:0;width:62%;height:96%;transform-origin:50% 85%}
.part-heart{right:4%;bottom:0;width:62%;height:94%;transform-origin:50% 85%}
.part-ads-disc{left:17%;top:14%;width:66%;height:72%}
.part-prohibition{left:9%;top:3%;width:82%;height:94%;transform-origin:50% 50%}
.part-gift-box{left:10%;top:27%;width:80%;height:69%}
.part-ribbon-left{left:21%;top:12%;width:35%;height:48%;transform-origin:85% 42%}
.part-ribbon-right{right:21%;top:12%;width:35%;height:48%;transform-origin:15% 42%}
.part-knot{left:44%;top:27%;width:14%;height:15%}
.part-bubble-orange{left:2%;top:10%;width:78%;height:78%;transform-origin:50% 85%}
.part-bubble-yellow{right:0;bottom:3%;width:59%;height:59%;transform-origin:50% 85%}
.part-shield{left:9%;top:2%;width:82%;height:94%}
.part-star{left:29%;top:22%;width:42%;height:46%;transform-origin:50% 50%}
.part-trophy{inset:0;width:100%;height:100%}
.menu-motion-bounce,.part-club,.part-heart,.part-prohibition,.part-bubble-orange,.part-bubble-yellow,.part-star,.part-ribbon-left,.part-ribbon-right{animation-duration:2s;animation-delay:var(--icon-delay);animation-iteration-count:1;animation-timing-function:cubic-bezier(.3,0,.2,1);animation-fill-mode:backwards}
.menu-motion-bounce{animation-name:menu-icon-hop}
.part-club,.part-bubble-orange{animation-name:menu-icon-hop-left}
.part-heart,.part-bubble-yellow{animation-name:menu-icon-hop-right}
.part-prohibition,.part-star{animation-name:menu-icon-pulse}
.part-ribbon-left{animation-name:menu-ribbon-left}
.part-ribbon-right{animation-name:menu-ribbon-right}
@keyframes menu-icon-hop{0%,100%{transform:none}12%{transform:translateY(2%) scale(1.04,.94)}29%{transform:translateY(-12%) rotate(-4deg) scale(.97,1.04)}44%{transform:translateY(1%) rotate(2deg) scale(1.04,.95)}59%{transform:translateY(-6%) rotate(2deg)}73%{transform:translateY(0) scale(1.02,.98)}86%{transform:translateY(-2%)} }
@keyframes menu-icon-hop-left{0%,100%{transform:none}10%{transform:translateY(2%) scale(1.03,.96)}27%{transform:translateY(-11%) rotate(-7deg)}43%{transform:translateY(1%) rotate(2deg)}59%{transform:translateY(-5%) rotate(-3deg)}77%{transform:translateY(0)} }
@keyframes menu-icon-hop-right{0%,14%,100%{transform:none}24%{transform:translateY(2%) scale(1.03,.96)}41%{transform:translateY(-12%) rotate(7deg)}56%{transform:translateY(1%) rotate(-2deg)}72%{transform:translateY(-5%) rotate(3deg)}89%{transform:translateY(0)} }
@keyframes menu-icon-pulse{0%,100%{transform:scale(1)}18%{transform:scale(.94)}38%{transform:scale(1.13)}55%{transform:scale(.98)}72%{transform:scale(1.06)}88%{transform:scale(1)} }
@keyframes menu-ribbon-left{0%,100%{transform:rotate(0)}18%{transform:rotate(9deg)}34%{transform:rotate(-14deg)}49%{transform:rotate(10deg)}65%{transform:rotate(-7deg)}82%{transform:rotate(3deg)} }
@keyframes menu-ribbon-right{0%,100%{transform:rotate(0)}18%{transform:rotate(-9deg)}34%{transform:rotate(14deg)}49%{transform:rotate(-10deg)}65%{transform:rotate(7deg)}82%{transform:rotate(-3deg)} }

.satin-menu-links .menu-motion{width:18cqw;height:18cqw}
.part-palette{left:2%;top:12%;width:88%;height:86%}
.part-brush{right:0;top:0;width:60%;height:92%;transform-origin:65% 75%}
/* Bars overlap left-to-right and span the pedestal; the arrow stays behind. */
.part-chart-base{left:11%;bottom:-7%;width:74%;height:auto;z-index:0}
.part-bar-cyan{left:11%;bottom:19%;width:28%;height:auto;z-index:2;transform-origin:50% 100%}
.part-bar-blue{left:34%;bottom:19%;width:28%;height:auto;z-index:3;transform-origin:50% 100%}
.part-bar-green{left:57%;bottom:19%;width:28%;height:auto;z-index:4;transform-origin:50% 100%}
.part-chart-arrow{left:5%;top:-14%;width:90%;height:56%;z-index:1}
.part-book{left:0;top:10%;width:100%;height:80%}
.part-question{left:23%;top:23%;width:24%;height:43%;transform-origin:center}
.part-bookmark{left:54%;top:74%;width:17%;height:25%}
.part-brush,.part-bar-cyan,.part-bar-blue,.part-bar-green,.part-question,.part-bookmark{animation-duration:2s;animation-delay:var(--icon-delay);animation-timing-function:cubic-bezier(.3,0,.2,1);animation-iteration-count:1;animation-fill-mode:backwards}
.part-brush{animation-name:menu-icon-hop-right}
.part-bar-cyan{animation-name:menu-icon-hop-left}
.part-bar-blue{animation-name:menu-icon-hop-right}
.part-bar-green{animation-name:menu-bar-last}
.part-question{animation-name:menu-icon-pulse}
.part-bookmark{animation-name:menu-bookmark-slide}
@keyframes menu-bar-last{0%,28%,100%{transform:none}44%{transform:translateY(-17%) scaleY(1.08)}60%{transform:scaleY(.94)}76%{transform:translateY(-7%)}90%{transform:none}}
@keyframes menu-bookmark-slide{0%,100%{transform:none}23%{transform:translateY(20%)}43%{transform:translateY(-14%)}64%{transform:translateY(10%)}84%{transform:translateY(-3%)}}
.menu-motion[data-ready="false"] *{animation:none}
@media(prefers-reduced-motion:reduce){.menu-motion *{animation:none!important}}


/* Upright source cards keep their native ratio; only rotation/translation animate. */
.menu-motion .part-club{left:16%;top:8%;width:auto;height:80%;object-fit:contain;rotate:-14deg;animation-name:menu-card-back-hop}
.menu-motion .part-heart{right:13%;bottom:5%;width:auto;height:80%;object-fit:contain;rotate:13deg;animation-name:menu-card-front-hop}
@keyframes menu-card-back-hop{0%,100%{transform:none}27%{transform:translateY(-10%) rotate(-4deg)}43%{transform:translateY(0)}59%{transform:translateY(-4%) rotate(-2deg)}77%{transform:none}}
@keyframes menu-card-front-hop{0%,14%,100%{transform:none}41%{transform:translateY(-11%) rotate(4deg)}56%{transform:translateY(0)}72%{transform:translateY(-4%) rotate(2deg)}89%{transform:none}}
/* The portal uses the game's layered art and its original one-shot motion. */
header nav>a{display:flex;align-items:center;justify-content:center;gap:9px}
header .portal-nav-icon{width:36px;height:36px;flex:0 0 36px;filter:drop-shadow(0 2px 1px #17458115)}
header .portal-nav-icon .menu-motion-part{border-radius:0;box-shadow:none}
@media(max-width:700px){header nav>a{gap:6px}header .portal-nav-icon{width:28px;height:28px;flex-basis:28px}}
@media(max-width:430px){header nav>a{padding:11px 8px;font-size:13px}header .portal-nav-icon{width:26px;height:26px;flex-basis:26px}}
@media(max-width:700px){header nav>a{font-size:11px;padding:10px 4px;gap:3px;min-width:0}header nav>a>span:last-child{min-width:0;overflow-wrap:anywhere}header .portal-nav-icon{width:20px;height:20px;flex-basis:20px}}