/*
Descrição: Estilos da animação exclusiva da página "Soluções Microsoft"
           (".ms365-*"), usada no hero no lugar do marcador de imagem
           genérico. Mostra um cartão de "Iniciar sessão" (e-mail,
           password, barra "a sincronizar") a preencher-se à esquerda,
           enquanto à direita uma grelha com os 6 serviços (Outlook,
           Teams, SharePoint, Windows Server, Azure, Segurança) vai
           acendendo um a um, ao ritmo da sincronização — até todos
           ativos e o emblema "CONTA PROTEGIDA" acender; depois tudo
           limpa e o ciclo recomeça. Os instantes-chave de cada icon têm
           de ficar coordenados com a barra de progresso (ver
           "@keyframes ms365-sync-bar" e "ms365-tile-1..6" abaixo).
Autor: Emanuel Borges
Versão: 1.1.0
Última alteração: 2026-10-08
*/

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

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

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

/* ---------- Cartão de "Iniciar sessão" ---------- */

.ms365-window {
    fill: #0f1626;
    stroke: #2a3550;
    stroke-width: 2;
}

.ms365-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: #5c6b84;
}

.ms365-title {
    font-size: 12px;
    font-weight: bold;
    fill: #e8eef7;
}

.ms365-field {
    fill: #141c2e;
    stroke: #2a3550;
    stroke-width: 1.5;
}

/* Texto do e-mail — em vez de "esticar" o texto todo com "scaleX" (que
   distorcia as letras enquanto crescia), o texto fica sempre com o
   tamanho normal e é um retângulo de recorte ("clip-path", ver o
   "<clipPath>" no HTML) que vai revelando, à frente dele, uma letra de
   cada vez (14 "degraus", um por caráter de "geral@ticom.pt" —
   "steps()" em vez de uma curva suave, para parecer mesmo escrita a
   surgir tecla a tecla). */
.ms365-email-text {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--color-primary-light);
}

.ms365-email-clip-rect {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: ms365-type-email 9s linear infinite;
}

@keyframes ms365-type-email {
    0%, 1%    { transform: scaleX(0); animation-timing-function: steps(14, jump-end); }
    8%        { transform: scaleX(1); }
    78%       { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}

/* Pontos da password — mesma técnica do e-mail acima, mas com 8 degraus
   (um por ponto), para irem "aparecendo ao escrever" em vez de surgirem
   todos ao mesmo tempo. */
.ms365-dot {
    fill: #9fb3d1;
}

.ms365-dots-clip-rect {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: ms365-type-dots 9s linear infinite;
}

@keyframes ms365-type-dots {
    0%, 9%    { transform: scaleX(0); animation-timing-function: steps(8, jump-end); }
    13%       { transform: scaleX(1); }
    78%       { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}

/* Barra "a sincronizar", a encher enquanto os ícones da grelha vão
   acendendo (ver ".ms365-tile-N" mais abaixo — janelas desfasadas,
   sincronizadas com este preenchimento). */
.ms365-sync-track {
    fill: #141c2e;
}

.ms365-sync-bar {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: ms365-sync-fill 9s linear infinite;
}

@keyframes ms365-sync-fill {
    0%, 14%   { transform: scaleX(0); }
    56%       { transform: scaleX(1); }
    78%       { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}

.ms365-sync-text {
    font-family: var(--font-mono);
    font-size: 8px;
    fill: #5c6b84;
    opacity: 0;
    animation: ms365-sync-text-show 9s linear infinite;
}

@keyframes ms365-sync-text-show {
    0%, 14%   { opacity: 0; }
    17%, 78%  { opacity: 1; }
    88%, 100% { opacity: 0; }
}

/* ---------- Grelha de serviços ---------- */

.ms365-tile {
    fill: #141c2e;
    stroke: #2a3550;
    stroke-width: 1.5;
}

.ms365-tile-icon {
    stroke: #5c6b84;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ms365-tile-label {
    font-family: var(--font-mono);
    font-size: 8px;
    fill: #5c6b84;
}

/* Cada mosaico acende (borda + ícone passam a azul) numa janela própria,
   desfasada ~7% da anterior, ao ritmo em que a barra de sincronização
   avança — mas todos apagam juntos ("88%, 100%" igual em todos), para o
   reinício do ciclo ficar sincronizado com o resto da cena (e-mail,
   password, emblema). Por isso há 6 pares de "@keyframes" quase iguais,
   em vez de reaproveitar um só com "animation-delay" — um atraso
   desfasaria também o apagar, não só o acender. */
.ms365-tile-1 .ms365-tile { animation: ms365-tile-border-1 9s linear infinite; }
.ms365-tile-2 .ms365-tile { animation: ms365-tile-border-2 9s linear infinite; }
.ms365-tile-3 .ms365-tile { animation: ms365-tile-border-3 9s linear infinite; }
.ms365-tile-4 .ms365-tile { animation: ms365-tile-border-4 9s linear infinite; }
.ms365-tile-5 .ms365-tile { animation: ms365-tile-border-5 9s linear infinite; }
.ms365-tile-6 .ms365-tile { animation: ms365-tile-border-6 9s linear infinite; }

.ms365-tile-1 .ms365-tile-icon { animation: ms365-tile-icon-1 9s linear infinite; }
.ms365-tile-2 .ms365-tile-icon { animation: ms365-tile-icon-2 9s linear infinite; }
.ms365-tile-3 .ms365-tile-icon { animation: ms365-tile-icon-3 9s linear infinite; }
.ms365-tile-4 .ms365-tile-icon { animation: ms365-tile-icon-4 9s linear infinite; }
.ms365-tile-5 .ms365-tile-icon { animation: ms365-tile-icon-5 9s linear infinite; }
.ms365-tile-6 .ms365-tile-icon { animation: ms365-tile-icon-6 9s linear infinite; }

@keyframes ms365-tile-border-1 { 0%, 16% { stroke: #2a3550; } 19%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }
@keyframes ms365-tile-border-2 { 0%, 23% { stroke: #2a3550; } 26%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }
@keyframes ms365-tile-border-3 { 0%, 30% { stroke: #2a3550; } 33%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }
@keyframes ms365-tile-border-4 { 0%, 37% { stroke: #2a3550; } 40%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }
@keyframes ms365-tile-border-5 { 0%, 44% { stroke: #2a3550; } 47%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }
@keyframes ms365-tile-border-6 { 0%, 51% { stroke: #2a3550; } 54%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #2a3550; } }

@keyframes ms365-tile-icon-1 { 0%, 16% { stroke: #5c6b84; } 19%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }
@keyframes ms365-tile-icon-2 { 0%, 23% { stroke: #5c6b84; } 26%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }
@keyframes ms365-tile-icon-3 { 0%, 30% { stroke: #5c6b84; } 33%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }
@keyframes ms365-tile-icon-4 { 0%, 37% { stroke: #5c6b84; } 40%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }
@keyframes ms365-tile-icon-5 { 0%, 44% { stroke: #5c6b84; } 47%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }
@keyframes ms365-tile-icon-6 { 0%, 51% { stroke: #5c6b84; } 54%, 78% { stroke: var(--color-primary-light); } 88%, 100% { stroke: #5c6b84; } }

/* ---------- Emblema "Conta protegida" (HTML, canto superior direito) ---------- */

.ms365-protected-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: ms365-badge-glow 9s linear infinite;
}

@keyframes ms365-badge-glow {
    0%, 58% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    62%, 78% {
        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);
    }
    88%, 100% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

.ms365-protected-icon {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ms365-protected-icon svg {
    width: 100%;
    height: 100%;
}

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

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

    .ms365-protected-badge {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .ms365-protected-text {
        font-size: 9px;
    }

    .ms365-protected-icon {
        width: 14px;
        height: 14px;
    }

    .ms365-tile-label,
    .ms365-title,
    .ms365-label,
    .ms365-sync-text {
        font-size: 7px;
    }
}

/* Animação exclusiva do passo 3 "Implementação": um interruptor por
   cada serviço Microsoft a ativar (Outlook/Teams/OneDrive, com os
   mesmos ícones usados na grelha do hero, para reforçar a identidade
   visual), que liga (cinzento -> verde) um a seguir ao outro, com uma
   barra de progresso geral em baixo a acompanhar — mesma técnica usada
   em "process-build-*" (software-gestao.css), adaptada a esta página. */
.process-impl-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-impl-dot {
    fill: var(--color-primary-light);
}

.process-impl-ping {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-impl-ping 1.8s ease-out infinite;
}

@keyframes process-impl-ping {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

.process-impl-status {
    font-size: 11px;
    fill: var(--color-text);
}

.process-impl-divider {
    stroke: var(--color-border);
    stroke-width: 1;
}

.process-impl-badge {
    fill: var(--color-primary);
    opacity: 0.12;
}

.process-impl-icon {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-impl-label {
    font-size: 11px;
    fill: var(--color-text);
}

.process-impl-toggle-track-1 { animation: process-impl-track-1 7s ease-in-out infinite; }
.process-impl-toggle-track-2 { animation: process-impl-track-2 7s ease-in-out infinite; }
.process-impl-toggle-track-3 { animation: process-impl-track-3 7s ease-in-out infinite; }

@keyframes process-impl-track-1 { 0%, 18% { fill: var(--color-border); } 20%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }
@keyframes process-impl-track-2 { 0%, 42% { fill: var(--color-border); } 44%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }
@keyframes process-impl-track-3 { 0%, 66% { fill: var(--color-border); } 68%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }

.process-impl-toggle-knob {
    fill: var(--color-bg);
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.process-impl-toggle-knob-1 { animation: process-impl-knob-1 7s ease-in-out infinite; }
.process-impl-toggle-knob-2 { animation: process-impl-knob-2 7s ease-in-out infinite; }
.process-impl-toggle-knob-3 { animation: process-impl-knob-3 7s ease-in-out infinite; }

@keyframes process-impl-knob-1 { 0%, 18% { transform: translateX(0); } 20%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }
@keyframes process-impl-knob-2 { 0%, 42% { transform: translateX(0); } 44%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }
@keyframes process-impl-knob-3 { 0%, 66% { transform: translateX(0); } 68%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }

.process-impl-bar-track {
    fill: var(--color-border);
}

.process-impl-bar-fill {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-impl-bar-grow 7s ease-in-out infinite;
}

@keyframes process-impl-bar-grow {
    0%, 18%   { transform: scaleX(0); }
    20%, 42%  { transform: scaleX(0.33); }
    44%, 66%  { transform: scaleX(0.66); }
    68%, 88%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-impl-ping,
    .process-impl-toggle-track-1,
    .process-impl-toggle-track-2,
    .process-impl-toggle-track-3,
    .process-impl-toggle-knob-1,
    .process-impl-toggle-knob-2,
    .process-impl-toggle-knob-3,
    .process-impl-bar-fill {
        animation: none;
    }

    .process-impl-ping {
        opacity: 0;
    }

    .process-impl-toggle-track-1,
    .process-impl-toggle-track-2,
    .process-impl-toggle-track-3 {
        fill: #35d07f;
    }

    .process-impl-toggle-knob-1,
    .process-impl-toggle-knob-2,
    .process-impl-toggle-knob-3 {
        transform: translateX(18px);
    }

    .process-impl-bar-fill {
        transform: scaleX(1);
    }
}

/* Animação exclusiva do passo 4 "Migração de dados": checklist de 3
   categorias (e-mail, ficheiros, utilizadores), cada uma com o seu
   ícone, a passar de pendente -> a migrar (anel a rodar) -> migrada
   (visto verde) — mesma técnica/instantes-chave do "process-test-*" já
   usado nas páginas de "Testes" dos outros serviços, para que o ritmo
   da animação seja reconhecível em todo o site. */
.process-test-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-test-label {
    font-size: 11px;
    fill: var(--color-text);
}

.process-msmig-icon {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
}

.process-test-ring {
    fill: none;
    stroke-width: 3;
}

.process-test-ring-1 { animation: process-test-ring-1 7s ease-in-out infinite; }
.process-test-ring-2 { animation: process-test-ring-2 7s ease-in-out infinite; }
.process-test-ring-3 { animation: process-test-ring-3 7s ease-in-out infinite; }

@keyframes process-test-ring-1 { 0%, 11%  { stroke: var(--color-border); } 14%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-2 { 0%, 27%  { stroke: var(--color-border); } 30%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-3 { 0%, 43%  { stroke: var(--color-border); } 46%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }

.process-test-spinner {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 100;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-test-spin-rotate 0.8s linear infinite;
}

@keyframes process-test-spin-rotate {
    to { transform: rotate(360deg); }
}

.process-test-spin-1 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-1 7s linear infinite; }
.process-test-spin-2 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-2 7s linear infinite; }
.process-test-spin-3 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-3 7s linear infinite; }

@keyframes process-test-spin-show-1 { 0%, 2%  { opacity: 0; } 4%, 11%  { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-2 { 0%, 18% { opacity: 0; } 20%, 27% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-3 { 0%, 34% { opacity: 0; } 36%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }

.process-test-check {
    fill: none;
    stroke: #35d07f;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-test-check-1 { animation: process-test-check-show-1 7s linear infinite; }
.process-test-check-2 { animation: process-test-check-show-2 7s linear infinite; }
.process-test-check-3 { animation: process-test-check-show-3 7s linear infinite; }

@keyframes process-test-check-show-1 { 0%, 13%  { opacity: 0; } 15%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-2 { 0%, 29%  { opacity: 0; } 31%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-3 { 0%, 45%  { opacity: 0; } 47%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }

.process-test-bar-track {
    fill: var(--color-border);
}

.process-test-bar-fill {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-test-bar-grow 7s ease-in-out infinite;
}

@keyframes process-test-bar-grow {
    0%, 2%    { transform: scaleX(0); }
    43%, 80%  { transform: scaleX(1); }
    90%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3,
    .process-test-spinner,
    .process-test-spin-1,
    .process-test-spin-2,
    .process-test-spin-3,
    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3,
    .process-test-bar-fill {
        animation: none;
    }

    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3 {
        stroke: #35d07f;
    }

    .process-test-spinner {
        opacity: 0;
    }

    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3 {
        opacity: 1;
    }

    .process-test-bar-fill {
        transform: scaleX(1);
    }
}

/* Animação exclusiva do passo 5 "Suporte contínuo": um emblema central
   com o ícone de apoio técnico (mesmo ícone usado na secção "Porquê a
   TICom" de servidores-cloud.css), envolto por um anel parcial a rodar
   devagar e continuamente — sinal de "serviço sempre a decorrer", já
   usado em ".process-maint-cycle" (cablagem-estruturada.css) — e um
   balão de chat com "três pontos" a piscar em loop próprio, para
   transmitir que o apoio está sempre disponível. */
.process-support-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-support-dot {
    fill: #35d07f;
}

.process-support-ping {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-support-ping 1.8s ease-out infinite;
}

@keyframes process-support-ping {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

.process-support-status {
    font-size: 11px;
    fill: var(--color-text);
}

.process-support-divider {
    stroke: var(--color-border);
    stroke-width: 1;
}

.process-support-badge {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-support-ring {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 24 150;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-support-ring-turn 3.5s linear infinite;
}

@keyframes process-support-ring-turn {
    to { transform: rotate(360deg); }
}

.process-support-icon {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-support-bubble {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-support-bubble-dot {
    fill: var(--color-primary-light);
}

.process-support-bubble-dot-1 { animation: process-support-bubble-dot-1 1.2s ease-in-out infinite; }
.process-support-bubble-dot-2 { animation: process-support-bubble-dot-2 1.2s ease-in-out infinite; }
.process-support-bubble-dot-3 { animation: process-support-bubble-dot-3 1.2s ease-in-out infinite; }

@keyframes process-support-bubble-dot-1 { 0%, 100% { opacity: 0.3; } 15% { opacity: 1; } 30% { opacity: 0.3; } }
@keyframes process-support-bubble-dot-2 { 0%, 100% { opacity: 0.3; } 30% { opacity: 0.3; } 45% { opacity: 1; } 60% { opacity: 0.3; } }
@keyframes process-support-bubble-dot-3 { 0%, 100% { opacity: 0.3; } 45% { opacity: 0.3; } 60% { opacity: 1; } 75% { opacity: 0.3; } }

.process-support-text {
    font-size: 11px;
    fill: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
    .process-support-ping,
    .process-support-ring,
    .process-support-bubble-dot-1,
    .process-support-bubble-dot-2,
    .process-support-bubble-dot-3 {
        animation: none;
    }

    .process-support-ping {
        opacity: 0;
    }

    .process-support-bubble-dot-1,
    .process-support-bubble-dot-2,
    .process-support-bubble-dot-3 {
        opacity: 1;
    }
}