/* ============================================================
   ФАКТУРА И ДВИЖЕНИЕ
   Блоки без фотографий получают собственные приёмы: чертёжная
   сетка, крупные цифры-призраки, световая протяжка при наведении.
   Всё движение — только transform/opacity/clip-path.
   ============================================================ */

/* ------------------------------------------------------------
   1. ЯЧЕЙКИ УСЛУГ — чертёжная сетка и световая протяжка
   ------------------------------------------------------------ */

.svc:not(.svc--feature) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Сетка проступает при наведении */
.svc:not(.svc--feature)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  transition: opacity var(--d-slow) var(--e-out);
}
.svc:not(.svc--feature):hover::before { opacity: 0.5; }

/* Луч, проходящий по ячейке слева направо */
.svc:not(.svc--feature)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, var(--c-accent-soft) 48%, transparent 76%);
  transform: translate3d(-100%, 0, 0);
  transition: transform 900ms var(--e-out);
}
.svc:not(.svc--feature):hover::after { transform: translate3d(100%, 0, 0); }

/* Иконка в рамке — не «голый» знак на пустоте */
.svc__icon {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  transition:
    border-color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.svc:hover .svc__icon {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  transform: translateY(-4px);
}
.svc--feature .svc__icon { border-color: rgba(255, 255, 255, 0.2); background: rgba(15, 17, 20, 0.5); }

/* Крупная цифра-призрак в углу ячейки */
.svc:not(.svc--feature) .svc__idx {
  top: auto;
  bottom: -12px;
  right: 8px;
  font-family: var(--f-head);
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line);
  opacity: 0.85;
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
}
.svc:not(.svc--feature):hover .svc__idx {
  transform: translateY(-6px);
  opacity: 1;
  -webkit-text-stroke-color: var(--c-accent-line);
}

/* ------------------------------------------------------------
   2. ПАНЕЛЬ ЗАДАЧИ ПО ВОДЕ — техническая подложка
   ------------------------------------------------------------ */

.ppanel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ppanel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.35;
  mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%);
}
/* Красная риска сверху — «активная» вкладка продолжается в панель */
.ppanel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 92px;
  background: var(--c-accent);
  transform-origin: left;
  animation: rule-in var(--d-slow) var(--e-out) both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ppanel__title { position: relative; }
.ppanel__aside { position: relative; z-index: 1; }

/* Смена панели — мягкое проявление */
.ppanel:not([hidden]) > div,
.ppanel:not([hidden]) > aside {
  animation: panel-in 460ms var(--e-out) both;
}
.ppanel:not([hidden]) > aside { animation-delay: 90ms; }
@keyframes panel-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   3. ЛЕНТА ФАКТОВ — линия под цифрой прочерчивается
   ------------------------------------------------------------ */

.fact { position: relative; }
.fact::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 46px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.fact:nth-child(odd)::after { left: var(--gutter); }
@media (min-width: 900px) {
  .fact::after { left: var(--sp-6); }
  .fact:first-child::after { left: var(--gutter); }
}
.hero__facts.is-in .fact::after,
.is-in .fact::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   4. ОТЗЫВЫ — крупная кавычка-подложка
   ------------------------------------------------------------ */

.review {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.review::before {
  content: '”';
  position: absolute;
  right: -6px;
  top: -46px;
  z-index: -1;
  font-family: var(--f-head);
  font-size: 12rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-line);
  opacity: 0.55;
  transition: transform var(--d-slow) var(--e-out), color var(--d-base) var(--e-out);
}
.review:hover::before { transform: translateY(6px); color: var(--c-brand-deep); }
.review__quote { display: none; }

/* ------------------------------------------------------------
   5. КЛИЕНТЫ — монограмма и заливка при наведении
   ------------------------------------------------------------ */

.client {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: var(--sp-2);
}
.client::before {
  content: attr(data-mono);
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-size: 4rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line);
  transition: transform var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
}
.client::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--c-brand), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.client:hover::before { transform: scale(1.14); opacity: 0.5; }
.client:hover::after { opacity: 0.28; }

/* ------------------------------------------------------------
   6. НОВОСТИ — верхняя риска и сдвиг заголовка
   ------------------------------------------------------------ */

.post {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.post::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.post:hover::before { transform: scaleX(1); }
.post h3 { transition: transform var(--d-base) var(--e-out); }
.post:hover h3 { transform: translateX(6px); }

/* ------------------------------------------------------------
   7. ПЛИТКИ РАБОТ — штриховка живее, показатели проявляются
   ------------------------------------------------------------ */

.work { position: relative; isolation: isolate; }
.work::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--c-accent), transparent 55%);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.work:hover::after { opacity: 0.45; }
.work__to { position: relative; }

/* ------------------------------------------------------------
   8. ШАГИ TELEGRAM — нумерация подсвечивается по очереди
   ------------------------------------------------------------ */

.tgstep { transition: background-color var(--d-base) var(--e-out); }
.tgstep:hover { background: rgba(0, 0, 0, 0.18); }
.tgstep__n { transition: transform var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out); }
.tgstep:hover .tgstep__n { transform: scale(1.1); background: rgba(255, 255, 255, 0.14); }

/* ------------------------------------------------------------
   9. КНОПКИ — блик проходит по поверхности
   ------------------------------------------------------------ */

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translate3d(-120%, 0, 0);
  transition: transform 720ms var(--e-out);
}
.btn:hover::after { transform: translate3d(120%, 0, 0); }

/* ------------------------------------------------------------
   10. ЗАГОЛОВКИ СЕКЦИЙ — линия прочерчивается при появлении
   ------------------------------------------------------------ */

.sec-head__top { position: relative; }
.sec-head__top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--e-out) 120ms;
}
.is-in .sec-head__top::after,
.sec-head.is-in .sec-head__top::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   11. ПОЯВЛЕНИЕ: мягче, чем простой сдвиг
   ------------------------------------------------------------ */

.reveal {
  clip-path: inset(0 0 6% 0);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out),
    clip-path var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { clip-path: inset(0 0 0 0); }

/* Дочерние элементы сетки выезжают лесенкой */
.stagger > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 520ms var(--e-out),
    transform 520ms var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stagger.is-in > * { opacity: 1; transform: none; }
.no-js .stagger > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   12. ЛОГОТИП — бриллиант поблёскивает при наведении на шапку
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .svc::after, .btn::after, .ppanel::after { display: none; }
  .stagger > * { opacity: 1; transform: none; transition: none; }
  .reveal { clip-path: none; }
  .ppanel:not([hidden]) > div,
  .ppanel:not([hidden]) > aside { animation: none; }
  .fact::after, .sec-head__top::after { transform: scaleX(1); transition: none; }
}

/* ============================================================
   ЛОГОТИПЫ КЛИЕНТОВ
   Знаки разноцветные и рассчитаны на белый фон, поэтому лежат
   на светлой плашке. По умолчанию приглушены, при наведении
   выходят в полный цвет — ряд не спорит с тёмной страницей.
   ============================================================ */

.clients__grid .client { padding: var(--sp-4); }
.client img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  object-fit: contain;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(242, 244, 246, 0.92);
  filter: grayscale(1) contrast(0.9);
  opacity: 0.55;
  transition:
    filter var(--d-base) var(--e-out),
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}
.client:hover img {
  filter: none;
  opacity: 1;
  transform: translateY(-3px);
}
/* монограмма-подложка не нужна там, где есть знак */
.client:has(img)::before { content: none; }

/* Фото оборудования в панели задачи */
.ppanel__shot {
  margin: 0 0 var(--sp-2);
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background:
    radial-gradient(70% 70% at 50% 25%, rgba(216, 35, 42, 0.10), transparent 70%),
    var(--c-bg-alt);
  overflow: hidden;
}
.ppanel__shot img {
  max-width: 78%;
  max-height: 84%;
  width: auto;
  object-fit: contain;
  transition: transform var(--d-slow) var(--e-out);
}
.ppanel:hover .ppanel__shot img { transform: scale(1.05); }

/* Логотип — настоящий знак компании, словесная часть осветлена под тёмный фон */

@media (max-width: 1023px) {  }

/* Снимки объектов в плитках работ.
   История. 13.08.2026 бокс перевели с 3/4 на 4/3, потому что файлы
   лежали ландшафтные (900×675) и портретная плитка резала им бока.
   25.08.2026 разобрались глубже: ландшафтными файлы были не потому,
   что так снято, а потому что prep_new.py резал их из портретных
   исходников заказчика (1920×2560 = 3:4), теряя до 44% высоты —
   уезжал то блок управления сверху, то низ баллона. Кадры пересобраны
   в полную рамку (prep_full_frame.py), бокс возвращён к 3/4.
   На «О нас» то же самое — about.css, `.section--tight`. */
.work__media { aspect-ratio: 3 / 4; }
/* Широкая плитка остаётся 16/10 — 4/3 растягивал её вдвое выше соседей.
   Срез убран со стороны файла: `w-kont1-wide` уже 16:10 (25.08.2026). */
.work--wide .work__media { aspect-ratio: 16 / 10; }
@media (max-width: 1039px) { .work__media { aspect-ratio: 3 / 4; } }
.work__media img { width: 100%; height: 100%; object-fit: cover; }