/* Toni — the tone stroke. Temporary reference styles; folds into _studio.css when the system lands. */

:root {
  --toni-ink: #241f2b;  /* Toni is one flat colour and always the darkest value in frame.
                           That is what replaces the outline this system doesn't have. */
}

.toni { display: inline-block; line-height: 0; }
.toni-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.toni-ribbon { fill: var(--toni-ink); }
.toni-eye { fill: #fff; }
.toni-pupil { fill: var(--toni-ink); }
.toni-glint { fill: #fff; }
.toni-lid { fill: var(--toni-ink); display: none; }
.toni-ghost { display: none; fill: none; stroke: var(--color-good); stroke-width: 5; stroke-linecap: round; }
.toni-sparks { display: none; }
.toni-sparks path { fill: var(--color-good); }
.toni-hear { display: none; }
.toni-hear path { fill: none; stroke: var(--toni-ink); stroke-width: 3.4; stroke-linecap: round; opacity: .28; }

.toni-mark, .toni-face {
  transform-box: view-box;
  transform-origin: 100px 100px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}

/* COACH — the mark leans in. No brows, no pointing arm: the posture is the expression. */
.is-coach .toni-mark { transform: rotate(-5deg) translateX(3px); }
.is-coach .toni-lid { display: block; transform: scaleY(.34); transform-box: fill-box; transform-origin: bottom; }

/* CELEBRATE — the green target line appears *underneath* Toni, because Toni landed on it.
   Toni itself never wears a grade colour. */
.is-celebrate .toni-sparks { display: block; }
.is-celebrate .toni-ghost { display: block; }
.is-celebrate .toni-mark { animation: toni-hop .9s ease-in-out infinite; }
@keyframes toni-hop { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* LISTENING — eyes half, sound arriving at the thick end, the mark breathing. */
.is-listening .toni-hear { display: block; }
.is-listening .toni-lid { display: block; }
.is-listening .toni-mark { animation: toni-breathe 2.1s ease-in-out infinite; }
@keyframes toni-breathe { 0%,100% { transform: rotate(-1.4deg) } 50% { transform: rotate(1.4deg) } }

/* UNCERTAIN — the mark refuses to resolve. Absence of a verdict, never a fourth colour. */
.is-uncertain .toni-ribbon { fill: none; stroke: var(--toni-ink); stroke-width: 3.4; stroke-dasharray: 3 10; stroke-linecap: round; opacity: .5; }
.is-uncertain .toni-lid { display: block; transform: scaleY(.5); transform-box: fill-box; transform-origin: bottom; }

@media (prefers-reduced-motion: reduce) { .toni-mark { animation: none !important; } }

/* --- rejected alternative: the crested myna. Comparison only. --- */
.bird-body, .bird-head, .bird-tail { fill: var(--toni-ink); }
.bird-wing { fill: #3b3444; }
.bird-beak { fill: #e8a75e; }
.bird-legs path { fill: none; stroke: #e8a75e; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.bird-crest { fill: none; stroke: var(--toni-ink); stroke-width: 9; stroke-linecap: round; }