:root {
  --mist: #e9e4ef;   /* pale wisteria */
  --blush: #f3dfdd;  /* faded rose */
  --sage: #dce7dc;   /* grey-green */
  --haze: #d9dfec;   /* powder blue */
  --ink: #5d5468;    /* violet-grey text */
  --deep: #8c7fa0;   /* muted amethyst */

  --orb-hi: #f6f2f9;
  --orb-lo: var(--deep);
  --breathe: 7s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--mist);
  overflow: hidden;
}

#stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vmin;
  cursor: pointer;
  outline: none;
  background:
    radial-gradient(120vmax 120vmax at 15% 20%, var(--blush), transparent 60%),
    radial-gradient(110vmax 110vmax at 85% 15%, var(--haze), transparent 60%),
    radial-gradient(130vmax 130vmax at 50% 95%, var(--sage), transparent 65%),
    var(--mist);
  background-repeat: no-repeat;
}

#stage:focus-visible { box-shadow: inset 0 0 0 4px var(--deep); }

#stage[data-state="greeting"],
#stage[data-state="listening"],
#stage[data-state="thinking"],
#stage[data-state="speaking"] { cursor: default; }

.wordmark {
  position: absolute;
  top: 5vmin;
  font-size: clamp(2.2rem, 8vmin, 3.6rem);
  font-weight: normal;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* optically recenters letter-spaced text */
  color: var(--ink);
  opacity: 1;
}

/* ---- the orb ---- */

.orb {
  position: relative;
  width: 38vmin;
  height: 38vmin;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orb-hi) 0%, var(--orb-lo) 105%);
  box-shadow:
    0 0 12vmin 2vmin color-mix(in srgb, var(--orb-lo) 35%, transparent),
    inset 0 -2vmin 6vmin color-mix(in srgb, var(--orb-lo) 45%, transparent);
  animation: breathe var(--breathe) ease-in-out infinite;
  filter: brightness(var(--pulse, 1)); /* per-word pulse; doesn't fight the breathe transform */
  transition: box-shadow 1.2s ease, filter 0.28s ease;
  will-change: transform; /* keeps the compositor layer stable on the soft gradient */
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.ring {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--orb-lo) 55%, transparent);
  opacity: 0;
}

/* state palettes + rhythms */

#stage[data-state="splash"] .orb,
#stage[data-state="done"] .orb {
  --orb-lo: color-mix(in srgb, var(--deep) 55%, var(--mist));
  --breathe: 9s;
}

#stage[data-state="listening"] .orb {
  --orb-lo: #7fa08c; /* deepened sage */
  --breathe: 5s;
}

#stage[data-state="listening"] .ring {
  animation: ripple 2.6s ease-out infinite;
}
#stage[data-state="listening"] .ring-2 {
  animation-delay: 1.3s;
}

@keyframes ripple {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.45); }
}

#stage[data-state="thinking"] .orb {
  --orb-lo: #7f8ca8; /* deepened haze */
  --breathe: 3.5s;
}

#stage[data-state="speaking"] .orb {
  --orb-lo: #b08a90; /* deepened blush */
  --breathe: 1.9s;
}

/* ---- words ---- */

#caption {
  min-height: 3.2em;
  max-width: min(34em, 82vw);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vmin, 1.4rem);
  line-height: 1.6;
  text-align: center;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 1.1s ease, filter 1.1s ease;
}

#caption.visible {
  opacity: 0.9;
  filter: blur(0);
}

#caption.hidden { display: none; } /* the poem overlay takes this slot while reciting */

/* ---- poem overlay: a rolling window of recited lines ---- */

#poem {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4em;
  min-height: 3.2em; /* mirror the caption slot so the orb stays centered */
  max-width: min(34em, 82vw);
  text-align: center;
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vmin, 1.4rem);
  line-height: 1.5;
}

#poem.active { display: flex; }

.poem-line {
  max-height: 3em;
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 0.7s ease, transform 0.7s ease, max-height 0.7s ease;
}

.poem-line.in { opacity: 0.5; transform: translateY(0); } /* older lines sit dim */
.poem-line.in:last-child { opacity: 0.95; } /* the line being spoken is brightest */
.poem-line.leaving { opacity: 0; transform: translateY(-0.6em); max-height: 0; }

.hint {
  position: absolute;
  bottom: 4.5vmin;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--deep);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  #stage, .orb, .ring { animation: none !important; }
  .poem-line { transition: opacity 0.4s ease !important; transform: none !important; }
}