/* The Rogue AI home's night-beach diorama (ticket 914). One scene box holds six stacked canvases
   (js/rogue/diorama.js paints them): sky and sea, sandbar, back row of characters, middle and
   front rows, foreground rocks and kelp, and a light layer blended over everything. Depth of field
   is a CSS blur on the back row and the foreground; the middle row stays sharp. Tilt-shift is two
   bands of backdrop blur at the top and bottom. The script sets the scene's max-width through the
   CSSOM (the page's content security policy has no inline styles); the box keeps a 16:9 shape and
   shrinks with its column, so a phone gets no sideways scroll.

   Ticket 915, ticket 976: the scene and the overlay of links that sits over it share one `field` box,
   so the links line up with the picture. The field sits centred in a full-width band of the scene's
   own night colour, at most 240 px tall (the script picks a whole device-pixel scale of the 384x216
   canvas that keeps the scene under that, design note section 5): a hero band, not a first-screen
   fill. Under reduced motion the script paints one still frame. */

.rogue-diorama {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}

.rogue-diorama__band {
  display: flex;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius);
  background: #070b1a;
}

.rogue-diorama__field {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.rogue-diorama__scene {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-strong);
  border-radius: var(--radius);
  background: #070b1a;
  isolation: isolate;
}

.rogue-diorama__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

/* Depth of field: the back row and the foreground are out of focus. */
.rogue-diorama__layer--back {
  filter: blur(1px);
}

.rogue-diorama__layer--front {
  filter: blur(2px);
}

.rogue-diorama__layer--light {
  mix-blend-mode: screen;
}

/* Tilt-shift: a blurred band at the top and one at the bottom, fading into the sharp middle. */
.rogue-diorama__tilt {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.rogue-diorama__tilt--top {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

.rogue-diorama__tilt--bottom {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}

.rogue-diorama__demo {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
}

/* One link over each agent, and the signpost's link. The script sets their left, top, width and
   height in percent through the CSSOM. The overlay lets the pointer through to the field except on
   the links themselves. */
.rogue-diorama__hits {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rogue-diorama__hit,
.rogue-diorama__sign {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.rogue-diorama__hit:focus-visible,
.rogue-diorama__sign:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}