/* «Что входит в услугу»: свет по линиям сетки этапов.
   Подключается после service-stage.css. Работает только когда скрипт service-stages-glow.js
   добавил списку класс .stages-glow, поэтому без скрипта блок выглядит как раньше. */

.stages-glow {
    --stage-glow: var(--color-brand-emphasis, #0053f5);
    --stage-glow-soft: rgb(0 83 245 / 7%);
    --stage-glow-ring: rgb(0 83 245 / 45%);
    --stage-number-from: var(--color-services-background, #2b53a1);
    --stage-number-to: var(--color-services-gradient-mid, #3287f6);
    --stage-number-rest: rgb(13 11 20 / 10%);
    --stage-points-active: var(--color-muted, #52525b);
    --stage-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
    --stage-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* В синей колонке свет белый. */
.stages-glow .service-stage--highlighted {
    --stage-glow: #fff;
    --stage-glow-soft: rgb(255 255 255 / 10%);
    --stage-glow-ring: rgb(255 255 255 / 60%);
    --stage-number-from: #fff;
    --stage-number-to: rgb(255 255 255 / 70%);
    --stage-number-rest: rgb(255 255 255 / 10%);
    --stage-points-active: rgb(255 255 255 / 85%);
}

/* Пока скрипт включает эффект, переходы выключены. */
.stages-glow--init,
.stages-glow--init *,
.stages-glow--init *::before,
.stages-glow--init *::after { transition: none !important; }

/* Старую градиентную рамку колонки заменяет новый эффект. */
.stages-glow .service-stage--panel::after { display: none; }
.stages-glow .service-stage--outlined .service-stage__figure { border-image: none; }

/* 1. Мягкое пятно света внутри ячейки под курсором. */
.stages-glow .service-stage__figure::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(20rem circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--stage-glow-soft), transparent 70%);
    opacity: 0;
    transition: opacity 400ms ease;
}
/* 2. Линии сетки загораются рядом с курсором. */
.stages-glow .service-stage__figure::after {
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    border: 1px solid var(--stage-glow);
    -webkit-mask: radial-gradient(15rem circle at var(--glow-x, 50%) var(--glow-y, 50%), #000 0, rgb(0 0 0 / 40%) 45%, transparent 75%);
    mask: radial-gradient(15rem circle at var(--glow-x, 50%) var(--glow-y, 50%), #000 0, rgb(0 0 0 / 40%) 45%, transparent 75%);
    opacity: 0;
    transition: opacity 400ms ease;
}
.stages-glow.is-lit .service-stage__figure::before,
.stages-glow.is-lit .service-stage__figure::after { opacity: 1; }

/* 3. Два луча бегут от точки по рамке ячейки и встречаются наверху. */
.service-stage__trace {
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: -1px;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}
.service-stage__trace path {
    fill: none;
    stroke: var(--stage-glow);
    stroke-width: 2;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 3px var(--stage-glow-ring));
    transition: stroke-dashoffset 450ms cubic-bezier(0.4, 0, 0.2, 1);
}
.stages-glow .service-stage.is-active .service-stage__trace path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--stage-ease-draw);
}

/* 4. Цифра заливается градиентом слева направо. */
.stages-glow .service-stage__index {
    position: relative;
    opacity: 1;
    color: transparent;
    background: linear-gradient(90deg, var(--stage-number-from), var(--stage-number-to) 46%, var(--stage-number-rest) 54%) 100% 0 / 220% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 600ms var(--stage-ease-draw);
}
.stages-glow .service-stage.is-active .service-stage__index {
    background-position: 0 0;
    transition-duration: 900ms;
}

/* 5. Точка на линии чуть увеличивается и пульсирует. */
.stages-glow .service-stage__figure > .icon {
    z-index: 2;
    border-radius: 50%;
    transition: transform 400ms var(--stage-ease-pop);
}
.stages-glow .service-stage.is-active .service-stage__figure > .icon {
    transform: scale(1.18);
    animation: stage-glow-ping 1.8s ease-out 300ms infinite;
}
@keyframes stage-glow-ping {
    0% { box-shadow: 0 0 0 0 var(--stage-glow-ring); }
    70%, 100% { box-shadow: 0 0 0 0.875rem transparent; }
}

/* 6. Пункты списка становятся контрастнее. */
.stages-glow .service-stage__points { transition: color 300ms ease; }
.stages-glow .service-stage.is-active .service-stage__points { color: var(--stage-points-active); }

@media (prefers-reduced-motion: reduce) {
    .stages-glow .service-stage__figure::before,
    .stages-glow .service-stage__figure::after,
    .service-stage__trace path,
    .stages-glow .service-stage__index,
    .stages-glow .service-stage__figure > .icon,
    .stages-glow .service-stage__points { transition: none !important; }
    .stages-glow .service-stage.is-active .service-stage__figure > .icon { animation: none; }
}