/**
 * GigaIDE - Базовые цветовые переменные и стили элементов
 */

:root {
  /* Основные цвета */
  --color-dark: #070425;            /* Основной темный цвет фона */
  --color-text-primary: #a1a1c6;    /* Основной цвет текста */
  --color-text-white: #ffffff;      /* Белый текст */
  --color-gigablue: #eedeff;        /* Светло-фиолетовый */
  
  /* Градиентные цвета (RGB версии для вариаций) */
  --main-color-rgb: 79, 113, 244;       /* Синий */
  --second-color-rgb: 200, 67, 203;     /* Фиолетовый */
  --orb-one: #BD48CF;                   /* Яркий фиолетовый */
  --orb-two: #3C5EFF;                   /* Ярко-синий */
  
  /* Дополнительные цвета */
  --pink: #C157B6;                  /* Розовый цвет */
  --purple: #954FBA;                /* Фиолетовый */
  --indigo-color: rgba(59, 62, 91, 0.4); /* Полупрозрачный индиго */
  
  /* Фоновые цвета */
  --bg-white-transparent: hsla(0, 0%, 100%, 0.05); /* Полупрозрачный белый для карточек */
  --bg-white-hover: hsla(0, 0%, 100%, 0.1);        /* Эффект наведения на прозрачные элементы */
  --bg-dark-tag: rgb(38, 32, 45);                  /* Темный фон для тегов */
  
  /* Оранжевый градиент для кнопок */
  --orange-gradient-start: #fa423c;
  --orange-gradient-end: #f25975;
  
  /* Размеры шрифта */
  --font-h1: 74px;
  --font-h2: 56px;
  --font-h4: 24px;
  --font-h5: 18px;
  --font-base: 16px;
  --font-small: 14px;
  
  /* Радиусы скругления */
  --radius-full: 100px;
  --radius-3xl: 1.5rem;
  --radius-lg: 0.5rem;
  
  /* Анимации и переходы */
  --transition-default: .15s;
  --transition-bezier: cubic-bezier(.4, 0, .2, 1);
  --transition-custom: .4s cubic-bezier(.785, .135, .15, .86);
  
  /* Z-индексы */
  --z-index-loader: 15;
  --z-index-header: 20;
  --z-index-content: 10;
}

/* Базовые стили элементов */
body {
  background: var(--color-dark);
  color: var(--color-text-primary);
  font-size: var(--font-base);
  line-height: 150%;
  font-weight: 400;
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  font-family: '__averta_a05ca3', '__averta_Fallback_a05ca3', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-white);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}

h1, .is-h1 {
  font-size: 4.625rem;
  line-height: 1;
}

h3 {
  opacity: 0;
}

h3.splitting {
  opacity: 1;
}

p {
  margin: 0 0 1.5rem;
  font-size: var(--font-base);
  line-height: 150%;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Кнопки */
.button {
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 1.5rem 0.25rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  appearance: none;
  border: 0;
  outline: 2px solid transparent;
  background: linear-gradient(77.77deg, rgb(var(--second-color-rgb)) 0, rgb(var(--main-color-rgb)) 100%);
  color: var(--color-text-white);
  transition: transform var(--transition-custom);
  cursor: pointer;
}

.button:hover {
  transform: scale(1.08);
}

.button--orange {
  background: linear-gradient(77.77deg, var(--orange-gradient-start), var(--orange-gradient-end));
}

/* Карточки */
.card {
  background-color: var(--bg-white-transparent);
  backdrop-filter: blur(40px);
  border-radius: var(--radius-3xl);
  padding: 1.75rem 2rem 2rem;
}

/* Градиенты и эффекты */
.gradient-text {
  background: -webkit-linear-gradient(240deg, rgb(var(--second-color-rgb)), rgb(var(--main-color-rgb)));
  color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Анимации */
@keyframes fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Компонент загрузки */
.fade-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #0a0526 0, #080421 100%);
  animation: fade 2s ease-in-out normal forwards;
  animation-delay: 1s;
  z-index: var(--z-index-loader);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-in svg {
  height: 300px;
  width: 300px;
  transform: rotate(-90deg);
}

.progress_bg {
  fill: none;
  stroke: hsla(0, 0%, 100%, 0.1);
  stroke-width: 0.4;
}

.progress_pr {
  fill: none;
  stroke: var(--orb-one);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  stroke-width: 0.4;
}

/* Адаптивные размеры */
@media (min-width: 1280px) {
  body {
    font-size: 18px;
  }
  
  p {
    font-size: 18px;
  }
  
  .text-h1 {
    font-size: var(--font-h1);
  }
}

@media (min-width: 1680px) {
  body {
    font-size: 20px;
  }
  
  p {
    font-size: 20px;
  }
}

@media (min-width: 768px) {
  .text-h2 {
    font-size: var(--font-h2);
  }
  
  .button {
    height: 4rem;
    padding: 0 2rem 0.25rem;
  }
}