/*
 * MAGG Interactive Scene — shared CSS.
 * Pairs with interactive-scene.js. The stage is a fixed design canvas scaled by
 * one uniform transform so the background and every hotspot move together.
 */

.iscene-viewport {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh; /* fallback for browsers without dvh */
  min-height: 100dvh;
  overflow: hidden;
  background: #05070a;
  touch-action: manipulation;
}

.iscene-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--iscene-w, 1600px);
  height: var(--iscene-h, 1000px);
  transform: translate(-50%, -50%) scale(var(--iscene-scale, 1));
  transform-origin: center center;
  /* enables cqw/cqh for descendants that were authored in vw/vh */
  container-type: size;
  container-name: iscene;
  will-change: transform;
}

.iscene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* stage matches the art's aspect, so fill == no distortion */
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Foreground transparent assets + separate contact shadows share the coord space */
.iscene-foreground,
.iscene-shadow {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.iscene-shadow { opacity: 0.55; }

.iscene-layer {
  position: absolute;
  inset: 0;
}

.iscene-hotspot {
  position: absolute;
  box-sizing: border-box;
  min-width: var(--iscene-min-hit, 44px);
  min-height: var(--iscene-min-hit, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  /* (x,y) is the hotspot CENTRE, so the min hit-area grows symmetrically and
     stays on the visual object even when larger than the art. */
  transform: translate(-50%, -50%);
}
.iscene-hotspot-icon {
  max-width: 100%;
  max-height: 100%;
  display: block;
  pointer-events: none;
}
.iscene-hotspot:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Collapsible drawers/overlays. They sit above the scene but must never hide it
   permanently — they are dismissible and do not cover the whole viewport. */
.iscene-drawer {
  position: absolute;
  z-index: 20;
  background: rgba(12, 16, 20, 0.94);
  border: 1px solid rgba(120, 160, 220, 0.18);
  color: #e8ebee;
  transition: transform 0.18s ease;
}
.iscene-drawer[hidden] { display: none; }

/* Debug overlay: show hotspot boxes + ids/coords */
.iscene-debug .iscene-hotspot {
  outline: 1px dashed rgba(255, 70, 70, 0.9);
  background: rgba(255, 70, 70, 0.14);
}
.iscene-debug .iscene-hotspot::after {
  content: attr(data-hotspot-id);
  position: absolute;
  left: 0;
  bottom: 100%;
  font: 700 11px/1.2 monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  padding: 1px 4px;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .iscene-stage,
  .iscene-drawer {
    transition: none !important;
    will-change: auto;
  }
}