/* =====================================================
   motion.css — Система анимаций ВерниВещь
   ===================================================== */

:root {
  /* Duration tokens */
  --motion-instant:   80ms;
  --motion-fast:     160ms;
  --motion-base:     260ms;
  --motion-medium:   420ms;
  --motion-slow:     680ms;
  --motion-story:   1100ms;
  --motion-cinematic: 1600ms;

  /* Easing tokens */
  --ease-standard:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:        cubic-bezier(0.64, 0, 0.78, 0);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Page entrance ── */
body {
  opacity: 0;
  transition: opacity var(--motion-medium) var(--ease-out);
}
body.is-ready {
  opacity: 1;
}

/* ── Reveal animations ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity  var(--motion-slow) var(--ease-emphasized),
    transform var(--motion-slow) var(--ease-emphasized),
    filter   var(--motion-slow) var(--ease-emphasized);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity   var(--motion-medium) var(--ease-emphasized),
    transform var(--motion-medium) var(--ease-emphasized);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 70ms; }
.reveal:nth-child(3) { transition-delay: 140ms; }
.reveal:nth-child(4) { transition-delay: 210ms; }
.reveal:nth-child(5) { transition-delay: 280ms; }
.reveal:nth-child(6) { transition-delay: 350ms; }

/* ── Button microinteractions ── */
.btn {
  transition:
    background  var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow  var(--motion-fast) var(--ease-standard),
    transform   var(--motion-fast) var(--ease-spring),
    opacity     var(--motion-fast) var(--ease-standard);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* ── Card hover ── */
.card-hover {
  transition:
    transform  var(--motion-medium) var(--ease-emphasized),
    box-shadow var(--motion-medium) var(--ease-emphasized);
}
.card-hover:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ── Input focus ── */
.form-input,
.form-textarea {
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow   var(--motion-fast) var(--ease-standard);
}

/* ── Status badge pulse (only where appropriate) ── */
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.96); }
}
.badge-pulse {
  animation: badge-pulse 2.4s var(--ease-standard) infinite;
}

/* ── Toast ── */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
.toast { animation: toast-in var(--motion-medium) var(--ease-emphasized) forwards; }
.toast.is-hiding { animation: toast-out var(--motion-base) var(--ease-in) forwards; }

/* ── QR created ── */
@keyframes qr-appear {
  0%   { opacity: 0; transform: scale(0.88); }
  60%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
.qr-appear {
  animation: qr-appear var(--motion-slow) var(--ease-spring) forwards;
}

/* ── Shimmer / loading ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--brand-sky-mid) 25%,
    var(--brand-sky) 50%,
    var(--brand-sky-mid) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { opacity: 1 !important; }
  .reveal,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}