/* ---------- landing: the MYND keys + folder choice ---------- */
#landing {
  position: absolute; inset: 0; z-index: 50; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(40px, 8vh, 110px);
  opacity: 1; transition: opacity .9s ease;
}
#landing[hidden] { display: none; }
#landing.out { opacity: 0; pointer-events: none; }
#keys { position: relative; width: clamp(300px, 54vw, 820px); aspect-ratio: 2172 / 724; margin-top: -3vh; }
.lfoot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#choose {
  width: min(320px, calc(100vw - 48px)); height: 44px; border: 1px dashed #4a4a4a; color: var(--text);
  font-weight: 400; letter-spacing: .16em; text-transform: uppercase; transition: border-color .4s, color .4s;
}
#choose:hover, #choose:focus-visible { border-color: #9a9a9a; outline: none; }
#choose:disabled { color: var(--dim); cursor: progress; }
#landing.busy #choose { border-color: #2a2a2a; }
#reopen { letter-spacing: .08em; }
#reopen[hidden] { display: none; }
#reopen:disabled { opacity: 0; transition: opacity .4s; }
#lstatus { min-height: 1em; color: var(--placeholder); }

#keys .key {
  position: absolute; top: 15.1934%; height: 68.2320%; 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);
}
#keys .key:focus { outline: none; }
#keys .key:focus-visible { outline: 1px solid #8a8a8a; outline-offset: -6px; border-radius: 22%; }
#keys .key.is-down { transform: translateY(2.6%) scale(.984); transition: transform 55ms ease-out; }
#keys .k0 { left: 10.7274%; width: 20.2578%; }
#keys .k1 { left: 31.0313%; width: 18.7845%; }
#keys .k2 { left: 50.3683%; width: 18.6924%; }
#keys .k3 { left: 69.1529%; width: 19.7514%; }
#keys .layer { position: absolute; inset: 0; display: block; background-repeat: no-repeat; pointer-events: none; }
#keys .k0 .layer { background-size: 493.6364% auto; background-position: 13.4527% 47.8261%; }
#keys .k1 .layer { background-size: 532.3529% auto; background-position: 38.2086% 47.8261%; }
#keys .k2 .layer { background-size: 534.9754% auto; background-position: 61.9479% 47.8261%; }
#keys .k3 .layer { background-size: 506.2937% auto; background-position: 86.1733% 47.8261%; }
#keys .base { background-image: url(/brand/base.webp); }
#keys .lit { background-image: url(/brand/base.webp); mix-blend-mode: screen; filter: brightness(1.8) saturate(1.3) sepia(.3); opacity: 0; transition: opacity 420ms ease-out; }
#keys .glow { background-image: url(/brand/glow.webp); mix-blend-mode: screen; opacity: .8; animation: myndBreathe 5.4s ease-in-out infinite; transition: opacity 380ms ease-out; }
#keys .k1 .glow { animation-delay: -1.3s; } #keys .k2 .glow { animation-delay: -2.7s; } #keys .k3 .glow { animation-delay: -4s; }
#keys .bloom { background-image: url(/brand/bloom.webp); mix-blend-mode: screen; opacity: .3; transition: opacity 420ms ease-out; }
#keys .led { background-image: url(/brand/led.webp); mix-blend-mode: screen; opacity: .85; animation: myndFlicker 3.1s steps(1, end) infinite; }
#keys .k1 .led { animation-duration: 4.3s; animation-delay: -.7s; } #keys .k2 .led { animation-duration: 2.6s; animation-delay: -1.9s; } #keys .k3 .led { animation-duration: 5.2s; animation-delay: -.2s; }
#keys .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; }
#keys .is-flash .glow { animation: none; opacity: 1; transition: opacity 40ms; }
#keys .is-flash .bloom { opacity: 1; transition: opacity 40ms; }
#keys .is-flash .lit { opacity: .45; transition: opacity 40ms; }
#keys .is-flash .led { animation: none; opacity: 1; filter: brightness(1.6); }
#keys .is-flash .spill { opacity: .9; transition: opacity 40ms; }
#keys.is-combo .glow { animation: none; opacity: 1; }
#keys.is-combo .bloom { opacity: 1; transition: opacity 60ms; }
#keys.is-combo .lit { opacity: .4; transition: opacity 60ms; }
#keys.is-combo .led { animation: none; opacity: 1; }
#keys.is-combo .spill { opacity: .7; }
@keyframes myndBreathe { 0%, 100% { opacity: .72; } 50% { opacity: .96; } }
@keyframes myndFlicker { 0% { opacity: .85; } 9% { opacity: .25; } 11% { opacity: 1; } 38% { opacity: .7; } 41% { opacity: .15; } 43% { opacity: .9; } 66% { opacity: .6; } 72% { opacity: 1; } 100% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  #keys .glow, #keys .led { animation: none; }
  #keys .key, #keys .key.is-down { transition: none; }
  #landing { transition: none; }
}

/* credit — bottom of the landing, opens Instagram @daxxsdr */
#credit {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font: 400 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #6f6f6f; text-decoration: none; padding: 8px 10px; white-space: nowrap; transition: color .3s ease;
}
#credit:hover, #credit:focus-visible { color: #f0f0f0; }
#credit:focus-visible { outline: 1px solid rgba(255,255,255,.5); outline-offset: 2px; }