/* ==========================================================================
   КАК МЫ РАБОТАЕМ — анимированная схема процесса (секция #process)
   Разметка: index.html · логика: js/process-flow.js
   Отступы секции и заголовок — общие, из css/landing.css (.section, .head).

   Внутри схемы все размеры — в условных единицах: calc(N * var(--u)).
   --u (px на единицу) выставляет JS по ширине схемы, поэтому карточки,
   шрифты и линии масштабируются вместе, как одна картинка.
   ========================================================================== */

.pf-section {
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--section-bg);
}

/* ── Световые пятна за схемой: стеклу нужно, что преломлять ── */
.pf-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pf-orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  will-change: transform;
  animation: pf-drift 24s ease-in-out infinite alternate;
}

.pf-orb--1 {
  width: min(56vw, 720px);
  left: 52%;
  top: 58%;
  background: radial-gradient(circle, rgba(255, 106, 26, 0.26) 0%, rgba(255, 106, 26, 0.08) 38%, transparent 68%);
}

.pf-orb--2 {
  width: min(38vw, 500px);
  left: 80%;
  top: 34%;
  background: radial-gradient(circle, rgba(255, 176, 120, 0.16) 0%, transparent 66%);
  animation-duration: 30s;
  animation-delay: -8s;
}

.pf-orb--3 {
  width: min(44vw, 580px);
  left: 18%;
  top: 72%;
  background: radial-gradient(circle, rgba(196, 74, 10, 0.24) 0%, transparent 66%);
  animation-duration: 27s;
  animation-delay: -15s;
}

@keyframes pf-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(7%, -6%) scale(1.08); }
  100% { transform: translate(-7%, 5%) scale(0.95); }
}

.pf-section:not(.is-onscreen) .pf-orb {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .pf-orb--1 { width: 130vw; left: 50%; top: 58%; }
  .pf-orb--2 { width: 90vw; left: 85%; top: 30%; }
  .pf-orb--3 { width: 100vw; left: 10%; top: 82%; }
}

/* На тач-устройствах пятна стоят: иначе стекло пересчитывает размытие каждый кадр */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pf-orb { animation: none; }
}

.pf-inner {
  position: relative;
  z-index: 1;
}

.pf-stage {
  position: relative;
}

/* Скрытый текст процесса для скринридеров (сама схема — aria-hidden) */
.pf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Холст схемы
   ========================================================================== */
.pf-canvas {
  --u: 1px;
  position: relative;
  width: 100%;
  margin: 0 auto;
  font-family: var(--font-body);
  color: #fff;
}

.pf-canvas[data-layout="mobile"] {
  max-width: 460px;
}

/* Без JS — обычный список карточек */
.pf-canvas:not(.is-ready) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.pf-canvas:not(.is-ready) > :not(.pf-node),
.pf-canvas:not(.is-ready) .pf-node__icon {
  display: none;
}

.pf-canvas.is-ready > * {
  position: absolute;
}

.pf-wires,
.pf-top {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pf-frame       { z-index: 0; }
.pf-wires       { z-index: 1; }
.pf-node        { z-index: 2; }
.pf-pill,
.pf-eyebrow,
.pf-frame-label { z-index: 3; }
.pf-top         { z-index: 4; }

/* ── Рамка «продакшн»: широкое стекло с оранжевой кромкой (кромка — в SVG) ── */
.pf-frame {
  border-radius: calc(var(--pf-r, 32) * var(--u));
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 106, 26, 0.093), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(255, 106, 26, 0.056), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  -webkit-backdrop-filter: blur(calc(5 * var(--u))) saturate(1.3);
  backdrop-filter: blur(calc(5 * var(--u))) saturate(1.3);
  box-shadow: inset 0 0 calc(70 * var(--u)) rgba(255, 106, 26, 0.065);
  transition: opacity 1s ease;
}

.pf-frame-label {
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffd6b8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 60%),
    rgba(38, 20, 10, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 106, 26, 0.5),
    0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: opacity 0.6s ease;
}

.pf-frame-label i {
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: #ff6a1a;
  box-shadow: 0 0 calc(10 * var(--u)) #ff6a1a;
  animation: pf-blink 2.4s ease-in-out infinite;
}

.pf-eyebrow {
  translate: -50% -50%;
  font-size: calc(11.5 * var(--u));
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.42);
  transition: opacity 0.6s ease;
}

/* ==========================================================================
   Карточки — liquid glass
   ========================================================================== */
.pf-node {
  --pf-accent: #ffffff;
  --pf-rgb: 255, 255, 255;
  position: relative; /* в готовой схеме — absolute (см. .pf-canvas.is-ready > *) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: calc(20 * var(--u));
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0) 100%),
    rgba(30, 24, 20, 0.44);
  -webkit-backdrop-filter: blur(calc(18 * var(--u))) saturate(1.8);
  backdrop-filter: blur(calc(18 * var(--u))) saturate(1.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-16 * var(--u)) rgba(0, 0, 0, 0.75);
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease,
    opacity 0.6s ease;
}

/* кромка стекла: светлая сверху-слева, с подтоном акцента снизу-справа */
.pf-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.1) 24%,
    rgba(255, 255, 255, 0.035) 56%,
    rgba(var(--pf-rgb), 0.42) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* блик — следует за курсором (js/glass.js), плюс тёплое свечение снизу */
.pf-node::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(calc(170 * var(--u)) circle at var(--lg-x, 24%) var(--lg-y, 0%), rgba(255, 255, 255, 0.12), transparent 62%),
    radial-gradient(120% 90% at 50% 125%, rgba(var(--pf-rgb), 0.12), transparent 60%);
  pointer-events: none;
}

.pf-node--am {
  --pf-accent: #ffb078;
  --pf-rgb: 255, 176, 120;
}

.pf-node--team {
  --pf-accent: #ff7a2e;
  --pf-rgb: 255, 106, 26;
  background:
    radial-gradient(130% 80% at 50% -14%, rgba(255, 106, 26, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 44%, rgba(255, 255, 255, 0) 100%),
    rgba(32, 22, 16, 0.46);
}

/* финиш «празднует» оранжевым */
.pf-node[data-node="finish"].is-active {
  --pf-accent: #ff9a55;
  --pf-rgb: 255, 106, 26;
}

.pf-node.is-active {
  transform: translateY(calc(-4 * var(--u))) scale(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(var(--pf-rgb), 0.6),
    0 0 calc(46 * var(--u)) rgba(var(--pf-rgb), 0.32),
    0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-16 * var(--u)) rgba(0, 0, 0, 0.75);
}

.pf-node__icon {
  grid-area: icon;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(11 * var(--u));
  color: var(--pf-accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    rgba(var(--pf-rgb), 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition: box-shadow 0.5s ease, color 0.5s ease;
}

.pf-node__icon svg {
  width: 58%;
  height: 58%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-node.is-active .pf-node__icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 0 0 1px rgba(var(--pf-rgb), 0.55),
    0 0 calc(22 * var(--u)) rgba(var(--pf-rgb), 0.55);
}

.pf-node__title {
  grid-area: title;
  margin: 0;
  font-size: calc(18.5 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #fff;
}

.pf-node__text {
  grid-area: text;
  margin: 0;
  font-size: calc(14 * var(--u));
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.58);
}

/* Варианты раскладки карточки (data-style ставит JS) */
.pf-node[data-style="center"] {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(9 * var(--u));
}

.pf-node[data-style="center"] .pf-node__icon {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border-radius: calc(16 * var(--u));
  margin-bottom: calc(4 * var(--u));
}

.pf-node[data-style="center"] .pf-node__title {
  font-size: calc(20 * var(--u));
}

.pf-node[data-style="center"] .pf-node__text {
  font-size: calc(13.5 * var(--u));
}

.pf-node[data-style="stack"] .pf-node__icon {
  margin-bottom: calc(4 * var(--u));
}

.pf-node[data-style="row"] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "text text";
  align-items: center;
  align-content: center;
  column-gap: calc(12 * var(--u));
  row-gap: calc(8 * var(--u));
}

.pf-node[data-style="inline"] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon text";
  align-content: center;
  column-gap: calc(14 * var(--u));
  row-gap: calc(3 * var(--u));
}

.pf-node[data-style="inline"] .pf-node__icon {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  border-radius: calc(15 * var(--u));
  align-self: center;
}

.pf-node[data-style="inline"] .pf-node__title { align-self: end; }
.pf-node[data-style="inline"] .pf-node__text  { align-self: start; }

/* Мобильная раскладка: карточки уже — чуть плотнее */
.pf-canvas[data-layout="mobile"] .pf-node {
  padding: calc(13 * var(--u)) calc(14 * var(--u));
  gap: calc(6 * var(--u));
  border-radius: calc(18 * var(--u));
}

.pf-canvas[data-layout="mobile"] .pf-node__title { font-size: calc(17 * var(--u)); }
.pf-canvas[data-layout="mobile"] .pf-node__text  { font-size: calc(13 * var(--u)); line-height: 1.38; }
.pf-canvas[data-layout="mobile"] .pf-node[data-style="stack"] .pf-node__icon {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(10 * var(--u));
  margin-bottom: calc(2 * var(--u));
}

/* ==========================================================================
   Подписи на линиях
   ========================================================================== */
.pf-pill {
  translate: -50% -50%;
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* шаги, которые касаются тебя: плотное тёмное стекло */
.pf-pill--solid {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 55%),
    rgba(18, 14, 12, 0.84);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-6 * var(--u)) rgba(0, 0, 0, 0.75);
}

/* внутренние петли команды: пунктир */
.pf-pill--dashed {
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(16, 12, 10, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px dashed rgba(255, 140, 70, 0.55);
}

.pf-pill.is-live {
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 106, 26, 0.85),
    0 0 calc(28 * var(--u)) rgba(255, 106, 26, 0.45);
}

.pf-pill--dashed.is-live {
  border-color: #ff8a3d;
}

.pf-canvas[data-layout="mobile"] .pf-pill {
  font-size: calc(12.5 * var(--u));
  padding: calc(7 * var(--u)) calc(13 * var(--u));
}

.pf-canvas[data-layout="mobile"] .pf-pill--dashed {
  font-size: calc(11.5 * var(--u));
}

.pf-canvas[data-layout="desktop"] .pf-br-m {
  display: none;
}

/* ==========================================================================
   SVG: рамка, линии, порты, точка-крео
   ========================================================================== */
.pf-rim {
  fill: none;
  stroke: #ff6a1a;
  stroke-width: 2.5;
}

.pf-rim-glow {
  fill: none;
  stroke: #ff6a1a;
  stroke-width: 10;
  opacity: 0.325;
}

.pf-gate {
  stroke: #ff9a55;
  stroke-width: 2;
  stroke-linecap: round;
}

.pf-wire {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.35s ease;
}

.pf-wire.is-hl   { stroke: rgba(255, 255, 255, 0.5); }
.pf-wire.is-live { stroke: rgba(255, 176, 120, 0.6); }

.pf-comet {
  fill: none;
  stroke: #ffd2b0;
  stroke-width: 2.6;
  stroke-linecap: round;
  transition: opacity 0.35s ease;
}

.pf-comet--glow {
  stroke: rgba(255, 106, 26, 0.38);
  stroke-width: 9;
}

.pf-comet.is-off {
  opacity: 0;
}

.pf-token {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pf-token.is-on {
  opacity: 1;
}

.pf-token__core {
  fill: #fff;
}

.pf-port {
  transition: opacity 0.4s ease;
}

.pf-port__ring {
  fill: #110d0b;
  stroke: #ff6a1a;
  stroke-width: 2;
  transition: stroke 0.3s ease;
}

.pf-port[data-src="start"] .pf-port__ring { stroke: rgba(255, 255, 255, 0.75); }
.pf-port[data-src="am"] .pf-port__ring    { stroke: #ffb078; }

.pf-port__dot {
  fill: #fff;
}

.pf-port--out.is-fire .pf-port__ring {
  stroke: #ffd2b0;
}

.pf-port__knob {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.pf-port__bg {
  fill: #2a2320;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.pf-port__chev {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-port--in.is-hit .pf-port__knob { transform: scale(1.35); }
.pf-port--in.is-hit .pf-port__bg   { fill: #ff6a1a; stroke: #ffb078; }

@keyframes pf-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ==========================================================================
   Появление при первом скролле (is-revealed ставит JS, задержки — в --d)
   ========================================================================== */
.pf-canvas.is-ready:not(.is-revealed) :is(.pf-frame, .pf-frame-label, .pf-eyebrow, .pf-node, .pf-pill, .pf-port) {
  opacity: 0;
}

.pf-canvas.is-ready:not(.is-revealed) .pf-node {
  transform: translateY(calc(18 * var(--u))) scale(0.97);
}

.pf-canvas.is-ready:not(.is-revealed) .pf-pill {
  transform: scale(0.85);
}

.pf-canvas.is-revealed:not(.is-settled) :is(.pf-frame, .pf-frame-label, .pf-eyebrow, .pf-node, .pf-pill, .pf-port) {
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .pf-frame-label i {
    animation: none;
  }

  .pf-canvas * {
    transition: none !important;
  }
}