/*
Descrição: Estilos da animação exclusiva da página "Consultoria
           Tecnológica" (".consult-*"), usada no hero no lugar do
           marcador de imagem genérico. Mostra duas pessoas (consultor e
           cliente) sentadas à mesa, a conversar, com um ecrã de
           apresentação no meio a mostrar, um a um, os 7 serviços da
           TICom — como se o consultor estivesse a apresentar as opções
           ao cliente. No fim o cliente "concorda" (visto a aparecer por
           cima da cabeça) e acende o emblema "PROPOSTA PRONTA"; depois
           tudo limpa e o ciclo recomeça. Os 7 nomes de serviço
           (".consult-service-1..7") têm janelas de 9% cada, seguidas —
           ver os "@keyframes" abaixo para os instantes-chave.
Autor: Emanuel Borges
Versão: 3.0.0
Última alteração: 2026-10-07
*/

.consult-frame {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    padding: 22px;
}

.consult-board {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 300;
    border-radius: 10px;
    overflow: hidden;
    background-color: #0a0f1a;
}

.consult-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Mesa e pessoas (fixas) ---------- */

.consult-desk {
    fill: #141c2e;
}

.consult-person {
    fill: #1b2436;
    stroke: #2a3550;
    stroke-width: 2;
}

.consult-stand {
    stroke: #2a3550;
    stroke-width: 3;
}

/* Ponteiro na mão do consultor — a base (mão) fica fixa e a ponta oscila
   de um lado para o outro continuamente, como se fosse sublinhando as
   palavras no quadro à medida que vai falando de cada serviço; só fica
   visível enquanto apresenta (mesma janela do balão de fala). */
.consult-pointer {
    stroke: #5c6b84;
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 122px 215px;
    animation: consult-pointer-wave 0.9s ease-in-out infinite, consult-bubble-show 9s linear infinite;
}

@keyframes consult-pointer-wave {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}

/* ---------- Ecrã de apresentação ---------- */

.consult-screen {
    fill: #0f1626;
    stroke: #2a3550;
    stroke-width: 2;
}

.consult-service-text {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 13px;
    fill: var(--color-primary-light);
    text-anchor: middle;
    opacity: 0;
}

/* Cada serviço aparece/desaparece na sua janela de ~9% do ciclo, um a
   seguir ao outro, como o consultor a ir mostrando as opções. */
.consult-service-1 { animation: consult-service-show-1 9s linear infinite; }
.consult-service-2 { animation: consult-service-show-2 9s linear infinite; }
.consult-service-3 { animation: consult-service-show-3 9s linear infinite; }
.consult-service-4 { animation: consult-service-show-4 9s linear infinite; }
.consult-service-5 { animation: consult-service-show-5 9s linear infinite; }
.consult-service-6 { animation: consult-service-show-6 9s linear infinite; }
.consult-service-7 { animation: consult-service-show-7 9s linear infinite; }

@keyframes consult-service-show-1 { 0%, 5%   { opacity: 0; } 7%, 14%  { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes consult-service-show-2 { 0%, 14%  { opacity: 0; } 16%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes consult-service-show-3 { 0%, 23%  { opacity: 0; } 25%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes consult-service-show-4 { 0%, 32%  { opacity: 0; } 34%, 41% { opacity: 1; } 43%, 100% { opacity: 0; } }
@keyframes consult-service-show-5 { 0%, 41%  { opacity: 0; } 43%, 50% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes consult-service-show-6 { 0%, 50%  { opacity: 0; } 52%, 59% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes consult-service-show-7 { 0%, 59%  { opacity: 0; } 61%, 69% { opacity: 1; } 71%, 100% { opacity: 0; } }

/* ---------- Balão de fala do consultor (com "..." a piscar) ---------- */

.consult-bubble {
    fill: #141c2e;
    stroke: #2a3550;
    stroke-width: 1.5;
    animation: consult-bubble-show 9s linear infinite;
}

.consult-bubble-tail {
    fill: #141c2e;
    stroke: #2a3550;
    stroke-width: 1.5;
    animation: consult-bubble-show 9s linear infinite;
}

@keyframes consult-bubble-show {
    0%, 4%    { opacity: 0; }
    6%, 69%   { opacity: 1; }
    71%, 100% { opacity: 0; }
}

.consult-dot {
    fill: #9fb3d1;
    animation: cam-led-blink 1s steps(2, jump-none) infinite, consult-bubble-show 9s linear infinite;
}

@keyframes cam-led-blink {
    50% { opacity: 0.15; }
}

.consult-dot-2 { animation-delay: -0.33s, 0s; }
.consult-dot-3 { animation-delay: -0.66s, 0s; }

/* ---------- Reação do cliente (visto, no fim da apresentação) ---------- */

.consult-agree-circle {
    fill: #141c2e;
    stroke: #35d07f;
    stroke-width: 1.5;
}

.consult-agree-mark {
    fill: none;
    stroke: #35d07f;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.consult-agree-group {
    opacity: 0;
    animation: consult-agree-show 9s linear infinite;
}

@keyframes consult-agree-show {
    0%, 70%   { opacity: 0; }
    73%, 85%  { opacity: 1; }
    92%, 100% { opacity: 0; }
}

/* ---------- Emblema "Proposta pronta" (HTML, canto superior direito) ---------- */

.consult-ready-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background-color: rgba(10, 15, 26, 0.75);
    color: #5c6b84;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    animation: consult-badge-glow 9s linear infinite;
}

@keyframes consult-badge-glow {
    0%, 70% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    73%, 85% {
        opacity: 1;
        transform: translateY(0);
        color: #35d07f;
        border-color: #35d07f;
        box-shadow: 0 0 0 1px #35d07f, 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 18px rgba(53, 208, 127, 0.5);
    }
    92%, 100% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

.consult-ready-icon {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.consult-ready-icon svg {
    width: 100%;
    height: 100%;
}

.consult-ready-text {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .consult-frame {
        padding: 14px;
    }

    .consult-ready-badge {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .consult-ready-text {
        font-size: 9px;
    }

    .consult-ready-icon {
        width: 14px;
        height: 14px;
    }

    .consult-service-text {
        font-size: 10px;
    }
}