/* Real-keyboard look + smooth key press effect.
   Applies to the Tutor keyboard (.kb .k) and the Home animated keyboard (.hk).
   Loaded LAST in index.html so it wins over base.css / keyboard-fingers.css / theme files.

   HOW IT FEELS
   - Press   : key drops fast (45 ms), edge disappears, blue glow, a ring pulses outward.
   - Release : key springs back with a tiny bounce, colour + glow fade out slowly (afterglow).

   TWEAK HERE:  --kp-depth = how far the key goes down,  --kp-down / --kp-up = press / release speed. */
:root {
  --kp-depth: 6px;
  --kp-down: 45ms;
  --kp-up: 260ms;
  --kp-fade: 340ms;
  --kp-edge: rgba(15, 31, 61, 0.34);
  --kp-hi: rgba(255, 255, 255, 0.60);
  --kp-spring: cubic-bezier(0.34, 1.7, 0.5, 1);
}
.hk-kb { --kp-depth: 4px; }                     /* Home keyboard has less room between rows */
@media (max-width: 560px) { :root { --kp-depth: 4px; } .hk-kb { --kp-depth: 3px; } }

/* ---------- resting key: raised, solid bottom edge; this block also controls RELEASE ---------- */
.kb .k,
.hk-kb .hk {
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--kp-hi),
    inset 0 -2px 0 rgba(0, 0, 0, 0.08),
    0 var(--kp-depth) 0 var(--kp-edge),
    0 calc(var(--kp-depth) + 3px) 10px rgba(0, 0, 0, 0.20);
  transform: translateY(0) scale(1);
  transition:
    transform        var(--kp-up)   var(--kp-spring),
    box-shadow       var(--kp-up)   ease-out,
    background-color var(--kp-fade) ease-out,
    color            var(--kp-fade) ease-out;
  will-change: transform;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- pressed key: this block controls the PRESS (fast) ---------- */
.kb .k.hit,
.hk-kb .hk.press {
  transform: translateY(var(--kp-depth)) scale(0.955);
  background-color: var(--accent, #2563eb) !important;
  color: #fff !important;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.40),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 0 20px 2px var(--glow, rgba(37, 99, 235, 0.55)) !important;
  transition:
    transform        var(--kp-down) ease-out,
    box-shadow       var(--kp-down) ease-out,
    background-color 0ms,
    color            0ms !important;
}
.kb .k.hit .g,
.kb .k.hit .e,
.kb .k.hit .s,
.hk-kb .hk.press { color: #fff !important; opacity: 1; }
.kb.sh .k.hit .g { opacity: 1; }

/* ---------- ripple ring that pulses outward every time a key goes down ---------- */
@keyframes kp-ring {
  0%   { opacity: .70; transform: scale(.75); }
  100% { opacity: 0;   transform: scale(1.45); }
}
.kb .k.hit::after,
.hk-kb .hk.press::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--accent, #2563eb);
  box-shadow: 0 0 10px var(--glow, rgba(37, 99, 235, .5));
  pointer-events: none;
  animation: kp-ring 380ms ease-out forwards;
}

/* "next key" hint stays clearly visible while the key is raised */
.kb .k.next:not(.hit) {
  box-shadow:
    inset 0 1px 0 var(--kp-hi),
    0 var(--kp-depth) 0 var(--kp-edge),
    0 0 0 2px var(--ok, #059669),
    0 0 14px rgba(5, 150, 105, .35);
}

/* dark theme: softer top light, stronger bottom edge so keys still look raised */
html[data-theme="dark"] .kb .k,
html[data-theme="dark"] .hk-kb .hk,
body.dark .kb .k,
body.dark .hk-kb .hk {
  --kp-edge: rgba(0, 0, 0, 0.65);
  --kp-hi: rgba(255, 255, 255, 0.16);
}

/* reduced motion: keep the colour change, drop movement and ring */
@media (prefers-reduced-motion: reduce) {
  .kb .k, .hk-kb .hk { transition: none; }
  .kb .k.hit, .hk-kb .hk.press { transform: none; }
  .kb .k.hit::after, .hk-kb .hk.press::after { display: none; }
}

/* =====================================================================
   WRONG KEY: the key you pressed turns red, shakes sideways, red ring.
   (JS adds the class "bad" for about 0.45 s; see keyBad() in 08-input-controls.js)
   Uses the separate `translate` property so it works together with the press transform.
   ===================================================================== */
@keyframes kp-bad-shake {
  0%, 100% { translate: 0 0; }
  15%      { translate: -5px 0; }
  35%      { translate: 5px 0; }
  55%      { translate: -4px 0; }
  75%      { translate: 3px 0; }
}
@keyframes kp-bad-ring {
  0%   { opacity: .85; transform: scale(.8); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.kb .k.bad {
  background-color: var(--bad, #dc2626) !important;
  color: #fff !important;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 0 22px 3px rgba(220, 38, 38, 0.60) !important;
  animation: kp-bad-shake 380ms ease-in-out;
}
.kb .k.bad .g,
.kb .k.bad .e,
.kb .k.bad .s { color: #fff !important; opacity: 1; }
.kb .k.bad::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--bad, #dc2626);
  box-shadow: 0 0 10px rgba(220, 38, 38, .6);
  pointer-events: none;
  animation: kp-bad-ring 400ms ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .kb .k.bad { animation: none; }
  .kb .k.bad::after { display: none; }
}