/* ==========================================================================
   НооЛинк — анимации и переходы
   ========================================================================== */

/* ---- Вход контента экрана ---- */
@keyframes content-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen__content > *:not(.screen__scroll-inner),
.screen__scroll-inner > * {
  animation: content-rise var(--dur-slow) var(--ease-out) both;
}
.screen__content > *:nth-child(1):not(.screen__scroll-inner),
.screen__scroll-inner > *:nth-child(1) { animation-delay: 0ms; }
.screen__content > *:nth-child(2):not(.screen__scroll-inner),
.screen__scroll-inner > *:nth-child(2) { animation-delay: 40ms; }
.screen__content > *:nth-child(3):not(.screen__scroll-inner),
.screen__scroll-inner > *:nth-child(3) { animation-delay: 80ms; }
.screen__content > *:nth-child(4):not(.screen__scroll-inner),
.screen__scroll-inner > *:nth-child(4) { animation-delay: 120ms; }
.screen__content > *:nth-child(5):not(.screen__scroll-inner),
.screen__scroll-inner > *:nth-child(5) { animation-delay: 160ms; }

/* ---- Спиннер в кнопке ---- */
@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ---- Мерцание skeleton-заглушек ---- */
@keyframes skeleton-shimmer {
  0% { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

/* ---- Тряска при ошибке ---- */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* ---- Пульс live-индикатора ---- */
@keyframes pulse-live {
  0% { box-shadow: 0 0 0 0 var(--mint-live-dim); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint-live);
  animation: pulse-live 1.8s infinite;
}

/* ---- Искра совпадения (signature-момент) ---- */
.spark-burst {
  position: fixed;
  z-index: 200;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.spark-burst__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradient-spark);
  animation: spark-core 700ms var(--ease-out) forwards;
}

@keyframes spark-core {
  0% { transform: scale(0.3); opacity: 1; filter: blur(0px); }
  60% { transform: scale(14); opacity: 0.55; filter: blur(1px); }
  100% { transform: scale(22); opacity: 0; filter: blur(2px); }
}

.spark-burst__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent-spark);
  animation: spark-ring 620ms var(--ease-out) forwards;
}

@keyframes spark-ring {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(9); opacity: 0; }
}

.spark-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-noo);
  top: 0;
  left: 0;
  animation: spark-particle 620ms var(--ease-out) forwards;
}

@keyframes spark-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* ---- Успех: галочка ---- */
.success-check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--gradient-spark-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.success-check svg {
  stroke: var(--mint-live);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.success-check__path {
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
  animation: draw-check 420ms var(--ease-out) 200ms forwards;
}
@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ---- Кросс-страничные переходы (View Transitions) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes push-out {
    to { opacity: 0; transform: translateX(-24px) scale(0.98); }
  }
  @keyframes push-in {
    from { opacity: 0; transform: translateX(28px) scale(0.99); }
  }

  ::view-transition-old(root) {
    animation: 380ms var(--ease-out) both push-out;
  }
  ::view-transition-new(root) {
    animation: 420ms var(--ease-out) both push-in;
  }
}