/* Melo — shared "follow-the-glow" keyboard (used by Session 1 + Lesson 2, via glowkb.js).
   The reusable guided keyboard: warm/cobalt lit states, lean/pulse/press, halo bloom.
   Reuses the Expressive-Pop palette. All motion off under prefers-reduced-motion. */

.kb-wrap { width: 100%; display: flex; justify-content: center; }
.kb { position: relative; display: flex; background: var(--ink, #2A1A0E); padding: 14px 14px 0; border-radius: 16px; box-shadow: 0 22px 48px rgba(0,0,0,.28); transition: opacity .45s, transform .45s; transform: scale(var(--kb-scale, 1)); transform-origin: top center; }
.wk { position: relative; width: 46px; height: 190px; background: linear-gradient(#fff, #f2ebdd); border-radius: 0 0 7px 7px; margin: 0 2px; border: 1px solid #e2d8c8; cursor: default; transition: transform .06s, box-shadow .2s, background .25s; }
.bk { position: absolute; width: 30px; height: 118px; background: linear-gradient(#3a2a1a, #171009); border-radius: 0 0 5px 5px; z-index: 3; top: 14px; cursor: default; transition: transform .06s, box-shadow .2s, background .25s; }

/* lit states — warm (default), cobalt (.lit2), gold (.lit3), purple (.lit4) */
.wk.lit { background: linear-gradient(#FFD9BF, #FF8A52); box-shadow: 0 0 22px rgba(255,90,31,.6); cursor: pointer; }
.bk.lit { background: linear-gradient(#FF9A63, #E0531A); box-shadow: 0 0 22px rgba(255,90,31,.7); cursor: pointer; }
.wk.lit2 { background: linear-gradient(#CFE0FF, #6E92FF); box-shadow: 0 0 22px rgba(31,61,255,.55); cursor: pointer; }
.bk.lit2 { background: linear-gradient(#8FB0FF, #2F55E0); box-shadow: 0 0 22px rgba(31,61,255,.6); cursor: pointer; }
.wk.lit3 { background: linear-gradient(#FFE9B0, #F2B30A); box-shadow: 0 0 22px rgba(242,179,10,.55); cursor: pointer; }
.bk.lit3 { background: linear-gradient(#FFD874, #D69A06); box-shadow: 0 0 22px rgba(242,179,10,.6); cursor: pointer; }
.wk.lit4 { background: linear-gradient(#E6D6FF, #A06CF5); box-shadow: 0 0 22px rgba(122,63,242,.5); cursor: pointer; }
.bk.lit4 { background: linear-gradient(#C7A6FF, #7A3FF2); box-shadow: 0 0 22px rgba(122,63,242,.6); cursor: pointer; }
.wk.lit5 { background: linear-gradient(#FFC9D2, #E5384E); box-shadow: 0 0 22px rgba(229,56,78,.5); cursor: pointer; }
.bk.lit5 { background: linear-gradient(#F08093, #C32238); box-shadow: 0 0 22px rgba(229,56,78,.6); cursor: pointer; }

.wk.press { transform: translateY(3px) scale(.98); }
.bk.press { transform: translateY(3px) scale(.97); }
.wk.lean, .bk.lean { animation: lean 1.1s ease-in-out infinite; }
@keyframes lean { 0%,100% { transform: rotate(0) } 50% { transform: rotate(1.4deg) } }
.rise { animation: riseGlow 1.4s ease-in-out infinite; }
@keyframes riseGlow { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

.pulse { animation: pulseGlow 1.25s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 14px rgba(255,90,31,.5) } 50% { box-shadow: 0 0 32px rgba(255,90,31,.95) } }
.pulse.lit2 { animation: pulseGlowB 1.25s ease-in-out infinite; }
@keyframes pulseGlowB { 0%,100% { box-shadow: 0 0 14px rgba(31,61,255,.45) } 50% { box-shadow: 0 0 32px rgba(31,61,255,.85) } }
.pulse.lit3 { animation: pulseGlowG 1.25s ease-in-out infinite; }
@keyframes pulseGlowG { 0%,100% { box-shadow: 0 0 14px rgba(242,179,10,.45) } 50% { box-shadow: 0 0 32px rgba(242,179,10,.85) } }
.pulse.lit4 { animation: pulseGlowP 1.25s ease-in-out infinite; }
@keyframes pulseGlowP { 0%,100% { box-shadow: 0 0 14px rgba(122,63,242,.4) } 50% { box-shadow: 0 0 32px rgba(122,63,242,.8) } }
.pulse.lit5 { animation: pulseGlowC 1.25s ease-in-out infinite; }
@keyframes pulseGlowC { 0%,100% { box-shadow: 0 0 14px rgba(229,56,78,.45) } 50% { box-shadow: 0 0 32px rgba(229,56,78,.85) } }

/* halo bloom when a chord lands whole */
.kb.bloom::before { content: ""; position: absolute; inset: -6px; border-radius: 22px; box-shadow: 0 0 0 0 rgba(255,138,77,.55); animation: bloom .9s ease-out; pointer-events: none; }
@keyframes bloom { 0% { box-shadow: 0 0 0 0 rgba(255,138,77,.55) } 100% { box-shadow: 0 0 60px 26px rgba(255,138,77,0) } }

@media (max-width: 820px) { .kb { --kb-scale: .78; } }
@media (max-width: 560px) { .kb { --kb-scale: .56; } }

@media (prefers-reduced-motion: reduce) {
  .wk.lean, .bk.lean, .pulse, .rise, .kb.bloom::before { animation: none !important; }
}