/* ООО «Аверс» — общие интерактивные эффекты для всех страниц.
   Переменные (--mag-*, --rx, --ry, --mx, --my) выставляет js/main.js,
   и только на устройствах с мышью. На телефоне всё остаётся статичным. */

/* ---------- Магнитные кнопки ---------- */
.button,
.btn,
.site-nav a.button,
.nav a.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition:
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.8s cubic-bezier(0.2, 1.5, 0.35, 1);
}
.button.is-magnet,
.btn.is-magnet,
.site-nav a.button.is-magnet,
.nav a.btn.is-magnet {
  transition:
    background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.2s ease-out;
}
/* блик, который идёт за курсором по кнопке */
.button::after,
.btn::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(110px circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  content: "";
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.button-ghost::after,
.btn-line::after,
.btn-light::after {
  background: radial-gradient(110px circle at var(--bx, 50%) var(--by, 50%), rgba(226, 200, 150, 0.22), rgba(226, 200, 150, 0) 70%);
}
.button.is-magnet::after,
.btn.is-magnet::after { opacity: 1; }
/* стрелка и иконка смещаются сильнее самой кнопки — эффект глубины */
.button .arrow,
.button svg,
.btn svg {
  translate: var(--mag-ax, 0px) var(--mag-ay, 0px);
  transition: translate 0.8s cubic-bezier(0.2, 1.5, 0.35, 1), transform 0.3s ease;
}
.is-magnet .arrow,
.is-magnet svg { transition: translate 0.2s ease-out, transform 0.3s ease; }

/* ---------- 3D-карточки внутренних страниц ---------- */
.card,
.guarantee {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.6s ease;
}
.card.is-tilting,
.guarantee.is-tilting {
  border-color: rgba(200, 164, 106, 0.25);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9);
  transition: transform 0.16s ease-out, background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.6s ease;
}
.card::after,
.guarantee::after {
  background: radial-gradient(420px circle at var(--mx, 0%) var(--my, 0%), rgba(200, 164, 106, 0.14), transparent 60%) !important;
}
.card > *,
.guarantee > * { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.card.is-tilting > h3,
.guarantee.is-tilting > h3 { transform: translateZ(34px); }
.card.is-tilting > p,
.guarantee.is-tilting > p { transform: translateZ(18px); }

@media (prefers-reduced-motion: reduce) {
  .button, .btn, .card, .guarantee { translate: none; transform: none; }
}