/* Buddy scenes beside the question bank intros, and his "all done"
   celebration in their progress panels (lib/scenes.php), added to each index
   by tools/design-export/scene.php.

   Each scene plays once when the page loads, the page's one orchestrated
   moment, and rests on its last frame. With reduced motion, only that last
   frame shows. Buddy's bar is the scene's only orange. */

/* ---------- Layout: beside the intro on wide screens, under it on narrow ---------- */

.ix-scene {
  width: 200px;
  margin-top: 32px;
}

.ix-scene svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .ix-scened {
    display: grid;
    grid-template-columns: minmax(0, 75ch) minmax(0, 300px);
    column-gap: 64px;
    align-items: center;
    max-width: none;
  }

  .ix-scened > * {
    grid-column: 1;
  }

  .ix-scened > .ix-scene {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
    margin-top: 0;
  }
}

/* "All done": buddy sits between the progress summary and the buttons
   (js/cheer.js shows him), and "Pick one at random" becomes an outline
   button, so his bar is the panel's one orange. */

.ix-cheer {
  flex: none;
  width: 96px;
}

.ix-cheer[hidden] {
  display: none;
}

.ix-cheer svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible; /* his bar twirls above the frame */
}

[data-ix-cheer-calm].is-calm {
  border-color: var(--ink);
  background: transparent;
}

[data-ix-cheer-calm].is-calm:hover {
  border-color: var(--ink);
  background: var(--frame);
}

/* ---------- Drawing ---------- */

.buddy__bar {
  fill: var(--tangent);
}

.buddy__dot,
.sc-ink {
  fill: var(--ink);
}

.buddy__face {
  fill: var(--frame);
}

.buddy__face--think,
.sc-dot,
.sc-query,
.sc-press,
.sc-show {
  opacity: 0;
}

.sc-show--5 {
  opacity: 1;
}

.sc-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-line--thick {
  stroke-width: 7;
}

.sc-face {
  fill: var(--frame);
  stroke: var(--ink);
  stroke-width: 5;
}

.sc-screen {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3;
}

.sc-tick {
  fill: none;
  stroke: var(--muted);
  stroke-width: 3;
  stroke-linecap: round;
}

.sc-key {
  fill: var(--frame);
  stroke: var(--muted);
  stroke-width: 2;
}

.sc-digits {
  fill: var(--ink);
  font-family: var(--font-math);
  font-size: 26px;
}

.ch-spark {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .sc-hop,
  .sc-sway,
  .sc-query,
  .sc-aha,
  .buddy__eye {
    transform-box: fill-box;
    transform-origin: center;
  }

  .sc-hop {
    transform-origin: center bottom;
  }

  .ix-scene .buddy__face--smile .buddy__eye {
    animation: sc-blink 1.5s linear both;
  }

  /* Think: dots rise to the question mark, which turns into an exclamation mark. */
  .ix-scene--think .sc-sway {
    animation: sc-ponder 2.6s ease-in-out both;
  }

  .ix-scene--think .sc-dot {
    animation: sc-thought 2.6s ease-out both;
  }

  .ix-scene--think .sc-dot--2 {
    animation-delay: 0.4s;
    animation-duration: 2.2s;
  }

  .ix-scene--think .sc-dot--3 {
    animation-delay: 0.8s;
    animation-duration: 1.8s;
  }

  .ix-scene--think .sc-query {
    animation: sc-wonder 2.8s ease-in-out both;
  }

  .ix-scene--think .sc-aha {
    animation: sc-pop 0.45s cubic-bezier(0.3, 0, 0.2, 1) 2.7s both;
  }

  .ix-scene--think .buddy__face--think {
    animation: sc-until 2.7s step-end both;
  }

  .ix-scene--think .buddy__face--smile {
    animation: sc-from 2.7s step-end both;
  }

  .ix-scene--think .sc-hop {
    animation: sc-hop 0.5s ease-out 2.7s both;
  }

  .ix-scene--think .buddy__face--smile .buddy__eye {
    animation-delay: 3.6s;
  }

  /* Clock: the hand sweeps once round, the crown clicks, buddy hops. */
  .ix-scene--clock .sc-hand {
    transform-origin: 100px 140px;
    animation: sc-sweep 2.8s linear 0.3s both;
  }

  .ix-scene--clock .sc-sway {
    animation: sc-bob 1.4s ease-in-out 0.3s 2 both;
  }

  .ix-scene--clock .sc-crown {
    animation: sc-click 0.25s ease-out 3.1s both;
  }

  .ix-scene--clock .sc-hop {
    animation: sc-hop 0.5s ease-out 3.15s both;
  }

  .ix-scene--clock .buddy__face--smile .buddy__eye {
    animation-delay: 3.9s;
  }

  /* Calculator: 4, 8, +, 2, = light up in turn, and the display follows. */
  .ix-scene--calc .sc-press {
    animation: sc-press 0.3s ease-out both;
  }

  .ix-scene--calc .sc-press--1 { animation-delay: 0.5s; }
  .ix-scene--calc .sc-press--2 { animation-delay: 0.9s; }
  .ix-scene--calc .sc-press--3 { animation-delay: 1.3s; }
  .ix-scene--calc .sc-press--4 { animation-delay: 1.7s; }
  .ix-scene--calc .sc-press--5 { animation-delay: 2.3s; }

  .ix-scene--calc .sc-show {
    animation: 3s step-end both;
  }

  .ix-scene--calc .sc-show--0 { animation-name: sc-show-0; }
  .ix-scene--calc .sc-show--1 { animation-name: sc-show-1; }
  .ix-scene--calc .sc-show--2 { animation-name: sc-show-2; }
  .ix-scene--calc .sc-show--3 { animation-name: sc-show-3; }
  .ix-scene--calc .sc-show--4 { animation-name: sc-show-4; }
  .ix-scene--calc .sc-show--5 { animation-name: sc-show-5; }

  .ix-scene--calc .sc-hop {
    animation: sc-hop 0.5s ease-out 2.35s both;
  }

  .ix-scene--calc .buddy__face--smile .buddy__eye {
    animation-delay: 3.1s;
  }

  /* All done: he pops up, hops twice and twirls his bar as the sparks burst. */
  .ix-cheer.is-playing .ch-pop,
  .ix-cheer.is-playing .buddy__bar,
  .ix-cheer.is-playing .ch-spark,
  .ix-cheer.is-playing .buddy__eye {
    transform-box: fill-box;
    transform-origin: center;
  }

  .ix-cheer.is-playing .ch-pop {
    transform-origin: center bottom;
    animation: ch-pop 0.35s cubic-bezier(0.3, 0, 0.2, 1) both;
  }

  .ix-cheer.is-playing .ch-hop {
    animation: ch-hops 0.9s ease-in-out 0.3s both;
  }

  .ix-cheer.is-playing .buddy__bar {
    animation: ch-twirl 0.5s ease-in-out 0.35s both;
  }

  .ix-cheer.is-playing .ch-spark {
    animation: ch-spark 0.6s ease-out 0.45s both;
  }

  .ix-cheer.is-playing .buddy__eye {
    animation: sc-blink 1.5s linear 1.4s both;
  }
}

@keyframes ch-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes ch-hops {
  0%, 50%, 85%, 100% { transform: none; }
  25% { transform: translateY(-18px); }
  68% { transform: translateY(-8px); }
}

@keyframes ch-twirl {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ch-spark {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes sc-blink {
  0%, 20%, 40%, 70%, 90%, 100% { transform: none; }
  10%, 80% { transform: scaleY(0.13); }
}

@keyframes sc-hop {
  0%, 100% { transform: none; }
  40% { transform: translateY(-16px); }
  75% { transform: translateY(2px) scaleY(0.97); }
}

@keyframes sc-bob {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); }
}

@keyframes sc-ponder {
  0% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
  100% { transform: none; }
}

@keyframes sc-thought {
  0%, 10% { opacity: 0; }
  25%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sc-wonder {
  0% { opacity: 1; transform: rotate(-6deg); }
  45% { transform: rotate(6deg); }
  88% { opacity: 1; transform: rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}

@keyframes sc-pop {
  0% { opacity: 0; transform: scale(0.2); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}

@keyframes sc-until {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sc-from {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sc-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sc-click {
  0%, 100% { transform: none; }
  50% { transform: translateY(4px); }
}

@keyframes sc-press {
  0%, 100% { opacity: 0; }
  30% { opacity: 1; }
}

/* The display's six states over the calculator's 3 s: 0, 4, 48, 48+, 48+2, 50. */
@keyframes sc-show-0 { 0% { opacity: 1; } 16.67%, 100% { opacity: 0; } }
@keyframes sc-show-1 { 0% { opacity: 0; } 16.67% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes sc-show-2 { 0% { opacity: 0; } 30% { opacity: 1; } 43.33%, 100% { opacity: 0; } }
@keyframes sc-show-3 { 0% { opacity: 0; } 43.33% { opacity: 1; } 56.67%, 100% { opacity: 0; } }
@keyframes sc-show-4 { 0% { opacity: 0; } 56.67% { opacity: 1; } 76.67%, 100% { opacity: 0; } }
@keyframes sc-show-5 { 0% { opacity: 0; } 76.67%, 100% { opacity: 1; } }