/* The ship's rooms and Helm's exterior are the glass bridge's backdrop: a
   fixed full-viewport scene (positioned in glass-shell.css) with one scrim
   over it. Art covers the viewport at 50% 40% and crossfades between rooms. */
#bridge-viewport {
  --merchant-port-light: 115, 171, 175;
  --merchant-room-light: 115, 171, 175;
  --merchant-port-brightness: 1;
  --merchant-port-warmth: .04;
  --merchant-beacon-light: 151, 190, 176;
  --merchant-beacon-opacity: .4;
  isolation: isolate;
  overflow: hidden;
  background: #0e120f;
  color: #ede8d9;
}
.merchant-scene-sky, .merchant-scene-art, .merchant-scene-art-next, .merchant-scene-console, .merchant-scene-hull, .merchant-scene-atmosphere, .merchant-scene-stars,
.merchant-scene-transit, .merchant-scene-traffic, .merchant-scene-practicals, .merchant-scene-port-glow, .merchant-scene-beacons,
.merchant-scene-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.merchant-scene-sky {
  z-index: -7;
  background: radial-gradient(circle at 45% 26%, #d1e3ed 0 .7px, transparent 1.5px),
    radial-gradient(circle at 68% 48%, #b5c9d1 0 .7px, transparent 1.5px),
    radial-gradient(circle at 30% 18%, #9ab4bf 0 .6px, transparent 1.3px),
    radial-gradient(circle at 82% 19%, #c2cbc4 0 .7px, transparent 1.5px),
    radial-gradient(circle at 57% 53%, #c2cbc4 0 .5px, transparent 1.3px),
    radial-gradient(ellipse at 65% 26%, #192c3d, #0d1b28 36%, #080e17 80%);
}
/* merchant-scene.js paints each room's art inline. Until it does (and for
   Helm and Ops before the first report) the art layer is the plain ground:
   never another room's photo. The ground under the image also makes a
   crossfade to the ground the same 400 ms fade. */
.merchant-scene-art, .merchant-scene-art-next, .merchant-scene-console {
  z-index: -6;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 40%;
  transition: filter 2.4s ease, opacity 2.4s ease;
}
.merchant-scene-art, .merchant-scene-art-next { background-color: var(--bg, #0e120f); }
/* A room change is a plain 400 ms crossfade: the next room fades in on top. */
.merchant-scene-art-next {
  z-index: -5;
  opacity: 0;
  transition: none;
}
.merchant-changing-room .merchant-scene-art-next {
  opacity: 1;
  transition: opacity 400ms ease-out;
}
.merchant-changing-room .merchant-scene-art { transition: opacity 400ms ease-out, filter 400ms ease-out; }
.merchant-scene-console {
  z-index: -2;
  opacity: 0;
  mask-image: linear-gradient(to bottom, transparent 57%, #000 84%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 57%, #000 84%);
}
.merchant-scene-hull {
  z-index: -2;
  background-image: var(--merchant-hull-art, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 40%;
  opacity: 0;
  transition: opacity 450ms ease, filter 1.5s ease;
}
#bridge-viewport.merchant-has-hull .merchant-scene-hull { opacity: 1; }
#bridge-viewport.merchant-has-hull .merchant-scene-console { display: none; }
/* A showroom preview frames the previewed cockpit in the headline band
   (merchant-scene.js sets the layer's inset): the whole width of its top
   beam, pillars and console top shows around the headline, and its window
   opens on the exterior behind. */
#bridge-viewport[data-showroom="true"] .merchant-scene-hull { background-position: 50% 0%; }
/* The hull's cockpit frame shows as drawn in every phase (no transit or
   stasis dimming): the backdrop is the art under the one scrim. */
.merchant-scene-atmosphere {
  z-index: -5;
  background: radial-gradient(ellipse at 69% 34%, rgba(var(--merchant-port-light), .2), transparent 46%),
    radial-gradient(ellipse at 10% 84%, rgba(225, 153, 67, .1), transparent 32%);
  mix-blend-mode: screen;
  opacity: .7;
  transition: opacity 2s ease, background 2s ease;
}
.merchant-scene-stars {
  z-index: -4;
  inset: 14% 24% 27% 31%;
  opacity: .4;
  background-image: radial-gradient(circle at 11% 24%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 42%, #d2e8e9 0 .7px, transparent 1.4px),
    radial-gradient(circle at 63% 12%, #e0ded5 0 .6px, transparent 1.5px),
    radial-gradient(circle at 31% 73%, #d2e8e9 0 .6px, transparent 1.4px);
  animation: merchant-stars 13s ease-in-out infinite alternate;
}
/* The README backdrop is the room art under one scrim (glass-shell.css), the
   only darkening layer. MerchantScene's colour washes, port glow and room
   practicals would tint and brighten the art, so the glass bridge does not
   paint them. Helm keeps its exterior life: stars, traffic, beacons and the
   transit streaks. */
.merchant-scene-shade, .merchant-scene-atmosphere, .merchant-scene-port-glow, .merchant-scene-practicals { display: none; }
/* Before the first report (or with no vessel) there is no port to look at. */
#bridge-viewport[data-phase="unknown"] :is(.merchant-scene-stars, .merchant-scene-traffic, .merchant-scene-beacons) { display: none; }
/* The old title sill is replaced by the glass headline. Its node stays for
   modules that anchor to it, and it bounds the receiver glass. */
#bridge-viewport .merchant-scene-top { display: none; }

.merchant-scene-traffic { z-index: -3; opacity: .7; overflow: hidden; transition: opacity 1.5s ease; }
.merchant-vessel { position: absolute; display: block; width: 23px; height: 5px; background: #172b30; border-top: 1px solid rgba(174, 186, 164, .65); box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.merchant-vessel::before { content: ''; position: absolute; left: 7px; top: -3px; width: 6px; height: 4px; background: #2c3939; }
.merchant-vessel b { position: absolute; right: -3px; top: 1px; width: 3px; height: 2px; background: #b8e0cd; box-shadow: 0 0 5px 1px #77b7b4; }
.merchant-vessel-one { left: 36%; top: 47%; animation: merchant-traffic-one 48s linear infinite; }
.merchant-vessel-two { left: 62%; top: 29%; scale: .52; opacity: .65; animation: merchant-traffic-two 61s linear infinite; }
.merchant-vessel-three { left: 74%; top: 54%; scale: .68; animation: merchant-traffic-one 57s linear -23s infinite; }
.merchant-vessel-four { left: 43%; top: 21%; scale: .4; animation: merchant-traffic-two 72s linear -39s infinite; }
.merchant-vessel-five { left: 54%; top: 60%; scale: .42; animation: merchant-traffic-one 67s linear -41s infinite; }
.merchant-vessel-six { left: 79%; top: 36%; scale: .5; animation: merchant-traffic-two 60s linear -31s infinite; }
.merchant-vessel-seven { left: 33%; top: 36%; scale: .36; animation: merchant-traffic-one 78s linear -19s infinite; }
#bridge-viewport .merchant-vessel[hidden], #bridge-viewport .merchant-scene-beacons i[hidden] { display: none; }
#bridge-viewport[data-traffic="quiet"] .merchant-scene-traffic { opacity: .3; }
#bridge-viewport[data-traffic="working"] .merchant-scene-traffic { opacity: .65; }
#bridge-viewport[data-traffic="busy"] .merchant-scene-traffic { opacity: .85; }
.merchant-scene-port-glow {
  z-index: -3;
  background: radial-gradient(ellipse at 70% 36%, rgba(250, 186, 91, .8), transparent 52%);
  opacity: var(--merchant-port-warmth);
  mix-blend-mode: screen;
  transition: opacity 2s ease;
}
.merchant-scene-beacons { z-index: -3; opacity: var(--merchant-beacon-opacity); transition: opacity 2s ease; }
.merchant-scene-beacons i { position: absolute; width: 3px; height: 3px; border-radius: 50%; left: 74%; top: 36%; background: rgb(var(--merchant-beacon-light)); box-shadow: 0 0 8px 2px rgba(var(--merchant-beacon-light), .4); animation: merchant-beacon 9s ease-in-out infinite; }
.merchant-scene-beacons i:nth-child(2) { left: 78%; top: 29%; animation-delay: -3s; }
.merchant-scene-beacons i:nth-child(3) { left: 65%; top: 47%; animation-delay: -6s; }
.merchant-scene-beacons i:nth-child(4) { left: 85%; top: 44%; animation-delay: -2s; }
.merchant-scene-beacons i:nth-child(5) { left: 57%; top: 31%; animation-delay: -5s; }
#bridge-viewport[data-beacon-style="array"] .merchant-scene-beacons i::after { content: ''; position: absolute; top: 0; left: 5px; width: 2px; height: 2px; background: rgb(var(--merchant-beacon-light)); opacity: .55; }
#bridge-viewport[data-beacon-style="precision"] .merchant-scene-beacons i { border-radius: 0; height: 2px; width: 5px; }
#bridge-viewport[data-beacon-style="precision"] .merchant-scene-beacons i::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(var(--merchant-beacon-light), .3); border-radius: 50%; }
/* The art itself is never filtered (no per-port brightness, no stasis
   dimming): the port's exterior photo shows as drawn, under the scrim. */
.merchant-scene-practicals { z-index: -2; }
.merchant-scene-practicals i { position: absolute; width: 52px; height: 2px; left: 7%; bottom: 22%; background: #d8a765; box-shadow: 0 0 9px 2px rgba(229, 164, 77, .28); opacity: .55; }
.merchant-scene-practicals i:last-child { left: auto; right: 9%; bottom: 27%; width: 36px; opacity: .35; }
#bridge-viewport.merchant-has-hull[data-station="helm"] .merchant-scene-practicals i { background: rgb(var(--merchant-hull-accent, 208, 164, 106)); }
.merchant-scene-transit { z-index: -3; opacity: 0; overflow: hidden; transition: opacity 1.6s ease; }
.merchant-scene-transit i { position: absolute; top: 29%; left: 35%; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 201, 217, .5)); animation: merchant-transit 4s linear infinite; }
.merchant-scene-transit i:nth-child(2) { top: 41%; left: 71%; width: 70px; animation-delay: -2.8s; }
.merchant-scene-transit i:nth-child(3) { top: 57%; left: 55%; width: 35px; animation-delay: -1.5s; }
.merchant-scene-transit i:nth-child(4) { top: 19%; left: 60%; width: 44px; animation-delay: -.7s; }
#bridge-viewport[data-station="helm"][data-phase="transit"] .merchant-scene-atmosphere { background: linear-gradient(90deg, rgba(32, 78, 116, .1), rgba(21, 66, 95, .4)); opacity: .8; }
#bridge-viewport[data-station="helm"][data-phase="transit"] .merchant-scene-traffic,
#bridge-viewport[data-phase="stasis"] .merchant-scene-traffic { opacity: 0; }
#bridge-viewport[data-phase="transit"] .merchant-scene-port-glow,
#bridge-viewport[data-phase="transit"] .merchant-scene-beacons,
#bridge-viewport[data-phase="stasis"] .merchant-scene-port-glow,
#bridge-viewport[data-phase="stasis"] .merchant-scene-beacons { opacity: 0; }
#bridge-viewport[data-station="helm"][data-phase="transit"] .merchant-scene-transit { opacity: .65; }

#bridge-viewport[data-signal="arrival"] .merchant-scene-atmosphere { animation: merchant-arrival 3.5s ease-out both; }
#bridge-viewport[data-signal="trade"] .merchant-scene-practicals { animation: merchant-trade 2s ease-in-out; }
#bridge-viewport:not([data-station="helm"]) .merchant-scene-sky, #bridge-viewport:not([data-station="helm"]) .merchant-scene-stars, #bridge-viewport:not([data-station="helm"]) .merchant-scene-transit, #bridge-viewport:not([data-station="helm"]) .merchant-scene-traffic, #bridge-viewport:not([data-station="helm"]) .merchant-scene-planet-detail, #bridge-viewport:not([data-station="helm"]) .merchant-scene-port-activity, #bridge-viewport:not([data-station="helm"]) .merchant-scene-port-glow, #bridge-viewport:not([data-station="helm"]) .merchant-scene-beacons, #bridge-viewport:not([data-station="helm"]) .merchant-scene-hull, #bridge-viewport:not([data-station="helm"]) .merchant-scene-showroom, #bridge-viewport:not([data-station="helm"]) .merchant-scene-console { display: none; }
#bridge-viewport:not([data-station="helm"]) .merchant-scene-atmosphere {
  background: radial-gradient(ellipse at 70% 45%, rgba(var(--merchant-room-light), .22), transparent 60%),
    radial-gradient(ellipse at 15% 80%, rgba(var(--merchant-room-light), .14), transparent 38%);
  opacity: .8;
}
#bridge-viewport:not([data-station="helm"])[data-phase="transit"] .merchant-scene-atmosphere { opacity: .42; }
#bridge-viewport:not([data-station="helm"])[data-phase="transit"] .merchant-scene-practicals { filter: saturate(.7); }
#bridge-viewport[data-station="engineering"] .merchant-scene-practicals i { width: 80px; box-shadow: 0 0 20px 4px rgba(232, 157, 77, .34); }
#bridge-viewport[data-station="science"] .merchant-scene-practicals i { background: #a5d4d0; box-shadow: 0 0 12px 2px rgba(131, 196, 190, .26); }
#bridge-viewport[data-station="comms"] .merchant-scene-practicals { display:none; }
/* A retained route is still in space, including exhaustion or stasis. Under
   way Helm shows the README's underway art (merchant-bridge.webp, set by the
   script); a hull with its own cockpit frames that same view, as it frames
   the port's exterior when docked. */
#bridge-viewport[data-in-transit="true"] .merchant-scene-traffic,
#bridge-viewport[data-in-transit="true"] .merchant-scene-port-glow,
#bridge-viewport[data-in-transit="true"] .merchant-scene-beacons { opacity: 0; }
#bridge-viewport[data-in-transit="true"][data-movement-paused="true"] .merchant-scene-transit { opacity: 0; }
#bridge-viewport[data-movement-paused="true"] .merchant-scene-transit i { animation-play-state: paused; }

.merchant-scene-paused *, .merchant-scene-paused *::before, .merchant-scene-paused *::after { animation-play-state: paused !important; }
@keyframes merchant-stars { from { opacity: .2; } to { opacity: .55; } }
@keyframes merchant-traffic-one { 0% { transform: translate(160px, -12px); opacity: 0; } 12%, 85% { opacity: .85; } 100% { transform: translate(-130px, 25px); opacity: 0; } }
@keyframes merchant-traffic-two { 0% { transform: translate(-120px, 0); opacity: 0; } 18%, 80% { opacity: .7; } 100% { transform: translate(160px, 20px); opacity: 0; } }
@keyframes merchant-transit { 0% { transform: translateX(110px); opacity: 0; } 18%, 75% { opacity: .7; } 100% { transform: translateX(-130px); opacity: 0; } }
@keyframes merchant-arrival { 0% { opacity: .2; } 38% { opacity: 1; } 100% { opacity: .7; } }
@keyframes merchant-trade { 0%, 100% { opacity: 1; } 45% { opacity: .4; } }
@keyframes merchant-beacon { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #bridge-viewport *, #bridge-viewport *::before, #bridge-viewport *::after { animation: none !important; transition: none !important; }
  .merchant-scene-transit { display: none; }
  .merchant-vessel { opacity: .6; }
}