/* Золотая монета Vibe — объёмный элемент экрана входа.
   Разметку внутри #coin-mount строит coin.js.
   Все размеры — в долях контейнера, поэтому монета сама подстраивается
   под площадку, которую задаёт экран входа.
   Анимируются только transform и opacity (композитинг на GPU). */

#coin-mount {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.coin {
  position: relative;
  flex: 0 0 auto;
  width: min(100%, var(--coin-max, 240px));
  min-width: 132px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.coin.is-ready {
  opacity: 1;
  transform: none;
}

/* ── тёплое свечение вокруг монеты ─────────────────────────── */
.coin__halo {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 152%;
  height: 152%;
  margin: -76% 0 0 -76%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(255, 198, 88, 0.34) 0%,
      rgba(255, 172, 62, 0.19) 36%,
      rgba(255, 150, 40, 0.07) 58%,
      rgba(255, 140, 30, 0) 76%);
  animation: coin-halo 7.5s ease-in-out infinite;
}

/* ── контактная тень ───────────────────────────────────────── */
.coin__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 66%;
  height: 9%;
  margin-left: -33%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(28, 12, 0, 0.62) 0%,
      rgba(28, 12, 0, 0.34) 42%,
      rgba(28, 12, 0, 0.10) 68%,
      rgba(28, 12, 0, 0) 100%);
  animation: coin-shadow 5.6s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ── сцена: сам диск занимает верхние 90% площадки ─────────── */
.coin__stage {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 0;
  height: 90%;
  perspective: 900px;
  perspective-origin: 50% 44%;
  cursor: pointer;
}

.coin__float,
.coin__wobble,
.coin__flip,
.coin__enter {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.coin__float {
  animation: coin-float 5.6s ease-in-out infinite;
  will-change: transform;
}

.coin__wobble {
  animation: coin-wobble 9.4s ease-in-out infinite;
  will-change: transform;
}

.coin__flip {
  transition: transform 1.05s cubic-bezier(0.34, 0.02, 0.16, 1);
  will-change: transform;
}

.coin__enter {
  animation: coin-enter 1.35s cubic-bezier(0.2, 0.72, 0.16, 1) both;
}

/* ── гурт: чуть больше лицевых сторон, с насечкой ──────────── */
.coin__edge {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  transform: translateZ(0);
  background:
    linear-gradient(148deg,
      rgba(255, 248, 214, 0.85) 0%,
      rgba(255, 226, 150, 0.35) 18%,
      rgba(120, 70, 12, 0.28) 52%,
      rgba(74, 40, 4, 0.72) 82%,
      rgba(40, 20, 0, 0.82) 100%),
    repeating-conic-gradient(from 0deg,
      #6b3f0c 0deg 0.9deg,
      #d9a63f 0.9deg 1.8deg),
    radial-gradient(closest-side, #b8811f 0%, #8a5a12 100%);
  box-shadow:
    0 1px 1px rgba(255, 236, 178, 0.45),
    0 16px 26px -14px rgba(30, 12, 0, 0.75);
}

/* ── стороны монеты ────────────────────────────────────────── */
.coin__side {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
  background:
    radial-gradient(circle at 34% 28%, #f4d582 0%, #d0a032 44%, #9c6d18 78%, #6b430c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(88, 48, 4, 0.55),
    inset 0 6px 14px rgba(255, 244, 205, 0.24),
    inset 0 -12px 26px rgba(78, 40, 2, 0.42),
    inset 0 0 34px rgba(96, 52, 6, 0.30);
}

.coin__side--back {
  transform: translateZ(3px);
}

.coin__side--front {
  transform: rotateY(180deg) translateZ(3px);
}

.coin__side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.coin__side img.is-loaded {
  opacity: 1;
}

/* блик сверху слева — задаёт форму объёма */
.coin__gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 27% 19%,
      rgba(255, 255, 240, 0.22) 0%,
      rgba(255, 246, 205, 0.07) 46%,
      rgba(255, 240, 190, 0) 76%),
    radial-gradient(78% 78% at 80% 88%,
      rgba(58, 28, 0, 0.42) 0%,
      rgba(58, 28, 0, 0.16) 46%,
      rgba(58, 28, 0, 0) 74%);
}

/* бегущий по золоту отблеск */
.coin__sheen {
  position: absolute;
  top: -60%;
  left: -70%;
  width: 46%;
  height: 220%;
  pointer-events: none;
  transform: rotate(18deg) translate3d(0, 0, 0);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 252, 232, 0.30) 42%,
    rgba(255, 255, 255, 0.48) 50%,
    rgba(255, 252, 232, 0.28) 58%,
    rgba(255, 255, 255, 0) 100%);
  animation: coin-sheen 8.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  will-change: transform;
}

/* ── keyframes: только transform и opacity ─────────────────── */
@keyframes coin-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -4%, 0); }
}

@keyframes coin-wobble {
  0%   { transform: rotateY(-11deg) rotateX(4.5deg) rotateZ(-1.2deg); }
  50%  { transform: rotateY(10deg) rotateX(-3deg) rotateZ(1.2deg); }
  100% { transform: rotateY(-11deg) rotateX(4.5deg) rotateZ(-1.2deg); }
}

@keyframes coin-shadow {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(0.86); opacity: 0.55; }
}

@keyframes coin-halo {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

@keyframes coin-sheen {
  0%   { transform: translate3d(0, 0, 0) rotate(18deg); }
  22%  { transform: translate3d(360%, 0, 0) rotate(18deg); }
  100% { transform: translate3d(360%, 0, 0) rotate(18deg); }
}

@keyframes coin-enter {
  0%   { transform: rotateY(-208deg) scale(0.82); }
  100% { transform: rotateY(0deg) scale(1); }
}

/* экран не на виду — анимации спят, батарея цела */
.coin.is-paused .coin__float,
.coin.is-paused .coin__wobble,
.coin.is-paused .coin__halo,
.coin.is-paused .coin__shadow,
.coin.is-paused .coin__sheen {
  animation-play-state: paused;
}

/* ── бережный режим: движение выключено, монета остаётся ───── */
@media (prefers-reduced-motion: reduce) {
  .coin,
  .coin__float,
  .coin__wobble,
  .coin__halo,
  .coin__shadow,
  .coin__sheen,
  .coin__enter {
    animation: none !important;
  }

  .coin {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .coin__wobble {
    transform: rotateY(-9deg) rotateX(4deg);
  }

  .coin__flip {
    transition-duration: 0.001s;
  }

  .coin__sheen {
    transform: translate3d(150%, 0, 0) rotate(18deg);
    opacity: 0.55;
  }
}