/* css/site.css */

:root {
  --page-fade-duration: 1.0s;
  --section-fade-duration: 0.5s;
}

/* Базовые эффекты шапки и скролла */
.site-header {
  transition:
    transform 0.28s ease-out,
    background-color 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

body.menu-open .site-header {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  pointer-events: none;
}

body.menu-open #mobile-menu-toggle {
  pointer-events: auto;
}

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 88px;
}

/* Градиентный текст в hero */
.hero-gradient-text {
  background: linear-gradient(120deg, #6366f1, #8b5cf6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Таймлайн "Как работаем" (главная) */
.process-step-card {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease,
    opacity 0.4s ease;
  opacity: 0.9;
}

.process-step-card.is-active {
  background-color: rgb(124 58 237);
  color: #f9fafb;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  transform: translateX(4px);
  opacity: 1;
}

.process-step-card.is-active h3 {
  color: #ffffff;
}

.process-step-card.is-active p {
  color: rgba(249, 250, 251, 0.9);
}

.process-dot {
  transition:
    border-color 0.4s ease,
    background-color 0.4s ease;
}

.process-dot.is-active {
  border-color: rgb(124 58 237);
}

/* Активный шаг в B2B-таймлайне (мягкий подсвет, а не сплошной фиолетовый) */
#process.process-timeline .process-step-card.is-active {
  background-color: #f5f3ff; /* светлый фиолетовый */
  border-color: rgba(129, 140, 248, 0.8);
  box-shadow: 0 18px 40px rgba(129, 140, 248, 0.25);
  transform: translateY(-2px);
}

/* Заголовок и текст остаются читабельными */
#process.process-timeline .process-step-card.is-active h3 {
  color: #111827; /* slate-900 */
}

#process.process-timeline .process-step-card.is-active p {
  color: #4b5563; /* slate-600 */
}

/* Номер шага: базовое состояние (если надо, можно не трогать) */
#process.process-timeline .process-step-card .process-step-number {
  background-color: #7c3aed; /* violet-600 */
  color: #ffffff;
}

/* Вертикальная линия прогресса в блоке "Формат работы" */
.process-timeline-progress {
  transition: height 0.35s ease-out;
  will-change: height;
}

/* FAQ (общий для всех страниц) */
.faq-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.28s ease,
    opacity 0.28s ease,
    transform 0.28s ease;
}

.faq-content.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Кейс интернет-магазина: модалка */
#case-modal-image {
  max-height: 90vh;  /* чтобы картинка почти на весь экран */
  width: auto;
  display: block;
}

/* Слайды кейса интернет-магазина: убираем синюю рамку при фокусе */
.js-case-slide:focus {
  outline: none;
  box-shadow: none;
}

/* Анимация появления страницы */
body.page-fade-in {
  opacity: 0;
  animation: page-fade-in var(--page-fade-duration) ease-out forwards;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Секции: выезжают снизу с лёгким зумом и блюром */
.fade-section {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(6px);
  transition:
    opacity var(--section-fade-duration) cubic-bezier(0.19, 1, 0.22, 1),
    transform var(--section-fade-duration) cubic-bezier(0.19, 1, 0.22, 1),
    filter var(--section-fade-duration) ease-out;
  will-change: opacity, transform, filter;
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}