/* Shared motion contract: transforms/opacity only; no new perpetual scene movement. */
.react-experience { --motion-short: 180ms; --motion-ease: cubic-bezier(.2,.7,.2,1); }
.react-experience button:not(:disabled) { transition: scale 120ms ease, background-color 180ms ease; }
.react-experience button:not(:disabled):active { scale: .97; }
.react-experience button:focus-visible { outline: 2px solid #dfc488; outline-offset: 3px; }
.react-experience dialog {
  opacity: 0;
  translate: 0 6px;
  transition: opacity 180ms ease, translate 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.react-experience dialog[open] { opacity: 1; translate: 0 0; }
.react-experience dialog::backdrop {
  opacity: 0;
  transition: opacity 180ms ease, display 180ms allow-discrete, overlay 180ms allow-discrete;
}
.react-experience dialog[open]::backdrop { opacity: 1; }
@starting-style {
  .react-experience dialog[open] { opacity: 0; translate: 0 6px; }
  .react-experience dialog[open]::backdrop { opacity: 0; }
}
.react-experience :is(#story-art, #story-title, #story-copy),
.react-experience .additional-mode-suggestions:not([hidden]) { animation: content-arrive 180ms ease-out both; }
.react-experience .suggestion-chevron { transition: rotate 180ms ease; }
.react-experience [aria-expanded="true"] .suggestion-chevron { rotate: 180deg; }
@keyframes content-arrive { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.consultation-status {
  position: absolute; z-index: 8; left: 50%; top: 15%; translate: -50% 0;
  max-width: calc(100% - 24px); color: #f0e1be; text-align: center; font: 14px/1.5 system-ui;
}
.consultation-status:empty { display: none; }
.waiting-light { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: #dfc488; animation: waiting-breathe 1400ms ease-in-out infinite; }
@keyframes waiting-breathe { 50% { opacity: .35; } }
.react-experience #manifestation.motion-manifestation { z-index: 6; inset: 7% 22% auto; max-height: 32%; pointer-events: auto; }
.manifestation-content { max-height: 30svh; overflow: auto; padding: 8px; scrollbar-width: thin; }
.manifestation-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.react-experience #manifestation.motion-manifestation .option-card {
  position: relative; inset: auto; transform: none; width: auto; flex: 1 1 100px; max-width: 220px;
  margin: 0; overflow-wrap: anywhere; transition: background-color 240ms ease, box-shadow 240ms ease;
}
.choice-label { display: block; margin-top: 6px; font: 600 11px/1.3 system-ui; }
.react-experience[data-motion-phase="preparing"] .manifestation-content { animation: content-arrive 280ms ease-out both; }
.react-experience[data-motion-phase="revealing"] .option-card.chosen { animation: choice-reveal 480ms ease-out both !important; }
@keyframes choice-reveal { from { scale: .96; } 60% { scale: 1.025; } to { scale: 1; } }
.companion-presentation[data-attending="false"] { visibility: hidden; }
.react-experience .companion-presentation #delivery { bottom: var(--irvan-bottom); height: var(--irvan-height); width: var(--irvan-width); }
.companion-content {
  position: absolute; z-index: 8; right: 2%; bottom: 61%; width: min(260px, 32vw); max-height: 25svh;
  overflow: auto; padding: 14px; background: #e2d3bceF; color: #343839; border: 1px solid #c8a86c;
  border-radius: 16px; font: 14px/1.5 system-ui; overflow-wrap: anywhere;
}
.companion-content p { margin: 6px 0; }
.companion-content button { min-width: 44px; min-height: 44px; border: 1px solid #7c6844; border-radius: 12px; background: transparent; color: inherit; padding: 6px 12px; cursor: pointer; }
.react-experience .companion-presentation :is(#trix-character, #delivery) { animation: none; }
.companion-presentation[data-phase="entering"] :is(#trix-character, #delivery, .companion-content) { animation: companion-enter 360ms ease-out both; }
.companion-presentation[data-phase="exiting"] :is(#trix-character, #delivery, .companion-content) { animation: companion-exit 220ms ease-in both; }
@keyframes companion-enter { from { opacity: 0; translate: 16px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes companion-exit { to { opacity: 0; translate: 12px 0; } }
.react-experience[data-scene-paused="true"] *,
.react-experience .companion-presentation[data-attending="false"] * { animation-play-state: paused !important; }
@media (max-aspect-ratio: 1/1) {
  .react-experience #manifestation.motion-manifestation { inset: 11% 4% auto; max-height: 25%; }
  .manifestation-content { max-height: 23svh; }
  .companion-content { right: 3%; bottom: 63%; width: 42vw; max-height: 24svh; font-size: 12px; padding: 10px; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .react-experience #manifestation.motion-manifestation { inset: 4% 25% auto; }
  .companion-content { bottom: 48%; max-height: 42svh; }
}
@media (prefers-reduced-motion: reduce) {
  .react-experience *, .react-experience *::before, .react-experience *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .react-experience button:not(:disabled):active { scale: 1; }
}

/* Current artwork: retain the scene anchors and never mirror authored poses. */
.react-experience .architecture { background-image: url('assets/atrio-current.webp'); }
.react-experience .scene-entia-pose[data-active="false"] { opacity: 0; animation: none; }
.react-experience .scene-entia-pose[data-active="true"] { opacity: 1; animation: pose-arrive 160ms ease-out both, levitate 6s ease-in-out infinite; }
.react-experience .companion-presentation #delivery { bottom: calc(var(--irvan-bottom) + 3%); }
.react-experience #delivery img { position: absolute; inset: 0; object-position: center; }
.react-experience #delivery img[data-active="false"] { opacity: 0; }
.react-experience #delivery img[data-active="true"] { opacity: 1; animation: pose-arrive 160ms ease-out both; }
@keyframes pose-arrive { from { opacity: 0; } to { opacity: 1; } }
.react-experience .companion-presentation[data-character="nino"][data-phase="exiting"] :is(#delivery, .companion-content) { animation: nino-depart 360ms ease-in both; }
@keyframes nino-depart { to { opacity: 0; translate: -24px 0; } }
.react-experience .companion-content button:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .react-experience #delivery img[data-active="true"],
  .react-experience .companion-presentation[data-character="nino"][data-phase="exiting"] :is(#delivery, .companion-content) { animation: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 650px) {
  .react-experience .companion-presentation #delivery { bottom: calc(var(--irvan-bottom) + 17%); }
  /* Companions speak only while Irvan is idle; reuse his reading space on short phones. */
  .react-experience:has(.companion-presentation[data-attending="true"]) .irvan-message { visibility: hidden; }
  .react-experience .companion-content { left: 3%; right: auto; bottom: 45%; width: 60vw; max-height: 30svh; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .react-experience .companion-presentation #delivery { right: 2%; bottom: 45%; width: 12%; }
  .react-experience:has(.companion-presentation[data-attending="true"]) .irvan-message { visibility: hidden; }
  .react-experience .companion-content { left: 2%; right: auto; width: 22vw; }
}

/* Frontend reading controls reuse the existing dialog and profile switches. */
.react-experience[data-reduced-motion="true"] *,
.react-experience[data-reduced-motion="true"] *::before,
.react-experience[data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.react-experience[data-reduced-motion="true"] button:active { scale: 1; }
.react-experience #reading-dialog { width: min(520px, 92vw); }
.react-experience #reading-dialog .profile-switch { text-align: left; }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .react-experience .right-controls,
  .react-experience .right-controls .about-qr { max-width: calc((100vw - min(650px, 80vw)) / 2 - 14px) !important; }
  .react-experience .right-controls .about-qr { white-space: normal !important; padding: 6px !important; font-size: 11px !important; }
}

.react-experience .draft-undo, .react-experience .draft-count { order: 1; flex: none; color: #c8d3d8; font: 11px/1.4 system-ui; }

/* Trix: first presentation differs from her subsequent lateral visits. */
.react-experience .companion-presentation[data-character="trix"][data-phase="entering"][data-entrance="first"] #trix-character { animation: trix-introduction 360ms ease-out both; }
.react-experience .companion-presentation[data-character="trix"][data-phase="entering"][data-entrance="side"] #trix-character { animation: trix-arrive 360ms ease-out both; }
.react-experience .companion-presentation[data-character="trix"][data-phase="exiting"] #trix-character { animation: trix-depart 220ms ease-in both; }
@keyframes trix-introduction { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes trix-arrive { from { opacity: 0; translate: 70px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes trix-depart { to { opacity: 0; translate: 70px 0; } }
.companion-content button + button { margin-left: 6px; }

.react-experience .irvan-message[data-companion-busy="true"] { visibility: hidden; }
.react-experience .companion-presentation #trix-character {
  right: 2%; bottom: calc(var(--irvan-bottom) + 3%); width: var(--irvan-width); height: var(--irvan-height);
}
@media (max-aspect-ratio: 1/1) and (max-height: 650px) {
  .react-experience .companion-presentation #trix-character { bottom: calc(var(--irvan-bottom) + 25%); }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .react-experience .companion-presentation #trix-character { bottom: 45%; width: 12%; }
}

@media (max-aspect-ratio: 1/1) and (min-height: 651px) {
  .react-experience .companion-presentation #trix-character { bottom: calc(var(--irvan-bottom) + 10%); }
}