/* Спецэффекты сайта: только кадры анимаций и глобальные правила.
   Все стили элементов заданы Tailwind-утилитами в index.html. */

/* Вращающаяся градиентная рамка */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin-border {
  to { --angle: 360deg; }
}

/* Плавное перетекание градиента (для заголовков и кнопок) */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Бесконечная бегущая строка */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Медленное парение светящихся шаров */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -24px) scale(1.08); }
  66% { transform: translate(-22px, 18px) scale(0.95); }
}

/* Пульсирующее кольцо вокруг живой точки */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(41, 170, 244, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(41, 170, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 170, 244, 0); }
}

/* Блик, пробегающий по кнопке */
@keyframes shine-sweep {
  0% { transform: translateX(-160%) skewX(-20deg); }
  55%, 100% { transform: translateX(320%) skewX(-20deg); }
}

/* Колесо мыши в подсказке прокрутки */
@keyframes scroll-wheel {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Мягкая пульсация свечения цены */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Плавное появление орбит и декоративных колец */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Бегущая световая полоса (сканирующий луч) */
@keyframes scan-beam {
  0% { top: -15%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* Медленное смещение фоновой сетки */
@keyframes grid-pan {
  from { background-position: 0 0; }
  to { background-position: 56px 56px; }
}

/* Мигание курсора терминала */
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Дрожание чисел-статистики на появлении */
@keyframes digit-in {
  0% { opacity: 0; transform: translateY(14px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Парение космического корабля */
@keyframes ship-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}

/* Дрожание пламени двигателя */
@keyframes engine-flicker {
  0%, 100% { opacity: 0.7; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.25); }
}

/* ===== Куб: иконка на грани парит ===== */
@keyframes cube-icon-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.06); }
}

/* — Разработка: разлетающиеся теги */
@keyframes fx-dev-a {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-26px, -30px) scale(1.35) rotate(-12deg); opacity: 0; }
}
@keyframes fx-dev-b {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(30px, -26px) scale(1.3) rotate(10deg); opacity: 0; }
}
@keyframes fx-dev-c {
  0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-50%, 36px) scale(1.2); opacity: 0; }
}
@keyframes icon-dev { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* — SEO: восходящие стрелки роста */
@keyframes fx-seo-a {
  0% { transform: translate(0, 12px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-10px, -40px); opacity: 0; }
}
@keyframes fx-seo-b {
  0% { transform: translate(0, 16px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(14px, -46px); opacity: 0; }
}
@keyframes fx-seo-c {
  0% { transform: translate(-50%, 12px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-50%, -54px); opacity: 0; }
}
@keyframes icon-seo { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.12); } }

/* — Дизайн: мерцающие искры */
@keyframes fx-design-a {
  0% { transform: scale(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes fx-design-b {
  0% { transform: scale(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes fx-design-c {
  0% { transform: translate(-50%, 0) scale(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -8px) scale(1.5); opacity: 0; }
}
@keyframes icon-design { to { transform: rotate(360deg); } }

/* — Соцсети: расходящиеся импульсы */
@keyframes fx-social-a {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-20px, -26px) scale(1.25); opacity: 0; }
}
@keyframes fx-social-b {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(22px, -28px) scale(1.25); opacity: 0; }
}
@keyframes fx-social-c {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-50%, -42px) scale(1.3); opacity: 0; }
}
@keyframes icon-social { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* — Реклама: расширяющиеся кольца-мишени */
@keyframes fx-ads-a {
  0% { transform: scale(0.3); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes fx-ads-b {
  0% { transform: scale(0.3); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes fx-ads-c {
  0% { transform: translate(-50%, 0) scale(0.3); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(-50%, 0) scale(2); opacity: 0; }
}
@keyframes icon-ads { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(8deg); } }

/* — Поддержка: сердцебиение */
@keyframes fx-support-a {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  20% { transform: scale(1.35); opacity: 1; }
  30% { transform: scale(0.9); }
  40% { transform: scale(1.2); opacity: 0.8; }
}
@keyframes fx-support-b {
  0%, 60%, 100% { transform: scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  20% { transform: scale(1.3); opacity: 1; }
  30% { transform: scale(0.9); }
  40% { transform: scale(1.15); opacity: 0.8; }
}
@keyframes fx-support-c {
  0%, 60%, 100% { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  20% { transform: translate(-50%, 0) scale(1.3); opacity: 1; }
  30% { transform: translate(-50%, 0) scale(0.9); }
  40% { transform: translate(-50%, 0) scale(1.2); opacity: 0.8; }
}
@keyframes icon-support {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.18); }
  24% { transform: scale(1); }
  36% { transform: scale(1.18); }
  48%, 100% { transform: scale(1); }
}

/* Сканирующая линия на активной карточке команды */
@keyframes team-scan-move {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* FAQ: мерцание звёзд и орбита */
@keyframes faq-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}
@keyframes faq-orbit-spin {
  from { transform: scale(1.06) rotate(0deg); }
  to { transform: scale(1.06) rotate(360deg); }
}

/* Контакты: взлёт ракеты и звёзды-следы */
@keyframes rocket-launch {
  0% { transform: translateX(-50%) translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translateX(-50%) translateY(-270px) rotate(-6deg); opacity: 1; }
  75% { transform: translateX(-50%) translateY(-330px) rotate(-10deg); opacity: 0; }
  100% { transform: translateX(-50%) translateY(-330px) rotate(-10deg); opacity: 0; }
}
@keyframes tracer-up {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  55% { transform: translateY(-250px) scale(1); opacity: 0.7; }
  80% { transform: translateY(-310px) scale(0.7); opacity: 0; }
  100% { transform: translateY(-310px) scale(0.7); opacity: 0; }
}

/* ===== Окно браузера в контактах: блоки сайта «собираются» ===== */
@keyframes build-in {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); filter: brightness(1.6); }
  12% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Маршруты космических мини-ботов внутри окна браузера */
@keyframes robot-a {
  0% { left: 12%; top: 6%; opacity: 0; }
  6% { opacity: 1; }
  14% { left: 16%; top: 12%; }
  24% { left: 30%; top: 34%; }
  34% { left: 58%; top: 30%; }
  44% { left: 72%; top: 52%; }
  54% { left: 70%; top: 70%; }
  64% { left: 42%; top: 78%; }
  76% { left: 30%; top: 40%; opacity: 1; }
  86% { left: 14%; top: 20%; opacity: 0; }
  100% { left: 14%; top: 20%; opacity: 0; }
}
@keyframes robot-b {
  0% { left: 82%; top: 74%; opacity: 0; }
  6% { opacity: 1; }
  16% { left: 60%; top: 60%; }
  26% { left: 34%; top: 30%; }
  36% { left: 20%; top: 12%; }
  46% { left: 26%; top: 14%; }
  56% { left: 70%; top: 26%; }
  66% { left: 84%; top: 50%; }
  76% { left: 78%; top: 72%; }
  86% { left: 60%; top: 84%; opacity: 1; }
  94% { left: 88%; top: 84%; opacity: 0; }
  100% { left: 88%; top: 84%; opacity: 0; }
}

/* Луч-инструмент: загорается, пока бот «устанавливает» блок */
@keyframes robot-beam-a {
  0%, 13%, 25%, 33%, 45%, 53%, 65%, 100% { opacity: 0; }
  14%, 24% { opacity: 0.9; }
  34%, 44% { opacity: 0.8; }
  54%, 64% { opacity: 0.9; }
}
@keyframes robot-beam-b {
  0%, 15%, 27%, 35%, 47%, 55%, 67%, 75%, 87%, 100% { opacity: 0; }
  16%, 26% { opacity: 0.85; }
  36%, 46% { opacity: 0.75; }
  56%, 66% { opacity: 0.85; }
  76%, 86% { opacity: 0.9; }
}

/* Главный баннер: дрейфующие частицы-искры */
@keyframes particle-drift {
  0% { transform: translateY(30px) translateX(0) scale(0.6); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.55; }
  100% { transform: translateY(-160px) translateX(24px) scale(1); opacity: 0; }
}

/* Подпись грани куба: мигающий курсор печати */
@keyframes cube-type-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Мягкое парение куба в баннере */
@keyframes cube-float {
  0%, 100% { transform: translateY(0) rotate(0.5deg); }
  50% { transform: translateY(-12px) rotate(-0.5deg); }
}

/* Вспышка при установке блока сайта (сборка в окне браузера) */
@keyframes build-flash {
  0% { filter: brightness(2.2); box-shadow: 0 0 20px rgba(41, 170, 244, 0.85); }
  100% { filter: brightness(1); box-shadow: none; }
}

/* ===== Фон текстового блока «Как мы работаем» ===== */

/* Этап «Обсуждение»: расходящиеся кольца радара */
@keyframes radar-ring {
  0% { transform: scale(0.4); opacity: 0.85; }
  100% { transform: scale(4); opacity: 0; }
}

/* Этап «Разработка»: падающие символы кода */
@keyframes code-fall {
  0% { transform: translateY(-30px); opacity: 0; }
  12% { opacity: 0.75; }
  85% { opacity: 0.45; }
  100% { transform: translateY(340px); opacity: 0; }
}

/* Этап «Запуск и рост»: взлетающие искры */
@keyframes rise-up {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  15% { opacity: 0.9; }
  85% { opacity: 0.55; }
  100% { transform: translateY(-260px) scale(1.1); opacity: 0; }
}

/* Этап «Запуск и рост»: траектория ракеты */
@keyframes rocket-path {
  0% { transform: translateY(40px) rotate(0deg); opacity: 0; }
  12% { opacity: 0.95; }
  70% { transform: translateY(-210px) rotate(-8deg); opacity: 0.9; }
  85% { transform: translateY(-260px) rotate(-12deg); opacity: 0; }
  100% { transform: translateY(-260px) rotate(-12deg); opacity: 0; }
}

/* Вспышка номера этапа при смене шага */
@keyframes num-pop {
  0% { transform: scale(0.7); box-shadow: 0 0 0 rgba(41, 170, 244, 0); }
  45% { transform: scale(1.18); box-shadow: 0 0 34px rgba(41, 170, 244, 0.7); }
  100% { transform: scale(1); box-shadow: 0 0 18px rgba(41, 170, 244, 0.3); }
}

/* Короткая вспышка рамки карточки при смене этапа */
@keyframes card-flash {
  0% { box-shadow: 0 0 0 rgba(41, 170, 244, 0); }
  30% { box-shadow: 0 0 42px rgba(41, 170, 244, 0.4); }
  100% { box-shadow: 0 0 0 rgba(41, 170, 244, 0); }
}

/* Пульс активного кружка этапа (сохраняет статичное свечение) */
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(41, 170, 244, 0.55), 0 0 20px rgba(41, 170, 244, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(41, 170, 244, 0), 0 0 20px rgba(41, 170, 244, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(41, 170, 244, 0), 0 0 20px rgba(41, 170, 244, 0.5); }
}

/* Квиз: парение голограммы ИИ-помощника */
@keyframes assistant-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Квиз: сканирующая линия по голограмме */
@keyframes quiz-scan {
  0% { top: 4%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 86%; opacity: 0; }
}

/* Квиз: живой «разговорный» наклон головы помощника во время речи */
@keyframes assistant-talk {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-4px) rotate(2deg); }
  50% { transform: translateY(0) rotate(-1deg); }
  75% { transform: translateY(-3px) rotate(1.5deg); }
}

/* Квиз: «голосовые» полоски во время речи */
@keyframes talk-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* Квиз: пульсирующее кольцо «голоса» вокруг головы */
@keyframes voice-ring {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.16); opacity: 0; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Квиз: подпрыгивающие точки «думаю» */
@keyframes think-dot {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Квиз: лёгкий «прыжок» аватара при выборе варианта */
@keyframes assistant-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Квиз: вспышка строки текущей суммы */
@keyframes total-pop {
  0% { transform: scale(1); color: #22D3EE; }
  40% { transform: scale(1.2); color: #EAF2FB; }
  100% { transform: scale(1); color: #22D3EE; }
}

/* Квиз: разлёт искр при завершении расчёта */
@keyframes quiz-burst {
  0% { transform: translate(0, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(var(--bx, 0), var(--by, -70px)) scale(1.1); opacity: 0; }
}

/* Квиз: лёгкое «мерцание» голограммы, как у видео */
@keyframes holo-flicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  92% { opacity: 0.85; }
  93% { opacity: 1; }
  95% { opacity: 0.92; }
  96% { opacity: 1; }
  98% { opacity: 0.88; }
  99% { opacity: 1; }
}

/* Квиз: рот открывается и закрывается в ритме речи (лицо не меняется) */
@keyframes mouth-glow-talk {
  0%, 100% { transform: scale(1, 0.4); opacity: 0.55; }
  22% { transform: scale(1, 1.25); opacity: 1; }
  40% { transform: scale(1, 0.6); opacity: 0.75; }
  58% { transform: scale(1, 1.35); opacity: 1; }
  76% { transform: scale(1, 0.7); opacity: 0.8; }
}

::selection {
  background: rgba(41, 170, 244, 0.35);
  color: #EAF2FB;
}

/* Уважение к настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Дополнительные стили для работы без Playful ===== */

/* Пока скрипт не распределил страницы, показываем только первую */
[data-pf-route] { display: none; }
main > [data-pf-route]:first-of-type { display: block; }

/* Скрыть полосу прокрутки (мобильное меню) */
.playful-scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.playful-scrollbar-hidden::-webkit-scrollbar { display: none; }

/* Оформление текста статей */
.playful-prose { line-height: 1.75; }
.playful-prose h2 {
  font-family: 'Sora', system-ui, sans-serif;
  color: var(--color-text-bright);
  font-size: 1.45em;
  line-height: 1.3;
  margin: 1.5em 0 0.6em;
}
.playful-prose p { margin: 0.8em 0; }
.playful-prose ul, .playful-prose ol { margin: 0.8em 0; padding-left: 1.4em; }
.playful-prose ul { list-style: disc; }
.playful-prose ol { list-style: decimal; }
.playful-prose li { margin: 0.35em 0; }
.playful-prose a { color: var(--color-primary); text-decoration: underline; }
.playful-prose strong { color: var(--color-text-bright); font-weight: 600; }
.playful-prose pre {
  margin: 1em 0;
  padding: 1em 1.2em;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
  line-height: 1.6;
}
.playful-prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Окно кейса (диалог) */
.playful-dialog {
  max-width: 42rem;
  max-height: 85vh;
  border: none;
  border-radius: 22px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 0 60px rgba(41, 170, 244, 0.25);
}
.playful-dialog::backdrop {
  background: rgba(4, 10, 20, 0.7);
  backdrop-filter: blur(4px);
}