/* ==========================================================================
   1win Design System · АНИМАЦИИ
   --------------------------------------------------------------------------
   Слой движения. Зависит только от базовых слоёв (01–03), премиум-палитра
   для него не нужна — подключается к любой странице. Правила, которых держимся:

     1. Движение поддерживает иерархию, а не соревнуется с ней.
        Одновременно на экране двигается не больше двух вещей.
     2. Ничего не мигает и не дёргается. Только медленное парение,
        медленный оборот и один пробег блика.
     3. Всё уважает prefers-reduced-motion: в конце файла анимации
        выключаются целиком, а не «ускоряются».
     4. Длительности и кривые — токены --l-dur-* и --l-ease-* из 03-landing.
        Переменные вида --p-float-lift — локальные ручки модификаторов,
        а не токены: задаются рядом, на самом элементе.

   Подключается после 1win-ui.css.
   ========================================================================== */

/* ==========================================================================
   1. ПАРЕНИЕ
   Монеты и 3D-объекты медленно всплывают и опускаются. Три фазы,
   чтобы соседние объекты не двигались синхронно.
   ========================================================================== */

@keyframes p-float {
  0%, 100% { transform: translateY(0) rotate(var(--p-float-tilt, 0deg)); }
  50%      { transform: translateY(var(--p-float-lift, -14px)) rotate(var(--p-float-tilt, 0deg)); }
}

.p-float {
  animation: p-float var(--l-dur-float) var(--l-ease-soft) infinite;
  will-change: transform;
}

.p-float_slow  { animation-duration: calc(var(--l-dur-float) * 1.5); }
.p-float_delay { animation-delay: -2s; }
.p-float_delay2 { animation-delay: -4s; }
.p-float_sm { --p-float-lift: -8px; }
.p-float_lg { --p-float-lift: -22px; }

/* ==========================================================================
   2. ОБОРОТ МОНЕТЫ
   Монета поворачивается вокруг вертикальной оси. Без 3D-перспективы
   она бы «схлопывалась» в линию, поэтому сжимаем по X, а не вращаем.
   ========================================================================== */

@keyframes p-coin-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.p-coin-spin {
  animation: p-coin-spin var(--l-dur-spin) linear infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Мягкий вариант: качание ±18°, монета всё время читается */
@keyframes p-coin-sway {
  0%, 100% { transform: rotateY(-18deg); }
  50%      { transform: rotateY(18deg); }
}

.p-coin-sway {
  animation: p-coin-sway calc(var(--l-dur-spin) / 2) var(--l-ease-soft) infinite;
  will-change: transform;
}

/* Орбита: медленный поворот всей группы монет вокруг центра */
@keyframes p-orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.p-orbit { animation: p-orbit 40s linear infinite; transform-origin: 50% 55%; }

/* ==========================================================================
   3. БЛИК
   Диагональная полоса света пробегает по поверхности. Работает и на
   кнопке, и на премиальной карточке. Родителю нужен overflow: hidden.
   ========================================================================== */

@keyframes p-shine {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(320%)  skewX(-18deg); }
}

.p-shine { overflow: hidden; position: relative; isolation: isolate; }

.p-shine::after {
  animation: p-shine var(--l-dur-shine) var(--l-ease-out) infinite;
  background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.38) 50%,
                rgba(255, 255, 255, 0) 100%);
  content: "";
  inset: -40% -60%;
  pointer-events: none;
  position: absolute;
  width: 28%;
  z-index: 3;
}

/* Сдержанный блик для крупных тёмных поверхностей */
.p-shine_soft::after { background: linear-gradient(90deg,
                          rgba(255, 255, 255, 0) 0%,
                          rgba(255, 255, 255, 0.16) 50%,
                          rgba(255, 255, 255, 0) 100%);
                       animation-duration: calc(var(--l-dur-shine) * 2.2); }

/* ==========================================================================
   4. ДЫХАНИЕ СВЕЧЕНИЯ
   Фоновое пятно чуть меняет яркость и размер. Амплитуда намеренно
   маленькая: заметно боковым зрением, не отвлекает от текста.
   ========================================================================== */

@keyframes p-pulse {
  0%, 100% { opacity: 0.86; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.04); }
}

.p-glow-pulse::before {
  animation: p-pulse var(--l-dur-pulse) var(--l-ease-soft) infinite;
  will-change: opacity, transform;
}

/* Ореол вокруг объекта */
@keyframes p-halo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.08); }
}

.p-halo { position: relative; }

.p-halo::before {
  animation: p-halo var(--l-dur-pulse) var(--l-ease-soft) infinite;
  background: radial-gradient(circle, var(--p-halo-color, var(--color-yellow-amber-400)) 0%,
              rgba(255, 149, 0, 0) 68%);
  content: "";
  inset: -18%;
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.p-halo > * { position: relative; z-index: 1; }
.p-halo_blue { --p-halo-color: var(--color-blue-cyan-500); }

/* ==========================================================================
   5. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ
   Класс p-reveal ставится в разметке, атрибут data-revealed добавляет
   скрипт animations.js через IntersectionObserver.
   ========================================================================== */

.p-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--l-ease-out), transform 0.6s var(--l-ease-out);
}

.p-reveal[data-revealed] { opacity: 1; transform: none; }

/* Лесенка для соседних элементов */
.p-reveal_1 { transition-delay: 0.06s; }
.p-reveal_2 { transition-delay: 0.12s; }
.p-reveal_3 { transition-delay: 0.18s; }
.p-reveal_4 { transition-delay: 0.24s; }

/* ==========================================================================
   6. СЧЁТЧИК
   Разметка не меняется — скрипт подставляет цифры. Класс нужен только
   чтобы ширина не прыгала при смене разрядов.
   ========================================================================== */

.p-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. БЕГУЩАЯ ЛЕНТА
   Для полосы наград и логотипов. Дублируйте содержимое дважды —
   иначе на стыке будет разрыв.
   ========================================================================== */

@keyframes p-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.p-marquee { overflow: hidden; position: relative; }
.p-marquee__track {
  animation: p-marquee var(--p-marquee-dur, 38s) linear infinite;
  display: flex;
  gap: var(--spacing-12);
  width: max-content;
}
.p-marquee:hover .p-marquee__track { animation-play-state: paused; }

/* ==========================================================================
   8. ПЕРЕВОРОТ БИЛЕТА
   Ячейка календаря Lucky Drive переворачивается при получении.
   ========================================================================== */

@keyframes p-flip {
  0%   { transform: rotateY(0deg)   scale(1); }
  50%  { transform: rotateY(90deg)  scale(1.06); }
  100% { transform: rotateY(0deg)   scale(1); }
}

.p-flip { animation: p-flip 0.6s var(--l-ease-out); }

/* ==========================================================================
   9. ПОДЪЁМ ПРИ НАВЕДЕНИИ
   Единственный hover-эффект премиум-слоя. Без теней — их в системе нет.
   ========================================================================== */

.p-lift {
  transition: transform 0.25s var(--l-ease-out);
  will-change: transform;
}

@media (hover: hover) {
  .p-lift:hover { transform: translateY(-4px); }
}

/* ==========================================================================
   10. УВАЖЕНИЕ К НАСТРОЙКАМ ПОЛЬЗОВАТЕЛЯ
   Если человек попросил меньше движения — выключаем всё, а не ускоряем.
   Появление при прокрутке остаётся, но без сдвига: контент обязан быть
   виден даже если скрипт не отработал.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .p-float,
  .p-coin-spin,
  .p-coin-sway,
  .p-orbit,
  .p-shine::after,
  .p-glow-pulse::before,
  .p-halo::before,
  .p-marquee__track,
  .p-flip {
    animation: none !important;
  }

  .p-shine::after { display: none; }

  .p-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .p-lift { transition: none; }
  @media (hover: hover) { .p-lift:hover { transform: none; } }
}

/* Подстраховка: если скрипт не загрузился, контент всё равно виден */
.no-js .p-reveal { opacity: 1; transform: none; }