/* Миниатюра перетекает в окно по центру, окно можно смахнуть (Meowdes Refs: image-lightbox-drag).
   Окно — <dialog> в top layer. Раскладку миниатюр задаёт страница, здесь поведение и окно. */
.image-lightbox-drag {
  --image-lightbox-drag-radius: 8px;
  --image-lightbox-drag-width: 1100px;
  --image-lightbox-drag-ratio: 4 / 3;
  --image-lightbox-drag-frame-radius: 12px;
  --image-lightbox-drag-frame-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  --image-lightbox-drag-scrim: rgba(0, 0, 0, 0.45);
  --image-lightbox-drag-blur: 6px;
  --image-lightbox-drag-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --image-lightbox-drag-focus: #1433FF;
  --image-lightbox-drag-spring: linear(0, 0.0287, 0.1001, 0.199, 0.3127, 0.4257, 0.5419, 0.6504, 0.7476, 0.8315, 0.9013, 0.9573, 1.0003, 1.0304, 1.0519, 1.065, 1.071, 1.0718, 1.0686, 1.0627, 1.0551, 1.0471, 1.0386, 1.0304, 1.0228, 1.0161, 1.0104, 1.0057, 1.002, 0.9993, 0.9972, 0.9959, 0.9951, 0.9948, 0.9949, 0.9952, 0.9957, 0.9962, 0.9968, 0.9974, 1);
}

.image-lightbox-drag__thumb {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--image-lightbox-drag-radius);
  background: transparent;
  overflow: hidden;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .image-lightbox-drag__thumb:hover { scale: 1.01; box-shadow: var(--image-lightbox-drag-hover-shadow); }
}
.image-lightbox-drag__thumb:focus-visible { outline: 2px solid var(--image-lightbox-drag-focus); outline-offset: 2px; }
.image-lightbox-drag__thumb.is-away { visibility: hidden; }

.image-lightbox-drag__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.image-lightbox-drag__dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  color: inherit;
  outline: none;
}
.image-lightbox-drag__dialog::backdrop { background: transparent; }
.image-lightbox-drag__backdrop {
  position: absolute;
  inset: 0;
  background: var(--image-lightbox-drag-scrim);
  -webkit-backdrop-filter: blur(var(--image-lightbox-drag-blur));
  backdrop-filter: blur(var(--image-lightbox-drag-blur));
  opacity: 0;
  cursor: zoom-out;
}
.image-lightbox-drag__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}
.image-lightbox-drag__frame {
  position: relative;
  box-sizing: border-box;
  width: min(var(--image-lightbox-drag-width), 88vw, calc(88vh * var(--image-lightbox-drag-ratio)));
  aspect-ratio: var(--image-lightbox-drag-ratio);
  border-radius: var(--image-lightbox-drag-frame-radius);
  background: #fff;
  box-shadow: var(--image-lightbox-drag-frame-shadow);
  overflow: hidden;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: scale 0.42s var(--image-lightbox-drag-spring);
}
.image-lightbox-drag__frame.is-dragging { cursor: grabbing; scale: 1.01; }
.image-lightbox-drag__frame.is-flying { position: fixed; margin: 0; aspect-ratio: auto; cursor: default; }
.image-lightbox-drag__frame > .image-lightbox-drag__img { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .image-lightbox-drag__thumb,
  .image-lightbox-drag__frame { transition: none; }
}