/* ── Entry animation: keys stagger in from below ──────── */
.keycap {
  opacity: 0;
  transform: translateY(20px);
  animation: keycap-enter 0.5s var(--release-easing) forwards;
}

@keyframes keycap-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger delays — Row 1 (name): 12 keys */
.keyboard__row--name .keycap:nth-child(1)  { animation-delay: calc(var(--entry-delay-step) * 1); }
.keyboard__row--name .keycap:nth-child(2)  { animation-delay: calc(var(--entry-delay-step) * 2); }
.keyboard__row--name .keycap:nth-child(3)  { animation-delay: calc(var(--entry-delay-step) * 3); }
.keyboard__row--name .keycap:nth-child(4)  { animation-delay: calc(var(--entry-delay-step) * 4); }
.keyboard__row--name .keycap:nth-child(5)  { animation-delay: calc(var(--entry-delay-step) * 5); }
.keyboard__row--name .keycap:nth-child(6)  { animation-delay: calc(var(--entry-delay-step) * 6); }
.keyboard__row--name .keycap:nth-child(7)  { animation-delay: calc(var(--entry-delay-step) * 7); }
.keyboard__row--name .keycap:nth-child(8)  { animation-delay: calc(var(--entry-delay-step) * 8); }
.keyboard__row--name .keycap:nth-child(9)  { animation-delay: calc(var(--entry-delay-step) * 9); }
.keyboard__row--name .keycap:nth-child(10) { animation-delay: calc(var(--entry-delay-step) * 10); }
.keyboard__row--name .keycap:nth-child(11) { animation-delay: calc(var(--entry-delay-step) * 11); }
.keyboard__row--name .keycap:nth-child(12) { animation-delay: calc(var(--entry-delay-step) * 12); }

/* Stagger delays — Row 2 (title): 17 keys, offset after row 1 */
.keyboard__row--title .keycap:nth-child(1)  { animation-delay: calc(var(--entry-delay-step) * 13); }
.keyboard__row--title .keycap:nth-child(2)  { animation-delay: calc(var(--entry-delay-step) * 14); }
.keyboard__row--title .keycap:nth-child(3)  { animation-delay: calc(var(--entry-delay-step) * 15); }
.keyboard__row--title .keycap:nth-child(4)  { animation-delay: calc(var(--entry-delay-step) * 16); }
.keyboard__row--title .keycap:nth-child(5)  { animation-delay: calc(var(--entry-delay-step) * 17); }
.keyboard__row--title .keycap:nth-child(6)  { animation-delay: calc(var(--entry-delay-step) * 18); }
.keyboard__row--title .keycap:nth-child(7)  { animation-delay: calc(var(--entry-delay-step) * 19); }
.keyboard__row--title .keycap:nth-child(8)  { animation-delay: calc(var(--entry-delay-step) * 20); }
.keyboard__row--title .keycap:nth-child(9)  { animation-delay: calc(var(--entry-delay-step) * 21); }
.keyboard__row--title .keycap:nth-child(10) { animation-delay: calc(var(--entry-delay-step) * 22); }
.keyboard__row--title .keycap:nth-child(11) { animation-delay: calc(var(--entry-delay-step) * 23); }
.keyboard__row--title .keycap:nth-child(12) { animation-delay: calc(var(--entry-delay-step) * 24); }
.keyboard__row--title .keycap:nth-child(13) { animation-delay: calc(var(--entry-delay-step) * 25); }
.keyboard__row--title .keycap:nth-child(14) { animation-delay: calc(var(--entry-delay-step) * 26); }
.keyboard__row--title .keycap:nth-child(15) { animation-delay: calc(var(--entry-delay-step) * 27); }
.keyboard__row--title .keycap:nth-child(16) { animation-delay: calc(var(--entry-delay-step) * 28); }
.keyboard__row--title .keycap:nth-child(17) { animation-delay: calc(var(--entry-delay-step) * 29); }

/* During entry animation, ensure pressed state is still visible */
.keycap--pressed {
  opacity: 1 !important;
}

/* ── Shimmer: subtle traveling light across keyboard ──── */
.keyboard::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.015) 45%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.015) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: shimmer 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes shimmer {
  0%, 100% { background-position: 200% center; }
  50%      { background-position: -50% center; }
}

/* ── Keyboard needs relative positioning for shimmer ──── */
.keyboard {
  position: relative;
}

/* ── Social fade in after keys ────────────────────────── */
.social {
  opacity: 0;
  animation: fade-in 0.6s ease forwards;
  animation-delay: calc(var(--entry-delay-step) * 31);
}

@keyframes fade-in {
  to { opacity: 1; }
}