/* Маркетплейс aulov — ключевые кадры.
 * Все анимации собраны в одном файле, чтобы не плодить похожие с разными
 * таймингами. Продолжительности берём из токенов, кривые — тоже.
 */

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

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Единственный блик по плашке поиска на каталоге — один раз при заходе. */
@keyframes search-sheen {
  0%   { transform: translateX(-120%) skewX(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-12deg); opacity: 0; }
}

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

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes pop-in {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes ripple-out {
  to { transform: scale(2.4); opacity: 0; }
}

@keyframes heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.42); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Грань куба прилетает со своей стороны и садится со спрингом: сборка
   должна читаться именно как сборка, а не как общее проявление. */
@keyframes boot-face {
  from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.86); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Лёгкое дыхание знака, пока ждём сеть. */
@keyframes boot-mark-breathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 10px 26px rgba(124, 92, 255, .28)); }
  50%      { transform: scale(1.035); filter: drop-shadow(0 14px 34px rgba(124, 92, 255, .42)); }
}

/* Буквы вордмарка появляются по очереди, с лёгким доворотом при посадке. */
@keyframes boot-letter {
  from { opacity: 0; transform: translateY(16px) scale(.86) rotateZ(-6deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotateZ(0deg); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--brand-soft-2); }
  70%  { box-shadow: 0 0 0 10px rgba(124, 92, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
}

@keyframes aurora-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(14vw, 8vh) scale(1.12); }
  66%      { transform: translate(-6vw, 14vh) scale(.94); }
}

@keyframes aurora-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-16vw, 12vh) scale(1.15); }
  75%      { transform: translate(8vw, -6vh) scale(.92); }
}

@keyframes slide-in-right {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Появление сообщения в чате: снизу и чуть с масштабом — так оно
   ощущается «отправленным», а не просто дорисованным. */
@keyframes msg-in {
  from { transform: translateY(12px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes count-flash {
  0%   { color: var(--brand); transform: scale(1.14); }
  100% { color: inherit; transform: scale(1); }
}

/* Каскад: элементы списка проявляются по очереди, а не все разом.
   Задержку ставим переменной --i из JS, дальше шести не считаем —
   ждать проявления седьмой карточки уже раздражает. */
.stagger > * {
  animation: fade-up var(--t-base) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.anim-in { animation: fade-up var(--t-base) var(--ease-out); }
.anim-pop { animation: pop-in var(--t-base) var(--ease-spring); }
.anim-slide-r { animation: slide-in-right var(--t-base) var(--ease-out); }

.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: typing-dot 1.3s var(--ease-in-out) infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .16s; }
.typing-dots span:nth-child(3) { animation-delay: .32s; }