/* 
  animations.css — Супер эффектные анимации презентации
  Version: 1.2.0
  Project: preza.aikonver.ru
  Description: Максимально эффектные 3D анимации, glow, particles
*/

/* ===== 3D PERSPECTIVE ===== */
#presentation {
  perspective: 2000px;
  perspective-origin: 50% 50%;
}

/* ===== SLIDE TRANSITIONS (10X DRAMATIC) ===== */
.slide {
  transition: opacity 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              filter 0.6s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Слайд уходит влево - 3D ROTATION + BLUR */
.slide.exit-left {
  opacity: 0;
  transform: translateX(-180px) translateZ(-400px) rotateY(35deg) scale(0.85);
  filter: blur(12px) brightness(0.4);
  pointer-events: none;
}

/* Слайд входит справа - 3D ROTATION */
.slide.enter-right {
  opacity: 0;
  transform: translateX(180px) translateZ(-400px) rotateY(-35deg) scale(0.85);
  filter: blur(12px) brightness(0.4);
}

/* Слайд уходит вправо (при навигации назад) - 3D */
.slide.exit-right {
  opacity: 0;
  transform: translateX(180px) translateZ(-400px) rotateY(-35deg) scale(0.85);
  filter: blur(12px) brightness(0.4);
  pointer-events: none;
}

/* Слайд входит слева (при навигации назад) - 3D */
.slide.enter-left {
  opacity: 0;
  transform: translateX(-180px) translateZ(-400px) rotateY(35deg) scale(0.85);
  filter: blur(12px) brightness(0.4);
}

/* Активный слайд - DRAMATIC ENTRANCE */
.slide.active {
  opacity: 1;
  transform: translateX(0) translateZ(0) rotateY(0) scale(1);
  filter: blur(0) brightness(1);
  pointer-events: all;
  animation: slide-enter-glow 0.8s ease-out;
}

@keyframes slide-enter-glow {
  0% { box-shadow: 0 0 0 rgba(124,58,237,0); }
  50% { box-shadow: 0 0 80px rgba(124,58,237,0.6), inset 0 0 100px rgba(124,58,237,0.1); }
  100% { box-shadow: 0 0 0 rgba(124,58,237,0); }
}

/* ===== STAGGER ITEMS (появление по очереди) - DRAMATIC ===== */
.stagger-item {
  opacity: 0;
  transform: translateY(50px) scale(0.9) rotateX(15deg);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: blur(8px);
  transform-style: preserve-3d;
}

.stagger-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
  filter: blur(0);
  animation: item-appear-glow 0.6s ease-out;
}

@keyframes item-appear-glow {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 20px rgba(167,139,250,0.6), 0 0 40px rgba(124,58,237,0.3); }
}

/* Задержки для stagger-эффекта */
.stagger-item:nth-child(1) { transition-delay: 0.08s; }
.stagger-item:nth-child(2) { transition-delay: 0.18s; }
.stagger-item:nth-child(3) { transition-delay: 0.28s; }
.stagger-item:nth-child(4) { transition-delay: 0.38s; }
.stagger-item:nth-child(5) { transition-delay: 0.48s; }
.stagger-item:nth-child(6) { transition-delay: 0.58s; }
.stagger-item:nth-child(7) { transition-delay: 0.68s; }
.stagger-item:nth-child(8) { transition-delay: 0.78s; }
.stagger-item:nth-child(9) { transition-delay: 0.88s; }
.stagger-item:nth-child(10) { transition-delay: 0.98s; }

/* ===== CARD GRID STAGGER - EXPLOSIVE ===== */
.problem-card.stagger-item:nth-child(1),
.stat-card.stagger-item:nth-child(1),
.ai-card.stagger-item:nth-child(1),
.dept-card.stagger-item:nth-child(1),
.agent-card.stagger-item:nth-child(1),
.objection-card.stagger-item:nth-child(1) { transition-delay: 0.35s; }

.problem-card.stagger-item:nth-child(2),
.stat-card.stagger-item:nth-child(2),
.ai-card.stagger-item:nth-child(2),
.dept-card.stagger-item:nth-child(2),
.agent-card.stagger-item:nth-child(2),
.objection-card.stagger-item:nth-child(2) { transition-delay: 0.5s; }

.problem-card.stagger-item:nth-child(3),
.stat-card.stagger-item:nth-child(3),
.ai-card.stagger-item:nth-child(3),
.dept-card.stagger-item:nth-child(3),
.agent-card.stagger-item:nth-child(3),
.objection-card.stagger-item:nth-child(3) { transition-delay: 0.65s; }

.problem-card.stagger-item:nth-child(4),
.stat-card.stagger-item:nth-child(4),
.ai-card.stagger-item:nth-child(4),
.dept-card.stagger-item:nth-child(4),
.agent-card.stagger-item:nth-child(4),
.objection-card.stagger-item:nth-child(4) { transition-delay: 0.8s; }

.problem-card.stagger-item:nth-child(5),
.stat-card.stagger-item:nth-child(5),
.ai-card.stagger-item:nth-child(5),
.dept-card.stagger-item:nth-child(5),
.agent-card.stagger-item:nth-child(5),
.objection-card.stagger-item:nth-child(5) { transition-delay: 0.95s; }

.problem-card.stagger-item:nth-child(6),
.stat-card.stagger-item:nth-child(6),
.ai-card.stagger-item:nth-child(6),
.dept-card.stagger-item:nth-child(6),
.agent-card.stagger-item:nth-child(6),
.objection-card.stagger-item:nth-child(6) { transition-delay: 1.1s; }

/* ===== HERO ORB ANIMATION - MEGA DRAMATIC ===== */
@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    box-shadow: 0 0 150px rgba(124,58,237,0.4), 
                0 0 300px rgba(6,182,212,0.25),
                inset 0 0 80px rgba(124,58,237,0.2);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 0 250px rgba(124,58,237,0.7), 
                0 0 500px rgba(6,182,212,0.4),
                inset 0 0 120px rgba(6,182,212,0.3);
  }
  50% {
    transform: scale(1.05) rotate(-3deg);
    box-shadow: 0 0 200px rgba(6,182,212,0.6), 
                0 0 400px rgba(124,58,237,0.35),
                inset 0 0 100px rgba(167,139,250,0.25);
  }
  75% {
    transform: scale(1.12) rotate(4deg);
    box-shadow: 0 0 220px rgba(167,139,250,0.65), 
                0 0 450px rgba(124,58,237,0.4),
                inset 0 0 110px rgba(6,182,212,0.28);
  }
}

.ai-orb {
  animation: orb-pulse 6s ease-in-out infinite;
  filter: drop-shadow(0 0 50px rgba(124,58,237,0.5));
}

/* ===== GRADIENT TEXT MEGA SHIMMER ===== */
@keyframes shimmer {
  0% { background-position: -300% center; }
  100% { background-position: 300% center; }
}
.hero-title .accent-gradient {
  background-size: 300% auto;
  animation: shimmer 3s linear infinite;
  filter: drop-shadow(0 0 15px rgba(167,139,250,0.6));
}

/* ===== FLOATING PARTICLES - ENHANCED ===== */
@keyframes float-up {
  0% { 
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.5); 
    opacity: 0; 
  }
  5% { opacity: 0.8; }
  50% { 
    transform: translateY(-50vh) translateX(20px) rotate(180deg) scale(1.2);
    opacity: 0.6; 
  }
  90% { opacity: 0.2; }
  100% { 
    transform: translateY(-100vh) translateX(-30px) rotate(360deg) scale(0.8); 
    opacity: 0; 
  }
}

/* ===== CTA BUTTON MEGA PULSE ===== */
@keyframes btn-pulse {
  0%, 100% { 
    box-shadow: 0 10px 40px rgba(124,58,237,0.5),
                0 0 0 0 rgba(124,58,237,0); 
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 15px 70px rgba(124,58,237,0.9), 
                0 0 80px rgba(167,139,250,0.4),
                0 0 0 10px rgba(124,58,237,0.2);
    transform: scale(1.05);
  }
}
.big-cta {
  animation: btn-pulse 2s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.big-cta:hover {
  animation: btn-pulse 0.8s ease-in-out infinite;
  transform: translateY(-6px) scale(1.08) !important;
  box-shadow: 0 20px 80px rgba(124,58,237,1),
              0 0 100px rgba(167,139,250,0.6) !important;
}

/* ===== WARNING NUMBER INTENSE GLOW ===== */
@keyframes number-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 30px rgba(124,58,237,0.5))
            drop-shadow(0 0 60px rgba(167,139,250,0.3)); 
    transform: scale(1);
  }
  50% { 
    filter: drop-shadow(0 0 60px rgba(124,58,237,1))
            drop-shadow(0 0 120px rgba(167,139,250,0.6))
            drop-shadow(0 0 150px rgba(6,182,212,0.4));
    transform: scale(1.08);
  }
}
.warning-num {
  animation: number-glow 2.5s ease-in-out infinite;
}

/* ===== PROGRESS BAR MEGA GLOW ===== */
@keyframes progress-glow {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(124,58,237,0.8),
                0 2px 30px rgba(124,58,237,0.6); 
  }
  50% { 
    box-shadow: 0 0 40px rgba(124,58,237,1), 
                0 0 60px rgba(6,182,212,0.7),
                0 2px 50px rgba(167,139,250,0.8);
  }
}
#progress-fill {
  animation: progress-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(124,58,237,0.8));
}

/* ===== CARD HOVER MEGA GLOW ===== */
.dept-card:hover,
.ai-card:hover,
.agent-card:hover,
.problem-card:hover,
.objection-card:hover,
.stat-card:hover {
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 
              0 0 60px rgba(124,58,237,0.5),
              inset 0 0 40px rgba(124,58,237,0.08);
  transform: translateY(-10px) scale(1.05) rotateX(2deg) !important;
  filter: brightness(1.15);
  border-color: rgba(124,58,237,0.6) !important;
  animation: card-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes card-glow-pulse {
  0%, 100% { 
    box-shadow: 0 20px 80px rgba(0,0,0,0.6), 
                0 0 60px rgba(124,58,237,0.5);
  }
  50% { 
    box-shadow: 0 25px 100px rgba(0,0,0,0.7), 
                0 0 100px rgba(124,58,237,0.8),
                0 0 150px rgba(167,139,250,0.4);
  }
}

/* ===== CRM CENTER NODE MEGA PULSE ===== */
@keyframes center-pulse {
  0%, 100% { 
    box-shadow: 0 0 40px rgba(124,58,237,0.5),
                0 0 80px rgba(6,182,212,0.3);
    transform: scale(1.1);
  }
  50% { 
    box-shadow: 0 0 80px rgba(124,58,237,0.9), 
                0 0 140px rgba(6,182,212,0.6),
                inset 0 0 60px rgba(167,139,250,0.3);
    transform: scale(1.18);
  }
}
.crm-node.center-node {
  animation: center-pulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(124,58,237,0.6));
}

/* ===== VENN CENTER MEGA GLOW ===== */
@keyframes venn-glow {
  0%, 100% { 
    box-shadow: 0 0 50px rgba(124,58,237,0.5), 
                0 0 100px rgba(6,182,212,0.3);
    transform: scale(1);
  }
  33% { 
    box-shadow: 0 0 100px rgba(124,58,237,0.8), 
                0 0 180px rgba(6,182,212,0.5),
                inset 0 0 80px rgba(167,139,250,0.2);
    transform: scale(1.08) rotate(2deg);
  }
  66% { 
    box-shadow: 0 0 90px rgba(6,182,212,0.7), 
                0 0 150px rgba(124,58,237,0.6),
                inset 0 0 70px rgba(6,182,212,0.25);
    transform: scale(1.05) rotate(-2deg);
  }
}
.venn-center {
  animation: venn-glow 4s ease-in-out infinite;
}

/* ===== INPUT FOCUS MEGA ANIMATION ===== */
.input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(124,58,237,0.4),
              0 0 30px rgba(124,58,237,0.6),
              inset 0 0 20px rgba(124,58,237,0.1);
  transform: scale(1.03);
  border-color: rgba(124,58,237,0.8) !important;
  animation: input-glow 1.5s ease-in-out infinite;
}

@keyframes input-glow {
  0%, 100% { 
    box-shadow: 0 0 0 3px rgba(124,58,237,0.4),
                0 0 30px rgba(124,58,237,0.6);
  }
  50% { 
    box-shadow: 0 0 0 4px rgba(124,58,237,0.6),
                0 0 50px rgba(124,58,237,0.9),
                0 0 80px rgba(167,139,250,0.4);
  }
}

/* ===== CALC RESULT UPDATE - EXPLOSIVE ===== */
@keyframes value-pop {
  0% { 
    transform: scale(1); 
    filter: blur(0);
  }
  30% { 
    transform: scale(1.35) rotate(5deg); 
    color: #c4b5fd; 
    filter: blur(2px) drop-shadow(0 0 20px rgba(167,139,250,0.8));
  }
  60% {
    transform: scale(0.95) rotate(-3deg);
    filter: blur(1px);
  }
  100% { 
    transform: scale(1) rotate(0deg); 
    filter: blur(0);
  }
}
.calc-value.updated {
  animation: value-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== DOT ANIMATIONS - DRAMATIC ===== */
@keyframes dot-appear {
  0% { 
    transform: scale(0) rotate(0deg); 
    opacity: 0;
  }
  60% { 
    transform: scale(1.6) rotate(180deg); 
    opacity: 1;
  }
  100% { 
    transform: scale(1) rotate(360deg); 
    opacity: 1;
  }
}
.dot { 
  animation: dot-appear 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
}
.dot.active {
  animation: dot-pulse 1.5s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { 
    transform: scale(1.4);
    box-shadow: 0 0 10px var(--accent-purple);
  }
  50% { 
    transform: scale(1.7);
    box-shadow: 0 0 25px var(--accent-purple),
                0 0 40px rgba(167,139,250,0.6);
  }
}

/* ===== SLIDE BACKGROUND GRADIENT - ANIMATED ===== */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at var(--grad-x, 20%) var(--grad-y, 80%),
    rgba(124,58,237,0.12) 0%,
    rgba(6,182,212,0.06) 40%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
  animation: gradient-shift 8s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { 
    opacity: 0.6;
    transform: scale(1) rotate(0deg);
  }
  50% { 
    opacity: 0.9;
    transform: scale(1.2) rotate(5deg);
  }
}

/* Разные позиции градиента для разных слайдов */
.slide[data-index="0"]::before { --grad-x: 80%; --grad-y: 30%; }
.slide[data-index="1"]::before { --grad-x: 10%; --grad-y: 90%; }
.slide[data-index="2"]::before { --grad-x: 50%; --grad-y: 50%; }
.slide[data-index="3"]::before { --grad-x: 90%; --grad-y: 10%; }
.slide[data-index="4"]::before { --grad-x: 30%; --grad-y: 70%; }
.slide[data-index="5"]::before { --grad-x: 70%; --grad-y: 20%; }
.slide[data-index="6"]::before { --grad-x: 50%; --grad-y: 50%; }
.slide[data-index="7"]::before { --grad-x: 20%; --grad-y: 80%; }
.slide[data-index="17"]::before { 
  background: radial-gradient(ellipse at 50% 50%, rgba(124,58,237,0.18) 0%, rgba(6,182,212,0.1) 50%, transparent 80%);
}

/* ===== DEPT SLIDES ACCENT - PULSING ===== */
.dept-slide::before {
  background: radial-gradient(
    ellipse at 0% 100%,
    color-mix(in srgb, var(--dept-accent, #7c3aed) 15%, transparent) 0%,
    transparent 60%
  );
  animation: dept-gradient-pulse 5s ease-in-out infinite;
}

@keyframes dept-gradient-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== ROADMAP MONTH HOVER - DRAMATIC ===== */
.roadmap-month {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
              box-shadow 0.4s ease;
}
.roadmap-month:hover {
  transform: translateY(-12px) scale(1.05) rotateX(5deg);
  box-shadow: 0 25px 80px rgba(0,0,0,0.5), 
              0 0 60px rgba(124,58,237,0.4),
              inset 0 0 40px rgba(124,58,237,0.06);
}

/* ===== VERSION BADGE MEGA GLOW ===== */
@keyframes badge-glow {
  0%, 100% { 
    box-shadow: 0 0 10px rgba(124,58,237,0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(124,58,237,0.7),
                0 0 50px rgba(167,139,250,0.4);
    transform: scale(1.05);
  }
}
#version-badge {
  animation: badge-glow 3s ease-in-out infinite;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#version-badge:hover {
  animation: badge-glow 1s ease-in-out infinite;
  transform: scale(1.15) translateY(-3px) !important;
  box-shadow: 0 0 40px rgba(124,58,237,1),
              0 0 70px rgba(167,139,250,0.6) !important;
}

/* ===== EMOJI/ICON FLOAT ===== */
.slide-icon,
.problem-icon,
.objection-emoji,
.agent-icon,
.ai-card-icon,
.dept-icon {
  animation: icon-float 3s ease-in-out infinite;
  display: inline-block;
}

@keyframes icon-float {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    filter: drop-shadow(0 5px 15px rgba(124,58,237,0.3));
  }
  50% { 
    transform: translateY(-8px) rotate(5deg);
    filter: drop-shadow(0 10px 25px rgba(124,58,237,0.5));
  }
}

/* ===== NAV BUTTONS HOVER - EXPLOSIVE ===== */
#prev-btn:hover, #next-btn:hover {
  animation: btn-hover-pulse 0.6s ease-in-out infinite !important;
}

@keyframes btn-hover-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(124,58,237,0.6);
  }
  50% { 
    box-shadow: 0 0 50px rgba(124,58,237,1),
                0 0 80px rgba(167,139,250,0.6);
  }
}

/* ===== TEXT GLOW ON HOVER ===== */
.accent-gradient:hover {
  animation: text-mega-glow 1s ease-in-out infinite;
}

@keyframes text-mega-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(167,139,250,0.5));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(167,139,250,1))
            drop-shadow(0 0 50px rgba(124,58,237,0.7));
  }
}

/* ===== STAT NUMBERS - BREATHING EFFECT ===== */
.stat-value,
.problem-num,
.objection-title {
  animation: number-breathe 4s ease-in-out infinite;
}

@keyframes number-breathe {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 0 0 10px currentColor;
  }
  50% { 
    transform: scale(1.05);
    text-shadow: 0 0 25px currentColor,
                 0 0 40px currentColor;
  }
}

/* ===== FEATURE PILLS HOVER ===== */
.feature-pill:hover {
  transform: scale(1.15) translateY(-3px);
  box-shadow: 0 10px 30px rgba(124,58,237,0.5),
              0 0 40px rgba(167,139,250,0.4);
  animation: pill-glow 1s ease-in-out infinite;
}

@keyframes pill-glow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(124,58,237,0.5);
  }
  50% {
    box-shadow: 0 15px 50px rgba(124,58,237,0.8),
                0 0 60px rgba(167,139,250,0.6);
  }
}