/* Линза над картинами сетки (js/photo-lens.js). Пока она включена, системный курсор
   прячется — вместо него сама линза. Размеры (--lens-box, --lens-d) задаёт скрипт.
   Слои: view (увеличенная картина + искажение/дисперсия фильтром) · glass (блики,
   каустика, свечение кромки, тень) · rim (призматический ободок) */

.photo-lens-on,
.photo-lens-on * {
  cursor: none !important;
}

.photo-lens {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  width: var(--lens-box);
  height: var(--lens-box);
  pointer-events: none;
  opacity: 0;
  scale: var(--lens-s0, 0.143); /* свёрнутая: диаметр круга 22px при полном 154px */
  color: #f5ebd4;
  transition: opacity 0.2s ease, scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.photo-lens.is-on { opacity: 1; }
.photo-lens.is-zoomed { scale: 1; }

/* стекло, ободок и увеличенная картина (тело линзы) проявляются из размытия, пока круг растёт;
   в свёрнутом виде их нет — остаётся только тонкий контур. Размытие и прозрачность идут
   плавно, без резкого перехода из одного состояния в другое */
.photo-lens__body {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(14px);
  transition: opacity 0.5s ease, filter 0.6s ease;
}
.photo-lens.is-zoomed .photo-lens__body {
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.05s;
}

/* фильтруемый квадрат с запасом; видимый круг вырезается clip-path уже после фильтра */
.photo-lens__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: var(--lens-filter, url(#photoLensFisheye));
  clip-path: circle(calc(var(--lens-d) / 2) at 50% 50%);
}
.photo-lens__view img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  display: block;
  will-change: transform;
}

.photo-lens__glass,
.photo-lens__rim {
  position: absolute;
  left: calc((var(--lens-box) - var(--lens-d)) / 2);
  top: calc((var(--lens-box) - var(--lens-d)) / 2);
  width: var(--lens-d);
  height: var(--lens-d);
  border-radius: 50%;
}

/* стекло: основной блик сверху-слева, слабое отражение снизу-справа, каустика — свет
   собирается у дальнего от блика края; кромка с френелевским свечением, "толщина"
   стекла (затемнение внутри края), внешнее свечение и тень на картину */
.photo-lens__glass {
  background:
    radial-gradient(ellipse 46% 26% at 31% 21%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.16) 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 74% 82%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 36% 30%, rgba(255, 238, 208, 0) 58%, rgba(255, 238, 208, 0.3) 83%, rgba(255, 238, 208, 0) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 9px 1px rgba(255, 255, 255, 0.4),
    inset 0 0 22px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(255, 255, 255, 0.22),
    0 10px 26px rgba(0, 0, 0, 0.45);
}

/* призматический ободок: тонкое кольцо цветов спектра по самому краю (как дисперсия на
   гранях стекла) */
.photo-lens__rim {
  background: conic-gradient(from 200deg,
    rgba(255, 110, 110, 0.55), rgba(255, 214, 110, 0.55), rgba(120, 255, 190, 0.5),
    rgba(110, 170, 255, 0.55), rgba(214, 120, 255, 0.5), rgba(255, 110, 110, 0.55));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px), #000 calc(100% - 0.5px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px), #000 calc(100% - 0.5px), transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* значок лупы внутри линзы: круг r=11 из 40 — это и есть край линзы (диаметр D), плюс и
   ручка — внутри. Контур постоянной толщины (non-scaling-stroke), цвет бумаги */
.photo-lens__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--lens-icon);
  height: var(--lens-icon);
  margin: calc(var(--lens-icon) / -2) 0 0 calc(var(--lens-icon) / -2);
  overflow: visible;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 2px rgba(20, 12, 4, 0.7)) drop-shadow(0 1px 3px rgba(20, 12, 4, 0.5));
}
.photo-lens__icon-ring {
  vector-effect: non-scaling-stroke;
  transition: opacity 0.5s ease 0.1s;
}
/* контур растворяется, когда линза раскрыта (дальше его роль играет кромка стекла) */
.photo-lens.is-zoomed .photo-lens__icon-ring {
  opacity: 0;
}