@font-face {
  font-family: 'Montserrat';
  src: url('./assets/fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./assets/fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* Анимация 1: Вопрос-ответ (трансформация в восклицательный знак) */
@keyframes questionToAnswer {
  0% { 
    opacity: 0; 
    transform: scale(0.5) rotate(-20deg);
  }
  20% { 
    opacity: 1; 
    transform: scale(0.7) rotate(-20deg);
  }
  40% { 
    opacity: 1; 
    transform: scale(0.7) rotate(-20deg);
  }
  60% { 
    opacity: 1; 
    transform: scale(0.8) rotate(0deg);
  }
  80% { 
    opacity: 1; 
    transform: scale(0.6) rotate(0deg);
  }
  100% { 
    opacity: 0; 
    transform: scale(0.3) rotate(0deg);
  }
}

/* Анимация 2: Пульсирующий поиск */
@keyframes pulsingSearch {
  0% { 
    opacity: 0; 
    transform: scale(0.5) rotate(25deg);
  }
  25% { 
    opacity: 1; 
    transform: scale(0.8) rotate(25deg);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.1) rotate(25deg);
  }
  75% { 
    opacity: 1; 
    transform: scale(0.9) rotate(25deg);
  }
  100% { 
    opacity: 0; 
    transform: scale(0.6) rotate(25deg);
  }
}

/* Анимация 3: Плавающий вопрос */
@keyframes floatingQuestion {
  0% { 
    opacity: 0; 
    transform: translateX(-20px) translateY(10px) scale(0.6) rotate(-15deg);
  }
  30% { 
    opacity: 1; 
    transform: translateX(0px) translateY(-5px) scale(0.7) rotate(-15deg);
  }
  60% { 
    opacity: 0.8; 
    transform: translateX(15px) translateY(-10px) scale(0.8) rotate(-15deg);
  }
  80% { 
    opacity: 0.6; 
    transform: translateX(25px) translateY(-5px) scale(0.6) rotate(-15deg);
  }
  100% { 
    opacity: 0; 
    transform: translateX(35px) translateY(0px) scale(0.4) rotate(-15deg);
  }
}

.question-mark {
  animation: fadeInOut var(--fade-duration,2s) ease-in-out infinite;
  animation-delay: var(--fade-delay,0s);
}

.question-mark-answer {
  animation: questionToAnswer 4s ease-in-out infinite;
  animation-delay: var(--fade-delay,0s);
}

.question-mark-pulse {
  animation: pulsingSearch 3.5s ease-in-out infinite;
  animation-delay: var(--fade-delay,0s);
}

.question-mark-float {
  animation: floatingQuestion 5s ease-in-out infinite;
  animation-delay: var(--fade-delay,0s);
}

/* Более тонкие анимации для других блоков */
.question-mark-float.subtle {
  animation: floatingQuestion 8s ease-in-out infinite;
  opacity: 0.6;
}

.question-mark-pulse.subtle {
  animation: pulsingSearch 6s ease-in-out infinite;
  opacity: 0.7;
}

.question-mark-answer.subtle {
  animation: questionToAnswer 7s ease-in-out infinite;
  opacity: 0.5;
}

/* Анимации для блока How it works */
@keyframes stepIconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes stepPreviewFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

.step-icon {
  animation: stepIconPulse 3s ease-in-out infinite;
}

.step-icon:nth-child(1) {
  animation-delay: 0s;
}

.step-icon:nth-child(2) {
  animation-delay: 1s;
}

.step-icon:nth-child(3) {
  animation-delay: 2s;
}

.step-preview {
  animation: stepPreviewFloat 4s ease-in-out infinite;
}

.step-preview:nth-child(1) {
  animation-delay: 0.5s;
}

.step-preview:nth-child(2) {
  animation-delay: 1.5s;
}

.step-preview:nth-child(3) {
  animation-delay: 2.5s;
}

html {
  scroll-behavior: smooth;
}

.question-mark-style-0 {
  --fade-delay: 0s;
}
.question-mark-style-1 {
  --fade-delay: 1s;
}
.question-mark-style-1_5 {
  --fade-delay: 1.5s;
}
.question-mark-style-2 {
  --fade-delay: 2s;
}
.question-mark-style-3 {
  --fade-delay: 3s;
}

.question-mark-style-4 {
  --fade-delay: 4s;
}