/* ══════════════════════════════════════════════════════════════════════
   THE MARKS — the twi logo, and Koko.

   The brand rule the source repo states plainly: the logo is the twi
   wordmark. The robot is an icon and a mini character — micro mark,
   avatar, watermark, reaction — never the primary lockup. So the nav
   carries the wordmark, and Koko takes the small slots and sits, large
   and quiet, behind a few bands.

   Ported from thatwednesday-website (assets/expressive.css §1 and its
   Koko-in-the-background block), with the character's fills mapped onto
   this page's own tokens so its amber matches the rest of the site.
   ────────────────────────────────────────────────────────────────────── */

/* ── the twi wordmark ─────────────────────────────────────────────── */
.tw-logo { transition: transform 320ms cubic-bezier(.34,1.4,.64,1); }
.brand:hover .tw-logo { transform: translateY(-2px); }

/* ── Koko ─────────────────────────────────────────────────────────── */
.tw-char .twi { width: 100%; height: 100%; }
.twi { display: block; overflow: visible; }

.twi .tw-head, .twi .tw-mouth, .twi .tw-eye { fill: var(--ink); }
.twi .tw-face { fill: #FBFBFB; }
.twi .tw-leaf { fill: #A7C48F; }
.twi .tw-dot  { fill: var(--midday); }
.twi.reversed .tw-head, .twi.reversed .tw-mouth, .twi.reversed .tw-eye { fill: var(--paper); }
.twi.reversed .tw-face { fill: none; }

/* eyes: blink, and wink the right one only */
.twi .tw-eye {
  transform-box: fill-box; transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,0,0,1);
}
.twi.blink .tw-eye   { animation: tw-blink 260ms cubic-bezier(.2,0,0,1); }
.twi.wink  .tw-eye-r { animation: tw-blink 380ms cubic-bezier(.2,0,0,1); }
@keyframes tw-blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(.08); } }

/* the amber dot is "progress happens" — it breathes */
.twi .tw-dot {
  transform-box: fill-box; transform-origin: center;
  animation: tw-breathe 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes tw-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } }

/* the lime blade turns like a fan */
.twi .tw-leaf { transform-box: fill-box; transform-origin: center; }
.twi:not(.still) .tw-leaf { animation: tw-fan 7s linear infinite; }
@keyframes tw-fan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.twi .tw-mouth { transition: stroke-width 320ms cubic-bezier(.34,1.4,.64,1); }

/* ── Koko in the background ───────────────────────────────────────────
   A large, quiet one behind a handful of bands. Never more than one per
   section, always beneath the content, always decorative. */
.has-koko { position: relative; overflow: hidden; }
.has-koko > .wrap, .has-koko > *:not(.koko-mark) { position: relative; z-index: 1; }

.koko-mark {
  position: absolute; top: 50%; z-index: 0;
  line-height: 0; pointer-events: none;
  opacity: 0.055; transform: translateY(-50%) rotate(-6deg);
}
/* Inside the band, not hanging off it. These used to bleed 104px past the
   edge, which the clip then took off — so the character was cut on the
   side as well as top and bottom. */
.koko-right { right: 30px; }
.koko-left  { left: 30px; }

/* the watermark holds still — the sway belongs to the small ones */
.koko-mark .twi .tw-leaf, .koko-mark .twi .tw-dot { animation: none; }

@media (max-width: 900px) { .koko-mark { display: none; } }

/* ── the rest of the repertoire ───────────────────────────────────────
   Koko in a calendar cell is 38px across, so its eyes are under 5px. At
   that size a raised brow or a changed mouth is a few grey pixels moving
   and reads as nothing at all. Everything here is therefore a whole shape
   travelling: an eye shutting, the amber dot leaving the head, the body
   tipping or dropping. Each one is a single run — the class goes on, the
   animation plays once, the class comes off. */

/* looks left, then right */
.twi.look .tw-eye { animation: tw-look 1500ms cubic-bezier(.4,0,.2,1); }
@keyframes tw-look {
  0%, 100%  { transform: translateX(0); }
  22%, 36%  { transform: translateX(-42%); }
  60%, 74%  { transform: translateX(42%); }
}

/* both eyes wide — surprise */
.twi.wide .tw-eye { animation: tw-wide 900ms cubic-bezier(.34,1.4,.64,1); }
@keyframes tw-wide {
  0%, 100% { transform: scale(1); }
  28%, 62% { transform: scale(1.38); }
}

/* the amber dot hops off the head. "Progress happens" — the brand's own
   line for that dot — so it is the part that gets excited. */
.twi.cheer .tw-dot { animation: tw-hop 860ms cubic-bezier(.34,1.4,.64,1); }
@keyframes tw-hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-34%) scale(1.2); }
  70%  { transform: translateY(6%) scale(.92); }
  100% { transform: none; }
}

/* The lime blade already turns once every seven seconds. Its own keyframes
   under a shorter duration would not restart the turn — same animation
   name, so the browser only speeds up the one already in flight, from
   wherever it happens to be. Its own name, and two turns rather than one,
   so it reads as a burst against the idle rather than as a stutter in it.
   After the idle rule, which it ties with on specificity. */
.twi.spin .tw-leaf { animation: tw-whirl 760ms cubic-bezier(.45,0,.2,1); }
@keyframes tw-whirl { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }

/* whole-body gestures */
.twi.bounce { animation: tw-bounce 900ms cubic-bezier(.34,1.4,.64,1); }
.twi.nod    { animation: tw-nod 1000ms cubic-bezier(.4,0,.2,1); }
.twi.tilt   { animation: tw-tilt 1300ms cubic-bezier(.4,0,.2,1); }
@keyframes tw-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-15%); }
  55%      { transform: translateY(3%); }
  78%      { transform: translateY(-5%); }
}
@keyframes tw-nod {
  0%, 100%  { transform: translateY(0); }
  22%, 66%  { transform: translateY(8%); }
  44%       { transform: translateY(0); }
}
@keyframes tw-tilt {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-10deg); }
  66%      { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .koko-mark { transform: translateY(-50%); }
  .twi .tw-dot, .twi:not(.still) .tw-leaf { animation: none; }
}