.marca-caixa {
    display: block;
    margin: 0 auto;
    line-height: 0;
    text-align: center;
}

.marca {
    display: inline-block;
    vertical-align: top;
}


.marca--primaria { color: var(--primary); }
.marca--sucesso  { color: var(--success); }
.marca--erro     { color: var(--error); }
.marca--aviso    { color: var(--warning); }
.marca--info     { color: var(--info); }
.marca--neutra   { color: var(--text-secondary); }

.marca__anel { opacity: .22; }


@keyframes marcaTracar { to { stroke-dashoffset: 0; } }

.marca--tracar path,
.marca--tracar circle,
.marca--tracar line,
.marca--tracar rect,
.marca--tracar polyline {
    stroke-dasharray: var(--traco, 160);
    stroke-dashoffset: var(--traco, 160);
    animation: marcaTracar var(--t-marca-traco) var(--ease-suave) forwards;
}

.marca--tracar [data-atraso="1"] { animation-delay: 180ms; }
.marca--tracar [data-atraso="2"] { animation-delay: 360ms; }
.marca--tracar [data-atraso="3"] { animation-delay: 540ms; }


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

.marca__giro {
    transform-origin: center;
    animation: marcaGirar var(--t-marca-giro) linear infinite;
}

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

.marca__ponteiro {
    transform-origin: 50% 50%;
    animation: marcaPonteiro var(--t-marca-laco) linear infinite;
}

@keyframes marcaVarrer {
      0% { transform: translateY(-26px); }
     50% { transform: translateY(26px); }
    100% { transform: translateY(-26px); }
}

.marca__varre { animation: marcaVarrer var(--t-marca-laco) var(--ease-suave) infinite; }

@keyframes marcaOnda {
    0%, 100% { transform: scaleY(.45); }
         50% { transform: scaleY(1); }
}

.marca__onda {
    transform-origin: center;
    animation: marcaOnda var(--t-marca-onda) var(--ease-suave) infinite;
}

.marca__onda[data-atraso="1"] { animation-delay: 140ms; }
.marca__onda[data-atraso="2"] { animation-delay: 280ms; }

@keyframes marcaPulsar {
    0%, 100% { transform: scale(1);     opacity: 1; }
         50% { transform: scale(1.045); opacity: .86; }
}

.marca__pulso {
    transform-origin: center;
    animation: marcaPulsar var(--t-marca-laco) var(--ease-suave) infinite;
}


@keyframes marcaSubir {
      0% { transform: translateY(5px); opacity: 0; }
    100% { transform: translateY(0);   opacity: 1; }
}

.marca__sobe { animation: marcaSubir var(--t-marca-entrada) var(--ease-saida) backwards; }
.marca__sobe[data-atraso="1"] { animation-delay: 110ms; }
.marca__sobe[data-atraso="2"] { animation-delay: 220ms; }


@media (prefers-reduced-motion: reduce) {
    .marca--tracar path,
    .marca--tracar circle,
    .marca--tracar line,
    .marca--tracar rect,
    .marca--tracar polyline {
        stroke-dashoffset: 0;
        animation: none;
    }

    .marca__ponteiro,
    .marca__onda,
    .marca__pulso,
    .marca__sobe {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .marca__giro  { animation-duration: var(--t-marca-laco); }
    .marca__varre { animation-duration: var(--t-marca-laco); }
}