/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Плавные анимации
═══════════════════════════════════════════════════════════════ */

/* ── Scroll reveal ───────────────────────────────────────────── */
.animate-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for grids */
.categories-grid .cat-card:nth-child(1) { transition-delay: .05s; }
.categories-grid .cat-card:nth-child(2) { transition-delay: .12s; }
.categories-grid .cat-card:nth-child(3) { transition-delay: .19s; }
.categories-grid .cat-card:nth-child(4) { transition-delay: .26s; }
.categories-grid .cat-card:nth-child(5) { transition-delay: .33s; }
.categories-grid .cat-card:nth-child(6) { transition-delay: .40s; }

.models-grid .model-card:nth-child(1) { transition-delay: .05s; }
.models-grid .model-card:nth-child(2) { transition-delay: .12s; }
.models-grid .model-card:nth-child(3) { transition-delay: .19s; }

.features-grid .feature-card:nth-child(1) { transition-delay: .05s; }
.features-grid .feature-card:nth-child(2) { transition-delay: .10s; }
.features-grid .feature-card:nth-child(3) { transition-delay: .15s; }
.features-grid .feature-card:nth-child(4) { transition-delay: .20s; }
.features-grid .feature-card:nth-child(5) { transition-delay: .25s; }
.features-grid .feature-card:nth-child(6) { transition-delay: .30s; }

.stats-grid .stat-card:nth-child(1) { transition-delay: .05s; }
.stats-grid .stat-card:nth-child(2) { transition-delay: .10s; }
.stats-grid .stat-card:nth-child(3) { transition-delay: .15s; }
.stats-grid .stat-card:nth-child(4) { transition-delay: .20s; }
.stats-grid .stat-card:nth-child(5) { transition-delay: .25s; }
.stats-grid .stat-card:nth-child(6) { transition-delay: .30s; }

/* ── Catalog view transition ─────────────────────────────────── */
#catalogView {
  transition: opacity .4s ease, transform .4s ease;
}

/* ── Feature card entrance ───────────────────────────────────── */
.feature-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .3s, transform .3s;
}
.feature-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stat card entrance ──────────────────────────────────────── */
.stat-card {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .6s ease, transform .6s ease, background .3s;
}
.stat-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Smooth page sections ────────────────────────────────────── */
section {
  scroll-margin-top: 80px;
}

/* ── Button ripple ───────────────────────────────────────────── */
.btn-primary, .btn-auth, .btn-order, .submit-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-auth::after, .btn-order::after, .submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background .3s;
}
.btn-primary:active::after, .btn-auth:active::after,
.btn-order:active::after, .submit-btn:active::after {
  background: rgba(255,255,255,.15);
}

/* ── Logo shimmer ────────────────────────────────────────────── */
.logo-icon {
  position: relative;
  overflow: hidden;
}
.logo-icon::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,.25), transparent);
  transform: rotate(45deg) translateX(-100%);
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0%   { transform: rotate(45deg) translateX(-100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}

/* ── Floating animation (about image) ───────────────────────── */
.about-image {
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* ── Input focus glow ────────────────────────────────────────── */
.form-group input:focus,
.form-group textarea:focus,
.admin-input:focus {
  box-shadow: 0 0 0 3px rgba(255,107,53,.15);
}

/* ── Admin panel slide in ────────────────────────────────────── */
.admin-panel:not(.hidden) {
  animation: adminSlideIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes adminSlideIn {
  from { opacity:0; transform:scale(.98); }
  to   { opacity:1; transform:scale(1); }
}

/* ── Toast slide in ──────────────────────────────────────────── */
@keyframes toastIn {
  from { transform: translateX(120%); }
  to   { transform: translateX(0); }
}

/* ── Prefers reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}