/* Game-menu motion study: research/game-motion/observed-menu-motion.md.
 * Main-menu cutouts and layered water are observed; subpage timing is authored.
 * Keep common controls consistent while giving each page its own movement. */
.motion-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:.2;contain:strict}
.motion-atmosphere i{position:absolute;width:2.8%;height:9%;left:84%;top:30%;background:#a9fcff;clip-path:polygon(10% 0,100% 22%,40% 100%,0 65%);rotate:26deg;opacity:.5;animation:glass-drift 8s ease-in-out infinite alternate}
.motion-atmosphere i:nth-child(2){left:73%;top:65%;height:5%;width:1.5%;background:#ff82cf;rotate:-24deg;animation-delay:-3s;animation-duration:11s}
.motion-atmosphere i:nth-child(3){left:40%;top:6%;width:1%;height:4%;animation-delay:-6s;animation-duration:13s}
.motion-atmosphere i:nth-child(4){left:95%;top:86%;width:4%;height:12%;animation-delay:-2s;animation-duration:9s}
.motion-atmosphere:before{content:'';position:absolute;inset:-30%;background:repeating-linear-gradient(117deg,transparent 0 16%,#85e4ff12 17%,transparent 19% 32%);animation:water-light 20s cubic-bezier(.55,.5,.45,.5) infinite alternate}
.arc-screen .motion-atmosphere{opacity:.12}.arc-screen .motion-atmosphere i{animation-duration:18s}
.equip-scene .motion-atmosphere{clip-path:polygon(74% 0,100% 0,100% 100%,54% 100%)}
.system-scene .motion-atmosphere{clip-path:ellipse(64% 55% at 44% 8%)}
.system-scene .motion-atmosphere i{animation-name:arc-drift;animation-duration:15s}
.stats-scene .motion-atmosphere{clip-path:polygon(48% 0,100% 0,100% 100%,42% 100%);opacity:.3}
.stats-scene .motion-atmosphere i{width:8%;height:18%;animation-name:status-glass}
.skill-scene .motion-atmosphere{opacity:.12}.skill-scene .motion-atmosphere i{animation-duration:16s}
.position-scene .motion-atmosphere{clip-path:polygon(48% 0,100% 0,100% 100%,36% 100%);opacity:.12}
.position-scene .motion-atmosphere i{display:none}
/* Separate foreground shards and distant water, following the observed QUEST
 * background depths. No movement is applied to a flattened character image. */
.training-scene .motion-atmosphere{opacity:.42}
.training-scene .motion-atmosphere:before{inset:-20%;background:repeating-linear-gradient(102deg,transparent 0 12%,#4bccff17 15%,transparent 23% 38%);animation:quest-water 13s ease-in-out infinite alternate}
.training-scene .motion-atmosphere i{top:110%;animation:quest-fragment 14s linear infinite;opacity:0}
.training-scene .motion-atmosphere i:nth-child(2){animation-duration:20s;animation-delay:-9s;width:1.2%;height:4%}
.training-scene .motion-atmosphere i:nth-child(3){animation-duration:24s;animation-delay:-18s;width:.7%;height:3%}
.training-scene .motion-atmosphere i:nth-child(4){animation-duration:11s;animation-delay:-5s;width:4%;height:12%}
.persona-scene .motion-atmosphere{opacity:.3}
.persona-scene .motion-atmosphere:after{content:'';position:absolute;right:5%;top:3%;height:83%;aspect-ratio:1;border:1px solid #76efff55;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:persona-orbit 32s linear infinite}
@keyframes water-light{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,0,0)}}
@keyframes glass-drift{from{translate:0 8px;transform:rotate(-3deg)}to{translate:8px -12px;transform:rotate(6deg)}}
@keyframes status-glass{from{translate:0 5px;transform:rotate(-4deg)}to{translate:-12px -10px;transform:rotate(4deg)}}
@keyframes arc-drift{from{translate:-5px 3px;transform:rotate(-9deg)}to{translate:12px -9px;transform:rotate(14deg)}}
@keyframes quest-water{from{translate:-2% 0;transform:skewX(-3deg)}to{translate:3% 1%;transform:skewX(3deg)}}
@keyframes quest-fragment{0%{translate:0 0;transform:rotate(0);opacity:0}10%{opacity:.65}85%{opacity:.65}100%{translate:-90px -850px;transform:rotate(110deg);opacity:0}}
@keyframes persona-orbit{to{rotate:360deg}}

/* One dark mask, without a full-screen brightness flash. */
.route-bloom{background:#0626ba}.route-rim{background:#0b309e}
/* The selected white/pink cutouts keep changing at rest, including the red
 * intersection through the lettering, as visible in the original-game GIF. */
.menu-command:not(.selected) .label:not(.red-label){background:linear-gradient(125deg,var(--color,var(--cyan)) 15%,#bafffa 39%,var(--color,var(--cyan)) 64%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:menu-water 9s ease-in-out infinite alternate}
.scene .menu-command.selected:before{animation:menu-pink-cut 2.8s ease-in-out infinite alternate}
.scene .menu-command.selected:after{animation:menu-white-cut 2.8s ease-in-out infinite alternate}
.scene .menu-command.selected .red-label{animation:menu-red-cut 2.8s ease-in-out infinite alternate}
.scene .command-menu .menu-command{transition:transform .18s cubic-bezier(.16,1,.3,1),color .18s ease}
@keyframes menu-water{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes menu-pink-cut{from{transform:rotate(-3deg);clip-path:polygon(0 83%,100% 6%,83% 89%)}to{transform:rotate(1deg);clip-path:polygon(2% 70%,97% 0,87% 99%)}}
@keyframes menu-white-cut{from{clip-path:polygon(0 82%,100% 0,85% 85%);transform:rotate(-2deg)}to{clip-path:polygon(2% 64%,97% 7%,88% 98%);transform:rotate(1deg)}}
@keyframes menu-red-cut{from{clip-path:polygon(0 72%,100% 21%,100% 92%,0 92%)}to{clip-path:polygon(0 60%,100% 29%,100% 100%,0 84%)}}

/* Transient selection decorations belong to the interaction controller.
 * Individual translate/rotate properties preserve the page's authored angles. */
:is(.skill-list,.head-orbits,.request-list,.results-party,.system-options) button{position:relative}
.screen-stage button>.motion-selection,.arc-screen button>.motion-selection{position:absolute;inset:-2px;display:block;pointer-events:none;z-index:4;background:#ff558966;clip-path:polygon(0 12%,100% 0,96% 80%,3% 100%)}
.screen-stage button>.motion-selection-model{border-top:3px solid #ff4664;background:#89f6ff66;clip-path:polygon(0 0,100% 0,93% 100%,0 100%)}
.screen-stage button>.motion-selection-heads{inset:-8px;border:2px solid #a4fcff;border-right-color:transparent;border-radius:50%;background:none;clip-path:none}
.screen-stage button>.motion-selection-attention{background:#7bffef88;clip-path:none;border-top:3px solid #ff527c}
.screen-stage button>.motion-selection-training,.arc-screen button>.motion-selection{background:#fff5;clip-path:none;border-top:3px solid #ff507c}
.screen-stage button>.motion-selection-results{background:linear-gradient(100deg,#fff6,#ff7dcc88);clip-path:polygon(0 0,100% 12%,90% 88%,0 100%)}
.screen-stage button>.motion-selection-system{background:#ff71c877;clip-path:polygon(0 70%,100% 0,84% 100%);inset:-8px -4px}

body .scene .global-controls button,
body .scene .reader-heading>button,
body .scene .reader-footer>button,
body .scene .reader-nav button,
body .scene .screen-stage :is(button,a,input,summary),
body .scene .arc-screen :is(button,a),
body .scene .music-drawer :is(button,a),
body .scene .control-hints button{transition-duration:.3s;transition-timing-function:ease-in-out}

body.paused .motion-atmosphere:before,body.paused .motion-atmosphere:after,body.paused .motion-atmosphere i,
body.paused .scene .menu-command:before,body.paused .scene .menu-command:after,body.paused .scene .menu-command .label{animation-play-state:paused!important}
body.paused .scene :is(button,a,input,summary){transition:none!important}
@media(prefers-reduced-motion:reduce){
 .motion-atmosphere:before,.motion-atmosphere:after,.motion-atmosphere i,
 .scene .menu-command:before,.scene .menu-command:after,.scene .menu-command .label{animation:none!important}
 .scene :is(button,a,input,summary){transition:none!important}
}
@media(max-width:640px) and (orientation:portrait){
 .equip-scene .screen-subtitle,.position-scene .screen-subtitle{display:none}
 .motion-atmosphere i:nth-child(4){display:none}
}