/* Отклик на курсор. Всё держится на переменных, которые ставит pointer.js,
   поэтому без скрипта страница выглядит ровно так же, как раньше. */

/* обложка чуть поворачивается вслед за курсором */
.cover-stage,
.cover-arch,
.cover-sheet,
.cover-photo {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .35s var(--e-out);
  transform-style: preserve-3d;
}
html.is-opening .cover-stage,
html.is-opening .cover-arch,
html.is-opening .cover-sheet,
html.is-opening .cover-photo { transform: none; }

/* карточка под указателем: наклон и блик, который идёт за курсором */
.is-tiltable {
  transform: perspective(900px) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.is-tiltable::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--glow-x, 50%) var(--glow-y, 50%),
              rgba(255, 255, 255, .09), transparent 62%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.is-tiltable:hover::after { opacity: 1; }

/* мягкое пятно света за курсором — только на тёмной витрине */
.pointer-glow {
  position: fixed; top: 0; left: 0;
  width: 500px; height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s var(--e-out, ease);
  background: radial-gradient(circle,
              color-mix(in srgb, var(--s-gold, #C8A45C) 12%, transparent),
              transparent 65%);
}
.pointer-glow.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cover-stage, .cover-arch, .cover-sheet, .cover-photo,
  .is-tiltable { transform: none !important; transition: none !important; }
  .pointer-glow { display: none; }
}