@font-face {
  font-family: "Jura"; font-weight: 500; font-display: swap;
  src: url(../fonts/jura-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Jura"; font-weight: 500; font-display: swap;
  src: url(../fonts/jura-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  --bg: #060304;
  /* красный свечения колеса: оттенок из GAIN (2.4, 0.18, 0.10) в tools/make_glow.py, нормированный по яркости.
     Среднее wheel-2000.webp (пиксели с max>40) — тусклый #452a33, для рамки не годится */
  --accent: #ff130b;
  --btn-h: 44px;
  --btn-gap: 8px;
  --pad: 12px;
  --buttons-h: calc(5 * var(--btn-h) + 4 * var(--btn-gap));
  /* верхний ряд: вписывается и по ширине, и по высоте (кнопки не сжимаются) */
  --top-row-h: min(calc(100vw * 3400 / 6404), calc(100dvh - var(--buttons-h) - 2 * var(--pad)));
  --buttons-top: calc(var(--top-row-h) + var(--pad));
}
@media (max-height: 499px) {
  :root { --btn-h: 32px; --btn-gap: 6px; --pad: 8px; }
}

html, body { margin: 0; height: 100dvh; overflow: hidden; background: var(--bg); }
body { font-family: "Jura", system-ui, sans-serif; color: #fff; }

/* слои (общий контекст наложения, чтобы колесо смешивалось со звёздами):
   звёзды 0 → колесо 1 → карты 2 → руки и буквы 3 → кнопки 4 */
#stars, #scene, #cards { position: fixed; inset: 0; pointer-events: none; }
#stars { width: 100%; height: 100%; z-index: 0; }
#cards { z-index: 2; overflow: clip; }
#cards * { pointer-events: none; }
/* absolute, не fixed: fixed создаёт контекст наложения и ломает смешивание колеса */
#scene { position: absolute; overflow: clip; } /* clip: вращение не даёт прокрутку */
#scene * { pointer-events: none; }

.top-row {
  /* без transform: иначе создаётся контекст наложения и колесо не смешивается со звёздами */
  position: absolute; top: 0; left: 0; right: 0; margin-inline: auto;
  height: var(--top-row-h); width: calc(var(--top-row-h) * 6404 / 3400);
}
.top-row > * { position: absolute; z-index: 3; }
.top-row img { display: block; width: 100%; height: 100%; }
.top-row > .wheel { z-index: 1; mix-blend-mode: plus-lighter; }

.buttons {
  position: fixed; z-index: 4; left: 50%; top: var(--buttons-top);
  transform: translateX(-50%);
  width: min(90vw, 420px);
  display: flex; flex-direction: column; gap: var(--btn-gap);
}
.btn {
  box-sizing: border-box; height: var(--btn-h);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 2px;
  color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 500; letter-spacing: .08em;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(12px);
  --i: 0;
  /* задержка по порядку только у появления; рамка при наведении без задержки */
  transition: opacity .4s ease, transform .4s ease, border-color .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * .3s), calc(var(--i) * .3s), 0s, 0s;
}
.btn:nth-child(2) { --i: 1; }
.btn:nth-child(3) { --i: 2; }
.btn:nth-child(4) { --i: 3; }
.btn:nth-child(5) { --i: 4; }
.buttons-ready .btn { opacity: 1; transform: none; }
.btn:hover, .btn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent), inset 0 0 8px rgba(255, 19, 11, .35);
}
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* появление сцены: прозрачность только у листовых картинок, не у предков колеса (иначе тёмный прямоугольник) */
.top-row img, #cards img { opacity: 0; transition: opacity 1.2s ease; }
.scene-ready .top-row img, .scene-ready #cards img { opacity: 1; }

/* до 'scene-ready' анимации стоят */
body:not(.scene-ready) :is(.wheel, .letter-o, .hand-left, .hand-right, .wheel-glow) { animation-play-state: paused; }
/* движение: только transform/opacity на самих листовых элементах (без предков колеса) */
:root { --wheel-pulse: 1; }
@keyframes spin-cw { to { transform: rotate(360deg); } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
@keyframes float-y {
  0%, 100% { transform: translateY(-1.25%); }
  50% { transform: translateY(1.25%); }
}
@keyframes wheel-pulse {
  0%, 100% { opacity: calc(var(--wheel-pulse) * .15); }
  50% { opacity: calc(var(--wheel-pulse) * .85); }
}
.wheel { animation: spin-cw 60s linear infinite; }
.letter-o { animation: spin-ccw 20s linear infinite; }
.hand-left, .hand-right { animation: float-y 6s ease-in-out infinite; }
.hand-right { animation-delay: -3s; }
/* свечение: заранее запечённое красное размытое колесо (tools/make_glow.py), без filter; анимируются только transform и opacity */
.top-row > .wheel-glow {
  z-index: 1; mix-blend-mode: plus-lighter;
  animation: spin-cw 60s linear infinite, wheel-pulse 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wheel, .letter-o, .hand-left, .hand-right, .top-row > .wheel-glow { animation: none; }
  .top-row > .wheel-glow { opacity: calc(var(--wheel-pulse) * .4); }
  .btn { opacity: 1; transform: none; transition: border-color .25s, box-shadow .25s; }
  .top-row img, #cards img { transition: none; }
}