/* The hands on the lesson keyboard (js/story/hands.js) and the "getting ready" pictures.
   Prefixes: .kbh- (keyboard hands), .pa- (panel art), .tea- (the tea towel). Ink and colours come from the
   storybook tokens; the hands are white in both themes. Every animation is decoration: reduced motion
   keeps the hands where they are and drops the travel, the pop and the pulses. */

/* ---------- the hands ---------- */

.kbh {
  --kbh-glove: #fffdf8;
  --kbh-ink: var(--sb-outline);
  --z1: var(--sb-pink);
  --z2: var(--sb-orange);
  --z3: var(--sb-kelp);
  --z4: var(--sb-sea);
  --zt: var(--sb-grape);
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.kbh.is-calm { opacity: 0.35; }
.kbh.is-hidden,
.kbh.is-nokb { display: none; }
.kbh-small { opacity: 0.72; }
.kbh-small.is-calm { opacity: 0.25; }
.kbh-svg { position: absolute; left: 0; top: 0; overflow: visible; }
/* see-through hands with a dotted outline (the keys show through); the artwork is scaled to the keyboard,
   its outline stays the same size at every scale */
.kbh-hand { opacity: 0.8; }
.kbh-body { fill: var(--kbh-glove); }
.kbh-line, .kbh-seam { vector-effect: non-scaling-stroke; }
.kbh-line {
  fill: none;
  stroke: var(--kbh-ink);
  stroke-width: var(--kbh-ow);
  stroke-dasharray: 0 calc(var(--kbh-ow) * 2.4);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the fingertip is painted in its zone colour while the finger works */
.kbh-cap {
  fill: transparent;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: fill 0.15s ease;
}
.kbh-seam {
  fill: none;
  stroke: var(--kbh-ink);
  stroke-width: var(--kbh-ow);
  stroke-linecap: round;
  opacity: 0;
}
.kbh-seam.is-active { opacity: 1; }
.kbh-z1.is-active { fill: var(--z1); }
.kbh-z2.is-active { fill: var(--z2); }
.kbh-z3.is-active { fill: var(--z3); }
.kbh-z4.is-active { fill: var(--z4); }
.kbh-zt.is-active { fill: var(--zt); }
.kbh-cap.is-shift { fill: color-mix(in srgb, var(--z1) 55%, var(--kbh-glove)); }
.kbh-cap.is-pop { animation: kbh-pop 0.3s var(--ease-spring); }
.kbh-cap.is-thumb-press { animation: kbh-pulse 0.7s ease-in-out infinite; }
@keyframes kbh-pop { 0% { transform: scale(0.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes kbh-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.reduced-motion .kbh { transition: none; }
.reduced-motion .kbh-cap { transition: none; }
.reduced-motion .kbh-cap.is-pop,
.reduced-motion .kbh-cap.is-thumb-press { animation: none; }

/* ---------- the tea towel: keyboard and gloves are hidden underneath ---------- */

.lesson-kb { position: relative; }
.tea {
  --tea: var(--sb-sea);
  position: absolute;
  inset: -2px 0 -6px;
  z-index: 6;
  display: grid;
  place-items: center;
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 20px;
  box-shadow: var(--sb-pop);
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--tea) 38%, transparent) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--tea) 38%, transparent) 0 14px, transparent 14px 28px),
    var(--sb-card);
  transition: transform 0.35s var(--ease-spring), opacity 0.25s ease;
  transform-origin: 50% 0;
}
.tea[hidden] { display: none; }
.tea-label {
  padding: 4px 18px 5px;
  color: var(--sb-card-ink);
  background: var(--sb-card);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--sb-outline);
  font: 600 clamp(0.95rem, 2.6vw, 1.25rem)/1.2 var(--font-display);
  transform: rotate(-2deg);
}
/* a corner of the towel lifts for a second to show the right finger */
.tea.is-lifted { transform: translateY(-14px) rotate(-1.2deg) scaleY(0.12); opacity: 0; }
.tea.is-lifted .tea-label { opacity: 0; }
.lesson-kb.is-towel:not(.is-lifted) .kb,
.lesson-kb.is-towel:not(.is-lifted) .kbh { visibility: hidden; }
.reduced-motion .tea { transition: none; }
.reduced-motion .tea.is-lifted { transform: none; }

/* ---------- getting-ready panels ---------- */

.posture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  animation: sb-pop 0.35s var(--ease-spring);
}
.posture-art { display: block; width: auto; max-width: 100%; height: clamp(120px, 25vh, 220px); overflow: visible; }
.posture-title {
  padding: 1px 16px 3px;
  color: var(--sb-card-ink);
  background: var(--sb-sun);
  border: 2.5px solid var(--sb-outline);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--sb-outline);
  font: 600 clamp(1.05rem, 3vw, 1.35rem)/1.3 var(--font-display);
  color: var(--sb-outline);
  transform: rotate(-1.2deg);
}
.reduced-motion .posture { animation: none; }

.pa-ln { stroke: var(--sb-outline); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.pa-f-sea { fill: var(--sb-sea); }
.pa-f-sun { fill: var(--sb-sun); }
.pa-f-pink { fill: var(--sb-pink); }
.pa-f-kelp { fill: var(--sb-kelp); }
.pa-f-grape { fill: var(--sb-grape); }
.pa-f-orange { fill: var(--sb-orange); }
.pa-f-sand { fill: var(--sb-sand); }
.pa-f-card { fill: var(--sb-card); }
.pa-f-white { fill: #fffdf8; }
.pa-f-ink { fill: var(--sb-outline); }
.pa-c-sea { stroke: var(--sb-sea); }
.pa-c-pink { fill: var(--sb-pink); }
.pa-c-grape { stroke: var(--sb-grape); }
.pa-c-white { stroke: #fffdf8; }
.pa-floor { fill: none; stroke: var(--sb-outline); stroke-width: 4; stroke-linecap: round; }
.pa-screen { fill: color-mix(in srgb, var(--sb-sea) 35%, var(--sb-card-2)); stroke: none; }
.pa-glint { fill: none; stroke: color-mix(in srgb, var(--sb-outline) 40%, transparent); stroke-width: 4; stroke-linecap: round; }
.pa-limb { fill: none; stroke: var(--sb-outline); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.pa-limb.pa-thin { stroke-width: 15; }
.pa-limb-fill { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.pa-limb-fill.pa-thin { stroke-width: 8.5; }
.pa-eye { fill: var(--sb-outline); }
.pa-mouth { fill: none; stroke: var(--sb-outline); stroke-width: 3; stroke-linecap: round; }
.pa-chair { fill: none; stroke: var(--sb-outline); stroke-width: 5; stroke-linecap: round; }
.pa-dot { stroke: var(--sb-outline); stroke-width: 3; }
.pa-key { fill: var(--sb-outline); font: 700 44px var(--font-display); }
.pa-key-s { fill: var(--sb-card-ink); font: 700 15px var(--font-display); }
.pa-key-s.is-home { fill: var(--sb-outline); }
.pa-tip-fill { fill: var(--sb-pink); }
.pa-hand-art { opacity: 0.85; }
.pa-hand-body { fill: color-mix(in srgb, var(--sb-sky) 30%, #fffdf8); } /* a faint tint, so the hand shows on a white panel */
.pa-hand-line { fill: none; stroke: var(--sb-outline); stroke-width: 2.2; stroke-dasharray: 0 4.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-eye-glint { fill: #fff; }
.pa-bump { fill: none; stroke: var(--sb-outline); stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
.pa-guide { fill: none; stroke: var(--sb-pink); stroke-width: 3.5; stroke-linecap: round; }
.pa-dash { stroke-dasharray: 2 9; }
.pa-arrow { fill: none; stroke: var(--sb-pink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pa-spark { fill: var(--sb-sun); stroke: var(--sb-outline); stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: pa-twinkle 1.8s ease-in-out infinite; }
.pa-spark:nth-last-of-type(2n) { animation-delay: -0.9s; }
.pa-ball { fill: color-mix(in srgb, var(--sb-sun) 70%, var(--sb-card)); stroke: var(--sb-outline); stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.pa-eyes { transform-box: fill-box; }
@keyframes pa-twinkle { 0%, 100% { transform: scale(0.8) rotate(0); } 50% { transform: scale(1.1) rotate(12deg); } }
.reduced-motion .pa-spark { animation: none; }

/* ---------- the "Sharp Eyes" sticker ---------- */

.sharp {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: sharp-in 0.6s var(--ease-spring) both;
}
.sharp-badge {
  display: grid;
  place-items: center;
  width: clamp(84px, 16vh, 120px);
  aspect-ratio: 1;
  color: var(--sb-outline);
  background: var(--sb-sun);
  border: var(--sb-outline-w) solid var(--sb-outline);
  border-radius: 50%;
  box-shadow: var(--sb-pop), 0 0 0 6px var(--sb-glow-color);
  transform: rotate(-8deg);
}
.sharp-eyes { width: 62%; }
.sharp-name {
  padding: 1px 16px 3px;
  color: var(--sb-outline);
  background: var(--sb-pink);
  border: 2.5px solid var(--sb-outline);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--sb-outline);
  font: 600 clamp(1.05rem, 3vw, 1.3rem)/1.3 var(--font-display);
  transform: rotate(2deg);
}
@keyframes sharp-in {
  0% { transform: scale(0.2) rotate(-40deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reduced-motion .sharp { animation: none; }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .tea { border-radius: 14px; }
  .posture-art { height: clamp(104px, 17vh, 150px); }
}