/* "Hop along" (games/hop.js): the frog, its lily pads and the line under the staff. The frog keeps its own colours
   in light and dark (never the green that means "right"); the pads follow the theme. Reduce Motion: the hop is a fade
   of the same length (in hop.js), the shake and the rising notes become fades here. */
:root {
  /* RaiseSteady's house frog (emoji 🐸): site mint, navy outline, white eyes, blush; yellow cheer notes (P2-122). */
  --frog: #75C5A8; --frog-ink: #282858; --frog-belly: #BFE9D6; --frog-eye: #FFFFFF; --frog-cheek: #FBB3B4; --frog-note: #FEDB71;
  --pad: #DDF0D3; --pad-line: #9FD38A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pad: #23402F; --pad-line: #4FA588; }
}
:root[data-theme="dark"] { --pad: #23402F; --pad-line: #4FA588; }

.hop .prompt { text-wrap: balance; }
.hop .staff-card { padding-block: .25rem; }
.hop .staff-card .staff-svg { max-height: 19rem; }
@media (max-width: 34.99rem) { .hop .staff-card { padding-inline: .35rem; } }
.hop-pad { fill: var(--pad); stroke: var(--pad-line); stroke-width: 1.5; transition: opacity 380ms ease; }
.hop-pad.is-gone { opacity: 0; }

.hop-char .pose { display: none; }
.hop-char[data-pose="sit"] .pose-sit, .hop-char[data-pose="hop"] .pose-hop,
.hop-char[data-pose="puzzled"] .pose-puzzled, .hop-char[data-pose="cheer"] .pose-cheer { display: inline; }
.hop-char .pose-puzzled, .hop-char .cheer-notes { transform-box: fill-box; transform-origin: 50% 100%; }
.hop-char.is-puzzled .pose-puzzled { animation: hop-shake 420ms ease-in-out; }
.hop-char.is-puzzled .puzzle-mark { animation: fade 420ms ease both; }
.hop-char.is-cheer .cheer-notes { animation: hop-rise 700ms ease-out both; }
@keyframes hop-shake { 0%, 100% { transform: none; } 25% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }
@keyframes hop-rise { from { opacity: 0; transform: translateY(12%); } to { opacity: 1; transform: none; } }

.hop-line { display: flex; gap: .5rem; align-items: flex-start; justify-content: center; min-height: 3em; text-align: center; color: var(--ink-soft); }
.hop-line .icon { margin-top: .1em; color: var(--accent); flex: none; }
.hop-line.is-good, .hop-line.is-good .icon { color: var(--good); }
.hop-line.is-wrong, .hop-line.is-wrong .icon { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  /* The frog changes pose at once; only the "?" and the little notes fade in, with the motion's own timings. */
  .hop-char.is-puzzled .pose-puzzled { animation: none; }
  .hop-char.is-cheer .cheer-notes { animation: fade 700ms ease both; }
}