/*!
 * FluxaWay — styles for the ZoomStage add-on.
 * This app's frontend uses the FluxaWay framework (NOT React):
 * https://github.com/skysegbr/FluxaWay — full AI reference:
 * https://raw.githubusercontent.com/skysegbr/FluxaWay/main/docs/AI_SPEC.md
 */
/* ── Zoom Stage ────────────────────────────────────────────────────────────── */

.m-zoom-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: var(--m-bg);
  cursor: pointer;
  outline: none;
  /* let vertical page scroll pass through, capture horizontal for swipe nav */
  touch-action: pan-y;
}

/* free zoom/pan owns every touch gesture (pinch + drag) */
.m-zoom-stage-free {
  touch-action: none;
}

.m-zoom-stage:focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: -2px;
}

/* screen-reader-only live region announcing the current frame */
.m-zoom-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.m-zoom-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  visibility: hidden;
  will-change: transform;
}

.m-zoom-stage-ready .m-zoom-world { visibility: visible; }

.m-zoom-stage-moving { cursor: progress; }

/* ── Frames ────────────────────────────────────────────────────────────────── */

.m-zoom-frame {
  position: absolute;
  box-sizing: border-box;
  background: var(--m-surface);
  color: var(--m-text);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-lg);
  box-shadow: var(--m-shadow-1);
  padding: var(--m-space-8);
  overflow: hidden;
  cursor: auto;
  transition: box-shadow var(--m-transition-base), border-color var(--m-transition-base);
}

.m-zoom-frame-active {
  border-color: var(--m-primary);
  box-shadow: var(--m-shadow-2);
}

/* The camera target remains rectangular because the viewport is rectangular,
 * but its visible surface does not have to be a card. */
.m-zoom-frame-surface-none {
  overflow: visible;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.m-zoom-frame-surface-none.m-zoom-frame-active {
  border-color: transparent;
  box-shadow: none;
}

.m-zoom-frame-surface-glass {
  border-color: color-mix(in srgb, var(--m-primary) 30%, var(--m-border));
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.1), transparent 38%),
    color-mix(in srgb, var(--m-surface) 92%, var(--m-primary-soft));
  box-shadow: var(--m-shadow-2), 0 1px 0 rgb(255 255 255 / 0.12) inset;
}

.m-zoom-frame-shape-circle {
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.m-zoom-frame-shape-pill { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .m-zoom-frame { transition-duration: 1ms; }
}