/* css/redesign-motion.css
   Reusable motion utilities for the Graphite/Gold redesign
   (docs/REDESIGN_PLAN.md, Фаза 0.2 / 0.3). Single source for the "snake"
   rotating-ring motif and the fly-away removal animation — screens apply
   these classes instead of redefining the @keyframes/::before trick per
   file (see CLAUDE.md "Анимации" rule). Not applied to any screen yet. */

@property --rd-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ===== "Змейка" — вращающееся кольцо conic-gradient вокруг важных CTA ===== */
.rd-snake {
  position: relative;
  isolation: isolate;
}

.rd-snake::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--rd-angle), var(--rd-snake-c1, transparent), var(--rd-snake-c2, transparent) 20%, var(--rd-snake-c1, transparent) 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rd-snake-rotate 3s linear infinite;
  /* Синхронизация фазы (Фаза 16.3, js/shared/snakeSync.js) — animation-delay
     не выставить инлайн-стилем напрямую на ::before (инлайн-стили не
     достают до псевдоэлементов), поэтому JS пишет отрицательный delay в
     эту custom property на самом .rd-snake, а она наследуется в ::before
     как обычное свойство. */
  animation-delay: var(--rd-snake-delay, 0s);
  pointer-events: none;
  z-index: 1;
}

@keyframes rd-snake-rotate {
  to { --rd-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-snake::before { animation: none; }
}

/* Золотой вариант — Player ID и другие важные поля */
.rd-snake-gold {
  --rd-snake-c1: oklch(0.78 0.1 85 / 0.15);
  --rd-snake-c2: oklch(0.78 0.1 85);
}

/* Красно-белый вариант — панель быстрой покупки, дропдаун вариантов товара */
.rd-snake-redwhite {
  --rd-snake-c1: oklch(0.55 0.17 25 / 0.45);
  --rd-snake-c2: oklch(0.92 0.01 25);
}

/* Hover-only модификатор — кольцо скрыто до :hover (тайлы игр/товаров,
   README: "Hover = lift + snake-glow ring"), в отличие от базового
   .rd-snake, которое всегда видно (Player ID и т.п. важные поля). Само
   кольцо — тонкие 2px (см. .rd-snake::before выше), точно по README, но
   на весь тайл почти не читается — добавлен мягкий внешний glow тем же
   цветом только для hover-состояния (не трогает всегда-видимые
   .rd-snake без .rd-snake-hover — Player ID и т.п. остаются тонкими). */
.rd-snake-hover::before {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rd-snake-hover:hover::before {
  opacity: 1;
}
/* Glow — не статичный box-shadow, а тот же вращающийся conic-gradient, что
   и в ::before (тот же --rd-angle + тот же --rd-snake-delay), только
   размытый через filter:blur и чуть больше по размеру (inset отрицательный)
   — движется синхронно с самим тонким кольцом, а не просто мигает вместе с
   hover. Требует, чтобы .game-card больше не резал overflow:hidden
   (см. css/base.css, Фаза 15.1/16 — старый crop-механизм убран). */
.rd-snake-hover::after {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--rd-angle), var(--rd-snake-c1, transparent), var(--rd-snake-c2, transparent) 20%, var(--rd-snake-c1, transparent) 40%);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  animation: rd-snake-rotate 3s linear infinite;
  animation-delay: var(--rd-snake-delay, 0s);
  transition: opacity 0.2s ease;
}
.rd-snake-hover:hover::after,
.rd-snake-hover.rd-snake-active::after {
  opacity: 0.65;
}
@media (prefers-reduced-motion: reduce) {
  .rd-snake-hover::after { animation: none; }
}

/* Форсирует ту же обводку, что и :hover, без реального ховера — для
   тач-устройств, где hover недоступен (Фаза 16.2, scroll-driven змейка
   на мобильной сетке игр, см. js/shared/gameGridSnake.js). ::hover — это
   короткая наводка мышью, а .rd-snake-active держится, пока карточка в
   фокусе скролла (секунды) — плоский статичный glow на таком отрезке
   времени читается как "залипло", поэтому добавлено лёгкое "дыхание"
   (пульс прозрачности/blur) поверх вращения, а не просто opacity:1. */
.rd-snake-hover.rd-snake-active::before {
  opacity: 1;
}
@keyframes rd-snake-active-pulse {
  from { opacity: 0.5; filter: blur(10px); }
  to { opacity: 0.85; filter: blur(17px); }
}
.rd-snake-hover.rd-snake-active::after {
  animation: rd-snake-rotate 3s linear infinite, rd-snake-active-pulse 1.6s ease-in-out infinite alternate;
  animation-delay: var(--rd-snake-delay, 0s), 0s;
}
@media (prefers-reduced-motion: reduce) {
  .rd-snake-hover.rd-snake-active::after { animation: none; opacity: 0.65; }
}

/* Hover lift для тайлов игр/товаров */
.rd-hover-lift {
  transition: transform 0.2s ease;
}

.rd-hover-lift:hover {
  transform: translateY(-5px);
}

/* ===== Fly-away — анимация удаления (корзина, уведомления) ===== */
.rd-fly-away-left {
  animation: rd-fly-away-left 380ms ease forwards;
}

.rd-fly-away-right {
  animation: rd-fly-away-right 380ms ease forwards;
}

@keyframes rd-fly-away-left {
  to {
    transform: translateX(-140%) rotate(-8deg);
    opacity: 0;
  }
}

@keyframes rd-fly-away-right {
  to {
    transform: translateX(140%) rotate(8deg);
    opacity: 0;
  }
}

/* ===== Bottom-sheet — мобильные корзина/уведомления (Фаза 5.3) ===== */
@keyframes rd-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ===== Летящая иконка "В корзину" + вспышка виджета (Фаза 16.1) =====
   Позиционируется/анимируется через inline --rd-fly-dx/-dy
   (js/shared/flyAway.js), а не JS-таймером transform — так CSS transition
   сам отвечает за easing, JS только переключает класс. */
.rd-fly-to-cart {
  position: fixed;
  z-index: 200;
  font-size: 20px;
  line-height: 1;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease 0.15s;
  will-change: transform, opacity;
}
.rd-fly-to-cart-active {
  transform: translate(calc(-50% + var(--rd-fly-dx, 0px)), calc(-50% + var(--rd-fly-dy, 0px))) scale(0.35);
  opacity: 0.15;
}

@keyframes rd-cart-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.78 0.1 85 / 0.55); }
  70% { box-shadow: 0 0 0 12px oklch(0.78 0.1 85 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.1 85 / 0); }
}
.rd-cart-pulse {
  animation: rd-cart-pulse 0.45s ease-out;
}