/* ---------- controls menu: the movement keys, lit like the MYND keys on the landing ---------- */
#moves {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: #000; opacity: 0; transition: opacity .45s ease;
}
#moves[hidden] { display: none; }
#moves.open { opacity: 1; }
#moves-stage { position: relative; width: min(94vw, 1400px, 142vh); aspect-ratio: 1676 / 938; }
#moves .titles { position: absolute; inset: 0; background: url(/brand/controls/titles.webp) center / 100% 100% no-repeat; mix-blend-mode: screen; pointer-events: none; }
#moves .key {
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none;
  cursor: pointer; mix-blend-mode: screen; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transform: translateY(0); transition: transform 280ms cubic-bezier(.3, 1.8, .45, 1);
}
#moves .key:focus { outline: none; }
#moves .key:focus-visible { outline: 1px solid #8a8a8a; outline-offset: -6px; border-radius: 18% / 22%; }
#moves .key.is-down { transform: translateY(2.6%) scale(.984); transition: transform 55ms ease-out; }
#moves .mk-shift{left:3.1623%;top:44.7761%;width:17.8998%;height:16.6311%}
#moves .mk-shift .layer{background-size:558.6667% 601.2821%;background-position:3.8517% 53.7084%}
#moves .mk-a{left:24.2243%;top:30.5970%;width:8.3532%;height:15.4584%}
#moves .mk-a .layer{background-size:1197.1429% 646.8966%;background-position:26.4323% 36.1917%}
#moves .mk-z{left:32.7566%;top:30.5970%;width:8.2936%;height:15.4584%}
#moves .mk-z .layer{background-size:1205.7554% 646.8966%;background-position:35.7189% 36.1917%}
#moves .mk-e{left:41.2291%;top:30.5970%;width:8.2936%;height:15.4584%}
#moves .mk-e .layer{background-size:1205.7554% 646.8966%;background-position:44.9577% 36.1917%}
#moves .mk-q{left:24.2243%;top:45.9488%;width:8.3532%;height:15.4584%}
#moves .mk-q .layer{background-size:1197.1429% 646.8966%;background-position:26.4323% 54.3506%}
#moves .mk-s{left:32.7566%;top:45.9488%;width:8.2936%;height:15.4584%}
#moves .mk-s .layer{background-size:1205.7554% 646.8966%;background-position:35.7189% 54.3506%}
#moves .mk-d{left:41.2291%;top:45.9488%;width:8.2936%;height:15.4584%}
#moves .mk-d .layer{background-size:1205.7554% 646.8966%;background-position:44.9577% 54.3506%}
#moves .mk-up{left:72.8520%;top:35.2878%;width:11.9928%;height:12.0469%}
#moves .mk-up .layer{background-size:833.8308% 830.0885%;background-position:82.7797% 40.1212%}
#moves .mk-left{left:61.0979%;top:47.3348%;width:11.6945%;height:13.6461%}
#moves .mk-left .layer{background-size:855.1020% 732.8125%;background-position:69.1892% 54.8148%}
#moves .mk-down{left:72.8520%;top:47.2281%;width:11.9928%;height:13.7527%}
#moves .mk-down .layer{background-size:833.8308% 727.1318%;background-position:82.7797% 54.7590%}
#moves .mk-right{left:84.7852%;top:47.3348%;width:11.6945%;height:13.6461%}
#moves .mk-right .layer{background-size:855.1020% 732.8125%;background-position:96.0135% 54.8148%}
#moves .layer { position: absolute; inset: 0; display: block; background-repeat: no-repeat; pointer-events: none; }
#moves .base { background-image: url(/brand/controls/base.webp); }
#moves .lit { background-image: url(/brand/controls/base.webp); mix-blend-mode: screen; filter: brightness(1.8) saturate(1.3) sepia(.3); opacity: 0; transition: opacity 420ms ease-out; }
#moves .bloom { background-image: url(/brand/controls/bloom.webp); mix-blend-mode: screen; opacity: .3; transition: opacity 420ms ease-out; }
#moves .glow { background-image: url(/brand/controls/glow.webp); mix-blend-mode: screen; opacity: .8; animation: myndBreathe 5.4s ease-in-out infinite; transition: opacity 380ms ease-out; }
#moves .led { background-image: url(/brand/controls/led.webp); mix-blend-mode: screen; opacity: .85; animation: myndFlicker 3.1s steps(1, end) infinite; }
#moves .key:nth-child(4n+2) .glow { animation-delay: -1.3s; } #moves .key:nth-child(4n+3) .glow { animation-delay: -2.7s; } #moves .key:nth-child(4n) .glow { animation-delay: -4s; }
#moves .key:nth-child(4n+2) .led { animation-duration: 4.3s; animation-delay: -.7s; } #moves .key:nth-child(4n+3) .led { animation-duration: 2.6s; animation-delay: -1.9s; } #moves .key:nth-child(4n) .led { animation-duration: 5.2s; animation-delay: -.2s; }
#moves .spill { position: absolute; left: 12%; right: 12%; bottom: -7%; height: 24%; display: block; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,150,72,.6) 0, rgba(255,120,40,0) 70%); opacity: 0; transition: opacity 480ms ease-out; }
#moves .is-flash .glow { animation: none; opacity: 1; transition: opacity 40ms; }
#moves .is-flash .bloom { opacity: 1; transition: opacity 40ms; }
#moves .is-flash .lit { opacity: .45; transition: opacity 40ms; }
#moves .is-flash .led { animation: none; opacity: 1; filter: brightness(1.6); }
#moves .is-flash .spill { opacity: .9; transition: opacity 40ms; }
@media (prefers-reduced-motion: reduce) {
  #moves .glow, #moves .led { animation: none; }
  #moves .key, #moves .key.is-down, #moves { transition: none; }
}