/* ==========================================================================
   Аритин.Медицина — фоновая анимация «3D-монеты»
   Объёмные монеты (медкарта, медицина, пульс) катаются по горизонтали
   по мере прокрутки страницы. Разметка — partials/head.php (.coin-layer),
   логика — assets/js/coin-roll.js.
   ========================================================================== */

/* ---------- Слой монет (fixed, под контентом) ---------- */
.coin-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Монета целиком: даёт перспективу и мягкую «тень» на фоне.
   Тень живёт на обёртке, поэтому НЕ вращается вместе с монетой. */
.coin-wrap {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  will-change: transform, opacity;
}

.coin-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 99%;
  width: 72%;
  height: 16%;
  transform: translate(-50%, -30%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(2, 12, 27, .34), transparent 70%);
  filter: blur(9px);
  opacity: var(--shadow, 1);
  pointer-events: none;
}

html[data-theme="dark"] .coin-wrap::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .75), transparent 70%);
}

/* ---------- Тело монеты ---------- */
.coin {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Всё, что «тускнеет» при низкой яркости фона: заливка, рисунок и ребро.
   Белая окантовка (.coin__ring) лежит ВНЕ этой группы и всегда остаётся чёткой. */
.coin__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: var(--dim, 1);
}

/* Белая окантовка: тонкие круги по переднему и заднему краю монеты */
.coin__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .95);
  box-sizing: border-box;
  pointer-events: none;
}

html[data-theme="dark"] .coin__ring {
  border-color: rgba(255, 255, 255, .85);
}

/* ---------- Лицевая / обратная сторона ---------- */
.coin__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Блик и лёгкая тень по заливке (под рисунком, чтобы логотип оставался чистым) */
.coin__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 50%),
    radial-gradient(130% 130% at 76% 88%, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0) 62%);
  pointer-events: none;
}

.coin__img {
  position: relative;
  z-index: 1;
  width: 94%;
  height: 94%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .22));
}

.coin__img--mirror { transform: scaleX(-1); }

/* ---------- Ребро монеты ----------
   Цилиндрическая поверхность из множества тонких полосок, поставленных
   по окружности: rotateZ(φ) → translateX(R) → rotateY(90deg).
   Полоски идут внахлёст, поэтому швов не видно — читается как гладкая дуга. */
.coin__seg {
  position: absolute;
  transform-origin: 50% 50%;
  backface-visibility: visible;
  will-change: transform;
}

/* ---------- Доступность / экономия ресурсов ----------
   При системном «уменьшить движение» слой монет не создаётся вовсе
   (см. assets/js/coin-roll.js), а на всякий случай прячем и здесь. */
@media (prefers-reduced-motion: reduce) {
  .coin-layer { display: none; }
}