/* Ember in 3D (drawn by forgeos-ember-3d.js) and the depth around it.
   The 3D body sits behind the guide's face, whose eyes and mouth stay on top
   and ride the body's front. Everything here is still under
   prefers-reduced-motion, and nothing changes where the 3D body is not drawn
   (no WebGL, Save-Data, a low-power device): the face is the face. */

/* ── The body behind the face ─────────────────────────────────────────────── */
.e3d-host { position: relative; isolation: isolate; }
.e3d-canvas {
  position: absolute; left: 50%; top: 50%; width: 160%; height: 160%; transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
}
.e3d-host > .fg-face { position: relative; z-index: 1; }
.e3d-live > .fg-face {
  filter: none; animation: none !important;
  transform: translate(var(--e3d-x, 0), var(--e3d-y, 0)) scale(var(--e3d-s, 1)); transform-origin: 50% 50%;
}
.e3d-live > .fg-face .fg-body, .e3d-live > .fg-face .fg-glow, .e3d-live > .fg-face .fg-tuft,
.e3d-live > .fg-face .fg-shine { opacity: 0; }
/* The face's own features, on a lit body: a touch softer and lit from above. */
.e3d-host.e3d-live > .fg-face .fg-eyes ellipse { fill: #2b1208; }
.e3d-host.e3d-live > .fg-face .fg-mouth, .e3d-host.e3d-live > .fg-face .fg-brows { stroke: #2b1208; }
/* The studio's neon body is dark: its features glow in the flame's light colour. */
:root[data-ember-style="neon"] .e3d-live > .fg-face .fg-eyes ellipse { fill: var(--ember-flame-a, #ffe9a8); }
:root[data-ember-style="neon"] .e3d-live > .fg-face .fg-mouth, :root[data-ember-style="neon"] .e3d-live > .fg-face .fg-brows { stroke: var(--ember-flame-a, #ffe9a8); }
.e3d-live > .fg-face .fg-cheek { opacity: .4; }
.e3d-live[data-e3d="gentle"] > .fg-face .fg-cheek { opacity: .3; fill: #f3a49a; }
.stage-face.e3d-live::before { opacity: .55; }
.e3d-status {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Talk: a full-screen, warm, dark scene with Ember lit in the middle ───── */
.fx-talk {
  --e3d-ink: #fbefe6; --e3d-ink-2: #e6cdbd;
  color: var(--e3d-ink); perspective: 1200px;
  background:
    radial-gradient(60% 42% at 50% 44%, color-mix(in srgb, var(--ember-flame-b, #ff6a1f) 24%, transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(255, 96, 32, .16), transparent 70%),
    radial-gradient(140% 100% at 50% 30%, #241310 0%, #120a09 55%, #08070a 100%);
}
.fx-talk::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .45));
}
.fx-talk-title, .fx-talk-heard, .fx-talk-note { color: var(--e3d-ink-2); }
.fx-talk-state { color: var(--e3d-ink); letter-spacing: .01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.fx-talk .fx-x { color: var(--e3d-ink-2); }
.fx-talk .fx-x:hover { background: rgba(255, 255, 255, .08); color: var(--e3d-ink); }
.fx-talk :focus-visible { outline: 2px solid #ffb877; outline-offset: 3px; }
.fx-talk-stage { transform-style: preserve-3d; }
.fx-talk-stage .fx-face--xl { position: relative; }
.fx-talk .fx-face--xl .fg-face { width: min(56vw, 46vh, 300px); height: min(56vw, 46vh, 300px); }
.fx-talk-stage .fx-face--xl::after {
  content: ""; position: absolute; left: 50%; bottom: -14%; width: 70%; height: 12%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 120, 40, .28), transparent); filter: blur(6px); z-index: -1;
}
.fx-talk-stop {
  background: linear-gradient(180deg, #fff6ee, #f6e1d2); color: #1d0f09;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 30px -10px rgba(255, 110, 40, .55);
}
.fx-talk .fx-mic-dot { color: var(--e3d-ink); }
@media (max-width: 640px) {
  .fx-talk { justify-content: flex-start; gap: 8px; }
  .fx-talk-stage { min-height: 52vh; }
  .fx-talk .fx-face--xl .fg-face { width: min(62vw, 260px); height: min(62vw, 260px); }
  .fx-talk-state { font-size: 1.3rem; }
  .fx-talk-stop { margin-top: auto; }
}

/* ── Layered cards with soft depth and light ──────────────────────────────── */
.fx-with {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 1px 2px rgba(40, 20, 10, .06), 0 18px 40px -22px rgba(120, 50, 10, .35);
}
.fx-tile, .fx-section {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(30, 20, 10, .05), 0 10px 24px -18px rgba(60, 30, 10, .3);
}
.fx-tile:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 16px 30px -16px rgba(60, 30, 10, .38); }
@media (prefers-color-scheme: dark) {
  :root:not([data-m19-theme="light"]) .fx-with, :root:not([data-m19-theme="light"]) .fx-tile, :root:not([data-m19-theme="light"]) .fx-section {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 30px -18px rgba(0, 0, 0, .7);
  }
}
:root[data-m19-theme="dark"] .fx-with, :root[data-m19-theme="dark"] .fx-tile, :root[data-m19-theme="dark"] .fx-section {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 30px -18px rgba(0, 0, 0, .7);
}

/* ── Ember's replies arrive with a little depth ───────────────────────────── */
@keyframes e3d-arrive {
  from { opacity: 0; transform: perspective(900px) translate3d(0, 10px, -30px) rotateX(9deg); }
  to { opacity: 1; transform: none; }
}
#thread .cw-msg--assistant { animation: e3d-arrive .46s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 0 0; }

/* Reduced motion: no entrance, no lift; the still 3D frame (if any) stays. */
@media (prefers-reduced-motion: reduce) {
  #thread .cw-msg--assistant, .fx-tile, .fx-talk { animation: none !important; transition: none !important; }
  .fx-tile:hover { transform: none; }
}