/* ---------- Entrada da demonstração ---------- */
.demonstracao {
    align-items: center;
    text-align: center;
}

.demonstracao__animacao {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 28px;
}

.demonstracao__anel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--mp-brand-50);
    border-top-color: var(--mp-primary);
    animation: demonstracao-girar 1.1s linear infinite;
}

.demonstracao__icone {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mp-brand-50);
    color: var(--mp-primary);
    font-size: 2rem;
    animation: demonstracao-pulsar 1.8s var(--mp-ease) infinite;
}

.demonstracao__mensagem {
    min-height: 1.5em;
    transition: opacity .2s ease, transform .2s ease;
}

.demonstracao__mensagem--saindo {
    opacity: 0;
    transform: translateY(-4px);
}

.demonstracao__progresso {
    width: min(260px, 100%);
    height: 4px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mp-brand-50);
}

.demonstracao__progresso span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--mp-primary);
    animation: demonstracao-progresso 1.4s var(--mp-ease) infinite;
}

/* O Turnstile só aparece quando pede uma confirmação; no resto do tempo o espaço fica vazio */
.demonstracao__captcha:not(:empty) {
    margin-top: 20px;
}

.demonstracao__falha {
    width: 100%;
}

.demonstracao__falha .btn-mp {
    width: 100%;
}

.demonstracao[data-estado="falha"] .demonstracao__anel,
.demonstracao[data-estado="falha"] .demonstracao__icone {
    animation: none;
}

.demonstracao[data-estado="falha"] .demonstracao__anel {
    border-top-color: var(--mp-brand-50);
}

.demonstracao[data-estado="falha"] .demonstracao__icone {
    color: var(--mp-text-muted);
}

.demonstracao[data-estado="falha"] .demonstracao__preparo,
.demonstracao[data-estado="falha"] .demonstracao__captcha {
    display: none;
}

@keyframes demonstracao-girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes demonstracao-pulsar {
    50% {
        transform: scale(.92);
    }
}

@keyframes demonstracao-progresso {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .demonstracao__anel,
    .demonstracao__icone,
    .demonstracao__progresso span {
        animation-duration: 3s;
    }

    .demonstracao__icone {
        animation: none;
    }
}