/* Tokens per docs/ui-ux.md §1 (craft pass 2026-07-10). Shared by the app
   shell and the static about/privacy pages. Companion voice: Fraunces
   (self-hosted, OFL). Interface voice: system sans. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-roman.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
}

:root {
  --bg: #16121f; --surface: #1e1930; --surface2: #262038;
  --ink: #ece7dc; --muted: #a29ab5; --faint: #6e6680; --line: #3a3350;
  --star: #ffe2aa; --ember: #e08a5a; --focus: #c9bfe4;
  --serif: "Fraunces", Georgia, 'Iowan Old Style', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- stage: the scene is a place, not a widget ---------- */
#stage {
  position: relative; width: 100%; max-width: 520px;
  height: clamp(230px, 38vh, 320px); overflow: hidden; flex: none;
}
@media (min-width: 700px) {
  #stage { max-width: none; height: clamp(330px, 44vh, 430px); }
}
#sky {
  position: absolute; inset: 0;
  background: linear-gradient(#181130 0%, #251a3c 42%, #3a2449 68%,
                              #5c3550 86%, #7e4c53 100%);
  transition: opacity 2.5s;
}
body.night #sky {
  background: linear-gradient(#0f0d1c 0%, #171226 55%, #241b31 85%, #302337 100%);
}
#glow {
  position: absolute; left: 50%; bottom: -6%; width: 150%; height: 72%;
  transform: translateX(-50%); transition: opacity 2.5s;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(224,138,90,.20), rgba(224,138,90,0) 62%);
}
body.night #glow { opacity: .35; }
#moon {
  position: absolute; right: 13%; top: 15%; width: 15px; height: 15px;
  border-radius: 50%; opacity: .42; transition: opacity 2.5s;
  background: radial-gradient(circle at 44% 40%, #f4eee1 0%, #ded7c8 62%,
              rgba(222,215,200,0) 78%);
  box-shadow: 0 0 16px 4px rgba(236,231,220,.12);
}
body.night #moon { opacity: .65; }
#constellation { position: absolute; inset: 0 0 22% 0; }
.star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink); opacity: .3; box-shadow: 0 0 5px rgba(233,228,218,.55);
  transform: translate(-50%, -50%);
}
.star.new {
  width: 5px; height: 5px; background: var(--star); opacity: 1;
  box-shadow: 0 0 14px 2px rgba(255,226,170,.75);
  animation: twinkle 2.4s ease-in-out infinite;
}
.star.new::before, .star.new::after {
  content: ""; position: absolute; background: rgba(255,226,170,.5);
}
.star.new::before { left: -7px; right: -7px; top: 50%; height: 1px; }
.star.new::after { top: -7px; bottom: -7px; left: 50%; width: 1px; }
@keyframes twinkle { 50% { box-shadow: 0 0 20px 4px rgba(255,226,170,.9); } }

/* lapse return (D5): the sky shimmers once, wordlessly — no absence talk */
body.returned .star {
  animation: shimmer 3s ease-in-out both;
  animation-delay: calc(var(--i, 0) * 180ms);
}
@keyframes shimmer {
  45% { opacity: .9; box-shadow: 0 0 11px 2px rgba(255,226,170,.7); }
}

#hills {
  position: absolute; left: 0; bottom: 22px; width: 100%; height: 58px;
}
#hills path { fill: #2b2040; }
body.night #hills path { fill: #1d1730; }
#mist {
  position: absolute; left: 0; right: 0; bottom: 15%; height: 44px;
  background: radial-gradient(ellipse 70% 100% at 50% 60%,
              rgba(236,231,220,.045), transparent 75%);
}
#ground {
  position: absolute; left: -10%; right: -10%; bottom: -26px; height: 64px;
  background: #241a30; border-radius: 50% 50% 0 0;
}
body.night #ground { background: #181322; }
#grass { position: absolute; bottom: 8px; left: 0; width: 100%; height: 26px; }
#grass .tuft { stroke: #3d3052; stroke-width: 2; fill: none; stroke-linecap: round; }

/* ---------- cat (performer layer — replaceable; logic never reads these) ---------- */
#cat { position: absolute; bottom: 6px; left: 50%; transform: translateX(-72%); }
@media (min-width: 700px) { #cat { width: 170px; height: 158px; } }
#breathe-g { transform-origin: 66px 118px; animation: breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scaleY(1.014); } }
#face { transform-origin: 92px 40px; transition: transform 1s cubic-bezier(.4,0,.2,1); }
#eyes { transform-origin: 92px 38px; transition: transform .09s; }
#ear-l { transform-origin: 72px 20px; transition: transform .5s ease; }
#ear-r { transform-origin: 100px 16px; transition: transform .5s ease; }
#lean-g { transform-origin: 70px 118px; transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
#cat-root { transform-origin: 70px 118px; transition: transform .6s cubic-bezier(.34,1.4,.5,1); }
#tail { transform-origin: 40px 112px; animation: sway 6.5s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(3deg); } }

/* poses (persistent, set by performer.setPose) */
#cat.blink #eyes { transform: scaleY(.12); }
#cat.attend #face { transform: translate(1.5px, 1.5px); }
#cat.attend #ear-l, #cat.attend #ear-r { transform: rotate(2deg); }
#cat.tend #face { transform: translate(3px, 2px); }
#cat.tend #lean-g { transform: rotate(1.6deg); }
#cat.lookup #face { transform: translate(1.5px, -5.5px); }
#cat.lookup #ear-l { transform: rotate(-5deg); } #cat.lookup #ear-r { transform: rotate(5deg); }
#cat.settle #breathe-g { animation-name: breathe-low; }
@keyframes breathe-low { 0%,100% { transform: scaleY(.972); } 50% { transform: scaleY(.985); } }
#cat.perk #cat-root { transform: translateY(-4px); }

/* behavior micro-moves (transient, timed by performer) — amplitudes tuned up
   after phone testing: must register at ~150px in peripheral vision */
#cat.slowblink #eyes { transition: transform .7s ease; transform: scaleY(.15); }
#cat.earflick-l #ear-l { transition: transform .09s; transform: rotate(-26deg); }
#cat.earflick-r #ear-r { transition: transform .09s; transform: rotate(26deg); }
#cat.tailflick #tail { animation: tailflick 1.5s ease; }
@keyframes tailflick { 20% { transform: rotate(15deg); } 45% { transform: rotate(-6deg); }
  70% { transform: rotate(9deg); } }
#cat.look-l #face { transform: translate(-6.5px, .5px); }
#cat.look-l #ear-l { transform: rotate(-6deg); } #cat.look-l #ear-r { transform: rotate(-4deg); }
#cat.look-r #face { transform: translate(6px, .5px); }
#cat.look-r #ear-l { transform: rotate(4deg); } #cat.look-r #ear-r { transform: rotate(6deg); }
#cat.groom #face { animation: groom 3s ease-in-out; }
@keyframes groom { 12%,88% { transform: translate(-3px, 7.5px); }
  28%,58% { transform: translate(-4px, 9px); } 43%,73% { transform: translate(-2.5px, 7px); } }
#cat.groom #ear-l, #cat.groom #ear-r { transform: rotate(3deg); }
#cat.stretch #breathe-g { animation: stretchy 2.4s ease-in-out; }
@keyframes stretchy { 35% { transform: scaleY(1.075) scaleX(1.02); } 70% { transform: scaleY(.985); } }
#cat.stretch #face { transform: translateY(-2.5px); }
#cat.shift-l #cat-root { transform: translateX(-4.5px) rotate(-.8deg); }
#cat.shift-r #cat-root { transform: translateX(4.5px) rotate(.8deg); }

/* rare: drifting glint the cat tracks */
#glint {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--star); box-shadow: 0 0 8px 2px rgba(255,226,170,.5);
  opacity: 0; transition: opacity .8s;
}
#glint.on { opacity: .8; }

/* ---------- session light ---------- */
#mote {
  position: absolute; bottom: 52px; left: calc(50% + 38px);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #fff3d8 0%, var(--star) 45%, rgba(255,226,170,0) 72%);
  box-shadow: 0 0 18px 4px rgba(255,226,170,.35);
  opacity: 0; transform: scale(.5);
  transition: transform 1.4s ease, opacity 1.2s ease, bottom 2.2s cubic-bezier(.3,0,.3,1),
              left 2.2s cubic-bezier(.3,0,.3,1);
}
body[data-state="session"] #mote { opacity: .95; }
#mote.flare { box-shadow: 0 0 28px 9px rgba(255,226,170,.55); }
body.no-presence #cat, body.no-presence #mote, body.no-presence #constellation { display: none; }

/* ---------- content ---------- */
#content {
  width: 100%; max-width: 434px; padding: 30px 24px 20px; flex: 1;
  display: flex; flex-direction: column;
}
@media (min-width: 700px) { #content { max-width: 466px; padding-top: 38px; } }
section { display: flex; flex-direction: column; gap: 18px; }
section:not([hidden]) { animation: rise .55s cubic-bezier(.2,.6,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } }
section[hidden] { display: none; }

.prompt {
  font-family: var(--serif); font-size: clamp(25px, 6.4vw, 28px);
  font-weight: 550; line-height: 1.3; margin: 0; letter-spacing: .002em;
  text-wrap: balance;
}
.say {
  font-family: var(--serif); font-size: 19px; font-weight: 420;
  line-height: 1.62; margin: 0; text-wrap: pretty; letter-spacing: .002em;
}
.quiet-say { color: var(--muted); font-size: 16px; text-align: center;
             opacity: 0; transition: opacity 1.4s; min-height: 1.5em; }
.quiet-say.show { opacity: 1; }
.quiet { color: var(--faint); font-size: 12.5px; margin: -8px 0 0; }
.quiet.center { text-align: center; margin: 0; }
.wordmark {
  font-family: var(--serif); font-style: italic; font-weight: 560;
  font-size: 15px; letter-spacing: .03em; color: var(--muted);
  margin: 0 0 -4px;
}
.tagline {
  font-family: var(--serif); font-style: italic; font-weight: 420;
  color: var(--muted); font-size: 15px; line-height: 1.62;
  text-align: center; margin: 4px 0 0; text-wrap: balance;
}
.tagline a { color: var(--muted); text-underline-offset: 3px;
             text-decoration-color: var(--faint); }
.tagline a:hover { color: var(--ink); }

textarea, input[type="text"] {
  width: 100%; background: #1c1730; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 17px; font: 16px/1.55 var(--sans); resize: none;
  transition: border-color .25s, box-shadow .25s;
}
textarea::placeholder, input[type="text"]::placeholder {
  color: var(--faint); font-family: var(--serif); font-style: italic;
  font-size: 16.5px;
}
textarea:focus, input[type="text"]:focus {
  outline: none; border-color: #8b80ab;
  box-shadow: 0 0 0 3px rgba(201,191,228,.13);
}

button { font: inherit; cursor: pointer; }
.primary {
  min-height: 52px; border: none; border-radius: 14px;
  background: linear-gradient(#f3eee3, #e6dfd0); color: #221c2e;
  font-size: 16px; font-weight: 600; letter-spacing: .012em;
  padding: 13px 18px;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease, filter .15s, opacity .25s;
}
.primary:hover:not(:disabled) {
  filter: brightness(1.04); transform: translateY(-1px);
  box-shadow: 0 11px 26px -10px rgba(0,0,0,.55);
}
.primary:active:not(:disabled) { transform: translateY(0); }
.primary:disabled {
  background: var(--surface); color: var(--faint);
  border: 1px solid var(--line); cursor: default; box-shadow: none;
}
.ghost {
  background: none; border: none; color: var(--faint); font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: #4d4560; padding: 10px; min-height: 44px;
  transition: color .2s;
}
.ghost:hover { color: var(--muted); }

.movecard {
  background: linear-gradient(rgba(38,32,56,.9), rgba(34,28,50,.9));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 17px 19px;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.5);
}
.movecard .k {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .15em; color: #b3985f; margin-bottom: 8px; font-weight: 600;
}
.movecard p { margin: 0; font-family: var(--serif); font-weight: 430;
              font-size: 16.5px; line-height: 1.6; }

#durations { display: flex; gap: 8px; justify-content: center; }
.chip {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 8px 17px; font-size: 13.5px; min-height: 44px;
  transition: border-color .2s, background .2s, color .2s;
}
.chip:hover { border-color: var(--faint); }
.chip.on { color: var(--ink); border-color: #6c5f8a; background: var(--surface2); }

#clock {
  font-size: 52px; font-weight: 200; text-align: center; margin: 4px 0 0;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}
#bar { height: 3px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
#bar-fill { height: 100%; width: 0%; background: var(--star); opacity: .6; transition: width 1s linear; }

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  background: var(--surface2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 14px; padding: 14px 17px; font-size: 15px; text-align: left;
  min-height: 52px; transition: border-color .2s, transform .18s ease;
}
.choice:hover { border-color: #6c5f8a; transform: translateY(-1px); }

/* ---------- the record (quiet history) ---------- */
#record-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 44dvh; overflow-y: auto; overscroll-behavior: contain;
}
#record-list li {
  padding: 11px 2px; font-size: 14px; color: var(--muted);
  border-bottom: 1px solid #2e2742;
  font-variant-numeric: tabular-nums;
}
#record-list li:first-child { color: var(--ink); }
#record-list:empty { display: none; }
#record-sub a { color: inherit; text-underline-offset: 3px;
                text-decoration-color: #4d4560; }
#record-sub a:hover { color: var(--muted); }

footer {
  width: 100%; max-width: 434px; padding: 6px 24px 16px; display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
  font-size: 11px; color: #4c4560; line-height: 1.45;
}
.flink {
  background: none; border: none; padding: 6px 0; min-height: 34px;
  color: inherit; font-size: inherit; text-decoration: none; text-align: left;
  cursor: pointer; transition: color .2s;
}
.flink:hover { color: var(--faint); }
.flink u { text-underline-offset: 3px; }
#record-link { flex: none; text-decoration: underline; text-underline-offset: 3px; }
/* quiet links belong to the doorway, not the work — footer only at arrival/record */
body:not([data-state="arrival"]):not([data-state="record"]) footer { visibility: hidden; }

/* ---------- static pages (about / privacy) ---------- */
.page { max-width: 486px; width: 100%; padding: 36px 26px 44px; flex: 1; }
.page h1 {
  font-family: var(--serif); font-size: 25px; font-weight: 550;
  line-height: 1.38; margin: 0 0 10px; text-wrap: balance; letter-spacing: .002em;
}
.page h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .15em;
           color: #b3985f; font-weight: 600; margin: 34px 0 10px; }
.page p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 12px; }
.page p.spoken { font-family: var(--serif); font-weight: 430; font-size: 17.5px;
                 color: var(--ink); line-height: 1.6; }
.page a { color: var(--ink); text-underline-offset: 3px; }
.page ul { margin: 0 0 12px; padding-left: 20px; }
.page li { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 7px; }
.page li strong { color: var(--ink); font-weight: 600; }
.page a.primary { display: block; text-align: center; text-decoration: none;
                  color: #221c2e; line-height: 26px; margin-top: 30px; }
.page .backlink { display: inline-block; font-size: 13.5px; color: var(--faint);
                  margin-bottom: 28px; text-decoration: none; transition: color .2s; }
.page .backlink:hover { color: var(--muted); }
.controls { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.controls button {
  background: var(--surface2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 14px; padding: 12px 16px; font-size: 14.5px; text-align: left;
  min-height: 48px; transition: border-color .2s;
}
.controls button:hover { border-color: var(--faint); }
.controls .status { min-height: 1.2em; }

/* ---------- reduced motion: static pose + blink only ---------- */
@media (prefers-reduced-motion: reduce) {
  #body-g, #tail { animation: none; }
  #head, #cat-root, #mote { transition: none; }
  .star.new { animation: none; }
  body.returned .star { animation: none; }
  section:not([hidden]) { animation: none; }
  .primary, .choice { transition: none; }
  #bar-fill { transition: none; }
}