/* The route is controlled by hero-background.js so its Enter press and the
   next hardware flight share one clock. */
.lightshow-keyboard .keyboard-row::after,
.lightshow-keyboard .keyboard-key.enter-key {
  animation: none !important;
}

.lightshow-keyboard .keyboard-row::after {
  opacity: 0 !important;
}

.lightshow-keyboard .keyboard-key {
  transition: background 70ms linear, border-color 70ms linear, box-shadow 70ms linear, filter 70ms linear, transform 70ms linear;
}

.lightshow-keyboard .keyboard-key.sequence-lit {
  z-index: 4;
  border-color: rgb(190 243 255 / var(--sequence-alpha));
  background:
    linear-gradient(180deg, rgb(80 188 255 / var(--sequence-alpha)), rgb(10 47 105 / .98) 58%, rgb(2 12 30 / .99));
  box-shadow:
    0 0 9px rgb(113 221 255 / var(--sequence-alpha)),
    0 0 24px rgb(27 156 255 / var(--sequence-alpha)),
    inset 0 1px 0 rgb(240 254 255 / var(--sequence-alpha));
  filter: brightness(calc(1 + var(--sequence-alpha)));
}

.lightshow-keyboard .keyboard-key.sequence-head {
  border-color: #f1fdff;
  box-shadow:
    0 0 8px #effdff,
    0 0 26px rgb(97 221 255 / .96),
    0 0 46px rgb(32 135 255 / .72),
    inset 0 0 12px rgb(226 251 255 / .72);
  filter: brightness(1.75);
  transform: translateY(-1px);
}

.lightshow-keyboard .keyboard-key.enter-key.sequence-head {
  background: linear-gradient(180deg, #dcfbff, #5bbcff 35%, #123b91 100%);
  box-shadow:
    0 0 12px #ffffff,
    0 0 38px #5ad0ff,
    0 0 70px #207cff,
    inset 0 0 16px #e8fcff;
}

@media (prefers-reduced-motion: reduce) {
  .lightshow-keyboard .keyboard-key {
    transition: none;
  }
}