/*
Descrição: Estilos da animação exclusiva da página "Sistemas de
           Segurança" (".security-cam*"), usada no hero no lugar da foto
           inicial. Mostra uma câmara CCTV a vigiar o espaço (a cabeça
           roda de um lado para o outro, com o feixe de visão a
           acompanhar), até detetar um "intruso" a atravessar o campo de
           visão — nesse momento a caixa de deteção acende à volta da
           figura e o emblema de alarme (".security-alert-badge")
           dispara, antes de tudo voltar ao estado de vigilância normal
           de forma suave (gradual, não um corte instantâneo) e repetir o
           ciclo. O "ecrã" imita uma interface real de câmara/gravador:
           cantos de focagem (".security-cam-corner"), indicador "REC" e
           de bateria. Os instantes-chave da narrativa têm de ficar
           sincronizados entre todos os "@keyframes" abaixo e as
           animações definidas inline no SVG em sistemas-seguranca.html —
           a entrada em alarme acontece a meio do ciclo (~38%-43%) e a
           saída, mais lenta/suave, no final (~70%-82%).
Autor: Emanuel Borges
Versão: 2.0.0
Última alteração: 2026-10-07
*/

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

/* Caixa do "ecrã" — fundo escuro fixo (como um monitor de videovigilância,
   independente do tema claro/escuro do site) com uma textura ligeira de
   linhas de varrimento (scanlines), para reforçar a ideia de imagem de
   câmara. */
.security-cam {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 300;
    border-radius: 10px;
    overflow: hidden;
    background-color: #0a0f1a;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 3px
    );
}

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

/* Suporte da câmara — fixo, não roda (só a cabeça, mais abaixo). */
.cam-mount {
    stroke: #4a5568;
}

/* Grupo que roda de um lado para o outro — cabeça da câmara + feixe de
   visão, ambos presos ao mesmo eixo, para o feixe parecer sair sempre da
   lente. O "transform-origin" tem de coincidir com o eixo do suporte
   desenhado no HTML. */
.cam-head-group {
    transform-origin: 70px 72px;
    animation: cam-sweep 10s ease-in-out infinite;
}

@keyframes cam-sweep {
    0%   { transform: rotate(-24deg); }
    40%  { transform: rotate(24deg); }
    44%  { transform: rotate(28deg); }
    50%  { transform: rotate(25deg); }
    56%  { transform: rotate(29deg); }
    62%  { transform: rotate(25deg); }
    68%  { transform: rotate(27deg); }
    82%  { transform: rotate(24deg); }
    100% { transform: rotate(-24deg); }
}

.cam-body {
    fill: #1b2436;
    stroke: #4a5568;
    stroke-width: 2;
}

.cam-led {
    fill: #ff4d4f;
    animation: cam-led-blink 1s steps(2, jump-none) infinite;
}

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

/* Feixe de visão — azul calmo em vigilância normal, muda para vermelho
   exatamente na janela de deteção/alarme (ver o comentário no topo do
   ficheiro sobre os instantes-chave partilhados). */
.cam-beam,
.cam-lens-glow {
    animation: security-alarm-color 10s linear infinite;
}

.cam-beam {
    opacity: 0.2;
}

@keyframes security-alarm-color {
    0%, 38%   { fill: var(--color-primary-light); }
    43%, 70%  { fill: #ff4d4f; }
    82%, 100% { fill: var(--color-primary-light); }
}

/* "Sombra" no chão por baixo do intruso, para não parecer a flutuar. */
.intruder-shadow {
    fill: rgba(0, 0, 0, 0.35);
}

.intruder-head,
.intruder-body {
    fill: #9fb3d1;
}

/* O intruso atravessa o campo de visão da câmara e fica "apanhado"
   (imóvel) durante a janela de alarme, antes de continuar e sair de
   cena. */
.intruder-walk {
    animation: intruder-walk 10s linear infinite;
}

@keyframes intruder-walk {
    0%        { transform: translateX(-60px); opacity: 0; }
    6%        { opacity: 1; }
    40%, 82%  { transform: translateX(230px); opacity: 1; }
    97%       { transform: translateX(480px); opacity: 1; }
    100%      { transform: translateX(480px); opacity: 0; }
}

/* Caixa de deteção tipo CCTV à volta do intruso — tracejado "em marcha"
   (stroke-dashoffset a correr sempre) só fica visível durante a mesma
   janela de alarme do feixe/emblema. */
.detect-box {
    fill: none;
    stroke: #ff4d4f;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0;
    animation: detect-box-show 10s linear infinite, detect-box-march 0.6s linear infinite;
}

@keyframes detect-box-show {
    0%, 38%   { opacity: 0; }
    43%, 70%  { opacity: 1; }
    82%, 100% { opacity: 0; }
}

@keyframes detect-box-march {
    to { stroke-dashoffset: -20; }
}

/* ---------- Emblema de alarme (HTML, canto superior direito) ---------- */

.security-alert-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: #9fb3d1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    animation: security-alert-glow 10s linear infinite;
}

@keyframes security-alert-glow {
    0%, 38% {
        color: #9fb3d1;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    43%, 70% {
        color: #ff4d4f;
        border-color: #ff4d4f;
        box-shadow: 0 0 0 1px #ff4d4f, 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 18px rgba(255, 77, 79, 0.55);
    }
    82%, 100% {
        color: #9fb3d1;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

/* Anel a expandir-se e a desvanecer à volta do emblema, como uma sirene —
   só é desenhado (não só invisível: "visibility") durante a janela de
   alarme, para não haver nenhum resquício fora desse período. O
   "security-ring-pulse" corre sempre, em loop curto e independente, mas
   só se vê quando a "visibility" o permite. */
.security-alert-badge::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 2px solid #ff4d4f;
    visibility: hidden;
    animation: security-ring-gate 10s linear infinite, security-ring-pulse 1.1s ease-out infinite;
}

@keyframes security-ring-gate {
    0%, 44%   { visibility: hidden; }
    46%, 68%  { visibility: visible; }
    70%, 100% { visibility: hidden; }
}

@keyframes security-ring-pulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.35); opacity: 0; }
}

.security-alert-icon {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.security-alert-icon svg {
    width: 100%;
    height: 100%;
}

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

/* ---------- Indicador "REC" (HTML, canto superior esquerdo) ---------- */

.security-rec {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #cfd8e6;
}

.security-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff4d4f;
    animation: cam-led-blink 1s steps(2, jump-none) infinite;
}

/* ---------- Indicador de bateria (HTML, canto inferior esquerdo) ---------- */

.security-battery {
    position: absolute;
    bottom: 14px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #cfd8e6;
}

/* Pilha desenhada só com CSS (corpo + polo positivo), em vez de um
   ícone — o nível de carga é a largura do "security-battery-fill" lá
   dentro. */
.security-battery-icon {
    position: relative;
    width: 20px;
    height: 10px;
    border: 1.5px solid #cfd8e6;
    border-radius: 2px;
}

.security-battery-icon::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 2px;
    height: 4px;
    background-color: #cfd8e6;
    border-radius: 0 1px 1px 0;
}

.security-battery-fill {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 78%;
    background-color: #4fc3f7;
    border-radius: 1px;
}

/* ---------- Cantos de focagem, como o visor de uma câmara/gravador ---------- */

.security-cam-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid rgba(255, 255, 255, 0.5);
    animation: security-corner-flash 10s linear infinite;
}

.security-cam-corner-tl {
    top: 10px;
    left: 10px;
    border-top-width: 2px;
    border-left-width: 2px;
    border-top-left-radius: 4px;
}

.security-cam-corner-tr {
    top: 10px;
    right: 10px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-top-right-radius: 4px;
}

.security-cam-corner-bl {
    bottom: 10px;
    left: 10px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-bottom-left-radius: 4px;
}

.security-cam-corner-br {
    bottom: 10px;
    right: 10px;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-right-radius: 4px;
}

/* Os cantos acompanham o alarme (ficam vermelhos) na mesma janela e com
   a mesma transição suave das restantes peças do ecrã. */
@keyframes security-corner-flash {
    0%, 38%   { border-color: rgba(255, 255, 255, 0.5); }
    43%, 70%  { border-color: #ff4d4f; }
    82%, 100% { border-color: rgba(255, 255, 255, 0.5); }
}

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

    .security-alert-badge {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .security-alert-text {
        font-size: 9px;
    }

    .security-alert-icon {
        width: 14px;
        height: 14px;
    }

    .security-rec {
        font-size: 9px;
    }

    .security-battery {
        font-size: 9px;
        bottom: 10px;
    }

    .security-battery-icon {
        width: 16px;
        height: 8px;
    }

    .security-cam-corner {
        width: 14px;
        height: 14px;
    }
}

/* ---------- Passo 4 "Testes e validação" (consola de testes) ----------
   Exclusiva desta página (ao contrário das ilustrações partilhadas das
   etapas 1/2 em servicos-detalhe.css) — um pequeno painel tipo consola
   de diagnóstico, com os 4 itens exatos do texto ao lado (deteção,
   gravação, alarmes, notificações) a serem testados um a seguir ao
   outro: anel a rodar (spinner) enquanto "a testar" e depois um visto
   verde quando aprovado, com uma barra de progresso geral a acompanhar.
   Cada linha tem uma janela de 16% do ciclo de 7s, seguida da anterior —
   ver "@keyframes process-test-row-N" abaixo. */
.process-test-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

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

.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; }
.process-test-ring-4 { animation: process-test-ring-4 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); } }
@keyframes process-test-ring-4 { 0%, 59%  { stroke: var(--color-border); } 62%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }

/* Arco do "spinner", sempre a rodar — só fica visível durante a janela
   de teste da sua linha (gerido à parte, ver ".process-test-spin-N"). */
.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; }
.process-test-spin-4 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-4 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; } }
@keyframes process-test-spin-show-4 { 0%, 50% { opacity: 0; } 52%, 59% { opacity: 1; } 61%, 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; }
.process-test-check-4 { animation: process-test-check-show-4 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; } }
@keyframes process-test-check-show-4 { 0%, 61%  { opacity: 0; } 63%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Barra de progresso geral, a encher enquanto as 4 linhas vão sendo
   testadas (conclui exatamente quando a 4ª linha fica aprovada). */
.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); }
    59%, 82%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

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

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

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

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

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