/* owner: ART | contract: CHARACTER.md sections 4.3, 6, 9; DESIGN_BRIEF.md sections 3, 6 | strict-CSP safe: plain stylesheet, classes and data-* only
 *
 * ONE stylesheet for all hand-drawn SVG art (Krystle, agents, buildings, scenes, the K monogram). It is linked by
 * <head> (preferred) or, as a safety net, by web/pub/js/art/icons.js when the page forgot. Three parts:
 *   1. the art tokens (--kw-bld-* buildings, --kw-sc-* scenes, --kw-ag-* agents, --kw-ch-* the character palette) for
 *      night, day and auto, so the art follows SHELL's data-theme without needing the brand theme loader;
 *   2. Krystle: which pose, eyes, mouth and outfit show (data-* on the <svg>), idle motion;
 *   3. agents and buildings: pose switching and idle motion.
 * Animation is transform and opacity only. Reduced motion (OS setting or <html data-motion="calm">) holds still.
 * Colours carry a fallback inside the SVG markup too (a custom property with a hex default), so the art still draws if this file is late.
 */

/* ------------------------------------------------------------------ 1. art tokens */
:root,:root[data-theme="night"]{
  --kw-bld-top:#2c2542; --kw-bld-l:#1e1933; --kw-bld-r:#120e22; --kw-bld-plate:#15111f; --kw-bld-edge:#3a3157;
  --kw-bld-glass:#2a2340;
  --kw-sc-wall-0:#2b2036; --kw-sc-wall-1:#44304a; --kw-sc-window:#ffd9ec; --kw-sc-floor:#1b1624;
  --kw-sc-leaf-0:#6aa77a; --kw-sc-leaf-1:#3f7a58;
  --kw-ag-dark:#2d2644; --kw-ag-dark-2:#3d3558;
}
:root[data-theme="day"]{
  --kw-bld-top:#ffffff; --kw-bld-l:#f3d6dc; --kw-bld-r:#e3bcc7; --kw-bld-plate:#fdeef5; --kw-bld-edge:#f6b8d4;
  --kw-bld-glass:#f1d3db;
  --kw-sc-wall-0:#fff5fa; --kw-sc-wall-1:#f6cdd3; --kw-sc-window:#fff1f8; --kw-sc-floor:#fdeef5;
  --kw-sc-leaf-0:#7dbb8c; --kw-sc-leaf-1:#4f9068;
  --kw-ag-dark:#3a3146; --kw-ag-dark-2:#54485f;
}
@media (prefers-color-scheme:light){
  :root[data-theme="auto"]{
    --kw-bld-top:#ffffff; --kw-bld-l:#f3d6dc; --kw-bld-r:#e3bcc7; --kw-bld-plate:#fdeef5; --kw-bld-edge:#f6b8d4;
    --kw-bld-glass:#f1d3db;
    --kw-sc-wall-0:#fff5fa; --kw-sc-wall-1:#f6cdd3; --kw-sc-window:#fff1f8; --kw-sc-floor:#fdeef5;
    --kw-sc-leaf-0:#7dbb8c; --kw-sc-leaf-1:#4f9068;
    --kw-ag-dark:#3a3146; --kw-ag-dark-2:#54485f;
  }
}
/* character palette (CHARACTER.md section 3). Same figure in day and night; company.json character.options only change these. */
:root{
  --kw-ch-hair-base:#f1dbc8; --kw-ch-hair-mid:#cfab94; --kw-ch-hair-roots:#7b5f50; --kw-ch-hair-hi:#fffaf6;
  --kw-ch-skin:#f0c3a3; --kw-ch-skin-shade:#d99a7a; --kw-ch-blush:#f0a5a0;
  --kw-ch-lips:#d9706f; --kw-ch-gloss:#ffd9d6;
  --kw-ch-iris:#3a2418; --kw-ch-eye-white:#ffffff; --kw-ch-lash:#1c1210; --kw-ch-brow:#8a6340;
  --kw-ch-tee:#141214; --kw-ch-tee-hi:#26222a; --kw-ch-logo:#f8f6f2;
  --kw-ch-gold:#f6a5cb;
  --kw-ch-shades-frame:#3b2a25; --kw-ch-shades-lens:#1b1416; --kw-ch-shades-glint:#e8b6c8;
  --kw-ch-laptop:#f6b8d4; --kw-ch-laptop-shade:#d98fb3; --kw-ch-monogram:#f6a5cb;
  --kw-ch-marble:#fffafc; --kw-ch-vein:#d6ccd2;
  --kw-ch-notebook:#f6cdd3; --kw-ch-spine:#deb1aa; --kw-ch-spine-deep:#cc948f;
  --kw-ch-chair:#f2ebe3;
  --kw-ch-blazer:#1c2540; --kw-ch-blouse:#f8f6f2;
}

/* ------------------------------------------------------------------ 2. Krystle */
.kw-ch{display:block;max-width:100%;height:auto;overflow:visible}

/* ---- what shows ------------------------------------------------------------------------------------------- */
.kw-ch .kw-ch-pose,
.kw-ch .kw-ch-eyes,
.kw-ch .kw-ch-mouth,
.kw-ch .kw-ch-outfit,
.kw-ch .kw-ch-var{display:none}

.kw-ch[data-pose="chin"] .kw-ch-pose--chin,
.kw-ch[data-pose="salute"] .kw-ch-pose--salute,
.kw-ch[data-pose="celebrate"] .kw-ch-pose--celebrate,
.kw-ch[data-eyes="open"] .kw-ch-eyes--open,
.kw-ch[data-eyes="up"] .kw-ch-eyes--up,
.kw-ch[data-eyes="down"] .kw-ch-eyes--down,
.kw-ch[data-eyes="joy"] .kw-ch-eyes--joy,
.kw-ch[data-expr="soft"] .kw-ch-mouth--soft,
.kw-ch[data-expr="smile"] .kw-ch-mouth--smile,
.kw-ch[data-expr="grin"] .kw-ch-mouth--grin,
.kw-ch[data-outfit="tee"] .kw-ch-outfit--tee,
.kw-ch[data-outfit="blazer"] .kw-ch-outfit--blazer,
.kw-ch[data-variant="A"] .kw-ch-var--a{display:inline}

.kw-ch[data-shades="off"] .kw-ch-shades,
.kw-ch[data-earring="off"] .kw-ch-earring,
.kw-ch[data-glow="off"] .kw-ch-glow,
.kw-ch[data-eyes="joy"] .kw-ch-blink{display:none}

:root[data-theme="day"] .kw-ch-glow{opacity:.52}
@media (prefers-color-scheme:light){ :root[data-theme="auto"] .kw-ch-glow{opacity:.52} }

.kw-ch-spine-text,.kw-ch-plate-text{font-family:var(--kw-font-ui,Inter,system-ui,sans-serif);font-weight:600}

/* ---- pose transforms (head and hair tilt together; 480 ms between poses) ------------------------------------ */
.kw-ch .kw-ch-tilt,
.kw-ch .kw-ch-chibi,
.kw-ch .kw-ch-sway{transform-box:view-box}
.kw-ch .kw-ch-tilt{transform-origin:120px 150px;transition:transform var(--kw-t-slow,480ms) var(--kw-ease,cubic-bezier(.2,.8,.2,1))}
.kw-ch[data-pose="chin"] .kw-ch-tilt{transform:rotate(-4deg)}
.kw-ch[data-pose="lookup"] .kw-ch-tilt{transform:translateY(-3px) rotate(3deg)}
.kw-ch[data-pose="salute"] .kw-ch-tilt{transform:translateY(-2px) rotate(1deg)}
.kw-ch[data-pose="celebrate"] .kw-ch-tilt{transform:translateY(-3px) rotate(-8deg)}

/* hair length option: mid-length hair is the same hair, shorter */
.kw-ch .kw-ch-len{transform-box:view-box;transform-origin:120px 70px}
.kw-ch[data-hair="mid"] .kw-ch-len{transform:scaleY(.8)}
/* accent nails option */
.kw-ch[data-nails="accent"] .kw-ch-nail{fill:var(--kw-rose-deep);opacity:.9}

/* chibi (variant C): bigger head, bigger eyes, same features */
.kw-ch .kw-ch-chibi{transform-origin:120px 176px}
.kw-ch[data-variant="C"] .kw-ch-chibi{transform:scale(1.22)}
.kw-ch[data-variant="C"] .kw-ch-eyes{transform-box:view-box;transform-origin:120px 117px;transform:scale(1.26)}

/* ---- idle motion (transform and opacity only) --------------------------------------------------------------- */
.kw-ch .kw-ch-breath{animation:kw-ch-breathe 4s ease-in-out infinite alternate}
.kw-ch .kw-ch-sway{transform-origin:120px 60px;animation:kw-ch-sway 7s ease-in-out infinite alternate}
.kw-ch .kw-ch-blink{opacity:0;animation:kw-ch-blink var(--kw-blink-dur,5s) var(--kw-blink-delay,0s) infinite}
.kw-ch.is-blinking .kw-ch-blink{opacity:1;animation:none}

.kw-ch[data-pose="typing"] .kw-ch-body{animation:kw-ch-type .1s ease-in-out infinite alternate}
.kw-ch[data-pose="lookup"] .kw-ch-breath{animation:kw-ch-bob 1.667s ease-in-out infinite alternate}
.kw-ch[data-pose="celebrate"].is-playing .kw-ch-breath{animation:kw-ch-bounce .25s ease-in-out 12 alternate}
.kw-ch[data-pose="salute"].is-playing .kw-ch-salute-arm{animation:kw-ch-salute 1.9s ease-in-out both}

@keyframes kw-ch-breathe{from{transform:translateY(0)}to{transform:translateY(1.5px)}}
@keyframes kw-ch-sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
@keyframes kw-ch-blink{0%,95%{opacity:0}96%,98.5%{opacity:1}100%{opacity:0}}
@keyframes kw-ch-type{from{transform:translateY(-1.2px)}to{transform:translateY(1.2px)}}
@keyframes kw-ch-bob{from{transform:translateY(-1px)}to{transform:translateY(1px)}}
@keyframes kw-ch-bounce{from{transform:translateY(2px)}to{transform:translateY(-2px)}}
@keyframes kw-ch-salute{
  0%{transform:translate(-6px,92px);opacity:0}
  42%{transform:translate(0,0);opacity:1}
  74%{transform:translate(0,0);opacity:1}
  100%{transform:translate(-6px,92px);opacity:0}
}

/* ---- reduced motion: hold the pose, blink only ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) .kw-ch .kw-ch-breath,
  :root:not([data-motion="full"]) .kw-ch .kw-ch-sway,
  :root:not([data-motion="full"]) .kw-ch .kw-ch-body,
  :root:not([data-motion="full"]) .kw-ch .kw-ch-salute-arm{animation:none !important}
  :root:not([data-motion="full"]) .kw-ch .kw-ch-tilt{transition:none}
}
:root[data-motion="calm"] .kw-ch .kw-ch-breath,
:root[data-motion="calm"] .kw-ch .kw-ch-sway,
:root[data-motion="calm"] .kw-ch .kw-ch-body,
:root[data-motion="calm"] .kw-ch .kw-ch-salute-arm{animation:none !important}
:root[data-motion="calm"] .kw-ch .kw-ch-tilt{transition:none}

/* ---- monogram ------------------------------------------------------------------------------------------------ */
.kw-mono{display:inline-block;flex:none;overflow:visible}

/* ------------------------------------------------------------------ 3. agents and buildings */
.kw-ag{display:inline-block;max-width:100%;height:auto;overflow:visible;vertical-align:bottom}
.kw-ag .kw-ag-pose{display:none}
.kw-ag[data-pose="stand"] .kw-ag-pose--stand,
.kw-ag[data-pose="work"] .kw-ag-pose--work,
.kw-ag[data-pose="salute"] .kw-ag-pose--salute,
.kw-ag[data-pose="walk"] .kw-ag-pose--walk{display:inline}
.kw-ag-tag-text{font-family:var(--kw-font-mono,'JetBrains Mono',ui-monospace,monospace);font-weight:500}

.kw-ag .kw-ag-figure,.kw-ag .kw-ag-leg,.kw-ag .kw-ag-swing,.kw-ag .kw-ag-type-l,.kw-ag .kw-ag-type-r,.kw-ag .kw-ag-salute-arm,.kw-ag .kw-ag-scarf-tail{transform-box:view-box}
.kw-ag .kw-ag-figure{transform-origin:60px 130px;animation:kw-ag-breathe 3.2s ease-in-out infinite alternate;animation-delay:var(--kw-ag-delay,0s)}
.kw-ag[data-pose="walk"] .kw-ag-figure{animation:kw-ag-bob .5s ease-in-out infinite alternate}
.kw-ag .kw-ag-leg--l{transform-origin:51px 110px;animation:kw-ag-step .5s ease-in-out infinite alternate}
.kw-ag .kw-ag-leg--r{transform-origin:69px 110px;animation:kw-ag-step .5s ease-in-out infinite alternate-reverse}
.kw-ag .kw-ag-swing--l{transform-origin:36px 70px;animation:kw-ag-swing .5s ease-in-out infinite alternate-reverse}
.kw-ag .kw-ag-swing--r{transform-origin:84px 70px;animation:kw-ag-swing .5s ease-in-out infinite alternate}
.kw-ag .kw-ag-type-l{animation:kw-ag-tap .12s ease-in-out infinite alternate}
.kw-ag .kw-ag-type-r{animation:kw-ag-tap .12s ease-in-out infinite alternate-reverse}
.kw-ag .kw-ag-code{display:none}
.kw-ag[data-pose="work"] .kw-ag-code{display:inline;animation:kw-ag-code 1.1s linear infinite}
.kw-ag .kw-ag-signal{animation:kw-ag-ping 1.8s ease-in-out infinite}
.kw-ag .kw-ag-scarf-tail{transform-box:fill-box;transform-origin:50% 0;animation:kw-ag-flutter 1.8s ease-in-out infinite alternate}
.kw-ag[data-pose="salute"].is-playing .kw-ag-salute-arm{transform-origin:36px 70px;animation:kw-ag-raise 1.6s ease-in-out both}

@keyframes kw-ag-breathe{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
@keyframes kw-ag-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes kw-ag-step{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes kw-ag-swing{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes kw-ag-tap{from{transform:translateY(0)}to{transform:translateY(-2.2px)}}
@keyframes kw-ag-code{from{transform:translateX(0)}to{transform:translateX(-36px)}}
@keyframes kw-ag-ping{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes kw-ag-flutter{from{transform:rotate(-5deg)}to{transform:rotate(6deg)}}
@keyframes kw-ag-raise{0%{transform:rotate(60deg);opacity:0}35%{transform:rotate(0);opacity:1}75%{transform:rotate(0);opacity:1}100%{transform:rotate(60deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) .kw-ag *{animation:none !important}
}
:root[data-motion="calm"] .kw-ag *{animation:none !important}

/* ------------------------------------------------------------------ buildings */
.kw-bl{display:inline-block;max-width:100%;height:auto;overflow:visible;vertical-align:bottom}
.kw-bl .kw-bl-beacon,.kw-bl .kw-bl-plus{animation:kw-bl-pulse 2.4s ease-in-out infinite}
.kw-bl .kw-bl-portal{animation:kw-bl-shimmer 3s ease-in-out infinite alternate}
.kw-bl .kw-bl-wheel,.kw-bl .kw-bl-coin,.kw-bl .kw-bl-flag{transform-box:fill-box}
.kw-bl .kw-bl-wheel{transform-origin:center;animation:kw-bl-spin 30s linear infinite}
.kw-bl .kw-bl-coin{transform-origin:center;animation:kw-bl-bob 2.6s ease-in-out infinite alternate}
.kw-bl .kw-bl-flag{transform-origin:0 50%;animation:kw-bl-wave 2.2s ease-in-out infinite alternate}
.kw-bl .kw-bl-dust{animation:kw-bl-float 4s ease-in-out infinite alternate}
.kw-bl .kw-bl-paper{animation:kw-bl-slide 3.2s ease-in-out infinite alternate}
.kw-bl .kw-bl-packet{animation:kw-bl-up 2.6s ease-in infinite}
.kw-bl .kw-bl-worker{animation:kw-bl-bounce .5s ease-in-out infinite alternate}
.kw-bl.is-lit .kw-bl-sign{animation:kw-bl-pulse 3.2s ease-in-out infinite}
@keyframes kw-bl-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes kw-bl-shimmer{from{opacity:.62}to{opacity:1}}
@keyframes kw-bl-spin{to{transform:rotate(360deg)}}
@keyframes kw-bl-bob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
@keyframes kw-bl-wave{from{transform:scaleX(1)}to{transform:scaleX(.82)}}
@keyframes kw-bl-float{from{transform:translateY(1.4px);opacity:.4}to{transform:translateY(-2px);opacity:1}}
@keyframes kw-bl-slide{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
@keyframes kw-bl-up{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
@keyframes kw-bl-bounce{from{transform:translateY(0)}to{transform:translateY(-.9px)}}
@media (prefers-reduced-motion:reduce){ :root:not([data-motion="full"]) .kw-bl *{animation:none !important} }
:root[data-motion="calm"] .kw-bl *{animation:none !important}