/* ─────────────────────────────────────────────────────────────────────────
   kurus.css: Kurus, the living pearl (1.22). The face below is written by
   src/art/kurus-face.js, which also sets every variable it reads; the game
   carries the same block (public/dip/style.css, between the same markers;
   scripts/kurus-parity-test.mjs holds them equal). After it, the site's
   companion (src/art/kurus.js) and its cameos (scripts/site-chrome.mjs).
   Sizes are shares of the body (cqw: the face is its own container).
   ───────────────────────────────────────────────────────────────────────── */
/* face:begin */
.kurus-face { position: relative; display: block; flex: none; width: var(--k, 64px); height: var(--k, 64px); container-type: size; pointer-events: none; -webkit-user-select: none; user-select: none; forced-color-adjust: none; }
.kurus-face span { position: absolute; display: block; }
/* the pearl's light around him, and his breath (its speed is how stirred he is) */
.kurus__aura { inset: -34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pearl-rgb), 0.4), rgba(var(--pearl-rgb), 0.12) 52%, rgba(var(--pearl-rgb), 0) 100%); opacity: var(--aura, 0.5); transition: opacity 0.4s ease; }
.kurus__breath { inset: 0; animation: kurus-breath var(--breath, 4.2s) ease-in-out infinite; }
/* the body: the hero pearl's nacre, rendered (a gradient until it loads) */
.kurus__mass { inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #f3f7ff 0%, #cdd9f5 22%, #aebfe8 58%, #2a3a66 97%, rgba(42, 58, 102, 0) 100%); }
.kurus__body { position: absolute; left: -12.5%; top: -12.5%; width: 125%; height: 125%; max-width: none; pointer-events: none; -webkit-touch-callout: none; }
.kurus__core { inset: 16%; border-radius: 50%; background: radial-gradient(circle at 50% 56%, rgba(255, 220, 160, 0.95), rgba(255, 196, 120, 0.4) 38%, rgba(255, 196, 120, 0) 70%); mix-blend-mode: screen; opacity: var(--core, 0.25); transition: opacity 0.4s ease; }
/* the features turn; the light on the glass does not */
.kurus__turn { inset: 0; transform: rotate(var(--tilt, 0deg)); transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
.kurus__eye { left: 50%; top: 50%; width: 8.5cqw; height: 20cqw; margin: -10cqw 0 0 -4.25cqw; transition: transform 90ms ease-out; }
.kurus__eye--l { transform: translate(var(--exl, -11cqw), var(--eyl, -4cqw)) scale(calc(var(--sxl, 0.963) * var(--esx, 1)), calc(var(--syl, 0.995) * var(--esy, 1))) rotate(var(--et, 0deg)); }
.kurus__eye--r { transform: translate(var(--exr, 11cqw), var(--eyr, -4cqw)) scale(calc(var(--sxr, 0.963) * var(--esx, 1)), calc(var(--syr, 0.995) * var(--esy, 1))) rotate(calc(var(--et, 0deg) * -1)); }
.kurus__lid { inset: 0; transform-origin: 50% var(--mid-l, 50%); transition: transform var(--bt, 130ms) ease-in-out; }
.kurus__eye--r .kurus__lid { transform-origin: 50% var(--mid-r, 50%); }
/* the eyes are light behind the glass: a bloom, the lit iris cut by its lids, a catchlight */
.kurus__bloom { inset: -40% -90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--eye-pink-rgb), 0.5), rgba(var(--eye-pink-rgb), 0)); opacity: var(--open-l, 1); transition: opacity 0.16s ease; }
.kurus__eye--r .kurus__bloom { opacity: var(--open-r, 1); }
.kurus__iris { inset: 0; border-radius: 999px; background: radial-gradient(ellipse 70% 50% at 50% 36%, #fff6f8 0%, #ffc4d2 22%, var(--eye-pink) 64%, #b8476a 100%); clip-path: var(--lid-l); transition: clip-path 0.16s ease-out; }
.kurus__eye--r .kurus__iris { clip-path: var(--lid-r); }
.kurus__iris::after { content: ''; position: absolute; left: 24%; top: 14%; width: 34%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
/* the thin film at the rim: its bands drift only when he turns */
.kurus__film { inset: 0; border-radius: 50%; background: conic-gradient(#5cb8b4, #7fb4ff, #b07ee0, #e6bd5c, #5cb8b4); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 86%, #000 97%, transparent 100%); mask: radial-gradient(closest-side, transparent 62%, #000 86%, #000 97%, transparent 100%); mix-blend-mode: screen; opacity: 0.22; transform: rotate(var(--film, 0deg)); transition: transform 0.6s ease; }
.kurus__veil { inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%, rgba(30, 40, 90, 0) 72%, rgba(30, 40, 90, 0.16) 100%); }
/* the key light's hot point, where the sky's shader puts it, and the tape's gold glint */
.kurus__spec { left: 22%; top: 19%; width: 24%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, rgba(255, 255, 255, 0.9) 16%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0) 100%); transform: translate(var(--spx, 0), var(--spy, 0)); transition: transform 0.5s ease; }
.kurus__spec::after { content: ''; position: absolute; left: 140%; top: 165%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240, 205, 117, 0.3), rgba(240, 205, 117, 0)); }
/* the prism at the silhouette: he is working something out */
.kurus__prism { inset: -2%; border-radius: 50%; background: conic-gradient(rgba(92, 184, 180, 0), #5cb8b4, #7fb4ff, #b07ee0, #e06a84, #e6bd5c, rgba(230, 189, 92, 0)); -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 96%, transparent 100%); mask: radial-gradient(closest-side, transparent 92%, #000 96%, transparent 100%); opacity: var(--prism, 0); transition: opacity 0.4s ease; animation: kurus-spin 3.2s linear infinite paused; }
.kurus-face[data-mood="thinking"] .kurus__prism { animation-play-state: running; }
/* blinks: a script blinks a live face; a still one keeps an irregular clock, out of step with the others */
.kurus-face.is-blink .kurus__lid { transform: scaleY(0.06); }
.kurus-face:not([data-live]) .kurus__lid { animation: kurus-blink 13s var(--phase, 0s) infinite; }
.kurus-face:not([data-live])[data-blink="r"] .kurus__lid { animation-name: kurus-blink-rare; }
.kurus-face:not([data-live])[data-blink="f"] .kurus__lid { animation-duration: 9s; }
.kurus-face:not([data-live])[data-blink="s"] .kurus__lid { animation-name: kurus-blink-slow; }
.kurus-face:not([data-live])[data-blink="x"] .kurus__lid { animation: none; }
/* small (under 40 px): the eyes carry him; the film, the veil, the prism and the catchlight go */
.kurus-face[data-lod="s"] .kurus__film, .kurus-face[data-lod="s"] .kurus__veil, .kurus-face[data-lod="s"] .kurus__prism, .kurus-face[data-lod="s"] .kurus__iris::after { display: none; }
.kurus-face[data-lod="s"] .kurus__eye { width: 9.8cqw; height: 23cqw; margin: -11.5cqw 0 0 -4.9cqw; }
/* small: a solid, deeper iris (the hot centre washes a 3 px eye out on the pale glass) */
.kurus-face[data-lod="s"] .kurus__iris { background: linear-gradient(180deg, #f08aa0 0%, var(--eye-pink) 45%, #a83d5f 100%); }
@keyframes kurus-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes kurus-spin { to { transform: rotate(360deg); } }
@keyframes kurus-blink {
  0%, 14.6%, 16.45%, 41.5%, 43.35%, 44.9%, 46.75%, 63.8%, 65.65%, 89.2%, 91.05%, 100% { transform: scaleY(1); }
  15.14%, 15.45%, 42.04%, 42.35%, 45.44%, 45.75%, 64.34%, 64.65%, 89.74%, 90.05% { transform: scaleY(0.06); }
}
@keyframes kurus-blink-rare { 0%, 30%, 31.85%, 78%, 79.85%, 100% { transform: scaleY(1); } 30.54%, 30.85%, 78.54%, 78.85% { transform: scaleY(0.06); } }
@keyframes kurus-blink-slow { 0%, 30%, 34.4%, 72%, 76.4%, 100% { transform: scaleY(1); } 30.8%, 32.8%, 72.8%, 74.8% { transform: scaleY(0.06); } }
@media (prefers-reduced-motion: reduce) {
  .kurus-face, .kurus-face span, .kurus-face span::after { animation: none !important; transition: none !important; }
}
/* face:end */

/* ── the site's companion (src/art/kurus.js): he perches in the hero, docks
   bottom-right, peeks in from a phone's edge, steps off every gold button ── */
.kurus { position: fixed; left: 0; top: 0; z-index: 40; width: 64px; height: 64px; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
.kurus.is-on { opacity: 1; }
.kurus__spring { position: absolute; left: 0; top: 0; width: 64px; height: 64px; will-change: transform; }
.kurus__idle { width: 64px; height: 64px; transition: scale 0.4s var(--ease); }
.kurus.is-docked .kurus__idle { scale: 0.72; } /* docked, a small companion in the corner, not a second pearl */
.kurus__orb {
  position: relative; display: block; width: 64px; height: 64px; padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; border-radius: 50%; -webkit-tap-highlight-color: transparent;
}
.kurus__orb::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; } /* an 84 px target */
.kurus__spring.is-moving .kurus__orb { pointer-events: none; } /* in flight he never takes a tap meant for the page under him */
.kurus__orb:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.kurus__orb .kurus__mass { transition: transform 0.12s ease-out; }
.kurus.is-docked .kurus__aura { opacity: calc(var(--aura, 0.5) * 0.7); }

/* ── a cameo: a page with no stage (About, the 404, every lesson's last box) ── */
.kurus-cameo { display: inline-block; flex: none; width: 64px; height: 64px; margin: 12px; }
.cta > .kurus-cameo { position: absolute; top: -34px; right: 18px; margin: 0; scale: 0.82; }
@media (prefers-reduced-motion: reduce) { .kurus, .kurus__idle, .kurus__orb .kurus__mass { transition: none; } }