/* Phase 2: cinematic DOM motion. All content remains visible without JavaScript. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 44% at 50% 10%, rgba(212,169,74,.11), transparent 72%),
    radial-gradient(34% 42% at 88% 72%, rgba(14,108,124,.055), transparent 76%);
  opacity: .68;
  transition: opacity var(--motion-slow) var(--ease-cinematic), filter var(--motion-slow) var(--ease-out);
}

header, main, footer { position: relative; }
.invocation, .msg, .starters button { animation: none; }
header, footer, .composer, .pill, .selwrap select, .starters button,
.msg.user, .msg.krishna .body, .msg.krishna .who, .rule, .hint {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--motion-medium);
  transition-timing-function: var(--ease-out);
}

body.is-thinking::before { opacity: .82; filter: saturate(1.06); }
body.is-thinking .rule {
  background-size: 220% 100%;
  background-position: 85% 0;
}
.rule {
  background-position: 0 0;
  background-size: 100% 100%;
  transition: opacity var(--motion-medium) var(--ease-out),
    transform var(--motion-medium) var(--ease-cinematic),
    background-position var(--motion-slow) var(--ease-cinematic),
    background-size var(--motion-slow) var(--ease-cinematic);
}

.pill:hover, .selwrap:hover select { box-shadow: 0 7px 22px rgba(25,21,40,.07); transform: translateY(-1px); }
.pill:active, .selwrap:active select, .starters button:active { transform: translateY(0) scale(.985); }
.pill:focus-visible, .selwrap select:focus-visible, .starters button:focus-visible, #send:focus-visible,
.btn:focus-visible, button.mini:focus-visible, .cardrow a:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
}

.composer {
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(212,169,74,.03);
}
.composer::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 10%, rgba(212,169,74,.34) 43%, rgba(21,143,163,.2) 58%, transparent 88%);
  opacity: .24;
  transform: translateX(-14%);
  transition: opacity var(--motion-medium) var(--ease-out), transform var(--motion-slow) var(--ease-cinematic);
}
.composer:focus-within::before { opacity: .72; transform: translateX(10%); }
.composer:focus-within { box-shadow: var(--shadow-md), 0 0 24px rgba(212,169,74,.12), 0 0 0 4px rgba(14,108,124,.055); }
#send svg { transition: transform var(--motion-fast) var(--ease-out); }
#send:hover:not(:disabled) svg { transform: translateY(-1px); }
#send:active:not(:disabled) { transform: translateY(1px) scale(.94); }

.msg.user { transform-origin: 85% 100%; }
.msg.krishna .who::after { transform-origin: left center; transition: transform var(--motion-medium) var(--ease-cinematic), opacity var(--motion-fast) ease; }
.msg.krishna.response-pending .who { opacity: .45; }
.msg.krishna.response-pending .who::after { transform: scaleX(.38); opacity: .55; }
.msg.krishna.response-pending .body { opacity: .88; }
.msg.krishna.response-started .who, .msg.krishna.response-started .body { opacity: 1; }
.msg.krishna.response-started .who::after { transform: scaleX(1); opacity: 1; }

.starters.is-leaving { pointer-events: none; }
.starters.is-leaving button { opacity: 0; transform: translateY(-5px) scale(.985); }
.conversation-leaving .msg { opacity: 0; transform: translateY(7px); }
.invocation.is-returning { filter: saturate(1.04); }

[data-theme="night"] body::before {
  background:
    radial-gradient(60% 44% at 50% 10%, rgba(63,179,198,.1), transparent 72%),
    radial-gradient(36% 44% at 88% 72%, rgba(217,174,85,.05), transparent 76%);
}

@media (hover:hover) and (pointer:fine) {
  .starters button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(25,21,40,.08); }
}

@media (max-width: 767px) {
  .pill:hover, .selwrap:hover select, .starters button:hover { transform: none; box-shadow: none; }
  .composer:focus-within { box-shadow: var(--shadow-md), 0 0 15px rgba(212,169,74,.1), 0 0 0 3px rgba(14,108,124,.05); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { transition: none; }
  .composer::before { display: none; }
}