/*
 * FINXO — Animations & Transitions
 * Стиль: framer-motion easeOut, большие смещения (40px), плавные кривые
 */

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* Основная анимация появления снизу — как framer-motion initial:{opacity:0,y:40} */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Появление слева — как framer-motion initial:{opacity:0,x:-40} */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Появление справа — как framer-motion initial:{opacity:0,x:30} */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(.90);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-dots {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-6px); }
}

@keyframes progress-bar {
  from { width: 0; }
}

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

@keyframes glow-pulse {
  0%, 100% { opacity: .08; }
  50%       { opacity: .15; }
}

/* ============================================================
   ANIMATION CLASSES
   easeOut cubic-bezier — как framer-motion
============================================================ */
.anim-fade-up {
  animation: fadeInUp .7s cubic-bezier(.16,1,.3,1) both;
}
.anim-fade-left {
  animation: fadeInLeft .7s cubic-bezier(.16,1,.3,1) both;
}
.anim-fade-right {
  animation: fadeInRight .7s cubic-bezier(.16,1,.3,1) both;
}
.anim-fade {
  animation: fadeIn .6s ease both;
}
.anim-scale {
  animation: scaleIn .6s cubic-bezier(.16,1,.3,1) both;
}
.anim-float {
  animation: float 4s ease-in-out infinite;
}

/* Stagger delays — для последовательного появления карточек */
.delay-1 { animation-delay: .10s; }
.delay-2 { animation-delay: .20s; }
.delay-3 { animation-delay: .30s; }
.delay-4 { animation-delay: .40s; }
.delay-5 { animation-delay: .50s; }
.delay-6 { animation-delay: .60s; }
.delay-7 { animation-delay: .70s; }
.delay-8 { animation-delay: .80s; }

/* ============================================================
   SCROLL-TRIGGERED REVEAL
   JS добавляет .visible через IntersectionObserver
   Большие смещения + медленный easeOut = глубокое ощущение
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Задержки для reveal — stagger эффект */
.reveal.delay-1 { transition-delay: .10s; }
.reveal.delay-2 { transition-delay: .20s; }
.reveal.delay-3 { transition-delay: .30s; }
.reveal.delay-4 { transition-delay: .40s; }
.reveal.delay-5 { transition-delay: .50s; }
.reveal.delay-6 { transition-delay: .60s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal — для карточек */
.reveal-scale {
  opacity: 0;
  transform: scale(.94) translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.reveal-scale.delay-1 { transition-delay: .10s; }
.reveal-scale.delay-2 { transition-delay: .20s; }
.reveal-scale.delay-3 { transition-delay: .30s; }
.reveal-scale.delay-4 { transition-delay: .40s; }

/* ============================================================
   TYPING DOTS
============================================================ */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7B5EA7;
  animation: bounce-dots 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .30s; }

/* ============================================================
   SCORE GAUGE
============================================================ */
.gauge-fill {
  transition: stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   GLOW EFFECTS
============================================================ */
.glow-hover {
  transition: box-shadow .3s ease, transform .3s ease;
}
.glow-hover:hover {
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.3);
  transform: translateY(-2px);
}

/* Пульсирующие glow-blobs в hero */
.hero-glow-animate {
  animation: glow-pulse 4s ease-in-out infinite;
}
.hero-glow-animate-2 {
  animation: glow-pulse 5s ease-in-out infinite reverse;
}