/* =============================================================================
   product-hint.css — разовая подсказка по галерее в карточке товара.
   Логика и тексты — js/product-hint.js.

   Два шага:
     1) на странице, поверх главного фото: как открыть его на весь экран;
     2) в полноэкранном просмотре, при первом открытии: как приблизить,
        листать и закрыть.

   Три варианта под устройство (класс на слое):
     .is-phone  — палец: рука на тап, точки касания на жесты;
     .is-tablet — те же жесты, но крупнее и с упоминанием стрелок;
     .is-pc     — мышь: курсор, клик, перетаскивание и клавиши.

   Правила движения — те же, что у подсказки каталога: анимируются только
   transform и opacity; каждая фаза начинается и заканчивается на погасшей
   точке, чтобы ничего не «телепортировалось»; подписи сменяют друг друга
   с запасом по времени; при «уменьшить движение» остаётся статичный кадр.
   ============================================================================= */

.phint {
  --ph-ease: cubic-bezier(.22, .61, .36, 1);
  --ph-move: cubic-bezier(.45, 0, .25, 1);
  --ph-delay: .45s;
  --ph-dur: 5.4s;
  --ph-hand: clamp(34px, 12vw, 48px);
  --ph-dot: 30px;
  --ph-ring: clamp(30px, 10vw, 42px);
  --ph-cur: 26px;

  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .6s var(--ph-ease);
}
.phint.in { opacity: 1; }
.phint.out { opacity: 0; transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.phint.out * { animation-play-state: paused; }

/* Фото на странице светлое — нужно лёгкое затемнение, чтобы белое читалось.
   В полноэкранном просмотре фон и так тёмный, затемнять нечего. */
.phint--page { background: radial-gradient(120% 90% at 50% 46%, rgba(18, 14, 11, .36), rgba(18, 14, 11, .10) 72%); }
.phint--lb { background: radial-gradient(90% 70% at 50% 50%, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 70%); }

.is-tablet { --ph-hand: 58px; --ph-dot: 40px; --ph-ring: 50px; }
.is-pc { --ph-cur: 28px; --ph-ring: 44px; }

/* Все фигуры встают центром в центр слоя, дальше двигаются transform'ом. */
.phint__hand, .phint__dot, .phint__ring, .phint__cur, .phint__zbox {
  position: absolute; left: 50%; top: 50%; opacity: 0; display: block;
}

/* ── подпись ───────────────────────────────────────────────────── */
/* Центрирование через left/right + auto, а не left:50%: иначе браузер отдаёт
   плашке только правую половину фото, и подпись рвётся на строки без нужды. */
.phint__bar {
  position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content;
  bottom: clamp(10px, 2.6vw, 16px);
  max-width: calc(100% - 24px);
  display: grid; place-items: center;
  padding: clamp(8px, 2.2vw, 11px) clamp(14px, 4vw, 20px);
  border-radius: 14px;
  background: rgba(20, 16, 13, .68);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease .15s, transform .6s cubic-bezier(.2, .9, .2, 1) .15s;
}
/* На странице внизу слева стоит счётчик «1 / 9» — подпись уходит наверх. */
.phint--page .phint__bar { top: clamp(10px, 2.6vw, 14px); bottom: auto; transform: translateY(-10px); }
.phint.in .phint__bar {
  opacity: 1; transform: none;
  animation: phBarOut var(--ph-dur) ease-in-out var(--ph-delay) 1 both;
}
.phint.out .phint__bar { opacity: 0; transition: opacity .45s ease; }
@keyframes phBarOut {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
.phint__bar span {
  grid-area: 1 / 1; opacity: 0;
  font: 700 clamp(12px, 3.2vw, 14px)/1.32 inherit;
  text-wrap: balance; max-width: min(34ch, 100%);
}
.is-tablet .phint__bar span { font-size: 15.5px; }
.is-pc .phint__bar span { font-size: 14.5px; font-weight: 600; max-width: 40ch; }

/* две подписи */
.phint--c2.in .phint__bar span:nth-child(1) { animation: phCap2a var(--ph-dur) ease-in-out var(--ph-delay) 1 both; }
.phint--c2.in .phint__bar span:nth-child(2) { animation: phCap2b var(--ph-dur) ease-in-out var(--ph-delay) 1 both; }
@keyframes phCap2a { 0%, 42% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes phCap2b { 0%, 46% { opacity: 0; } 52%, 86% { opacity: 1; } 93%, 100% { opacity: 0; } }
/* три подписи */
.phint--c3.in .phint__bar span:nth-child(1) { animation: phCap3a var(--ph-dur) ease-in-out var(--ph-delay) 1 both; }
.phint--c3.in .phint__bar span:nth-child(2) { animation: phCap3b var(--ph-dur) ease-in-out var(--ph-delay) 1 both; }
.phint--c3.in .phint__bar span:nth-child(3) { animation: phCap3c var(--ph-dur) ease-in-out var(--ph-delay) 1 both; }
@keyframes phCap3a { 0%, 29% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes phCap3b { 0%, 33% { opacity: 0; } 38%, 60% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes phCap3c { 0%, 64% { opacity: 0; } 69%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ── общие фигуры ──────────────────────────────────────────────── */
/* Точка нажатия — кончик указательного пальца на иконке (≈40% слева, 15% сверху),
   а не центр картинки: сдвигаем руку так, чтобы палец попал ровно в цель,
   и нажимаем «от пальца». */
.phint__hand {
  width: var(--ph-hand); height: var(--ph-hand);
  margin: calc(var(--ph-hand) * -.146) 0 0 calc(var(--ph-hand) * -.396);
  transform-origin: 39.6% 14.6%;
}
.phint__hand svg, .phint__cur svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }

.phint__ring {
  width: var(--ph-ring); height: var(--ph-ring);
  margin: calc(var(--ph-ring) / -2) 0 0 calc(var(--ph-ring) / -2);
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9);
}

/* Точка касания: как рисуют жесты в руководствах — светлый круг со свечением. */
.phint__dot {
  width: var(--ph-dot); height: var(--ph-dot);
  margin: calc(var(--ph-dot) / -2) 0 0 calc(var(--ph-dot) / -2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .34);
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .45);
}

/* След за движением: растёт вслед за точкой и гаснет. */
.phint__trail { position: absolute; left: 50%; top: 50%; opacity: 0; border-radius: 3px; }
.phint__trail--h {
  width: calc(2 * var(--sw)); height: 3px; margin: -1.5px 0 0 calc(-1 * var(--sw));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, 0));
  transform-origin: right center;
}
.phint__trail--v {
  width: 3px; height: calc(2 * var(--sd)); margin: calc(-1 * var(--sd)) 0 0 -1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 60%, rgba(255, 255, 255, 0));
  transform-origin: center top;
}

/* Уголки «на весь экран»: сходятся из центра к краям фото — видно,
   что после нажатия фото развернётся. */
.phint__corner {
  position: absolute; width: 22px; height: 22px; opacity: 0;
  border: 0 solid rgba(255, 255, 255, .92);
}
.phint__corner--tl { left: 14px; top: 14px; border-width: 2.5px 0 0 2.5px; border-top-left-radius: 6px; --sx: 1; --sy: 1; }
.phint__corner--tr { right: 14px; top: 14px; border-width: 2.5px 2.5px 0 0; border-top-right-radius: 6px; --sx: -1; --sy: 1; }
.phint__corner--bl { left: 14px; bottom: 14px; border-width: 0 0 2.5px 2.5px; border-bottom-left-radius: 6px; --sx: 1; --sy: -1; }
.phint__corner--br { right: 14px; bottom: 14px; border-width: 0 2.5px 2.5px 0; border-bottom-right-radius: 6px; --sx: -1; --sy: -1; }

/* =============================================================================
   ШАГ 1 · НА СТРАНИЦЕ · палец (телефон и планшет) — 5,4 с
   рука в центре → нажатие → кольцо → уголки расходятся к краям
   ============================================================================= */
.phint--tap.in .phint__hand { animation: phHandTap var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phHandTap {
  0%   { opacity: 0; transform: scale(.9); }
  8%   { opacity: 1; transform: scale(1); }
  28%  { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  34%  { opacity: 1; transform: scale(.82); }
  40%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1); }
  68%, 100% { opacity: 0; transform: scale(.94); }
}
.phint--tap.in .phint__ring { animation: phRingTap var(--ph-dur) cubic-bezier(.2, .7, .3, 1) var(--ph-delay) 1 both; }
@keyframes phRingTap {
  0%, 32% { opacity: 0; transform: scale(.7); }
  38%     { opacity: .85; transform: scale(.9); }
  54%, 100% { opacity: 0; transform: scale(1.9); }
}
.phint--tap.in .phint__corner { animation: phCorner var(--ph-dur) cubic-bezier(.2, .8, .2, 1) var(--ph-delay) 1 both; }
@keyframes phCorner {
  0%, 38% { opacity: 0; transform: translate(calc(var(--sx) * var(--cx)), calc(var(--sy) * var(--cy))); }
  44%     { opacity: .9; }
  62%     { opacity: .9; transform: translate(0, 0); }
  74%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* =============================================================================
   ШАГ 1 · НА СТРАНИЦЕ · мышь — 6,6 с
   курсор въезжает → становится лупой → клик по фото → уголки;
   затем курсор едет к стрелке «вперёд» и кликает её.
   ============================================================================= */
/* Курсор стоит «горячей точкой» в цели: у стрелки это остриё (левый верх),
   у лупы и руки — центр, поэтому их иконки сдвинуты на половину размера. */
.phint__cur { width: var(--ph-cur); height: var(--ph-cur); transform-origin: 0 0; }
.phint__cur .ic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.phint__cur .ic--zoom, .phint__cur .ic--open, .phint__cur .ic--grab { left: -50%; top: -50%; }
.phint__cur .ic--arrow { opacity: 1; }
.phint__cur--z .ic--zoom { opacity: 1; }
.phint__cur--g .ic--open { opacity: 1; }

/* Слой подсказки лежит под стрелками галереи — чтобы затемнение их не
   гасило. Но курсор и кольцо клика должны быть НАД стрелкой, иначе, доехав
   до неё, курсор нырял под кнопку. Пока слой непрозрачен, он не создаёт
   своего контекста наложения, и z-index поднимает эти фигуры над кнопками. */
.phint--click .phint__cur, .phint--click .phint__ring--n { z-index: 3; }

.phint--click.in .phint__cur--page { animation: phCurPage var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phCurPage {
  0%   { opacity: 0; transform: translate(var(--c0x), var(--c0y)) scale(1); }
  5%   { opacity: 1; transform: translate(var(--c0x), var(--c0y)) scale(1); animation-timing-function: var(--ph-move); }
  22%  { opacity: 1; transform: translate(0, 0) scale(1); }
  28%  { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  31%  { opacity: 1; transform: translate(0, 0) scale(.86); }
  34%  { opacity: 1; transform: translate(0, 0) scale(1); }
  46%  { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: var(--ph-move); }
  60%  { opacity: 1; transform: translate(var(--nx), var(--ny)) scale(1); }
  64%  { opacity: 1; transform: translate(var(--nx), var(--ny)) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  67%  { opacity: 1; transform: translate(var(--nx), var(--ny)) scale(.86); }
  70%  { opacity: 1; transform: translate(var(--nx), var(--ny)) scale(1); }
  80%  { opacity: 1; transform: translate(var(--nx), var(--ny)) scale(1); }
  86%, 100% { opacity: 0; transform: translate(var(--nx), var(--ny)) scale(.94); }
}
/* Над фото курсор превращается в лупу — ровно как настоящий на сайте. */
.phint--click.in .phint__cur--page .ic--arrow { animation: phIcArrow var(--ph-dur) linear var(--ph-delay) 1 both; }
.phint--click.in .phint__cur--page .ic--zoom  { animation: phIcZoom  var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phIcArrow { 0%, 21% { opacity: 1; } 24%, 42% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes phIcZoom  { 0%, 21% { opacity: 0; } 24%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }

.phint--click.in .phint__ring--c { animation: phRingC var(--ph-dur) cubic-bezier(.2, .7, .3, 1) var(--ph-delay) 1 both; }
@keyframes phRingC {
  0%, 29% { opacity: 0; transform: scale(.7); }
  33%     { opacity: .85; transform: scale(.9); }
  46%, 100% { opacity: 0; transform: scale(1.9); }
}
.phint--click.in .phint__ring--n { animation: phRingN var(--ph-dur) cubic-bezier(.2, .7, .3, 1) var(--ph-delay) 1 both; }
@keyframes phRingN {
  0%, 65% { opacity: 0; transform: translate(var(--nx), var(--ny)) scale(.7); }
  69%     { opacity: .85; transform: translate(var(--nx), var(--ny)) scale(.9); }
  80%, 100% { opacity: 0; transform: translate(var(--nx), var(--ny)) scale(1.9); }
}
.phint--click.in .phint__corner { animation: phCornerPc var(--ph-dur) cubic-bezier(.2, .8, .2, 1) var(--ph-delay) 1 both; }
@keyframes phCornerPc {
  0%, 33% { opacity: 0; transform: translate(calc(var(--sx) * var(--cx)), calc(var(--sy) * var(--cy))); }
  38%     { opacity: .9; }
  50%     { opacity: .9; transform: translate(0, 0); }
  58%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* Одно фото — стрелок нет: курсор только открывает фото, подписи те же две. */
.phint--click.is-single.in .phint__cur--page { animation-name: phCurSingle; }
.phint--click.is-single.in .phint__cur--page .ic--arrow { animation-name: phIcArrowS; }
.phint--click.is-single.in .phint__cur--page .ic--zoom  { animation-name: phIcZoomS; }
.phint--click.is-single.in .phint__ring--c { animation-name: phRingTap; }
.phint--click.is-single .phint__ring--n { display: none; }
.phint--click.is-single.in .phint__corner { animation-name: phCorner; }
@keyframes phCurSingle {
  0%   { opacity: 0; transform: translate(var(--c0x), var(--c0y)) scale(1); }
  6%   { opacity: 1; transform: translate(var(--c0x), var(--c0y)) scale(1); animation-timing-function: var(--ph-move); }
  26%  { opacity: 1; transform: translate(0, 0) scale(1); }
  32%  { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  35%  { opacity: 1; transform: translate(0, 0) scale(.86); }
  38%  { opacity: 1; transform: translate(0, 0) scale(1); }
  62%  { opacity: 1; transform: translate(0, 0) scale(1); }
  70%, 100% { opacity: 0; transform: translate(0, 0) scale(.94); }
}
@keyframes phIcArrowS { 0%, 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes phIcZoomS  { 0%, 25% { opacity: 0; } 28%, 100% { opacity: 1; } }

/* =============================================================================
   ШАГ 2 · ВО ВЕСЬ ЭКРАН · палец (телефон и планшет) — 9,8 с
   1) две точки расходятся — приблизить;
   2) точка уходит влево со следом — листать
      (одно фото: двойное нажатие — тоже приблизить);
   3) точка уходит вниз со следом — закрыть.
   ============================================================================= */
.phint--gest { --ph-dur: 9.8s; }

.phint--gest.in .phint__dot--a { animation: phPinchA var(--ph-dur) linear var(--ph-delay) 1 both; }
.phint--gest.in .phint__dot--b { animation: phPinchB var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phPinchA {
  0%   { opacity: 0; transform: translate(calc(-1 * var(--p0)), calc(-1 * var(--p0))) scale(.9); }
  4%   { opacity: 1; transform: translate(calc(-1 * var(--p0)), calc(-1 * var(--p0))) scale(1); }
  8%   { opacity: 1; transform: translate(calc(-1 * var(--p0)), calc(-1 * var(--p0))) scale(1); animation-timing-function: var(--ph-move); }
  22%  { opacity: 1; transform: translate(calc(-1 * var(--p1)), calc(-1 * var(--p1))) scale(1); }
  25%  { opacity: 1; transform: translate(calc(-1 * var(--p1)), calc(-1 * var(--p1))) scale(1); }
  29%, 100% { opacity: 0; transform: translate(calc(-1 * var(--p1)), calc(-1 * var(--p1))) scale(.92); }
}
@keyframes phPinchB {
  0%   { opacity: 0; transform: translate(var(--p0), var(--p0)) scale(.9); }
  4%   { opacity: 1; transform: translate(var(--p0), var(--p0)) scale(1); }
  8%   { opacity: 1; transform: translate(var(--p0), var(--p0)) scale(1); animation-timing-function: var(--ph-move); }
  22%  { opacity: 1; transform: translate(var(--p1), var(--p1)) scale(1); }
  25%  { opacity: 1; transform: translate(var(--p1), var(--p1)) scale(1); }
  29%, 100% { opacity: 0; transform: translate(var(--p1), var(--p1)) scale(.92); }
}

.phint--gest.in .phint__dot--s { animation: phSwipe var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phSwipe {
  0%, 32% { opacity: 0; transform: translate(var(--sw), 0) scale(.9); }
  36%  { opacity: 1; transform: translate(var(--sw), 0) scale(1); }
  39%  { opacity: 1; transform: translate(var(--sw), 0) scale(1); animation-timing-function: var(--ph-move); }
  54%  { opacity: 1; transform: translate(calc(-1 * var(--sw)), 0) scale(1); }
  57%  { opacity: 1; transform: translate(calc(-1 * var(--sw)), 0) scale(1); }
  61%, 100% { opacity: 0; transform: translate(calc(-1 * var(--sw)), 0) scale(.92); }
}
.phint--gest.in .phint__trail--h { animation: phTrailH var(--ph-dur) var(--ph-move) var(--ph-delay) 1 both; }
@keyframes phTrailH {
  0%, 38% { opacity: 0; transform: scaleX(0); }
  41%     { opacity: .7; transform: scaleX(.15); }
  54%     { opacity: .7; transform: scaleX(1); }
  60%, 100% { opacity: 0; transform: scaleX(1); }
}

/* одно фото: вместо свайпа — двойное нажатие */
.phint--gest .phint__dot--t, .phint--gest .phint__ring--t { display: none; }
.phint--gest.is-single .phint__dot--s, .phint--gest.is-single .phint__trail--h { display: none; }
.phint--gest.is-single .phint__dot--t, .phint--gest.is-single .phint__ring--t { display: block; }
.phint--gest.is-single.in .phint__dot--t { animation: phDTap var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phDTap {
  0%, 32% { opacity: 0; transform: scale(.9); }
  36%  { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  40%  { opacity: 1; transform: scale(.8); }
  43%  { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  46%  { opacity: 1; transform: scale(.8); }
  49%  { opacity: 1; transform: scale(1); }
  57%  { opacity: 1; transform: scale(1); }
  61%, 100% { opacity: 0; transform: scale(.92); }
}
.phint--gest.is-single.in .phint__ring--t { animation: phDRing var(--ph-dur) cubic-bezier(.2, .7, .3, 1) var(--ph-delay) 1 both; }
@keyframes phDRing {
  0%, 39% { opacity: 0; transform: scale(.7); }
  41%     { opacity: .8; transform: scale(.9); }
  45%     { opacity: 0; transform: scale(1.6); }
  46%     { opacity: .8; transform: scale(.9); }
  55%, 100% { opacity: 0; transform: scale(1.9); }
}

.phint--gest.in .phint__dot--d { animation: phDown var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phDown {
  0%, 64% { opacity: 0; transform: translate(0, calc(-1 * var(--sd))) scale(.9); }
  68%  { opacity: 1; transform: translate(0, calc(-1 * var(--sd))) scale(1); }
  71%  { opacity: 1; transform: translate(0, calc(-1 * var(--sd))) scale(1); animation-timing-function: var(--ph-move); }
  85%  { opacity: 1; transform: translate(0, var(--sd)) scale(1); }
  88%  { opacity: 1; transform: translate(0, var(--sd)) scale(1); }
  92%, 100% { opacity: 0; transform: translate(0, var(--sd)) scale(.92); }
}
.phint--gest.in .phint__trail--v { animation: phTrailV var(--ph-dur) var(--ph-move) var(--ph-delay) 1 both; }
@keyframes phTrailV {
  0%, 70% { opacity: 0; transform: scaleY(0); }
  73%     { opacity: .7; transform: scaleY(.15); }
  85%     { opacity: .7; transform: scaleY(1); }
  91%, 100% { opacity: 0; transform: scaleY(1); }
}

/* =============================================================================
   ШАГ 2 · ВО ВЕСЬ ЭКРАН · мышь — 9,8 с
   1) лупа кликает — вокруг точки раскрывается рамка приближения;
   2) рука хватает и тянет — сдвиг увеличенного фото;
   3) клавиши ← → и Esc нажимаются по очереди.
   ============================================================================= */
.phint--mouse { --ph-dur: 9.8s; }

.phint--mouse.in .phint__cur--z { animation: phCurZ var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phCurZ {
  0%   { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(.94); }
  4%   { opacity: 1; transform: translate(var(--z0x), var(--z0y)) scale(1); }
  10%  { opacity: 1; transform: translate(var(--z0x), var(--z0y)) scale(1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  13%  { opacity: 1; transform: translate(var(--z0x), var(--z0y)) scale(.86); }
  16%  { opacity: 1; transform: translate(var(--z0x), var(--z0y)) scale(1); }
  25%  { opacity: 1; transform: translate(var(--z0x), var(--z0y)) scale(1); }
  29%, 100% { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(.94); }
}
.phint--mouse.in .phint__ring--z { animation: phRingZ var(--ph-dur) cubic-bezier(.2, .7, .3, 1) var(--ph-delay) 1 both; }
@keyframes phRingZ {
  0%, 11% { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(.7); }
  15%     { opacity: .85; transform: translate(var(--z0x), var(--z0y)) scale(.9); }
  26%, 100% { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(1.9); }
}
/* Рамка приближения раскрывается из точки клика — видно, что именно
   это место станет крупнее. */
.phint__zbox {
  width: var(--zb); height: calc(var(--zb) * .68);
  margin: calc(var(--zb) * -.34) 0 0 calc(var(--zb) / -2);
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .18);
}
.phint--mouse.in .phint__zbox { animation: phZBox var(--ph-dur) cubic-bezier(.2, .8, .2, 1) var(--ph-delay) 1 both; }
@keyframes phZBox {
  0%, 13% { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(.35); }
  17%     { opacity: .95; transform: translate(var(--z0x), var(--z0y)) scale(.55); }
  26%     { opacity: .8; transform: translate(var(--z0x), var(--z0y)) scale(1); }
  31%, 100% { opacity: 0; transform: translate(var(--z0x), var(--z0y)) scale(1.04); }
}

/* рука: раскрытая → сжатая, пока тянет → снова раскрытая */
.phint--mouse.in .phint__cur--g { animation: phCurG var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phCurG {
  0%, 33% { opacity: 0; transform: translate(var(--g), var(--g)) scale(.94); }
  37%  { opacity: 1; transform: translate(var(--g), var(--g)) scale(1); }
  40%  { opacity: 1; transform: translate(var(--g), var(--g)) scale(1); animation-timing-function: var(--ph-move); }
  56%  { opacity: 1; transform: translate(calc(-1 * var(--g)), calc(-1 * var(--g))) scale(1); }
  59%  { opacity: 1; transform: translate(calc(-1 * var(--g)), calc(-1 * var(--g))) scale(1); }
  62%, 100% { opacity: 0; transform: translate(calc(-1 * var(--g)), calc(-1 * var(--g))) scale(.94); }
}
.phint--mouse.in .phint__cur--g .ic--open { animation: phIcOpen var(--ph-dur) linear var(--ph-delay) 1 both; }
.phint--mouse.in .phint__cur--g .ic--grab { animation: phIcGrab var(--ph-dur) linear var(--ph-delay) 1 both; }
@keyframes phIcOpen { 0%, 38% { opacity: 1; } 40%, 56% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes phIcGrab { 0%, 38% { opacity: 0; } 40%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }

/* клавиши */
.phint__keys {
  position: absolute; left: 50%; top: 50%;
  display: flex; gap: 10px; opacity: 0;
  transform: translate(-50%, -50%) translateY(8px);
}
.phint--mouse.in .phint__keys { animation: phKeys var(--ph-dur) cubic-bezier(.2, .8, .2, 1) var(--ph-delay) 1 both; }
@keyframes phKeys {
  0%, 64% { opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
  68%     { opacity: 1; transform: translate(-50%, -50%); }
  88%     { opacity: 1; transform: translate(-50%, -50%); }
  93%, 100% { opacity: 0; transform: translate(-50%, -50%) translateY(4px); }
}
.phint__key {
  min-width: 48px; height: 46px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-bottom-width: 4px;
  color: #fff; font: 700 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.phint--mouse.in .phint__key--l { animation: phKeyL var(--ph-dur) ease-out var(--ph-delay) 1 both; }
.phint--mouse.in .phint__key--r { animation: phKeyR var(--ph-dur) ease-out var(--ph-delay) 1 both; }
.phint--mouse.in .phint__key--e { animation: phKeyE var(--ph-dur) ease-out var(--ph-delay) 1 both; }
@keyframes phKeyL { 0%, 70% { transform: none; } 72% { transform: translateY(3px) scale(.94); } 75%, 100% { transform: none; } }
@keyframes phKeyR { 0%, 76% { transform: none; } 78% { transform: translateY(3px) scale(.94); } 81%, 100% { transform: none; } }
@keyframes phKeyE { 0%, 82% { transform: none; } 84% { transform: translateY(3px) scale(.94); } 87%, 100% { transform: none; } }
/* одно фото: листать нечего — остаётся только Esc */
.phint--mouse.is-single .phint__key--l, .phint--mouse.is-single .phint__key--r { display: none; }

/* Пока идёт подсказка, статичная строка внизу полноэкранного просмотра
   дублировала бы её — прячем. */
.pc-lb.has-phint .pc-lb__hint { opacity: 0; transition: opacity .3s ease; }

/* ?hint=force — показ по кругу, чтобы проверить подсказку на любом устройстве. */
.phint.is-demo.in *, .phint.is-demo.in .phint__bar span { animation-iteration-count: infinite !important; }

/* =============================================================================
   «Уменьшить движение»: жесты не проигрываются, остаётся один ясный кадр —
   фигура на месте и первая подпись.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .phint.in *, .phint.in .phint__bar span { animation: none !important; }
  .phint.in .phint__bar { opacity: 1; }
  .phint.in .phint__bar span:nth-child(1) { opacity: 1; }
  .phint--tap.in .phint__hand,
  .phint--click.in .phint__cur--page,
  .phint--gest.in .phint__dot--a,
  .phint--gest.in .phint__dot--b,
  .phint--mouse.in .phint__cur--z { opacity: 1; }
  .phint--gest.in .phint__dot--a { transform: translate(calc(-1 * var(--p1)), calc(-1 * var(--p1))); }
  .phint--gest.in .phint__dot--b { transform: translate(var(--p1), var(--p1)); }
  .phint--mouse.in .phint__cur--z { transform: translate(var(--z0x), var(--z0y)); }
  .phint--click.in .phint__cur--page .ic--arrow { opacity: 0; }
  .phint--click.in .phint__cur--page .ic--zoom { opacity: 1; }
}