/* Orli v3 · explore · the stage
   ---------------------------------------------------------------------------
   Needs the v2 system tokens (tokens.css) for colour, type and focus; falls
   back to plain values without them. The page sizes the stage; this only
   fills it.
   ------------------------------------------------------------------------- */

.ex {
  position: relative;
  overflow: clip;
  touch-action: pan-y;                /* the page scrolls over it; a drag that starts on the Orli leads it (lib/explore.js) */
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--ex-sky-colour, #f3d5c1) var(--ex-sky, none) center / cover no-repeat;
  outline-offset: -6px;
}
.ex:focus-visible { outline: var(--o-focus-ring, 3px solid #1f3d32); outline-offset: -6px; }
.ex__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ex[data-state="island"] { cursor: pointer; }
.ex[data-pointer="walk"], .ex[data-pointer="place"] { cursor: pointer; }
.ex[data-pointer="grab"] { cursor: grab; }
.ex[data-pointer="grabbing"] { cursor: grabbing; }

/* The one paper tag: a place's name, the host's line, or a door. */
.ex__tag {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--o-space-2, 8px);
  max-width: min(300px, calc(100% - 32px));
  padding: var(--o-space-2, 8px) var(--o-space-3, 12px);
  border-radius: var(--o-r-control, 12px);
  background: var(--o-paper, #fffdf8); color: var(--o-ink, #2f2e2b);
  box-shadow: 0 1px 2px rgb(60 57 50 / .08), 0 8px 22px -8px rgb(60 57 50 / .3);
  font: var(--o-weight-ui, 650) var(--o-text-small, .875rem) / 1.35 var(--o-font-ui, system-ui, sans-serif);
  transition: opacity var(--o-t-enter, 280ms) var(--o-ease, ease);
  will-change: transform;
}
.ex__tag.is-out { opacity: 0; }
.ex__tag[hidden], .ex__act[hidden] { display: none; }
.ex__tag--say { font-family: var(--o-font-body, system-ui, sans-serif); font-weight: 600; }
.ex__say { margin: 0; text-wrap: pretty; }
.ex__act { pointer-events: auto; }

/* ============================================================ static tier */
.ex--static .ex__pic { position: absolute; }
.ex__plate { display: block; width: 100%; height: 100%; }
.ex__orli {
  position: absolute; left: 0; top: 0; height: auto;
  transition: transform 900ms var(--o-ease, ease), width 900ms var(--o-ease, ease);
  pointer-events: none;
}
.ex--static[data-state="island"] .ex__orli,
.ex--static[data-state="island"] .ex__shadow { opacity: 0; }
.ex__shadow {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(94 44 16 / .34), rgb(94 44 16 / 0));
  transition: transform 900ms var(--o-ease, ease);
  pointer-events: none;
}
.ex__star { position: absolute; fill: var(--o-star, #e8b40a); opacity: .35; pointer-events: none; }
.ex__star.is-found { opacity: 1; }
.ex__mark {
  position: absolute; width: 64px; height: 28px; translate: -50% -50%;
  border: 3px solid #fff; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgb(47 46 43 / .25);
}

html[data-motion="reduced"] .ex *, html[data-motion="still"] .ex * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ex * { transition: none !important; } }
@media (forced-colors: active) { .ex__tag { border: 1px solid CanvasText; } }