/* =========================================================
   AstryxClient — 3D-подача каталога оплаты (только oplata3d.php)
   Фон со сферами, наклонная плоскость плиток, разбор по глубине.
   ========================================================= */

.catalog-shell { position: relative; }

/* фон со сферами и свечением — под контентом */
.oplata3d-bg {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -12vh;
  width: 100vw;
  height: calc(100% + 26vh);
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
}

.catalog-shell > *:not(.oplata3d-bg) { position: relative; z-index: 1; }

/* Плитки лежат наклонной плоскостью: смотрим на каталог чуть справа сверху.
   Перспектива задаётся у самой плитки, а не у контейнера: связка
   perspective + preserve-3d на родителе ломает попадание кликов по ссылкам. */
.oplata3d-tiles {
  --tiltX: 8deg;
  --tiltY: -11deg;
}

.oplata3d-tiles .store-tile {
  transform:
    perspective(1500px)
    rotateX(var(--tiltX))
    rotateY(var(--tiltY))
    translate3d(0, var(--tileY, 0px), var(--tileZ, 0px))
    scale(var(--tileS, 1));
  opacity: var(--tileO, 1);
  transition: transform .55s cubic-bezier(.22, .8, .28, 1), opacity .45s ease, box-shadow .3s ease;
  will-change: transform, opacity;
}

/* при наведении плитка выходит вперёд и выравнивается к зрителю */
.oplata3d-tiles .store-tile:hover,
.oplata3d-tiles .store-tile:focus-visible {
  --tileZ: 70px;
  --tileS: 1.03;
  transform:
    perspective(1500px)
    rotateX(calc(var(--tiltX) * .25))
    rotateY(calc(var(--tiltY) * .25))
    translate3d(0, var(--tileY, 0px), var(--tileZ))
    scale(var(--tileS));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
}

/* заголовок каталога слегка приподнят над плоскостью */
.catalog-shell .store-intro {
  transform: translate3d(0, var(--introY, 0px), 0);
  opacity: var(--introO, 1);
}

/* ---------- телефоны и слабые устройства ---------- */
@media (max-width: 820px) {
  .oplata3d-tiles { --tiltX: 4deg; --tiltY: -5deg; }
  .oplata3d-bg { opacity: .4; }
}

html[data-fx-quality="low"] .oplata3d-bg { display: none; }

html[data-fx-quality="low"] .oplata3d-tiles { --tiltX: 0deg; --tiltY: 0deg; }

html[data-fx-quality="low"] .oplata3d-tiles .store-tile {
  transform: none !important;
  opacity: 1 !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .oplata3d-bg { display: none; }
  .oplata3d-tiles { --tiltX: 0deg; --tiltY: 0deg; }
  .oplata3d-tiles .store-tile {
    transform: none !important;
    opacity: 1 !important;
    transition: none;
  }
}