/* Figure 1's scenes: the caption line under the figure (title, description, the "move Bayker" hint and
   the Segmentation toggle), the title card that names a scene when Bayker walks into it, and the light
   spill at an edge that leads somewhere. Loaded after paper.css. */

.fig-cap { justify-content: space-between; }
.fig-text { flex: 1 1 100%; }
.fig-desc { color: var(--ink-2); }

.fig-hint { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: .01em; }
.fig-hint .on-touch { display: none; }
@media (hover: none) {
  .fig-hint .on-keys { display: none; }
  .fig-hint .on-touch { display: inline; }
}

/* Title card: the scene's name, set like a heading of the paper, for a moment. */
.fig-card {
  position: absolute; z-index: 3; left: 50%; top: 10%; margin: 0; translate: -50% 0;
  padding: 9px 20px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none;
  font: var(--disp-h-w) 26px/1.25 var(--disp); color: var(--ink);
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 .75px var(--rule);
  opacity: 0; transition: opacity .4s ease-out;
}
.fig-card.is-on { opacity: 1; transition-duration: .25s; }

/* Edge spill: light from the next room, brighter as Bayker gets close. --spill is the colour of the
   scene beyond (set per edge), --near 0..1 his distance to it. */
.fig-edge {
  --near: 0;
  position: absolute; z-index: 1; top: 0; height: 100%; width: 14%; max-width: 120px; pointer-events: none;
  opacity: calc(.6 + .4 * var(--near)); transition: opacity .3s;
}
.fig-edge[data-side="left"] {
  left: 0;
  background: radial-gradient(100% 42% at 0% 74%, rgb(var(--spill) / .62), rgb(var(--spill) / 0) 70%),
    linear-gradient(90deg, rgb(var(--spill) / .5), rgb(var(--spill) / 0) 9%);
}
.fig-edge[data-side="right"] {
  right: 0;
  background: radial-gradient(100% 42% at 100% 74%, rgb(var(--spill) / .62), rgb(var(--spill) / 0) 70%),
    linear-gradient(270deg, rgb(var(--spill) / .5), rgb(var(--spill) / 0) 9%);
}
.fig-edge.is-inset[data-side="left"] { background: radial-gradient(100% 42% at 0% 74%, rgb(var(--spill) / .5), rgb(var(--spill) / 0) 70%); }
.fig-edge.is-inset[data-side="right"] { background: radial-gradient(100% 42% at 100% 74%, rgb(var(--spill) / .5), rgb(var(--spill) / 0) 70%); }
.fig-edge[hidden], .fig[data-view="seg"] .fig-edge { display: none; }

@media (max-width: 720px) {
  .fig-hint { font-size: 10.5px; }
  .fig-card { font-size: 21px; padding: 7px 15px 8px; }
  .fig-edge { width: 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-card, .fig-card.is-on, .fig-edge { transition: none; }
}