/* artwork.css — live artwork iframes and the focus-mode chrome.
   Owned by the artworks module. Uses the shared custom properties from
   gallery.css (--gold, --paper, --panel, --serif, --ease, …). */

/* --- Live artwork surfaces ---------------------------------------------- */
/* One of these wraps each CSS3DObject. It is sized in *pixels* (the CSS3D
   layer works in pixel units and the object is scaled back down by
   1 / CSS_PX_PER_METRE), so the simulation renders at real resolution rather
   than at one pixel per metre. */

.aw-live {
  position: absolute;
  overflow: hidden;
  background: #05050a;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  /* pointer-events is written inline by the artwork system, because
     CSS3DObject also writes it inline and would otherwise win. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
  -webkit-user-select: none;
  user-select: none;
}

.aw-live__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05050a;
  color-scheme: dark;
}

/* Only the focused piece receives input; everything else stays scenery. */
body.is-artwork-focused #css3d-layer {
  pointer-events: auto;
}

/* The room title card shares the top-left corner with the way out, and it is
   still on screen for a few seconds if you step into a piece straight after
   walking into the room. The exit wins that corner. */
body.is-artwork-focused .hud-room {
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.aw-live.is-interactive {
  cursor: crosshair;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35);
}

/* --- The screen-space stage ---------------------------------------------- */

/* Holds the focused artwork's iframe, laid exactly over where the piece already
   appears in 3D. See the comment on createStage() in focus.js: this exists
   because pointer events do not reach an iframe inside a CSS3D perspective
   subtree. Sits above the WebGL canvas (2) and below the HUD (7). */
.aw-stage {
  position: fixed;
  z-index: 5;
  overflow: hidden;
  pointer-events: auto;
  background: #000;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9);
}
.aw-stage[hidden] { display: none; }
.aw-stage > iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Focus-mode chrome --------------------------------------------------- */

/* The focus chrome has to sit above the stage (z 5) so its Esc pill and info
   panel stay clickable; #artwork-root's own z-index is what actually decides,
   because it creates the stacking context. */
#artwork-root { z-index: 6; }

.aw-focus {
  --aw-accent: var(--gold);
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.aw-focus.is-open {
  opacity: 1;
  visibility: visible;
}

/* The way back out. Top-LEFT: the gallery's own toolbar owns the top-right
 * corner, and so does a focused simulation's control column, so an exit stacked
 * in with them read as one more of their buttons rather than the way out. */
.aw-focus__esc {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--paper);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.aw-focus__esc:hover {
  border-color: rgba(201, 162, 39, 0.6);
  transform: translateY(-1px);
}
.aw-focus__esc:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}
/* The label leads and the key is the footnote — the old order read as a
 * keyboard hint that happened to be clickable, which is how it got missed. */
.aw-focus__esc span {
  color: var(--paper);
}
.aw-focus__esc kbd {
  font-size: 0.66rem;
  color: var(--muted);
  border: 1px solid var(--panel-line);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 2px;
}
.aw-focus__esc svg {
  opacity: 0.85;
}
@media (max-width: 640px) {
  /* On a phone the panel and the exit both want the top of the screen; the
     label goes and the arrow carries it. */
  .aw-focus__esc span,
  .aw-focus__esc kbd {
    display: none;
  }
  .aw-focus__esc {
    padding: 10px;
  }
}

/* The label panel. Bottom-left so the artwork keeps the centre of the screen. */
.aw-focus__panel {
  position: absolute;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 44px));
  padding: 20px 22px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  border-left: 2px solid var(--aw-accent);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  transform: translateY(12px);
  transition: transform 0.5s var(--ease);
}
.aw-focus.is-open .aw-focus__panel {
  transform: translateY(0);
}

.aw-focus__kicker {
  margin: 0 0 6px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aw-accent);
}

.aw-focus__title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.aw-focus__desc {
  margin: 0 0 16px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

.aw-focus__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-top: 13px;
  border-top: 1px solid var(--panel-line);
}

.aw-focus__link {
  color: var(--paper);
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.aw-focus__link:hover {
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}
.aw-focus__link:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.aw-focus__note {
  font-size: 0.74rem;
  color: rgba(244, 241, 234, 0.42);
}

@media (max-width: 640px) {
  .aw-focus__panel {
    width: calc(100vw - 32px);
    left: 16px;
    padding: 15px 16px 14px;
  }
  .aw-focus__desc {
    display: none; /* the plaque already carries this; screen space is scarce */
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-live,
  .aw-focus,
  .aw-focus__panel {
    transition-duration: 0.01ms;
  }
}