/* ===== Код безопасности (js/safety-code.js) =====
   Строка в ping-панели + модалка с объяснением. Иконки — монолайн-спрайт
   (#sas-0…#sas-24 в index.html), цвет через currentColor. */

/* Спрайт с <symbol> — только источник для <use>, места не занимает. */
.sas-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ----- строка в ping-панели: только символы ----- */
.sas-row {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.71rem;
    margin-top: 0.57rem;
    padding-top: 0.57rem;
    border-top: 1px solid var(--fg-4);
    font-size: 0.79rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

/* В комнате один / браузер не умеет — строки нет вовсе. */
.sas-row[data-state="alone"],
.sas-row[data-state="unavailable"] {
    display: none;
}

.sas-row:focus-visible {
    outline: none;
}

.sas-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.43rem;
    color: var(--fg-2);
    transition: color var(--t-fast), filter var(--t-med);
}

/* Hover — символы «загораются»: цвет + мягкое свечение. */
.sas-row:hover .sas-mini,
.sas-row:focus-visible .sas-mini {
    color: var(--fg);
    filter: drop-shadow(0 0 4px rgba(230, 230, 232, 0.35));
}

.sas-row[data-state="error"] .sas-mini {
    color: var(--signal-warn);
    filter: none;
}

.sas-mini-icon {
    width: 1.07rem;
    height: 1.07rem;
}

/* Код ещё сверяется: точки на местах символов. */
.sas-mini-dot {
    width: 0.21rem;
    height: 0.21rem;
    margin: 0 0.43rem;
    background: var(--fg-3);
    border-radius: 50%;
    animation: sas-pulse 1.6s ease-in-out infinite;
    animation-delay: calc(var(--k) * 0.16s);
}

/* ----- модалка ----- */
.sas-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
}

.sas-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.sas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sas-card {
    position: relative;
    width: calc(100% - 2.29rem);
    max-width: 30rem;
    padding: 1.71rem 2rem 1.57rem;
    background: var(--bg-1);
    border: 1px solid var(--fg-4);
    text-align: center;
    transform: translateY(0.57rem) scale(0.98);
    transition: transform var(--t-med);
}

.sas-modal.is-open .sas-card {
    transform: translateY(0) scale(1);
}

/* Схема «ты — замок — собеседник»: линия дорисовывается, по ней в замок и
   из замка бегут пакеты. */
.sas-scheme {
    display: block;
    width: 13.71rem;
    height: 2.74rem;
    margin: 0 auto 1.14rem;
    overflow: visible;
}

.sas-link {
    stroke: var(--fg-3);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 78;
    stroke-dashoffset: 78;
}

.sas-node {
    fill: none;
    stroke: var(--fg-2);
    stroke-width: 1.4;
    opacity: 0;
}

.sas-packet {
    fill: var(--fg);
    opacity: 0;
}

.sas-lock {
    fill: none;
    stroke: var(--fg);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.sas-modal.is-open .sas-node {
    animation: sas-fade 0.4s ease-out forwards;
}

.sas-modal.is-open .sas-node-b {
    animation-delay: 0.1s;
}

.sas-modal.is-open .sas-link {
    animation: sas-draw 0.6s cubic-bezier(.2, .6, .2, 1) 0.15s forwards;
}

.sas-modal.is-open .sas-link-r {
    animation-delay: 0.3s;
}

.sas-modal.is-open .sas-lock {
    animation:
        sas-fade 0.4s ease-out 0.5s forwards,
        sas-breathe 3.2s ease-in-out 1s infinite;
}

.sas-modal.is-open .sas-packet {
    animation: sas-packet 1.6s linear 0.9s infinite;
}

.sas-modal.is-open .sas-packet-r {
    animation-delay: 1.7s;
}

.sas-title {
    margin-bottom: 1.29rem;
    color: var(--fg);
    font-size: 0.93rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
}

.sas-big {
    display: flex;
    justify-content: center;
    gap: 1.43rem;
    margin-bottom: 1.29rem;
}

/* Ячейка = размер иконки: точки-заглушки «сверяем» стоят ровно на местах символов. */
.sas-big-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.86rem;
    height: 2.86rem;
    color: var(--fg);
    opacity: 0;
}

.sas-modal.is-open .sas-big-cell {
    animation: sas-icon-in 0.55s cubic-bezier(.2, .6, .2, 1) forwards;
    animation-delay: calc(0.75s + var(--k) * 0.12s);
}

.sas-big-icon {
    width: 2.86rem;
    height: 2.86rem;
}

/* Код ещё не готов: на месте символов — тихо мерцающие точки. */
.sas-big-cell.is-empty::before {
    content: "";
    width: 0.29rem;
    height: 0.29rem;
    background: var(--fg-3);
    border-radius: 50%;
}

.sas-modal.is-open .sas-big-cell.is-empty {
    animation: sas-pulse 1.6s ease-in-out infinite;
    animation-delay: calc(var(--k) * 0.16s);
}

.sas-status {
    min-height: 1.2em;
    margin-bottom: 0.86rem;
    color: var(--fg-2);
    font-size: 0.79rem;
    line-height: 1.5;
    text-transform: lowercase;
}

.sas-status:empty {
    display: none;
}

.sas-modal[data-state="error"] .sas-status {
    color: var(--signal-warn);
}

.sas-body {
    margin-bottom: 0.71rem;
    color: var(--fg-2);
    font-size: 0.86rem;
    line-height: 1.55;
    letter-spacing: var(--tracking);
    text-transform: lowercase;
}

/* Вторичная строка — тише и мельче основного текста. */
.sas-hint {
    margin-bottom: 1.57rem;
    color: var(--fg-3);
    font-size: 0.71rem;
    line-height: 1.5;
    letter-spacing: var(--tracking);
    text-transform: lowercase;
}

@keyframes sas-fade {
    to { opacity: 1; }
}

@keyframes sas-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sas-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes sas-packet {
    0% { opacity: 0; transform: translateX(0); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateX(78px); }
}

/* Без filter: blur — под модалкой backdrop-filter, живой WebGL-фон и
   анимированные арки блобов. Chromium держит filter-анимацию на своём слое,
   и тот «залипал»: символ оставался размытым, сверху — полоса чужих пикселей. */
@keyframes sas-icon-in {
    from { opacity: 0; transform: translateY(0.43rem) scale(0.92); }
    to { opacity: 1; transform: none; }
}

@keyframes sas-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sas-mini-dot {
        animation: none;
    }
    .sas-modal,
    .sas-card {
        transition-duration: 0.01ms;
    }
    .sas-modal.is-open .sas-node,
    .sas-modal.is-open .sas-lock,
    .sas-modal.is-open .sas-link,
    .sas-modal.is-open .sas-big-cell {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
    }
    .sas-modal.is-open .sas-packet {
        animation: none;
        opacity: 0;
    }
}

/* Телефон: 5 ячеек с подписями не влезают в 375px с базовыми отступами. */
@media (max-width: 480px) {
    .sas-card {
        padding: 1.43rem 1.14rem 1.29rem;
    }
    .sas-big {
        gap: 0.86rem;
    }
    .sas-big-cell {
        width: 2.43rem;
        height: 2.43rem;
    }
    .sas-big-icon {
        width: 2.43rem;
        height: 2.43rem;
    }
}