/* Движение сайта. Входная сцена — на CSS-ключах (идёт сама, даже если JS не загрузился),
   параллакс, искры, появление при прокрутке и счётчики — в motion.js.
   Тайминги: вход 0–2.2 с, дальше только мягкие циклы и реакции на мышь/прокрутку. */

:root {
  --ease-out: cubic-bezier(.16, .84, .24, 1);   /* быстрый разгон, долгое торможение — «вес» */
  --ease-spring: cubic-bezier(.34, 1.36, .5, 1); /* лёгкий перелёт для плашек */
}

/* ---------- первый экран: слои глубины ---------- */
.hero { perspective: 1000px; }
.hero-bg { position: absolute; inset: -5% -4%; z-index: 0; will-change: transform; }
.hero-bg-img {
  position: absolute; inset: 0;
  background: url(/static/game/background_loading.webp) center 30% / cover;
  animation: camPush 2.6s var(--ease-out) both;
}
@keyframes camPush {   /* камера отъезжает от арта и наводит резкость */
  from { transform: scale(1.22) translateY(3%) rotate(-.6deg); filter: blur(7px) brightness(.55); }
  to { transform: scale(1.06); filter: blur(0) brightness(1); }
}
.hero-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hero-stage { transform-style: preserve-3d; will-change: transform; }

.hero .game-logo { animation: logoIn 1.3s .15s var(--ease-out) both; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-34px) scale(.9); filter: blur(10px); }
  to { opacity: .95; transform: none; filter: blur(0); }
}

/* буквы названия: JS режет h1 на <span class="ch"> (задержка — через --i) */
.hero h1.split { background: none; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .8)); perspective: 600px; }
.hero h1 .w { display: inline-block; white-space: nowrap; }
.hero h1 .ch {
  display: inline-block;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 252, 235, .95) 50%, transparent 62%) 160% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #fff6d8, var(--gold-hi) 35%, var(--gold) 65%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform-origin: 50% 100%;
  animation: chIn 1s calc(.45s + var(--i) * 55ms) var(--ease-out) both,
             shine 1.4s calc(1.7s + var(--i) * 45ms) ease-in-out both;
}
@keyframes chIn {   /* буква поднимается и «поворачивается к зрителю», размытие = смаз движения */
  from { opacity: 0; transform: translateY(55%) rotateX(-75deg) scale(.9); filter: blur(9px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes shine {   /* золотой блик пробегает по буквам слева направо */
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}

.hero .sub, .hero .prize, .hero .chips, .hero .actions { animation: riseIn .9s var(--ease-out) both; }
.hero .sub { animation-delay: 1.05s; }
.hero .prize { animation: prizeIn 1.1s 1.2s var(--ease-spring) both, prizeGlow 3.6s 2.6s ease-in-out infinite; }
.hero .chips { animation-delay: 1.45s; }
.hero .actions { animation-delay: 1.6s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes prizeIn {
  from { opacity: 0; transform: scale(.7) translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes prizeGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(216, 180, 106, 0); }
  50% { box-shadow: 0 0 34px rgba(216, 180, 106, .28), inset 0 0 18px rgba(216, 180, 106, .12); }
}

/* ---------- кнопки: подъём и световой «пролёт» ---------- */
.btn { position: relative; overflow: hidden; transition: transform .25s var(--ease-out), filter .25s; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 245, 210, .35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn:hover::after { animation: sweep .7s ease-out; }
@keyframes sweep { to { background-position: 150% 0; } }
.soc { transition: transform .25s var(--ease-out), filter .2s; }
.soc:hover { transform: translateY(-2px); }

/* ---------- появление при прокрутке (классы ставит motion.js) ---------- */
/* до запуска скрипта прячем то, что видно сразу, иначе оно мелькнёт целиком; если скрипт не пришёл — через 2.5 с покажется само */
html.m section .title:not(.rv), html.m .bracket:not(.rv) .round { opacity: 0; animation: rvFailsafe .3s 2.5s forwards; }
@keyframes rvFailsafe { to { opacity: 1; } }
.rv { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(5px);
      transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), filter .8s var(--ease-out);
      transition-delay: calc(var(--d, 0) * 70ms); }
.rv.in { opacity: 1; transform: none; filter: none; }
/* орнамент заголовка раскрывается от центра */
.title.rv::after { transform: scaleX(0); transition: transform 1s .25s var(--ease-out); }
.title.rv.in::after { transform: scaleX(1); }

/* сетка: раунды проявляются слева направо, линии дорисовываются */
.bracket.rv { opacity: 1; transform: none; filter: none; }
.bracket.rv .round { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
                     transition-delay: calc(var(--r) * 220ms); }
.bracket.rv .cell::after, .bracket.rv .cell::before { transform: scaleX(0); transform-origin: left;
                     transition: transform .5s var(--ease-out); transition-delay: calc(var(--r) * 220ms + 350ms); }
.bracket.rv.in .round { opacity: 1; transform: none; }
.bracket.rv.in .cell::after, .bracket.rv.in .cell::before { transform: scaleX(1); }

/* ---------- живые акценты ---------- */
.match.live { animation: livePulse 2.8s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(216, 180, 106, .22), 0 6px 16px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 1px rgba(216, 180, 106, .5), 0 0 22px rgba(216, 180, 106, .22), 0 6px 16px rgba(0, 0, 0, .35); }
}
.ticket.won { position: relative; overflow: hidden; }
.ticket.won::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  animation: sweep 1.2s calc(var(--d, 0) * 250ms + 1s) ease-in-out infinite;
  animation-duration: 5s;
}
.champion { position: relative; overflow: hidden; animation: prizeIn 1.2s var(--ease-spring) both; }
.champion::before {   /* медленно вращающиеся лучи за именем победителя */
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(244, 222, 160, .35) 0 6deg, transparent 6deg 18deg);
  animation: rays 40s linear infinite;
}
.champion > * { position: relative; z-index: 1; }
@keyframes rays { to { transform: rotate(1turn); } }

/* ---------- кто просит меньше движения — получает статичный сайт ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .bracket.rv .round { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-fx { display: none; }
}