/* Artes animadas da página (ver js/artes.js). Cada arte é um SVG no estilo da página:
   vidro escuro, linhas finas e o degradê da marca. As animações são em ciclo; --d atrasa cada peça
   e --ciclo muda a duração do ciclo. Fora da tela a arte recebe .pausa e para. */

.arte {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.arte text {
    font-family: 'Inter', system-ui, sans-serif;
}

/* ícones: a fonte Material Symbols desenha o ícone pelo nome (.arte na frente para vencer o
   .arte text acima, que é mais específico que uma classe só) */
.arte .sv-ic {
    font-family: 'Material Symbols Outlined';
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    dominant-baseline: central;
    text-anchor: middle;
    fill: #ece8ff;
}

.sv-tx {
    font-size: 8px;
    fill: #c9c2e6;
}

.sv-tx.f {
    font-weight: 600;
    fill: #f4f1ff;
}

.sv-tx.p {
    font-size: 7px;
    fill: #a59dc6;
}

.sv-tx.m {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6.2px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: #8a83ad;
}

.sv-tx.big {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #fff;
}

.sv-tx.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 7px;
    fill: #c9c2e6;
}

.sv-tx.c,
.sv-tx.m.c {
    fill: #38bdf8;
}

.sv-tx.v {
    fill: #34d399;
}

.sv-tx.r,
.sv-tx.m.r {
    fill: #fb7185;
}

.sv-tx.a,
.sv-tx.m.a {
    fill: #fbbf24;
}

/* caixas de vidro, linhas de texto e fios */
.sv-cx {
    fill: rgba(255, 255, 255, 0.045);
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 0.8;
}

.sv-cx.on {
    fill: rgba(124, 43, 238, 0.2);
    stroke: rgba(167, 139, 250, 0.55);
}

.sv-cx.eu {
    fill: url(#gEu);
    stroke: none;
}

.sv-cx.verde {
    fill: rgba(52, 211, 153, 0.12);
    stroke: rgba(52, 211, 153, 0.5);
}

.sv-cx.ambar {
    fill: rgba(251, 191, 36, 0.14);
    stroke: rgba(251, 191, 36, 0.55);
}

.sv-cx.vermelho {
    fill: rgba(251, 113, 133, 0.12);
    stroke: rgba(251, 113, 133, 0.5);
}

.sv-ln {
    fill: rgba(255, 255, 255, 0.14);
}

.sv-ln.c {
    fill: #38bdf8;
}

.sv-ln.l {
    fill: #a78bfa;
}

.sv-ln.v {
    fill: #34d399;
}

.sv-ln.r {
    fill: #fb7185;
}

.sv-ln.a {
    fill: #fbbf24;
}

.sv-ln.g {
    fill: url(#gArte);
}

.sv-fio {
    fill: none;
    stroke: rgba(167, 139, 250, 0.32);
    stroke-width: 1;
}

.sv-fio.c {
    stroke: rgba(56, 189, 248, 0.75);
}

.sv-fio.r {
    stroke: rgba(251, 113, 133, 0.75);
}

.sv-fio.v {
    stroke: rgba(52, 211, 153, 0.75);
}

.sv-fio.a {
    stroke: rgba(251, 191, 36, 0.7);
}

.sv-fio.trac {
    stroke-dasharray: 3 3;
}

.sv-trilha {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 10;
    stroke-linecap: round;
}

.sv-trilha-fina {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 2;
    stroke-linecap: round;
}

.sv-trilha-c {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 7;
}

.sv-arco {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}

.sv-arco.v {
    stroke: #34d399;
}

.sv-arco.a {
    stroke: #fbbf24;
}

.sv-arco.r {
    stroke: #fb7185;
}

.sv-agulha {
    fill: none;
    stroke: #f4f1ff;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.sv-linha {
    fill: none;
    stroke: url(#gArteH);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sv-donut {
    fill: none;
    stroke: url(#gArteH);
    stroke-width: 7;
    stroke-linecap: round;
}

.sv-cabo {
    fill: none;
    stroke: rgba(167, 139, 250, 0.6);
    stroke-width: 3;
    stroke-linecap: round;
}

.sv-anel {
    fill: none;
    stroke: rgba(167, 139, 250, 0.35);
    stroke-width: 1;
}

.sv-anel.c {
    stroke: rgba(56, 189, 248, 0.5);
}

.sv-anel.r {
    stroke: rgba(251, 113, 133, 0.55);
    stroke-dasharray: 3 3;
}

.sv-barra-g {
    fill: url(#gArteV);
}

.sv-onda {
    fill: url(#gArteV);
}

.sv-no {
    fill: #120d26;
    stroke: rgba(167, 139, 250, 0.5);
    stroke-width: 1.2;
}

.sv-dia {
    fill: rgba(255, 255, 255, 0.06);
}

.sv-dia-on {
    fill: rgba(56, 189, 248, 0.55);
}

.sv-caixinha {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1;
}

.sv-relogio {
    fill: rgba(56, 189, 248, 0.08);
    stroke: rgba(56, 189, 248, 0.6);
    stroke-width: 1.5;
}

.sv-ponteiro {
    fill: none;
    stroke: #f4f1ff;
    stroke-width: 2;
    stroke-linecap: round;
}

.sv-ponteiro.curto {
    stroke: #38bdf8;
    stroke-width: 2.5;
}

.sv-scan {
    fill: url(#gScan);
}

.sv-furo {
    fill: #05040b;
}

.sv-trilho-sw {
    fill: rgba(56, 189, 248, 0.18);
    stroke: rgba(56, 189, 248, 0.5);
    stroke-width: 0.8;
}

.sv-qr {
    fill: rgba(244, 241, 255, 0.82);
}

.sv-ocupado {
    fill: rgba(255, 255, 255, 0.09);
}

.sv-livre {
    fill: rgba(56, 189, 248, 0.3);
    stroke: #38bdf8;
    stroke-width: 1;
}

.sv-janela {
    fill: rgba(251, 191, 36, 0.75);
}

.sv-predio {
    fill: rgba(255, 255, 255, 0.05);
    stroke: rgba(167, 139, 250, 0.4);
    stroke-width: 1;
}

.sv-mapa {
    fill: rgba(167, 139, 250, 0.22);
}

.sv-peca {
    fill: rgba(124, 43, 238, 0.35);
    stroke: rgba(196, 181, 253, 0.7);
    stroke-width: 1;
}

.sv-peca.c {
    fill: rgba(56, 189, 248, 0.25);
    stroke: rgba(56, 189, 248, 0.8);
}

.sv-tubo {
    fill: rgba(56, 189, 248, 0.1);
    stroke: rgba(56, 189, 248, 0.6);
    stroke-width: 1;
}

.c-cy {
    fill: #38bdf8;
}

.c-li {
    fill: #a78bfa;
}

.c-rs {
    fill: #e879f9;
}

.c-vd {
    fill: #34d399;
}

.c-vm {
    fill: #fb7185;
}

.c-am {
    fill: #fbbf24;
}

.c-pdf {
    fill: #e11d48;
}

.c-doc {
    fill: #2563eb;
}

.c-xls {
    fill: #059669;
}

.sv-av0 {
    fill: #7c3aed;
}

.sv-av1 {
    fill: #0284c7;
}

.sv-av2 {
    fill: #db2777;
}

.sv-pessoa {
    fill: rgba(124, 43, 238, 0.3);
    stroke: rgba(167, 139, 250, 0.6);
    stroke-width: 1;
}

/* ===================== as animações ===================== */
.arte [class*='a-'] {
    transform-box: fill-box;
    transform-origin: center;
}

/* barras crescem da base e enchem da esquerda (mesma especificidade da regra acima, que vem antes) */
.arte .a-cresce {
}

.arte .a-enche {
}

/* entra, fica e sai, em cascata (--d) dentro do ciclo */
.a-in {
    animation: arteEntra var(--ciclo, 7s) cubic-bezier(0.16, 1, 0.3, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteEntra {

    0%,
    6% {
        opacity: 0;
        transform: translateY(5px) scale(0.94);
    }

    12%,
    84% {
        opacity: 1;
        transform: none;
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-3px);
    }
}

/* o aviso que desce de cima */
.a-desce {
    animation: arteDesce var(--ciclo, 6s) cubic-bezier(0.16, 1, 0.3, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteDesce {

    0%,
    10% {
        opacity: 0;
        transform: translateY(-14px);
    }

    20%,
    80% {
        opacity: 1;
        transform: none;
    }

    90%,
    100% {
        opacity: 0;
        transform: translateY(-6px);
    }
}

/* tracejado correndo pelo fio */
.a-flui {
    stroke-dasharray: 3 6;
    animation: arteFlui 1.4s linear infinite;
    animation-delay: var(--d, 0s);
}

@keyframes arteFlui {
    to {
        stroke-dashoffset: -18;
    }
}

.a-pulsa {
    animation: artePulsa 2.6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes artePulsa {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.82;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* luz que acende e apaga (janelas, lojas, conectores) */
.a-acende {
    animation: arteAcende var(--ciclo, 3.6s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes arteAcende {

    0%,
    100% {
        opacity: 0.18;
    }

    40%,
    60% {
        opacity: 1;
    }
}

/* barras que crescem de baixo e voltam no fim do ciclo */
.a-cresce {
    transform-origin: 50% 100%;
    animation: arteCresce var(--ciclo, 7s) cubic-bezier(0.16, 1, 0.3, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteCresce {

    0%,
    8% {
        transform: scaleY(0);
    }

    24%,
    84% {
        transform: scaleY(1);
    }

    94%,
    100% {
        transform: scaleY(0);
    }
}

/* barras que enchem da esquerda */
.a-enche {
    transform-origin: 0% 50%;
    animation: arteEnche var(--ciclo, 7s) cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteEnche {

    0%,
    8% {
        transform: scaleX(0);
    }

    36%,
    84% {
        transform: scaleX(1);
    }

    94%,
    100% {
        transform: scaleX(0);
    }
}

/* traço que se desenha (o caminho usa pathLength="1"; --alvo para no meio, num anel parcial) */
.a-traca {
    stroke-dasharray: 1;
    animation: arteTraca var(--ciclo, 7s) cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteTraca {

    0%,
    8% {
        stroke-dashoffset: 1;
    }

    44%,
    84% {
        stroke-dashoffset: var(--alvo, 0);
    }

    96%,
    100% {
        stroke-dashoffset: 1;
    }
}

.a-gira {
    animation: arteGira 4s linear infinite;
}

.a-gira-lento {
    animation: arteGira 16s linear infinite;
}

@keyframes arteGira {
    to {
        transform: rotate(360deg);
    }
}

/* ampulheta: vira de tempos em tempos */
.a-vira {
    animation: arteVira 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes arteVira {

    0%,
    70% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

.a-onda {
    animation: arteOnda 1.1s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes arteOnda {

    0%,
    100% {
        transform: scaleY(0.28);
    }

    50% {
        transform: scaleY(1);
    }
}

.a-digita {
    animation: arteDigita 1.2s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes arteDigita {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* faixa de leitura que desce (--dist) */
.a-varre {
    animation: arteVarre 2.8s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes arteVarre {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    15%,
    85% {
        opacity: 1;
    }

    100% {
        transform: translateY(var(--dist, 60px));
        opacity: 0;
    }
}

/* peça que viaja (--dx, --dy), some no destino e volta no próximo ciclo */
.a-voa {
    animation: arteVoa var(--ciclo, 7s) cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteVoa {

    0%,
    10% {
        opacity: 0;
        transform: translate(0, 0);
    }

    16% {
        opacity: 1;
    }

    50%,
    70% {
        opacity: 1;
        transform: translate(var(--dx, 0px), var(--dy, 0px));
    }

    80%,
    100% {
        opacity: 0;
        transform: translate(var(--dx, 0px), var(--dy, 0px));
    }
}

/* peça que encaixa e solta (sem sumir) */
.a-encaixa {
    animation: arteEncaixa var(--ciclo, 7s) cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteEncaixa {

    0%,
    12% {
        transform: translate(0, 0);
    }

    32%,
    84% {
        transform: translate(var(--dx, 0px), var(--dy, 0px));
    }

    96%,
    100% {
        transform: translate(0, 0);
    }
}

/* chave de liga e desliga */
.a-liga {
    animation: arteLiga var(--ciclo, 5s) cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--d, 0s);
}

@keyframes arteLiga {

    0%,
    20% {
        transform: translateX(0);
    }

    35%,
    80% {
        transform: translateX(var(--dx, 12px));
    }

    95%,
    100% {
        transform: translateX(0);
    }
}

/* agulha do medidor: dispara até o vermelho e volta para o verde quando entra o limite */
.a-agulha {
    animation: arteAgulha var(--ciclo, 7s) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes arteAgulha {

    0%,
    8% {
        transform: rotate(-78deg);
    }

    34% {
        transform: rotate(64deg);
    }

    42% {
        transform: rotate(54deg);
    }

    60%,
    86% {
        transform: rotate(-18deg);
    }

    100% {
        transform: rotate(-78deg);
    }
}

/* linhas de um registro que sobem sem parar (--dist é a altura de meia lista) */
.a-sobe {
    animation: arteSobe 6s linear infinite;
}

@keyframes arteSobe {
    to {
        transform: translateY(calc(var(--dist, 60px) * -1));
    }
}

.a-pisca {
    animation: artePisca 1.4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes artePisca {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* fora da tela a arte para */
.arte.pausa *,
.arte.pausa {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .arte * {
        animation: none !important;
    }
}