/*
 * Original Hygentra homepage scenes inside the V3 command rail.
 *
 * The scene implementation, motion timings, chart math, and 568px delegate
 * composition are copied unchanged from the original site. This adapter only
 * supplies the original design tokens and lets those compositions occupy the
 * responsive visual slots that previously held flat PNGs.
 */

.scene-port {
  --mint: #36ffab;
  --execution: #ff8a3d;
  --dim: #8a7f79;
  --muted: #b8aca6;
  --paper-rgb: 246, 239, 234;
  --mono: var(--font-mono);
  --sans: var(--font-sans);
  width: 100%;
  min-width: 0;
  color: #f6efea;
  font-family: var(--sans);
  isolation: isolate;
}

.scene-port button,
.scene-port input {
  font: inherit;
}

.scene-port--ask {
  display: grid;
  align-items: center;
}

.scene-port--ask .scene-scale {
  width: 100%;
  max-width: 482px;
  min-width: 0;
  margin-inline: auto;
}

/* Step 01 uses the same fixed-canvas depth system as step 04. Its 482px
   canvas matches the desktop visual column exactly, stays centred when the
   command rows stack, and scales every layer together below that width. */
.scene-port--ask .fx-scene {
  position: relative;
  display: block;
  width: 482px;
  height: 424px;
  margin: 0;
  isolation: isolate;
}

.scene-port--ask .fx-scene::before {
  display: none;
}

.scene-port--ask .fx-chart {
  position: absolute;
  z-index: 3;
  top: 55px;
  left: 0;
  width: 429px;
  height: 263px;
  box-shadow: var(--glass-light), 0 38px 90px rgba(0, 0, 0, 0.55);
}

.scene-port--ask .fx-chat {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 81px;
  width: 401px;
  max-width: none;
  height: 424px;
  opacity: 0.96;
  filter: saturate(0.9) brightness(0.92);
  transform: none;
  transition:
    left 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease,
    filter 0.7s ease;
}

/* The opening beat keeps the chat centred and undimmed. The existing
   `revealed` class then moves it into the rear plane as the chart arrives. */
.scene-port--ask .fx-scene:not(.play) .fx-chat,
.scene-port--ask .fx-scene.play:not(.revealed) .fx-chat {
  top: 0;
  left: 40.5px;
  width: 401px;
  height: 424px;
  opacity: 1;
  filter: none;
  transform: none;
}

.scene-port--ask .fx-scene:not(.play) .fx-chart,
.scene-port--ask .fx-scene.play:not(.revealed) .fx-chart {
  opacity: 0;
  transform: translate(-32px, 18px) scale(0.985);
  pointer-events: none;
}

.scene-port--check .copilot-stage,
.scene-port--trade .fx-chat,
.scene-port--delegate .fx-fit {
  margin-inline: auto;
}

.scene-port--trade .fx-chat {
  min-height: 560px;
}

.scene-port--delegate {
  display: grid;
  align-items: center;
}

@media (max-width: 1120px) {
  .scene-port--trade .fx-chat {
    min-height: 420px;
  }
}

@media (max-width: 640px) {
  .scene-port--check .copilot-stage,
  .scene-port--trade .fx-chat {
    width: 100%;
  }
}