/* Each scene is contained and carries its own palette, state and motion lifecycle. */
.psyche-scene {
  --psy-night: #160b12;
  --psy-paper: #f3e7d1;
  --psy-muted: #c7a9a8;
  --psy-gold: #d6ac79;
  --psy-signal: #ef8591;
  --psy-line: #66404c;
  --psy-duration: 650ms;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 36px 0 52px;
  padding: clamp(25px, 4vw, 48px);
  color: var(--psy-paper);
  background: radial-gradient(ellipse at 50% 42%, #351322 0, transparent 67%), var(--psy-night);
  border: 1px solid #68404a;
  overflow: hidden;
}
.psyche-scene::before, .psyche-scene::after {
  content: '';
  position: absolute;
  top: 10px;
  width: 28px;
  height: 28px;
  border-top: 1px solid #b68763;
  opacity: .65;
  pointer-events: none;
}
.psyche-scene::before {left: 10px; border-left: 1px solid #b68763}
.psyche-scene::after {right: 10px; border-right: 1px solid #b68763}
.psyche-scene .psyche-heading {max-width: 720px; margin: 0 auto; text-align: center}
.psyche-scene .eyebrow {color: var(--psy-muted); font: 10px/1.7 var(--mono, monospace); letter-spacing: .15em; margin: 0}
.psyche-scene h3 {color: var(--psy-paper); font: 500 clamp(31px, 3.4vw, 48px)/1.04 var(--serif, Georgia, serif); letter-spacing: -.03em; margin: 13px 0 15px}
.psyche-scene .psyche-intro {max-width: 470px; margin: 0 auto; color: var(--psy-muted); font: 13px/1.75 var(--sans, sans-serif); letter-spacing: 0}
.psyche-world {position: relative; margin: 8px auto 0; max-width: 800px; overflow: hidden; min-width: 0}
.psyche-art {display: block; width: 100%; height: auto; overflow: hidden; pointer-events: none}
.psyche-world-footer {display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--psy-line); padding: 15px 1px 0; color: var(--psy-muted); font: 10px/1.6 var(--mono, monospace)}
.psyche-world-footer > .psyche-state-label {text-align: right; color: var(--psy-signal)}
.psyche-response {max-width: 640px; margin: 26px auto 20px; min-height: 4.9em; display: grid; align-items: center; text-align: center}
.psyche-scene .psyche-response p {margin: 0; color: var(--psy-paper); font: 14px/1.8 var(--sans, sans-serif); letter-spacing: 0}
.psyche-controls {display: flex; justify-content: center; min-height: 56px}
.psyche-scene .psyche-next {min-height: 50px; width: min(100%, 340px); max-width: 100%; padding: 14px 24px; font: 500 13px/1.5 var(--sans, sans-serif); white-space: normal; touch-action: manipulation}
.psyche-scene .psyche-next:focus-visible {outline: 3px solid var(--psy-paper); outline-offset: 6px}
.psyche-scene .psyche-next:active {transform: translateY(3px)}
.psyche-scene .psyche-conclusion {display: grid; grid-template-rows: 0fr; max-width: 650px; margin: 0 auto; color: var(--psy-signal); font: 500 clamp(23px, 2.5vw, 30px)/1.3 var(--serif, Georgia, serif); text-align: center; letter-spacing: -.01em; opacity: 0; transform: translateY(8px); max-height: 0; overflow: hidden; transition: opacity 500ms ease, transform 600ms ease, max-height 650ms ease, margin 650ms ease}
.psyche-scene[data-state='3'] .psyche-conclusion {display: block; max-height: 220px; opacity: 1; transform: none; margin: 25px auto 0}
.psyche-scene .psyche-caption {max-width: 680px; margin: 28px auto 0; color: var(--psy-muted); font: 9px/1.8 var(--mono, monospace); text-align: center; letter-spacing: 0}
.psyche-object-label {position: absolute; color: var(--psy-muted); font: 10px/1.7 var(--mono, monospace); letter-spacing: .06em; transition: opacity 550ms ease, transform 650ms ease; pointer-events: none}
.psyche-dust {animation: psyche-breathe 5.8s ease-in-out infinite}

/* The facade is a symbolic prop. The chain remains after the facade returns. */
.persona-mask {transform-origin: 400px 215px; transition: transform 850ms cubic-bezier(.2,.7,.2,1), opacity 700ms ease}
.persona-back {opacity: 0; transition: opacity 800ms ease}
.persona-public-gleam {opacity: .15; transition: opacity 600ms ease}
.persona-secret-thread {stroke-dasharray: 5 9; animation: psyche-thread 8s linear infinite}
.persona-public-tag {left: 6%; top: 45%; opacity: 0; transform: translateX(-6px)}
.persona-hidden-tag {right: 7%; top: 37%; opacity: 0; transform: translateY(5px)}
.psyche-persona[data-state='1'] .persona-public-gleam,
.psyche-persona[data-state='3'] .persona-public-gleam {opacity: 1}
.psyche-persona[data-state='1'] .persona-public-tag,
.psyche-persona[data-state='2'] .persona-public-tag,
.psyche-persona[data-state='3'] .persona-public-tag {opacity: 1; transform: none}
.psyche-persona[data-state='2'] .persona-back,
.psyche-persona[data-state='3'] .persona-back {opacity: 1}
.psyche-persona[data-state='2'] .persona-mask {transform: translate(-159px, -7px) rotate(-9deg) scale(.83); opacity: .87}
.psyche-persona[data-state='2'] .persona-hidden-tag,
.psyche-persona[data-state='3'] .persona-hidden-tag {opacity: 1; transform: none}
.psyche-persona[data-state='3'] .persona-mask {opacity: .83; transform: translate(-15px, 0)}
.psyche-persona[data-state='2'] .persona-public-tag {transform: translate(-10px, 74px)}
.psyche-persona[data-state='3'] .persona-hidden-tag {transform: translateX(12px)}

/* The voice keeps its reach. The screen adds exposure, not a return audio path. */
.media-microphone {transform-origin: 400px 250px; transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.7,.2,1)}
.media-television {opacity: 0; transform: translateY(14px) scale(.95); transform-origin: 400px 200px; transition: opacity 600ms ease, transform 800ms cubic-bezier(.2,.7,.2,1)}
.media-route-lines {opacity: .15; transition: opacity 650ms ease}
.media-signal-travel {opacity: 0; animation: psyche-signal 2.2s linear infinite; transition: opacity 600ms ease}
.media-receivers {opacity: .45; transition: opacity 650ms ease}
.receiver-lamp {fill: #775448; transition: fill 650ms ease}
.media-mic-light {transition: fill 500ms ease}
.media-gaze {opacity: 0; transform-origin: 400px 200px; transform: scale(1.04); transition: opacity 850ms ease, transform 950ms ease}
.media-scanline {animation: psyche-scan 4s ease-in-out infinite}
.psyche-media:not([data-state='0']) .media-route-lines {opacity: .65}
.psyche-media:not([data-state='0']) .media-signal-travel {opacity: .9}
.psyche-media:not([data-state='0']) .media-receivers {opacity: 1}
.psyche-media:not([data-state='0']) .receiver-lamp,
.psyche-media:not([data-state='0']) .media-mic-light {fill: #f6cc92}
.psyche-media[data-state='2'] .media-microphone {opacity: 0; transform: translateY(16px) scale(.93)}
.psyche-media[data-state='2'] .media-television {opacity: 1; transform: none}
.psyche-media[data-state='2'] .media-gaze {opacity: 1; transform: none}

/* Both old bonds stay broken after the new, limited exchange appears. */
.return-world {margin-top: 28px}
.return-terms {display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 6vw, 110px); position: relative; z-index: 1; padding: 0 2%}
.return-term {position: relative; padding: 15px 16px 12px; background: #2e1820; border: 1px solid #8a5360; transition: opacity 650ms ease, border-color 650ms ease, background 650ms ease; text-align: left}
.return-term::after {content: ''; position: absolute; left: 0; right: 0; top: 58%; border-bottom: 1px solid #c99c80; transform: scaleX(0) rotate(-5deg); transform-origin: left; transition: transform 650ms ease}
.return-vox {border-color: #92734e}
.return-owner {display: block; color: var(--psy-paper); font: 500 25px/1.1 var(--serif, Georgia, serif); margin-bottom: 7px}
.return-clause {display: block; color: var(--psy-muted); font: 11px/1.5 var(--sans, sans-serif); min-height: 3em}
.return-binding {display: block; margin-top: 11px; color: var(--psy-signal); font: 9px/1.6 var(--mono, monospace); text-transform: uppercase; letter-spacing: .06em}
.return-chain, .return-chain-left-end, .return-chain-right-end {transition: transform 850ms cubic-bezier(.23,.76,.25,1), opacity 700ms ease}
.return-chain-left-end {transform-origin: 300px 180px}
.return-chain-right-end {transform-origin: 500px 180px}
.return-chain-left-loose, .return-chain-right-loose {opacity: 0; transition: opacity 650ms ease}
.return-collar {transition: opacity 650ms ease, transform 850ms ease; transform-origin: 400px 240px}
.return-new-paper {opacity: 0; transform: translateY(60px) rotate(-8deg); transform-origin: 400px 220px; transition: opacity 750ms ease, transform 1000ms cubic-bezier(.2,.7,.2,1)}
.return-staff {transition: transform 950ms cubic-bezier(.2,.7,.2,1); transform-origin: 400px 190px}
.return-staff-top {transform: translate(-6px, -9px) rotate(-5deg); transform-origin: 400px 212px; transition: transform 900ms ease}
.return-staff-repair {opacity: 0; transition: opacity 800ms ease}
.return-break-sparks {opacity: 0; transition: opacity 350ms ease}
.return-exchange {position: absolute; left: 0; right: 0; bottom: 85px; display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--psy-paper); font: 12px/1.5 var(--sans, sans-serif); opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 800ms ease; text-shadow: 0 2px 8px #120810}
.return-exchange-arrow {font-size: 22px; color: var(--psy-signal)}
.psyche-return:not([data-state='0']) .return-rosie,
.psyche-return[data-state='2'] .return-vox,
.psyche-return[data-state='3'] .return-vox {border-color: #756453; background: #21161a}
.psyche-return:not([data-state='0']) .return-rosie::after,
.psyche-return[data-state='2'] .return-vox::after,
.psyche-return[data-state='3'] .return-vox::after {transform: scaleX(1) rotate(-5deg)}
.psyche-return:not([data-state='0']) .return-chain-left-end {transform: translate(-15px, 43px) rotate(31deg); opacity: .24}
.psyche-return:not([data-state='0']) .return-chain-left-loose {opacity: 1}
.psyche-return[data-state='2'] .return-chain-right-end,
.psyche-return[data-state='3'] .return-chain-right-end {transform: translate(15px, 43px) rotate(-31deg); opacity: .24}
.psyche-return[data-state='2'] .return-chain-right-loose,
.psyche-return[data-state='3'] .return-chain-right-loose {opacity: 1}
.psyche-return[data-state='2'] .return-collar,
.psyche-return[data-state='3'] .return-collar {opacity: 0; transform: translateY(60px) rotate(15deg)}
.psyche-return[data-state='1'] .return-break-sparks,
.psyche-return[data-state='2'] .return-break-sparks {opacity: .5}
.psyche-return[data-state='3'] .return-new-paper {opacity: 1; transform: none}
.psyche-return[data-state='3'] .return-staff {transform: translate(107px, -3px) rotate(11deg) scale(.8)}
.psyche-return[data-state='3'] .return-staff-top {transform: none}
.psyche-return[data-state='3'] .return-staff-repair {opacity: 1}
.psyche-return[data-state='3'] .return-exchange {opacity: 1; transform: none}

@keyframes psyche-breathe {0%, 100% {opacity: .27} 50% {opacity: .9}}
@keyframes psyche-thread {to {stroke-dashoffset: -112}}
@keyframes psyche-signal {to {stroke-dashoffset: -196}}
@keyframes psyche-scan {0%, 100% {transform: translateY(-24px); opacity: .1} 50% {transform: translateY(72px); opacity: .65}}
.psyche-scene[data-motion-paused='true'] *,
.psyche-scene[data-motion-paused='true'] *::before,
.psyche-scene[data-motion-paused='true'] *::after {animation-play-state: paused !important}

@media (max-width: 600px) {
  .psyche-scene {padding: 30px 18px; margin: 28px 0 38px}
  .psyche-scene h3 {font-size: 34px}
  .psyche-scene .psyche-intro {font-size: 12px}
  .psyche-scene .psyche-response p {font-size: 13px}
  .psyche-response {min-height: 6.8em; margin-top: 22px}
  .psyche-scene .psyche-next {min-width: 0; width: 100%; max-width: 360px; padding: 14px 16px}
  .psyche-scene .psyche-caption {font-size: 9px; text-align: left}
  .psyche-world-footer {font-size: 9px; gap: 12px; min-height: 51px}
  .psyche-world-footer > span {max-width: 55%}
  .persona-art {width: 142%; max-width: none; margin-left: -21%}
  .persona-public-tag {left: 2%; top: 61%; font-size: 9px; letter-spacing: 0}
  .persona-hidden-tag {right: 1%; top: 33%; max-width: 90px; font-size: 9px; letter-spacing: 0}
  .psyche-persona[data-state='2'] .persona-public-tag {transform: translateY(18px)}
  .psyche-persona[data-state='3'] .persona-hidden-tag {transform: none}
  .media-art {width: 127%; max-width: none; margin-left: -13.5%}
  .return-terms {gap: 12px; padding: 0}
  .return-term {padding: 13px 10px 10px}
  .return-owner {font-size: 23px}
  .return-clause {font-size: 10px; min-height: 4.5em}
  .return-binding {font-size: 8px}
  .return-art {width: 117%; max-width: none; margin-left: -8.5%}
  .return-exchange {bottom: 72px; gap: 10px; font-size: 10px}
  .return-exchange-arrow {font-size: 19px}
}
@media (prefers-reduced-motion: reduce) {
  .psyche-scene *, .psyche-scene *::before, .psyche-scene *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important}
}
@media print {
  .psyche-scene {break-inside: avoid; background: #fff; color: #111; border: 1px solid #777; margin: 24px 0; padding: 18px}
  .psyche-scene .psyche-world, .psyche-scene .psyche-controls, .psyche-scene .psyche-response, .psyche-scene::before, .psyche-scene::after {display: none}
  .psyche-scene h3, .psyche-scene .eyebrow, .psyche-scene .psyche-intro, .psyche-scene .psyche-caption, .psyche-scene .psyche-conclusion {color: #111}
  .psyche-scene .psyche-caption {margin-top: 12px}
}