/* sioma.ai's copy, cut to what the page wears: the header's bot, and the colours of every feeling and of the palettes its walls wear, which
   the scene reads off it. The line look, the other palettes, the costume's layer and the scenes are the repo's bot.css's. */
/* The bot: Sagi's first aurabot, the card he pasted as the reference on 2026-10-03, drawn light enough for a roster (UI-83, after UI-46).
   A front card holding the aura, four lights turning under frosted white; behind it a plate, the card's width and a little shorter, risen
   above it; the card tilts toward the pointer and lifts off the plate, and the plate slides the other way, so the two read as layers. Two
   eyes on the card say how it is. Its parts are made by bot.js inside any element with the class .bot, so the client, the globe and the guide
   keep the one contract they had: a .bot with a data-emotion. It is worn on a .mark, which gives it its size.

   Light by rule, each one measured on the scratch pages that day: no blur but the helper's small disc (the first aurabot's four blurs and a backdrop blur held
   200 bots to 32 frames a second, these hold 60); nothing animates inside a 3D context, since a moving part inside one makes the
   browser sort the whole of it again each frame; the card and the eyes are two flat planes with a perspective each, written by bot.js from one
   loop that stops once every bot is still. Every value is a token the page supplies, --aura-* and --bot-* among them. The eyes' drawing is in
   hundredths of their own box, as it was. */

/* the feeling's four colours, registered so one feeling fades into the next, and set on the parts and not on the .bot: map.js writes the
   globe's bot a transition of its own, inline, which would replace the fade */
@property --bot-c1 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --bot-c2 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --bot-c3 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --bot-c4 { syntax: "<color>"; inherits: true; initial-value: transparent; }

.bot { position: relative; container-type: size; overflow: visible;
  --lup: 1;
  --lur: 0deg;
  --llp: 1;
  --llr: 0deg;
  --rup: 1;
  --rur: 0deg;
  --rlp: 1;
  --rlr: 0deg;   /* each lid: how far it stands from the eye's middle, and its turn */
  --eye-w: 6.75%;   /* the eye: half its width, half its height, and how far each sits from the middle; the pill at rest */
  --eye-h: 13.5%;
  --eye-x: 15.1%; }
.bot > * {
  --size: 100cqi;
  --bot-aa: .55;   /* the aura's strength, dimmer than the first aurabot's .87 (Sagi, 2026-10-03) */
  --bot-c1: var(--aura-violet);
  --bot-c2: var(--aura-green);
  --bot-c3: var(--aura-rosa);
  --bot-c4: var(--aura-cyan);
  /* the edge: the aura's colours, deeper on a light page and lighter on a dark one, where a deep violet edge vanished */
  --bot-deep1: light-dark(color-mix(in oklch, var(--bot-c1) 75%, black), color-mix(in oklch, var(--bot-c1) 75%, white));
  --bot-deep2: light-dark(color-mix(in oklch, var(--bot-c2) 75%, black), color-mix(in oklch, var(--bot-c2) 75%, white));
  --bot-deep3: light-dark(color-mix(in oklch, var(--bot-c3) 75%, black), color-mix(in oklch, var(--bot-c3) 75%, white));
  --bot-edge: linear-gradient(135deg, var(--bot-deep2), var(--bot-deep3), var(--bot-deep1));
  --bot-edge-back: linear-gradient(135deg, color-mix(in oklch, var(--bot-deep2) 55%, transparent), color-mix(in oklch, var(--bot-deep3) 55%, transparent), color-mix(in oklch, var(--bot-deep1) 55%, transparent));   /* the plate's, dimmer: it is further away */
  --bot-edge-w: max(1px, calc(var(--size) * .014));
  position: absolute;
  --bot-fade: --bot-c1 calc(var(--dur) * 2) var(--ease), --bot-c2 calc(var(--dur) * 2) var(--ease), --bot-c3 calc(var(--dur) * 2) var(--ease), --bot-c4 calc(var(--dur) * 2) var(--ease);
  transition: var(--bot-fade); }

/* the plate: the card's width, a twelfth shorter, risen enough above the card to read as its own layer behind it; neutral inside, edged in
   the card's colours, dimmer (Sagi, 2026-10-03). Pointed at, it comes level with the card */
.bot-plate { inset: -7% 0 15% 0; border-radius: calc(var(--size) * .36); border: var(--bot-edge-w) solid transparent;
  background: linear-gradient(var(--bot-plate), var(--bot-plate)) padding-box, var(--bot-edge-back) border-box;
  transition: inset var(--dur) var(--ease), var(--bot-fade); }
a:hover .bot > .bot-plate { inset: 0; }

/* the card: rounder than the first aurabot's, its corners a third of it; frosted white over the aura, edged in the aura's deeper colours with a
   white catch of light inside. Lifted off the plate by its own perspective; bot.js adds the tilt. The clip-path as well as the overflow: with
   a border, the rounded overflow clip let the turning aura's corners out of a tilted card */
.bot-card { inset: 0; border-radius: 34%; overflow: hidden; clip-path: inset(0 round 34%); border: var(--bot-edge-w) solid transparent;
  transform: perspective(calc(var(--size) * 5.2)) translateZ(calc(var(--size) * .234));
  background: linear-gradient(var(--bot-frost), var(--bot-frost)) padding-box, var(--bot-edge) border-box; }
.bot-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 max(1px, calc(var(--size) * .008)) color-mix(in oklch, var(--bot-eye) 55%, transparent); }
a:hover .bot > .bot-card {
  box-shadow: 0 calc(var(--size) * .05) calc(var(--size) * .2) var(--bot-lift), inset 0 0 calc(var(--size) * .05) color-mix(in oklch, var(--bot-eye) 50%, transparent); }

/* the aura: the first aurabot's four lights, each set off the card's middle and reaching past its corners, as gradients already that soft, on
   a square as wide as the card's diagonal so no turn leaves a corner bare. They turn together, one layer the compositor turns; at rest
   under the pointer they hold still, as the first aurabot's did */
.bot-aura { position: absolute; inset: 0; }
.bot-balls { position: absolute; inset: -21%; animation: bot-spin calc(var(--bot-blink) * 1.5) linear infinite reverse;
  --a0: calc(var(--bot-aa) * 100%);
  --a1: calc(var(--bot-aa) * 62%);
  background: radial-gradient(36% 36% at 50% 72%, color-mix(in oklch, var(--bot-c1) var(--a0), transparent), color-mix(in oklch, var(--bot-c1) var(--a1), transparent) 50%, transparent),
    radial-gradient(36% 36% at 50% 28%, color-mix(in oklch, var(--bot-c2) var(--a0), transparent), color-mix(in oklch, var(--bot-c2) var(--a1), transparent) 50%, transparent),
    radial-gradient(36% 36% at 72% 50%, color-mix(in oklch, var(--bot-c3) var(--a0), transparent), color-mix(in oklch, var(--bot-c3) var(--a1), transparent) 50%, transparent),
    radial-gradient(36% 36% at 28% 50%, color-mix(in oklch, var(--bot-c4) var(--a0), transparent), color-mix(in oklch, var(--bot-c4) var(--a1), transparent) 50%, transparent); }
a:hover .bot .bot-balls { animation-play-state: paused; }
@keyframes bot-spin { to { rotate: 360deg; } }

/* the eyes: a plane of their own, stood off the card so they move against it as it turns; looking is a translate of the plane and blinking a
   scale of it, both bot.js's. The first aurabot's pills, a sixth of the card apart and a little above its middle (Sagi, 2026-10-03); every
   feeling opens them round, the eye first and the lids after, and cuts them with two lids, each turned about the eye's middle */
.bot > .bot-eyes { inset: 0; inline-size: 100%; block-size: 100%; overflow: visible;
  transform: perspective(calc(var(--size) * 5.2)) translateZ(calc(var(--size) * .334)); }
/* the eyes' shadow: soft on a light page, and deeper on a dark one, where the full look's bright card swallowed the white eyes (Sagi, 2026-10-03).
   Two shadows, since a shadow's size is an attribute and no theme reaches it: each one's colour is transparent in the other theme */
.bot-cast { flood-color: light-dark(color-mix(in oklch, var(--bot-c1) 50%, black), transparent); flood-opacity: .35; }
.bot-cast-dark { flood-color: light-dark(transparent, color-mix(in oklch, var(--bot-c1) 35%, black)); flood-opacity: .75; }
.bot-side { transition: translate var(--dur) var(--ease); }
.bot-side.bot-l { translate: calc(50% - var(--eye-x)) 46%; }
.bot-side.bot-r { translate: calc(50% + var(--eye-x)) 46%; }
.bot:not([data-emotion="neutral"]), a:hover .bot[data-emotion="neutral"] {
  --eye-w: 14%;
  --eye-h: 14%;
  --eye-x: 18%; }
.bot-eye { fill: var(--bot-eye); x: calc(-1 * var(--eye-w)); y: calc(-1 * var(--eye-h)); width: calc(2 * var(--eye-w)); height: calc(2 * var(--eye-h)); rx: var(--eye-w);
  transition: x var(--dur) var(--ease), y var(--dur) var(--ease), width var(--dur) var(--ease), height var(--dur) var(--ease), rx var(--dur) var(--ease); }
/* a lid is a rect whose edge starts on the eye's middle, moved out by its share of the eye's half-height and turned about the middle */
.bot-lid { fill: black; transition: transform var(--dur) var(--ease); }
.bot:not([data-emotion="neutral"]) .bot-lid { transition-delay: calc(var(--dur) * .6); }
.bot-up.bot-l { transform: rotate(var(--lur)) translateY(calc(var(--lup) * -14.1%)); }
.bot-lo.bot-l { transform: rotate(var(--llr)) translateY(calc(var(--llp) * 14.1%)); }
.bot-up.bot-r { transform: rotate(var(--rur)) translateY(calc(var(--rup) * -14.1%)); }
.bot-lo.bot-r { transform: rotate(var(--rlr)) translateY(calc(var(--rlp) * 14.1%)); }

/* an agent's own resting colours, the palettes costumes.js gives the walls' professions, worn while it feels nothing in particular: a
   feeling's colours below override them. Each a family of the palette's colours, held apart from the next by hue */
.bot[data-palette="tide"] > *  { --bot-c1: var(--aura-cyan); --bot-c2: var(--aura-blue); --bot-c3: var(--aura-green); --bot-c4: var(--aura-mist); }
.bot[data-palette="grape"] > * { --bot-c1: var(--aura-violet); --bot-c2: var(--aura-lavender); --bot-c3: var(--aura-indigo); --bot-c4: var(--aura-rosa); }
.bot[data-palette="coral"] > * { --bot-c1: var(--aura-red); --bot-c2: var(--aura-orange); --bot-c3: var(--aura-rosa); --bot-c4: var(--aura-amber); }
.bot[data-palette="gold"] > *  { --bot-c1: var(--aura-amber); --bot-c2: var(--aura-yellow); --bot-c3: var(--aura-orange); --bot-c4: var(--aura-sun); }
.bot[data-palette="night"] > * { --bot-c1: var(--aura-indigo); --bot-c2: var(--aura-violet); --bot-c3: var(--aura-deep); --bot-c4: var(--aura-periwinkle); }

/* the feelings: the pen's lids (codepen.io/z-/pen/wvBPvby) for the six the header wears, and all ten's four colours, which the scene reads, the
   first aurabot's per state: its default for rest, its success greens for happy, its sleeping violets for asleep, its warning oranges for
   confused, its error reds for pain */
.bot[data-emotion="happy"]      {
  --llp: .2;
  --llr: 8deg;
  --rlp: .2;
  --rlr: -8deg; }
.bot[data-emotion="close"]      {
  --lup: .12;
  --llp: .12;
  --rup: .12;
  --rlp: .12; }
.bot[data-emotion="confused"]   {
  --lup: .2; }
.bot[data-emotion="suspicious"] {
  --lup: .6;
  --lur: 4deg;
  --llp: .6;
  --llr: -4deg;
  --rup: .6;
  --rur: -4deg;
  --rlp: .6;
  --rlr: 4deg; }
.bot[data-emotion="unsure"]     {
  --lup: .61;
  --lur: -10deg;
  --llp: .61;
  --llr: 10deg; }
.bot[data-emotion="happy"] > *      {
  --bot-c1: var(--aura-green);
  --bot-c2: var(--aura-sun);
  --bot-c3: var(--aura-sky);
  --bot-c4: var(--aura-lime); }
.bot[data-emotion="sad"] > *        {
  --bot-c1: var(--aura-blue);
  --bot-c2: var(--aura-indigo);
  --bot-c3: var(--aura-sky);
  --bot-c4: var(--aura-pale); }
.bot[data-emotion="close"] > *      {
  --bot-c1: var(--aura-violet);
  --bot-c2: var(--aura-night);
  --bot-c3: var(--aura-violet);
  --bot-c4: var(--aura-deep); }
.bot[data-emotion="angry"] > *      {
  --bot-c1: var(--aura-rosa);
  --bot-c2: var(--aura-rosa);
  --bot-c3: var(--aura-rosa);
  --bot-c4: var(--aura-rosa); }
.bot[data-emotion="confused"] > *   {
  --bot-c1: var(--aura-orange);
  --bot-c2: var(--aura-amber);
  --bot-c3: var(--aura-rosa);
  --bot-c4: var(--aura-yellow); }
.bot[data-emotion="suspicious"] > * {
  --bot-c1: var(--aura-violet);
  --bot-c2: var(--aura-rosa);
  --bot-c3: var(--aura-rosa);
  --bot-c4: var(--aura-violet); }
.bot[data-emotion="pain"] > *       {
  --bot-c1: var(--aura-wine);
  --bot-c2: var(--aura-rosa);
  --bot-c3: var(--aura-rosa);
  --bot-c4: var(--aura-red); }
.bot[data-emotion="unamused"] > *   {
  --bot-c1: var(--aura-slate);
  --bot-c2: var(--aura-steel);
  --bot-c3: var(--aura-periwinkle);
  --bot-c4: var(--aura-mist); }
.bot[data-emotion="unsure"] > *     {
  --bot-c1: var(--aura-orange);
  --bot-c2: var(--aura-violet);
  --bot-c3: var(--aura-amber);
  --bot-c4: var(--aura-lavender); }

/* pointed at, on the tile or on the press that holds it, the bot greets: happy's lids and colours over whatever it wore. A sleeper keeps its
   eyes shut and takes the colour only, since waking is the press's to do. Last, so it wins */
a:hover .bot:not([data-emotion="close"]) {
  --lup: 1;
  --lur: 0deg;
  --llp: .2;
  --llr: 8deg;
  --rup: 1;
  --rur: 0deg;
  --rlp: .2;
  --rlr: -8deg; }
a:hover .bot > * {
  --bot-c1: var(--aura-green);
  --bot-c2: var(--aura-sun);
  --bot-c3: var(--aura-sky);
  --bot-c4: var(--aura-lime); }

/* the helpers: asleep and unsure each wear one at the card's corner, on a disc of the page's own surface so it reads over the aura, in
   the feeling's deeper colour; on every bot, the roster's too (Sagi, 2026-10-03). The ? pulses, the Zs float, each a
   transform of the disc, so none of them draws anything again; pointed at, the bot greets and the helper goes, except a sleeper's */
.bot-tag { inset: -8% -8% auto auto; inline-size: 40%; block-size: 40%; border-radius: 50%; padding: 6%; z-index: 1; box-sizing: border-box;
  background: color-mix(in oklch, var(--surface) 45%, transparent);   /* see-through, so the disc does not stand over the card as a patch (Sagi, 2026-10-03) */ color: var(--bot-deep1);
  /* frosted, with no ring (Sagi, 2026-10-03): the one blur on the bot, the first aurabot's own way of laying a helper on the card. It is drawn
     again each frame while the aura turns under it. ponytail: thirty helpers on a screen held 60 frames a second and two hundred held 33
     (measured headless, 2026-10-03); a screen that shows that many helpers at once drops the blur to the disc alone */
  backdrop-filter: blur(max(1px, calc(var(--size) * .03))); }
.bot-tag:empty { display: none; }
.bot-tag > svg { display: block; inline-size: 100%; block-size: 100%; }
.bot[data-emotion="unsure"] > .bot-tag { animation: bot-pulse calc(var(--bot-blink) * .3) ease-in-out infinite; }
.bot[data-emotion="close"] > .bot-tag { animation: bot-float calc(var(--bot-blink) * .4) ease-in-out infinite; }
@keyframes bot-pulse { 50% { scale: 1.12; } }
@keyframes bot-float { 50% { translate: 0 -12%; opacity: .7; } }
a:hover .bot:not([data-emotion="close"]) > .bot-tag { display: none; }

/* under forced colours the eyes take the page's own ink */
@media (forced-colors: active) { .bot-eye { fill: CanvasText; } }