/* ============================================
   ANIMATIONS — Все анимации и переходы
   ============================================ */

/* ── Загрузка страницы ── */
@keyframes headerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroPanelFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes heroTextFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes heroButtonsFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes tileCascadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Typewriter эффект ── */
@keyframes typewriterCursor {
  0%, 100% { border-color: var(--accent-cyan); }
  50% { border-color: transparent; }
}

.typewriter-cursor::after {
  content: '|';
  color: var(--accent-cyan);
  animation: typewriterCursor 0.8s step-end infinite;
  margin-left: 2px;
}

/* ── Fade Up (скролл-анимация) ── */
.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Задержки каскада ── */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }
.anim-delay-6 { transition-delay: 0.6s; }

/* ── Старые классы fade-up для совместимости ── */
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: none;
}

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.4s; }
.delay-6 { transition-delay: 0.48s; }

/* ── Пульсация свечения ── */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.2),
                0 0 20px rgba(0, 200, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.4),
                0 0 40px rgba(0, 200, 255, 0.2),
                0 0 80px rgba(0, 200, 255, 0.1);
  }
}

/* ── Вращение логотипа ── */
@keyframes logoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes logoSpinGold {
  from {
    transform: rotate(0deg);
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(0, 200, 255, 0.8));
  }
  to {
    transform: rotate(360deg);
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.4));
  }
}

/* ── Плавающие элементы ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes floatingTile {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Иконки — лёгкое покачивание ── */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.icon-float {
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes serviceIconShine {
  0% {
    transform: translateX(-170%) rotate(14deg);
    opacity: 0;
  }
  12% {
    opacity: 0.35;
  }
  34% {
    opacity: 0.9;
  }
  55% {
    transform: translateX(170%) rotate(14deg);
    opacity: 0;
  }
  100% {
    transform: translateX(170%) rotate(14deg);
    opacity: 0;
  }
}

.service-tile-icon-shine {
  animation: serviceIconShine 4.8s ease-in-out infinite;
}

/* ── Вращение иконки при наведении ── */
.tile:hover .tile-icon-spin {
  animation: iconRotate 0.6s ease;
}

@keyframes iconRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Орбиты ── */
@keyframes spinOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinOrbitReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* ── Вспышка ── */
@keyframes flareSweep {
  0%, 100% { opacity: 0.25; transform: scaleX(0.82) rotate(26deg); }
  50% { opacity: 0.92; transform: scaleX(1.08) rotate(26deg); }
}

/* ── Карусель ── */
@keyframes carouselRun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Мягкая пульсация ── */
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* ── Пульсация узлов нейросети ── */
@keyframes nodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

/* ── Градиентная рамка — вращение ── */
@keyframes borderGradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Ripple эффект (клик по кнопке) ── */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-cyan), transparent);
  width: 20px;
  height: 20px;
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

/* ── Счётчик чисел ── */
.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  text-shadow: 0 0 30px var(--accent-glow);
  line-height: 1;
}

/* ── Молекулярный спиннер загрузки ── */
@keyframes spinnerOrbit1 {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@keyframes spinnerOrbit2 {
  from { transform: rotate(120deg) translateX(20px) rotate(-120deg); }
  to { transform: rotate(480deg) translateX(20px) rotate(-480deg); }
}

@keyframes spinnerOrbit3 {
  from { transform: rotate(240deg) translateX(20px) rotate(-240deg); }
  to { transform: rotate(600deg) translateX(20px) rotate(-600deg); }
}

.molecular-spinner {
  width: 50px;
  height: 50px;
  position: relative;
  display: inline-block;
}

.molecular-spinner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-glow);
}

.molecular-spinner .orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent-cyan);
}

.molecular-spinner .orbit-node:nth-child(1) {
  animation: spinnerOrbit1 1.5s linear infinite;
}

.molecular-spinner .orbit-node:nth-child(2) {
  animation: spinnerOrbit2 1.5s linear infinite;
}

.molecular-spinner .orbit-node:nth-child(3) {
  animation: spinnerOrbit3 1.5s linear infinite;
}

/* ── Анимация подчёркивания навигации ── */
@keyframes underlineFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Mesh-градиент для hero ── */
@keyframes meshGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ── Мерцание сигнала ── */
@keyframes signalBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Плавное появление бренда ── */
@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ── Word-by-word reveal ── */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.word-reveal.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

/* ── Image scale reveal ── */
.img-reveal {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.img-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}