/* ============================================================
   АНИМАЦИИ v2 — стильно и сдержанно.
   Всё отключается при prefers-reduced-motion.
   ============================================================ */

/* ---------- Ripple-перекраска фона при выборе стороны ----------
   Полноэкранный слой: круг расходится из точки клика в новом цвете,
   затем настоящий фон body уже перекрашен и слой убирается. */
.side-ripple {
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform, opacity;
  animation: ripple-expand 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ripple-expand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  70%  { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------- Scroll-reveal: появление секций ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Каскад внутри секции — дети появляются по очереди */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* ---------- Обложка: появление по входу ---------- */
.hero-inner > * {
  opacity: 0;
  transform: translateY(24px);
  animation: rise-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.30s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.45s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.60s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.75s; }
@keyframes rise-in {
  to { opacity: 1; transform: none; }
}

/* Имена пары — мягкое проявление с лёгким масштабом */
.hero-names {
  animation: names-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes names-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); letter-spacing: 0.04em; }
  to   { opacity: 1; transform: none; letter-spacing: -0.01em; }
}
.hero-names .amp {
  display: block;
  animation: amp-pop 1s ease 0.9s both;
}
@keyframes amp-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Декор замка: лёгкое «дыхание» ---------- */
.hero-decor {
  animation: float-breathe 7s ease-in-out infinite;
}
@keyframes float-breathe {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-10px); }
}

/* Плавающие искорки на обложке */
.hero-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0.5;
  pointer-events: none;
  animation: spark-drift 9s ease-in-out infinite;
}
.hero-spark:nth-child(1) { left: 14%; top: 30%; animation-delay: 0s;   }
.hero-spark:nth-child(2) { left: 82%; top: 24%; animation-delay: 1.4s; width: 4px; height: 4px; }
.hero-spark:nth-child(3) { left: 70%; top: 60%; animation-delay: 2.6s; }
.hero-spark:nth-child(4) { left: 24%; top: 64%; animation-delay: 3.8s; width: 5px; height: 5px; }
@keyframes spark-drift {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 0.25; }
  50%      { transform: translateY(-22px) scale(1.3); opacity: 0.7; }
}

/* ---------- Счётчик: пульс при смене секунды ---------- */
.countdown-num.tick {
  animation: num-tick 600ms ease;
}
@keyframes num-tick {
  0%   { transform: translateY(0);   }
  35%  { transform: translateY(-3px); color: var(--c-deep); }
  100% { transform: translateY(0);   }
}

/* ---------- Кнопки: микро-взаимодействие ---------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.35), transparent 60%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 400ms ease, transform 400ms ease;
}
.btn--primary:hover::after { opacity: 1; transform: scale(1); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* Кнопки сторон — лёгкое сияние при наведении */
.side-btn { position: relative; overflow: hidden; }
.side-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  transition: left 700ms ease;
}
.side-btn:hover::before { left: 130%; }

/* Карточки таймлайна/контактов — подъём по наведению */
.timeline-item, .contact-card, .swatch {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms ease;
}
.contact-card:hover, .swatch:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

/* ---------- Уважение к настройкам пользователя ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal-stagger] > *, .hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .side-ripple { display: none !important; }
}