/* ==========================================================================
   Монета Tegridy: лицо с эмблемой + металлическая рамка.
   Чёрного канта вокруг нет — только металл; фиолетовый — это блик, который
   медленно обходит рамку. Под большой монетой в герое — тень: монета
   поднимается, тень сжимается и бледнеет (как «Левитация» в мини-аппе).
   Всё движение — transform/opacity, считается видеокартой.
   ========================================================================== */

.coin {
  --d: 36px;
  /* Тонкая металлическая окантовка (владелец 2026-09-26: «толстую рамку убрать, лёгкую тонкую, как раньше») */
  --rim: max(1.25px, calc(var(--d) * 0.016));
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  /* Полированная сталь: светлые и тёмные грани по кругу */
  background: conic-gradient(from 205deg,
    #fbfbfe 0deg, #a9a9b6 38deg, #eeeef4 72deg, #6c6c79 118deg, #d2d2dc 160deg,
    #80808e 205deg, #ffffff 248deg, #8b8b99 296deg, #e2e2ea 332deg, #fbfbfe 360deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}

/* Объём металла: свет сверху, тень снизу */
.coin::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.65), transparent 55%),
    radial-gradient(120% 70% at 50% 100%, rgba(20, 16, 40, 0.45), transparent 60%);
  z-index: 1;
}

/* Фиолетовый блик на металле — медленно обходит рамку */
.coin::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 170deg,
    rgba(120, 70, 255, 0.35) 205deg, rgba(150, 95, 255, 0.95) 240deg,
    rgba(200, 170, 255, 1) 254deg, rgba(130, 80, 255, 0.9) 270deg,
    rgba(110, 60, 240, 0.3) 305deg, transparent 335deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) - 0.5px), #000 calc(100% - var(--rim) + 0.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - var(--rim) - 0.5px), #000 calc(100% - var(--rim) + 0.5px));
  mix-blend-mode: hard-light; /* окрашивает металл, а не просто высветляет */
  z-index: 2;
  animation: coin-sheen 9s linear infinite;
}

@keyframes coin-sheen { to { transform: rotate(360deg); } }

/* Лицо монеты утоплено в рамку */
.coin > img {
  position: absolute;
  inset: var(--rim);
  z-index: 3;
  width: calc(100% - 2 * var(--rim));
  height: calc(100% - 2 * var(--rim));
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 0.5px rgba(10, 6, 24, 0.9), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.coin-sm { --d: 36px; }
.coin-xs { --d: 32px; }

/* --- Большая монета в герое: парит, под ней дышит тень --------------------- */

.hero-coin {
  display: grid;
  justify-items: center;
  margin-bottom: var(--s-3);
}

.hero-coin .coin {
  /* Главный логотип крупнее, металлическая рамка тоньше (владелец 2026-10-02) */
  --d: clamp(184px, 19vw, 288px);
  --rim: max(1.25px, calc(var(--d) * 0.0105));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 40px -10px rgba(109, 61, 255, 0.55);
}

.coin-shadow {
  width: 72%;
  height: 20px;
  margin-top: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 2, 12, 0.95), rgba(4, 2, 12, 0.5) 55%, transparent);
  filter: blur(4px);
  opacity: 0.9;
}

:root[data-theme='light'] .coin-shadow { background: radial-gradient(closest-side, rgba(43, 20, 110, 0.4), transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .coin-shadow { background: radial-gradient(closest-side, rgba(43, 20, 110, 0.4), transparent); }
}

:root.has-js .hero-coin { animation: mark-settle 1.1s var(--ease) both; }
:root.has-js .hero-coin .coin { animation: coin-float 6s ease-in-out 1.1s infinite; }
:root.has-js .coin-shadow { animation: coin-shadow 6s ease-in-out 1.1s infinite; }

@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes coin-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.95; }
  50% { transform: scaleX(0.62); opacity: 0.4; }
}

/* Короткий экран (телефон, ноутбук 720): монета 120-184 px по высоте окна, главное действие остаётся в первом экране.
   Раньше правило работало только от 700 px ширины и на телефонах не действовало. */
@media (max-height: 760px) {
  .hero-coin .coin { --d: clamp(120px, 24vh, 184px); }
  @supports (height: 1svh) { .hero-coin .coin { --d: clamp(120px, 24svh, 184px); } }
}

/* Монета парит и бликует, пока она на экране (depth.js ставит .is-paused, когда герой ушёл вверх) */
.hero-coin.is-paused .coin,
.hero-coin.is-paused .coin::after,
.hero-coin.is-paused .coin-shadow { animation-play-state: paused; }

/* Блик по рамке — только у монеты в герое; во втором месте (экосистема) монета спокойна */
.coin.eco-coin::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .coin::after,
  :root.has-js .hero-coin,
  :root.has-js .hero-coin .coin,
  :root.has-js .coin-shadow { animation: none; }
}