/* =========================================================
   service-icons.min.css — большие анимированные SVG-иконки
   и мелкие иконки для списков. Стиль сайта: акцент #b00a27.
   ========================================================= */

/* =========================================================
   БОЛЬШИЕ ИКОНКИ КЛЮЧЕВЫХ ФИЧ (.c-feature-icon)
   ========================================================= */
.c-feature-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  background: rgba(176, 10, 39, 0.06);
  border: 1px solid rgba(176, 10, 39, 0.12);
  color: var(--c-accent);
  overflow: hidden;
}
.c-feature-icon svg {
  display: block;
  width: 52px;
  height: 52px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Радиальный пульс фона */
.c-feature-icon::before {
  content: '';
  position: absolute;
  inset: 50% 50% 50% 50%;
  background: radial-gradient(circle, rgba(176, 10, 39, 0.15), transparent 70%);
  border-radius: 50%;
  transition: inset 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-feature-icon:hover::before,
.c-feature:hover .c-feature-icon::before {
  inset: -20%;
}

/* Анимации иконок — задаются через модификатор */

/* 1. Пульс (масштаб) */
.c-feature-icon--pulse svg {
  animation: c-icon-pulse 2.8s ease-in-out infinite;
}
@keyframes c-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* 2. Медленное вращение (для шестерёнок, компаса) */
.c-feature-icon--rotate svg {
  animation: c-icon-rotate 14s linear infinite;
}
@keyframes c-icon-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3. Покачивание (маятник) */
.c-feature-icon--sway svg {
  animation: c-icon-sway 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes c-icon-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* 4. Всплытие (лёгкое покачивание вверх-вниз) */
.c-feature-icon--float svg {
  animation: c-icon-float 3.6s ease-in-out infinite;
}
@keyframes c-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* 5. Рисование контура (появление линий) */
.c-feature-icon--draw svg path,
.c-feature-icon--draw svg circle,
.c-feature-icon--draw svg rect,
.c-feature-icon--draw svg line,
.c-feature-icon--draw svg polyline {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: c-icon-draw 2s ease-out forwards;
}
.c-feature-icon--draw:hover svg path,
.c-feature-icon--draw:hover svg circle,
.c-feature-icon--draw:hover svg rect,
.c-feature-icon--draw:hover svg line,
.c-feature-icon--draw:hover svg polyline {
  animation: c-icon-draw 2s ease-out infinite;
}
@keyframes c-icon-draw {
  0%   { stroke-dashoffset: 300; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}

/* 6. Вспышка (появление + быстрый затухающий масштаб) */
.c-feature-icon--pop svg {
  animation: c-icon-pop 3.5s ease-in-out infinite;
}
@keyframes c-icon-pop {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.12); }
  16%      { transform: scale(1); }
}

/* На hover — иконка чуть растёт и слегка крутится (общий эффект для всех) */
.c-feature:hover .c-feature-icon svg {
  transform: scale(1.06);
}

/* =========================================================
   БЛОК КЛЮЧЕВЫХ ФИЧ (.c-features)
   ========================================================= */
.c-features {
  display: grid;
  gap: 32px;
  margin: 40px 0;
}
.c-features--cols-2 { grid-template-columns: repeat(2, 1fr); }
.c-features--cols-3 { grid-template-columns: repeat(3, 1fr); }
.c-features--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Карточка фичи: квадратные углы, выезжающая полоса сверху,
   подъём и тень при hover. */
.c-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 28px 28px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  overflow: hidden;
  transition:
    transform var(--c-transition),
    box-shadow var(--c-transition),
    border-color var(--c-transition);
}
/* Выезжающая полоса сверху (как в .c-card--line-top) */
.c-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--c-accent);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.c-feature:hover::before {
  width: 100%;
}
.c-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--c-shadow-lg);
  border-color: transparent;
}
.c-feature__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--c-text);
  position: relative;
  z-index: 1;
}
.c-feature__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-text-mute);
  position: relative;
  z-index: 1;
}

/* Тёмный вариант — на full-section dark */
.c-full--dark .c-feature {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.c-full--dark .c-feature:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
}
.c-full--dark .c-feature-icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.c-full--dark .c-feature-icon::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
}
.c-full--dark .c-feature__title { color: #ffffff; }
.c-full--dark .c-feature__text  { color: rgba(255, 255, 255, 0.75); }

/* =========================================================
   МЕЛКИЕ ИКОНКИ ДЛЯ СПИСКОВ (.c-list-icon)
   ========================================================= */

/* Базовый список — сетка, крупный межстрочный */
.c-list-icon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.c-list-icon--cols-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
}
.c-list-icon__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
}
.c-list-icon__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  background: rgba(176, 10, 39, 0.08);
  color: var(--c-accent);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.c-list-icon__mark svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.c-list-icon__item:hover .c-list-icon__mark {
  background: var(--c-accent);
  color: #ffffff;
  transform: scale(1.1);
}
.c-list-icon__text {
  flex: 1 1 auto;
  min-width: 0;
}
.c-list-icon__text strong {
  font-weight: 600;
}

/* Тёмный вариант */
.c-full--dark .c-list-icon__item,
.c-full--dark .c-list-icon__text {
  color: #ffffff;
}
.c-full--dark .c-list-icon__mark {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
}
.c-full--dark .c-list-icon__item:hover .c-list-icon__mark {
  background: #ffffff;
  color: var(--c-bg-dark);
}

/* Мелкая точка/стрелка — вариант "dot" */
.c-list-icon--arrows .c-list-icon__mark {
  background: transparent;
  color: var(--c-accent);
  width: 20px;
}
.c-list-icon--arrows .c-list-icon__mark svg {
  width: 16px;
  height: 16px;
}

/* =========================================================
   ЗАГОЛОВКИ БЛОКОВ ФИЧ И СПИСКОВ
   ========================================================= */
.c-features__head {
  grid-column: 1 / -1;
  margin: 0 0 12px;
}
.c-features__head .c-service-section__title {
  margin: 0 0 8px;
}
.c-features__head > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-mute);
  max-width: 780px;
}

/* Обёртка списка */
.c-list-wrap {
  margin: 40px 0;
}
.c-list-head {
  margin: 0 0 24px;
  max-width: 780px;
}
.c-list-head .c-service-section__title {
  margin: 0 0 8px;
}
.c-list-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-mute);
}

/* Тёмный вариант заголовков списка */
.c-full--dark .c-list-lead,
.c-full--dark .c-features__head > p {
  color: rgba(255, 255, 255, 0.72);
}
/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 900px) {
  .c-features--cols-3,
  .c-features--cols-4 { grid-template-columns: repeat(2, 1fr); }

  .c-feature-icon { width: 84px; height: 84px; }
  .c-feature-icon svg { width: 46px; height: 46px; }
  .c-feature__title { font-size: 18px; }

  .c-list-icon--cols-2 { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 600px) {
  .c-features,
  .c-features--cols-2,
  .c-features--cols-3,
  .c-features--cols-4 { grid-template-columns: 1fr; gap: 24px; }

  .c-feature-icon { width: 72px; height: 72px; }
  .c-feature-icon svg { width: 40px; height: 40px; }
  .c-feature__title { font-size: 17px; }
  .c-feature__text  { font-size: 14.5px; }

  .c-list-icon__item { font-size: 15px; }
}

/* =========================================================
   ВАРИАНТ: .c-features--corner — карточки с загнутым уголком
   Полоса сверху остаётся (базовая .c-feature::before).
   Уголок разворачивается при hover через ::after.
   ========================================================= */
.c-features--corner .c-feature {
  overflow: hidden;
}
/* Уголок — рисуется на ::after (свободный псевдоэлемент) */
.c-features--corner .c-feature::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  background: linear-gradient(225deg,
    var(--c-bg) 0%,
    var(--c-bg) 45%,
    rgba(20, 22, 26, 0.18) 47%,
    rgba(20, 22, 26, 0.08) 49%,
    var(--c-accent) 51%,
    var(--c-accent) 100%
  );
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
  pointer-events: none;
}
.c-features--corner .c-feature:hover::after {
  width: 44px;
  height: 44px;
}

/* Тёмный вариант — уголок на тёмной карточке */
.c-full--dark .c-features--corner .c-feature::after {
  background: linear-gradient(225deg,
    var(--c-bg-dark) 0%,
    var(--c-bg-dark) 45%,
    rgba(255, 255, 255, 0.20) 47%,
    rgba(255, 255, 255, 0.08) 49%,
    var(--c-accent) 51%,
    var(--c-accent) 100%
  );
}
/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .c-feature-icon svg,
  .c-feature-icon::before,
  .c-list-icon__mark {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== LIST ICON SANITY ===== */
.c-list-icon,
.c-list-icon li,
.c-list-icon ul {
  list-style: none !important;
}