/* Черновик анимаций botbiznes.ru. Подключается только на animaciya.html */

/* --- 1. Блоки выезжают снизу по очереди --- */
.an-item {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 1.15s cubic-bezier(0.16, 0.84, 0.3, 1),
              transform 1.15s cubic-bezier(0.16, 0.84, 0.3, 1);
  will-change: opacity, transform;
}
.an-item.is-in { opacity: 1; transform: none; }

/* --- 2. Заголовки: строки выезжают из-под маски --- */
.an-mask { display: block; overflow: hidden; }
.an-mask > span {
  display: block;
  transform: translateY(105%) rotate(2deg);
  opacity: 0;
  transition: transform 1.45s cubic-bezier(0.16, 0.84, 0.28, 1),
              opacity 0.95s ease;
}
.is-in .an-mask > span, .an-mask.is-in > span { transform: none; opacity: 1; }
.an-mask:nth-child(2) > span { transition-delay: 0.14s; }
.an-mask:nth-child(3) > span { transition-delay: 0.28s; }

/* --- 3. Линия под заголовком прочерчивается --- */
.an-line { position: relative; padding-bottom: 18px; }
.an-line::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.7s cubic-bezier(0.16, 0.84, 0.3, 1) 0.25s;
}
.an-line.is-in::after { transform: scaleX(1); }

/* --- 4. Первый экран уходит вглубь --- */
.hero-content, .hero-deco { will-change: transform, opacity; }

/* --- 5. Карточки: свет под курсором, подъём, рамка проявляется --- */
.an-card {
  position: relative; isolation: isolate;
  transition: transform 0.55s cubic-bezier(0.16, 0.84, 0.3, 1), background 0.55s ease;
}
.an-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
              rgba(var(--accent-rgb), 0.18), transparent 62%);
  transition: opacity 0.4s ease;
}
.an-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  opacity: 0; transition: opacity 0.4s ease;
}
.an-card:hover::before, .an-card:hover::after { opacity: 1; }
.an-card:hover { transform: translateY(-8px); }

/* --- 6. Цена: цифры набегают --- */
.an-price { font-variant-numeric: tabular-nums; }

/* --- 7. Картинки и фото проявляются из-под шторки --- */
.an-mask-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}
.an-mask-img.is-in { clip-path: inset(0 0 0 0); }

/* --- 8. Тонкая рамка вокруг экрана, как на референсе --- */
.an-frame {
  position: fixed; inset: 18px; pointer-events: none; z-index: 60;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  opacity: 0; transition: opacity 0.6s ease;
}
.an-frame.is-on { opacity: 1; }
.an-frame i {
  position: absolute; width: 9px; height: 9px; opacity: 0.75;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
}
.an-frame i:nth-child(1) { top: -5px; left: -5px; }
.an-frame i:nth-child(2) { top: -5px; right: -5px; }
.an-frame i:nth-child(3) { bottom: -5px; left: -5px; }
.an-frame i:nth-child(4) { bottom: -5px; right: -5px; }
.an-frame b {
  position: absolute; right: 0; bottom: -1px; height: 1px; background: var(--accent);
  width: var(--progress, 0%); transition: width 0.12s linear; right: auto; left: 0;
}

/* --- 9. Кнопки тянутся к курсору --- */
.an-magnet { transition: transform 0.25s cubic-bezier(0.16, 0.84, 0.3, 1); }

/* --- 10. Уважение к «уменьшить движение» --- */
@media (prefers-reduced-motion: reduce) {
  .an-item, .an-mask > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .an-line::after { transform: scaleX(1) !important; transition: none !important; }
  .an-mask-img { clip-path: none !important; }
  .an-card:hover, .an-magnet { transform: none !important; }
  .an-frame { display: none; }
}

/* --- 11. Раздел с проектами: двигаются только телефоны --- */
.an-static .an-item,
.an-static .an-mask > span,
.an-static .an-mask-img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}
.an-static .an-line::after { transform: scaleX(1) !important; transition: none !important; }