/* ============================================================
   PLAYDING — animations.css
   Keyframes, hover-эффекты, GPU-ускоренные анимации
   ============================================================ */

/* ---------- Появление контента ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Появление карточек при фильтрации (stagger через CSS-переменную) */
.card-game {
  animation: fade-up var(--t-slow) var(--ease) both;
  animation-delay: var(--delay, 0ms);
}

/* ---------- Модальные окна ---------- */
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Toasts ---------- */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* ---------- Логотип ---------- */
@keyframes logo-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(0, 212, 255, 0.45); }
  50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.65); }
}

/* ---------- Индикатор онлайна ---------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}

/* ---------- Skeleton ---------- */
@keyframes skeleton-shimmer {
  to { background-position: -200% 0; }
}

/* ---------- Hero: появление слайдов ---------- */
.hero__slide {
  animation: fade-in var(--t-slow) var(--ease);
}

.hero__slide-info {
  animation: fade-up var(--t-slow) var(--ease) 150ms both;
}

/* ---------- Прочие hover-эффекты ---------- */
/* Блеск на кнопках */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}

.btn:hover::before {
  left: 130%;
}

/* Плавающие элементы hero (GPU-ускоренные) */
.float-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: float-particle linear infinite;
}

@keyframes float-particle {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.6; }
  100% { transform: translateY(-110vh) scale(0.4); opacity: 0; }
}

/* ---------- Reveal при скролле (Intersection Observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Затухание устаревших карточек ---------- */
.card-game--leaving {
  animation: card-leave var(--t-med) var(--ease) forwards;
}

@keyframes card-leave {
  to { opacity: 0; transform: scale(0.92); }
}

/* ---------- Вращение при загрузке ---------- */
.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ============================================================
   СТУДИЯ «Создать игру» (пошаговый мастер)
   ============================================================ */

/* Переход между шагами визарда: fade + slide 200ms */
@keyframes wizard-step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Появление тега-чипа */
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Экран успеха: неоновая галочка */
@keyframes success-pop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* «Рисование» галочки штрихом */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

.wizard-step--enter {
  animation: wizard-step-in 200ms var(--ease) both;
}
.studio-chips__chip {
  animation: chip-in 160ms var(--ease);
}
.studio-success__check {
  animation: success-pop 0.45s var(--ease) both;
}
.studio-success__path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: check-draw 0.5s 0.25s var(--ease) forwards;
}