/* ============================================================
   Virtual Keyboard — Additional Styles
   ============================================================ */

/* Row-specific offsets for realistic keyboard stagger */
.keyboard-row:nth-child(2) {
  padding-left: 12px;
}

.keyboard-row:nth-child(3) {
  padding-left: 20px;
}

.keyboard-row:nth-child(4) {
  padding-left: 4px;
}

/* Space bar row */
.keyboard-row:last-child {
  padding-top: 2px;
}

/* Key press animation */
.vk-key {
  transition:
    transform 80ms ease,
    background-color 80ms ease,
    box-shadow 80ms ease,
    border-color 150ms ease;
}

.vk-key:active {
  transition-duration: 30ms;
}

/* Shift key active state */
.vk-key.wide.highlight {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

/* Highlight pulse animation for physical key feedback */
@keyframes key-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent-muted);
  }
  100% {
    box-shadow: var(--key-shadow);
  }
}

.vk-key.highlight {
  animation: key-pulse 200ms ease;
}

/* Keyboard panel smooth entry */
.keyboard-panel.visible .keyboard-grid {
  animation: kb-slide-in 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes kb-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}