/* =====================================================================
   ELISOR — оформлення статей компаній

   Текст статті приходить із бази як HTML, тож усе тут — класи, якими
   розмічено тіло публікації. Схеми оживають самі: клас is-live ставить
   article.js, коли фігура входить в екран.

   Правила ті самі, що і для сцен:
   · тільки токени — світла тема працює без окремих стилів;
   · рух вимикається за межами екрана;
   · prefers-reduced-motion зупиняє все.
   ===================================================================== */

/* --- Типографіка ------------------------------------------------------ */

.prose .a-lead {
    font-size: var(--t-lg);
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 1.3em;
}

.prose strong { color: var(--text); font-weight: 600; }

.prose .a-mark {
    background: var(--tint-soft);
    color: var(--text);
    padding: 0.1em 0.3em;
    margin: 0 -0.05em;
    border-radius: var(--r-xs);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.prose .a-term {
    color: var(--accent-text);
    font-weight: 550;
    white-space: nowrap;
}

/* --- Виноска ---------------------------------------------------------- */

.prose .a-note {
    margin: 1.6em 0;
    padding: 14px 18px;
    border-left: 2px solid var(--accent-line);
    background: var(--bg-raised);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--text-soft);
    font-size: var(--t-base);
}
.prose .a-note p:last-child { margin-bottom: 0; }
.prose .a-note__label {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}

/* --- Цитата ----------------------------------------------------------- */

.prose .a-quote {
    margin: 1.8em 0;
    padding: 0 0 0 22px;
    border-left: 3px solid var(--accent);
    font-size: var(--t-lg);
    line-height: 1.5;
    color: var(--text);
    font-style: normal;
}

/* --- Ряд цифр --------------------------------------------------------- */

.prose .a-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 1.7em 0;
    padding: 0;
    list-style: none;
}
.prose .a-stats li {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-raised);
}
.prose .a-stats b {
    display: block;
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 4px;
}
.prose .a-stats span { font-size: var(--t-sm); color: var(--text-muted); }

/* --- Кроки ------------------------------------------------------------ */

.prose .a-steps { counter-reset: step; list-style: none; padding: 0; margin: 1.6em 0; }
.prose .a-steps li {
    position: relative;
    padding-left: 44px;
    margin-bottom: 14px;
    min-height: 30px;
}
.prose .a-steps li::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--accent-text);
    background: var(--bg-raised);
}

/* --- Фігура зі схемою ------------------------------------------------- */

.prose .a-fig {
    margin: 1.9em 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    overflow: hidden;
}
.prose .a-fig svg { display: block; width: 100%; height: auto; }
.prose .a-fig figcaption {
    padding: 11px 16px 13px;
    border-top: 1px solid var(--line);
    font-size: var(--t-sm);
    color: var(--text-muted);
}

/* Кольори всередині схем — через токени, щоб працювала й світла тема */
.prose .a-fig .s-line   { stroke: var(--line-strong); }
.prose .a-fig .s-edge   { stroke: var(--text-faint); }
.prose .a-fig .s-accent { stroke: var(--accent); }
.prose .a-fig .f-base   { fill: var(--bg-inset); }
/* Обводка обовʼязкова: у світлій темі заливка f-solid збігається з тлом
   фігури, і без контуру елементи схеми просто зникають. */
.prose .a-fig .f-solid  { fill: var(--bg-elevated); stroke: var(--line-strong); }
.prose .a-fig .f-accent { fill: var(--accent); }
.prose .a-fig .f-text   { fill: var(--text-muted); font-size: 11px; font-family: var(--font); }
.prose .a-fig .f-strong { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); }

/* Рух тільки тоді, коли фігура на екрані.
   Через :not(), а не окремим правилом нижче: коротка форма `animation`
   скидає animation-play-state у running, тож правило з меншою
   вагою програє незалежно від порядку в файлі. */
.prose .a-fig:not(.is-live) :is(.anim, .anim *) { animation-play-state: paused; }

/* Потік повітря в зазорі: рух знизу вгору */
@keyframes a-rise {
    0%   { transform: translateY(0);     opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(-148px); opacity: 0; }
}
.prose .a-fig .rise { animation: a-rise 3.4s linear infinite; }

/* Вологу виносить назовні */
@keyframes a-drift {
    0%   { transform: translate(0, 0);      opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translate(26px, -84px); opacity: 0; }
}
.prose .a-fig .drift { animation: a-drift 4.2s ease-out infinite; }

/* Тепло, що йде крізь профіль */
@keyframes a-heat {
    0%   { transform: translateX(0);   opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(96px); opacity: 0; }
}
.prose .a-fig .heat { animation: a-heat 2.8s linear infinite; }

/* Сонце проходить дугу над фасадом */
@keyframes a-sun {
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
.prose .a-fig .sun {
    offset-path: path('M 40 190 A 170 170 0 0 1 380 190');
    offset-rotate: 0deg;
    animation: a-sun 9s ease-in-out infinite alternate;
}

/* Промінь, що впирається в ламель */
@keyframes a-ray {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.85; }
}
.prose .a-fig .ray { animation: a-ray 9s ease-in-out infinite alternate; }

/* Перемикання видимого й прихованого кріплення */
@keyframes a-swap-a {
    0%, 44%   { opacity: 1; }
    56%, 100% { opacity: 0; }
}
@keyframes a-swap-b {
    0%, 44%   { opacity: 0; }
    56%, 100% { opacity: 1; }
}
.prose .a-fig .swap-a { animation: a-swap-a 6s ease-in-out infinite; }
.prose .a-fig .swap-b { animation: a-swap-b 6s ease-in-out infinite; }

/* Підпис, що зʼявляється разом зі станом */
.prose .a-fig .label-a { animation: a-swap-a 6s ease-in-out infinite; }
.prose .a-fig .label-b { animation: a-swap-b 6s ease-in-out infinite; }

/* Пульс акценту на вузлі */
@keyframes a-pulse {
    0%, 100% { opacity: 0.25; r: 5; }
    50%      { opacity: 0.7;  r: 9; }
}
.prose .a-fig .pulse { animation: a-pulse 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .prose .a-fig :is(.anim, .anim *) { animation: none !important; }
    .prose .a-fig .swap-b, .prose .a-fig .label-b { opacity: 0; }
}