/**
 * Peek chrome widgets — config-driven corner / ledge mascots.
 * Position + optical trim via per-element CSS vars (folio-chrome-peek-widgets.mjs).
 *
 * Optical: --pf-peek-ox / --pf-peek-oy shift the box so transparent PNG borders
 * hang past the anchored viewport edge (flush visible art).
 */

.pf-peek-widget {
  position: fixed;
  z-index: var(--pf-peek-z, 45);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
  inset-inline-start: var(--pf-peek-inset-inline-start, auto);
  inset-inline-end: var(--pf-peek-inset-inline-end, auto);
  inset-block-end: var(--pf-peek-inset-block-end, auto);
  inset-block-start: var(--pf-peek-inset-block-start, auto);
  --pf-peek-ox: 0px;
  --pf-peek-oy: 0px;
  --pf-peek-hover-y: 0px;
  transform: translate3d(var(--pf-peek-ox), calc(var(--pf-peek-oy) + var(--pf-peek-hover-y)), 0);
  transition: transform 160ms ease, opacity 160ms ease;
}

.pf-peek-widget:hover {
  --pf-peek-hover-y: -2px;
}

.pf-peek-widget:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.pf-peek-widget img {
  width: var(--pf-peek-size, 3.25rem);
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pf-peek-widget[data-peek-active='1'] {
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .pf-peek-widget,
  .pf-peek-widget:hover {
    transition: none;
    --pf-peek-hover-y: 0px;
  }
}

/* Legacy class alias (if old markup still present) */
.peeking-frog {
  /* no-op placeholder — new mounts use .pf-peek-widget */
}