@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    overscroll-behavior-y: none; /* Предотвращает "отскок" страницы на мобильных */
}

/* Canvas для Three.js */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* --- СТИЛИ АНИМАЦИЙ ПОЯВЛЕНИЯ --- */

/* Базовые стили для элементов, которые будут анимироваться */
.anim-fade-in, .anim-glitch, .anim-fly-in-up, .anim-fly-in-left, .anim-fly-in-right {
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Начальные состояния */
.anim-fly-in-up { transform: translateY(30px); }
.anim-fly-in-left { transform: translateX(-30px); }
.anim-fly-in-right { transform: translateX(30px); }

/* Задержки анимации */
.anim-delay-200 { transition-delay: 200ms; }
.anim-delay-300 { transition-delay: 300ms; }
.anim-delay-400 { transition-delay: 400ms; }
.anim-delay-500 { transition-delay: 500ms; }
.anim-delay-600 { transition-delay: 600ms; }

/* Состояния, когда секция видна */
.anim-section.is-visible .anim-fade-in,
.anim-section.is-visible .anim-fly-in-up,
.anim-section.is-visible .anim-fly-in-left,
.anim-section.is-visible .anim-fly-in-right {
    opacity: 1;
    transform: translate(0, 0);
}

/* Глитч-анимация для заголовков */
.anim-glitch {
    position: relative;
}
.anim-section.is-visible .anim-glitch {
    opacity: 1;
    animation: glitch-effect 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes glitch-effect {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

.anim-glitch::before,
.anim-glitch::after {
  content: attr(data-text); /* будет добавлено через JS */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  overflow: hidden;
  opacity: 0;
}

.anim-glitch::before {
  left: 3px;
  text-shadow: -2px 0 #ff00c1; /* Magenta */
  clip-path: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.anim-glitch::after {
  left: -3px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1; /* Cyan & Magenta */
  clip-path: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.anim-section.is-visible .anim-glitch::before,
.anim-section.is-visible .anim-glitch::after {
    opacity: 1;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(45% 0 56% 0); } 100% { clip-path: inset(5% 0 94% 0); }
}
@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 80% 0); } 100% { clip-path: inset(90% 0 4% 0); }
}


/* --- КОНЕЦ СТИЛЕЙ АНИМАЦИЙ --- */


/* Общие стили для секций и заголовков */
.section-title {
    @apply text-2xl md:text-2xl lg:text-2xl font-black mb-3 text-gray-900 dark:text-white;
}

.section-subtitle {
    @apply text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto;
}

/* Стили для карточек */
.step-card {
    @apply bg-white/90 dark:bg-gray-800/30 backdrop-blur-sm p-8 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-gray-900 dark:text-white;
}
.step-number {
    @apply w-12 h-12 mb-4 mx-auto flex items-center justify-center text-xl font-bold bg-green-400 text-gray-900 rounded-full;
}

.use-case-card {
    @apply bg-white/90 dark:bg-gray-800/30 backdrop-blur-sm p-8 rounded-lg border border-gray-200/50 dark:border-gray-700/50 hover:border-green-400 transition-all duration-300 text-gray-900 dark:text-white;
}

.video-placeholder {
    @apply aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg relative overflow-hidden group;
}
.video-placeholder .placeholder-content {
    @apply absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-xl font-bold;
}
.video-placeholder .placeholder-content::before {
    content: '▶';
    font-size: 3rem;
    position: absolute;
    opacity: 0.7;
    transition: all .3s;
}
.video-placeholder:hover .placeholder-content::before {
    opacity: 1;
    transform: scale(1.1);
}

.price-card {
    @apply bg-white/90 dark:bg-gray-800/30 backdrop-blur-sm p-6 rounded-xl border border-gray-200/50 dark:border-gray-700/50 transition-all text-gray-900 dark:text-white;
}
.price-card-large {
    @apply bg-white/90 dark:bg-gray-800/30 backdrop-blur-sm p-8 rounded-xl border border-gray-200/50 dark:border-gray-700/50 shadow-lg text-gray-900 dark:text-white;
}
.price-card-title {
    @apply text-xl font-bold text-gray-900 dark:text-white mb-2;
}
.price-tag {
    @apply text-4xl font-extrabold text-green-500 dark:text-green-400 mb-4;
}
.price-card-desc {
    @apply text-gray-700 dark:text-gray-400;
}

.req-card {
     @apply bg-white/90 dark:bg-gray-800/30 backdrop-blur-sm p-8 rounded-lg border border-gray-200/50 dark:border-gray-700/50 text-gray-900 dark:text-white;
}

/* Кнопка CTA */
.cta-button {
    @apply inline-block bg-green-500 dark:bg-green-400 text-white dark:text-gray-900 font-bold text-lg px-8 py-4 rounded-lg transition-all duration-300;
    @apply hover:bg-green-600 dark:hover:bg-green-500 hover:shadow-lg hover:shadow-green-500/20 transform hover:-translate-y-1;
}

/* Анимация появления для Hero */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 1s ease-out forwards;
}