/* ============================================================
   ПОТОЛКИ42 — animations.css
   Кейфреймы, фоновые блобы, бегущая строка, микро-анимации
   ============================================================ */

/* ---------- Фоновые «блобы» (мягкие световые пятна) ---------- */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none;
  animation: blob-float 14s ease-in-out infinite alternate;
  will-change: transform;
}
.blob--teal { background: radial-gradient(circle, rgba(var(--brand-rgb), .35), transparent 70%); }
.blob--cyan { background: radial-gradient(circle, rgba(14, 165, 201, .3), transparent 70%); }
.blob--amber { background: radial-gradient(circle, rgba(247, 183, 51, .28), transparent 70%); }
.blob--slow { animation-duration: 22s; }
@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -26px) scale(1.08); }
  100% { transform: translate(-24px, 18px) scale(.96); }
}

/* ---------- Плавающие бейджи (hero) ---------- */
.float-badge {
  animation: float-y 5.5s ease-in-out infinite;
  will-change: transform;
}
.float-badge--delay { animation-delay: 1.4s; animation-duration: 6.5s; }
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ---------- Пульс-кольцо (индикатор drag на слайдере, точки) ---------- */
.pulse-ring { position: relative; }
.pulse-ring::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(.6); opacity: .8; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- Бегущая строка ---------- */
.marquee { overflow: hidden; user-select: none; }
.marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 14px;
  padding-inline: 26px; white-space: nowrap;
}
.marquee__item::after {
  content: '✦'; font-size: 14px; color: var(--brand); opacity: .8;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Градиентная анимация текста ---------- */
.anim-grad {
  background: linear-gradient(110deg, var(--brand), var(--cyan), var(--brand));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-slide 6s ease infinite;
}
@keyframes grad-slide {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Появление контента (fallback без AOS) ---------- */
.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.js-reveal.is-visible { opacity: 1; transform: none; }
.js-reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.js-reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.js-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .13s; }
.js-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .21s; }
.js-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .29s; }
.js-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .37s; }
.js-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .45s; }

/* ---------- Прогресс-линия шагов (как это работает) ---------- */
.steps-line { position: relative; }
.steps-line::before {
  content: ''; position: absolute; top: 34px; left: 8%; right: 8%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 12px, transparent 12px 22px);
  border-radius: 2px;
}
.steps-line .steps-line__fill {
  position: absolute; top: 34px; left: 8%; height: 3px; width: 0;
  background: var(--grad-brand); border-radius: 2px;
  transition: width 1.4s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 0 12px rgba(var(--brand-rgb), .5);
}

/* ---------- Покачивание иконки при hover карточек ---------- */
.card-hover { transition: transform var(--tr-slow), box-shadow var(--tr-slow); }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.card-hover:hover .icon-tile svg { animation: wiggle .55s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  60% { transform: rotate(6deg); }
}

/* ---------- Иконка-плитка ---------- */
.icon-tile {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-content: center; flex: none;
  background: var(--brand-soft); color: var(--brand-deep);
  transition: transform var(--tr), background var(--tr), color var(--tr);
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile--accent { background: var(--accent-soft); color: var(--accent-deep); }
.icon-tile--cyan { background: var(--cyan-soft); color: var(--cyan-ink, #0B7C99); }

/* ---------- Свечение под кнопкой drag ---------- */
.glow-dot { box-shadow: 0 0 0 6px rgba(255, 255, 255, .35), 0 6px 18px rgba(var(--ink-rgb), .35); }

/* ---------- Шиммер для скелетонов ---------- */
.shimmer {
  background: linear-gradient(100deg, var(--bg-2) 40%, var(--surface) 50%, var(--bg-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Появление модалок ---------- */
.modal.is-open .modal__panel { animation: modal-in .38s cubic-bezier(.22, 1, .36, 1); }
.modal.is-open .modal__backdrop { animation: fade-in .3s ease; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Toast ---------- */
.toast { animation: toast-in .4s cubic-bezier(.22, 1, .36, 1); }
.toast.is-leaving { animation: toast-out .3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out { to { opacity: 0; transform: translateY(14px); } }

/* ---------- Наклон слайдера-ручки (подсказка) ---------- */
.nudge { animation: nudge 1.6s ease 2; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-14px); }
  65% { transform: translateX(14px); }
}

/* ---------- Свет от «люстры» в hero (декор) ---------- */
.lamp-glow {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 138, .5), rgba(255, 214, 138, 0) 70%);
  animation: lamp-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lamp-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.12); }
}

/* ---------- Счётчик цифр мигание не нужно, но всплеск при апдейте ---------- */
.bump { animation: bump .3s ease; }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .float-badge, .marquee__track, .lamp-glow { animation: none !important; }
}