/* Krow actor: the canvas host, his click target, and the flat effects layer.
   Colours come from the page's tokens when it has them (the homepage's --ys-*),
   with fallbacks for pages that don't. */
:root {
  --ka-ink: var(--ys-ink, #253128);
  --ka-halo: var(--ys-bg, #f4f1e9);
  --ka-paper: #f4efe2;
  --ka-feather: #6f6a7c;
  --ka-water: #bfd9e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ka-ink: var(--ys-ink, #f4f0e7); --ka-halo: var(--ys-bg, #1b241f); --ka-paper: #eae7dd; --ka-feather: #b7b0c6; }
}
:root[data-theme="dark"] { --ka-ink: var(--ys-ink, #f4f0e7); --ka-halo: var(--ys-bg, #1b241f); --ka-paper: #eae7dd; --ka-feather: #b7b0c6; }

#ys-living-krow { position: fixed; top: 0; left: 0; width: 512px; height: 512px; z-index: 4; pointer-events: none; transform-origin: 0 0; opacity: 0; contain: layout style; will-change: transform; }
#ys-living-krow canvas { display: block; width: 512px; height: 512px; pointer-events: none; }

#krow-actor-hit { position: fixed; top: 0; left: 0; z-index: 5; display: none; cursor: grab; border-radius: 45%; touch-action: none; -webkit-tap-highlight-color: transparent; }
#krow-actor-hit.is-dragging { cursor: grabbing; }

#krow-actor-fx { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; contain: strict; color: var(--ka-ink); }
#krow-actor-fx .ka-fx, #krow-actor-fx .ka-say { position: absolute; top: 0; left: 0; will-change: transform, opacity; opacity: 0; }
#krow-actor-fx .ka-fx svg { display: block; }
#krow-actor-fx .ka-say {
  font: 400 26px/1.15 'Caveat', 'Comic Sans MS', cursive; color: var(--ka-ink); white-space: nowrap; max-width: 70vw;
  text-shadow: 0 0 3px var(--ka-halo), 0 0 6px var(--ka-halo), 0 0 10px var(--ka-halo);
}
#krow-actor-fx .ka-z, #krow-actor-fx .ka-glyph { font: 400 28px/1 'Caveat', 'Comic Sans MS', cursive; color: var(--ka-ink); text-shadow: 0 0 4px var(--ka-halo); }
#krow-actor-fx .ka-glyph { font-size: 40px; }
#krow-actor-fx .ka-dust { width: 16px; height: 16px; border-radius: 50%; background: var(--ka-ink); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #ys-living-krow, #krow-actor-hit, #krow-actor-fx { display: none !important; }
}

/* Any page: the still pictures hide once the living Krow is ready. */
.ys-living-ready [data-story-static] { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .ys-living-ready [data-story-static] { visibility: visible !important; } }

/* Pages outside the homepage (body.ka-page) use the site refresh tokens. */
body.ka-page { --ka-ink: var(--rf-ink, var(--yp-ink, #253128)); --ka-halo: var(--rf-bg, var(--yp-bg, #f4f1e9));
  --ka-tools-bg: var(--rf-bg, var(--yp-bg, #f4f1e9)); --ka-tools-ink: var(--rf-ink, var(--yp-ink, #253128)); --ka-tools-line: var(--rf-line, var(--yp-line, #d0d4c6)); --ka-tools-muted: var(--rf-muted, var(--yp-muted, #596256)); }
body.ka-page #ys-motion-tools { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: flex; align-items: center; gap: 2px; background: var(--ka-tools-bg); color: var(--ka-tools-ink); border: 1px solid var(--ka-tools-line); border-radius: 30px; padding: 3px; box-shadow: 0 5px 16px #0001; }
body.ka-page #ys-motion-tools[hidden] { display: none; }
body.ka-page #ys-motion-tools button { min-height: 40px; border: 0; background: transparent; color: inherit; border-radius: 25px; padding: 10px 16px; font: 500 11px/1.3 'Inter', sans-serif; cursor: pointer; }
body.ka-page #ys-motion-tools button:hover { background: color-mix(in srgb, var(--ka-tools-ink) 8%, transparent); }
body.ka-page #ys-motion-tools button:disabled { cursor: default; color: var(--ka-tools-muted); }
body.ka-page #ys-motion-still { width: 40px; padding: 6px !important; font-size: 18px !important; }
body.ka-page #ys-motion-tools button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
body.ka-page .ys-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { body.ka-page #ys-motion-tools { box-shadow: none; } }

/* ---- Krow's world (phase 2) ---- */
#krow-world, #krow-critters { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; overflow: visible; }
#krow-world { z-index: 3; }
#krow-critters { z-index: 5; }
.ka-obj { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .35s ease; will-change: transform; }
.ka-obj.is-in { opacity: 1; }
.ka-obj svg { display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(0,0,0,.14)); }
.ka-obj.is-touchable { pointer-events: auto; cursor: pointer; }
.ka-obj.is-dragging { cursor: grabbing; z-index: 7; transition: none; }
.ka-obj.is-wiggling svg { animation: ka-wiggle .16s ease-in-out 6; transform-origin: 50% 100%; }
.ka-obj.is-swaying svg { animation: ka-wiggle .7s ease-in-out 2; transform-origin: 50% 100%; }
.ka-door .ka-eyes { animation: ka-blink 2.6s infinite; transform-origin: 20px 30px; }
@keyframes ka-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@keyframes ka-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.ka-critter { position: absolute; top: 0; left: 0; will-change: transform; }
.ka-critter svg { display: block; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.16)); }
.ka-c-eye svg { filter: none; }
.ka-emote { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font: 400 24px/1 'Caveat', 'Comic Sans MS', cursive; color: var(--ka-ink); text-shadow: 0 0 4px var(--ka-halo), 0 0 8px var(--ka-halo); white-space: nowrap; }

.ka-stage { position: fixed; inset: 0; pointer-events: none; }
.ka-dim { z-index: 3; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(circle var(--ka-r, 160px) at var(--ka-x, -999px) var(--ka-y, -999px), rgba(8,10,8,0) 45%, rgba(8,10,8,var(--ka-dim, .5)) 100%); }
.ka-dim.is-on { opacity: 1; }
.ka-curtains { z-index: 6; overflow: hidden; }
.ka-curtains i { position: absolute; top: 0; bottom: 0; width: 13vw; transition: transform .9s cubic-bezier(.2,.8,.2,1);
  background: repeating-linear-gradient(90deg, #22372a 0, #2e4938 14px, #22372a 30px); box-shadow: 0 0 24px rgba(0,0,0,.35); }
.ka-curtains i:first-child { left: 0; transform: translateX(-100%); }
.ka-curtains i:last-child { right: 0; transform: translateX(100%); }
.ka-curtains.is-on i { transform: none; }
.ka-wind { z-index: 6; overflow: hidden; }
.ka-wind span { position: absolute; left: -40px; top: var(--y); width: 16px; height: 9px; border-radius: 0 100% 0 100%; background: #9cbf6a; opacity: .85;
  animation: ka-blow var(--d) linear var(--delay) forwards; }
.ka-wind .ka-scrap { width: 18px; height: 14px; border-radius: 2px; background: #f4efe2; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
@keyframes ka-blow { 0% { transform: translate(0, 0) rotate(var(--r)); } 50% { transform: translate(55vw, -6vh) rotate(calc(var(--r) + 300deg)); } 100% { transform: translate(115vw, 4vh) rotate(calc(var(--r) + 640deg)); } }

@media (prefers-reduced-motion: reduce) {
  #krow-world, #krow-critters, .ka-stage { display: none !important; }
}

/* Pages size their icon SVGs globally (.ys-page svg{width:22px}); Krow's layers use the SVGs' own sizes. */
#krow-critters svg, #krow-world svg, #krow-actor-fx svg { width: auto; height: auto; max-width: none; max-height: none; flex: none; }

/* Krow Activity menu, opened from the motion pill. */
#ys-motion-tools { --ka-m-bg: var(--ys-bg, var(--ka-tools-bg, #f4f1e9)); --ka-m-ink: var(--ys-ink, var(--ka-tools-ink, #253128)); --ka-m-line: var(--ys-line, var(--ka-tools-line, #d0d4c6)); --ka-m-muted: var(--ys-muted, var(--ka-tools-muted, #596256)); }
#ka-activity { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 236px; display: grid; gap: 2px; padding: 6px; border-radius: 14px;
  background: var(--ka-m-bg); color: var(--ka-m-ink); border: 1px solid var(--ka-m-line); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
#ka-activity[hidden] { display: none; }
#ka-activity button { display: grid; gap: 1px; text-align: left; min-height: 44px; padding: 8px 12px 8px 30px; border: 0; border-radius: 9px; background: transparent; color: inherit; cursor: pointer; position: relative; font: 500 12px/1.3 'Inter', sans-serif; }
#ka-activity button small { font-size: 11px; font-weight: 400; color: var(--ka-m-muted); }
#ka-activity button::before { content: ''; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; }
#ka-activity button[aria-checked="true"]::before { background: currentColor; opacity: 1; }
#ka-activity button:hover, #ka-activity button:focus-visible { background: color-mix(in srgb, var(--ka-m-ink) 8%, transparent); outline: none; }
#ka-activity button:focus-visible { box-shadow: 0 0 0 2px var(--ka-m-ink); }

/* Surfaces that place the pill inside their own layout (position: static !important) still anchor the menu. */
#ys-motion-tools:has(#ka-activity:not([hidden])) { position: relative !important; }

/* The small door at the bottom of Today (templates/today.html): the way into Krow's place (/nest).
   Works without the living Krow. It opens a crack when you hover or focus it. */
.ka-nest-door { display: block; width: fit-content; margin: 36px 28px 6px auto; padding: 4px; border-radius: 6px; opacity: .78; transition: opacity .2s; }
.ka-nest-door:hover, .ka-nest-door:focus-visible { opacity: 1; }
.ka-nest-door:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.ka-nest-door svg { display: block; width: 30px !important; height: 40px !important; }
.ka-nest-leaf { transform-origin: 4px 30px; transition: transform .35s ease; }
.ka-nest-door:hover .ka-nest-leaf, .ka-nest-door:focus-visible .ka-nest-leaf { transform: scaleX(.62); }
@media (prefers-reduced-motion: reduce) { .ka-nest-leaf { transition: none; } }

/* Moments (src/moments.mjs): the sprout grows in, the stone can be pushed. */
.ka-sprout { transform-origin: 50% 100%; animation: ka-sprout 1.6s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes ka-sprout { from { transform: scale(0, .1); } to { transform: none; } }
.ka-stone.is-touchable { cursor: grab; touch-action: none; }
.ka-obj.is-rolling { transition: transform .6s ease-in, opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .ka-sprout { animation: none; } }

/* Status text for screen readers on pages without their own sr-only class. */
.ka-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Phones: Krow is asleep until you wake him (boot.js ka-sleepy). A little z drifts by the pill. */
body.ka-sleepy #ys-motion-toggle::before { content: 'z'; display: inline-block; margin-right: 7px; font: 400 17px/1 'Caveat', cursive; opacity: .7; animation: ka-z 2.6s ease-in-out infinite; }
body.ka-sleepy [data-story-static] { cursor: pointer; }
@keyframes ka-z { 0%, 100% { transform: translateY(1px); opacity: .35; } 50% { transform: translateY(-4px) rotate(-8deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { body.ka-sleepy #ys-motion-toggle::before { animation: none; } }