/*
Descrição: Estilos da animação exclusiva da página "Cablagem
           Estruturada" (".cabling-*"), usada no hero no lugar do
           marcador de imagem genérico. Mostra um painel de distribuição
           (patch panel) com 8 portas sobre uma calha/tabuleiro de cabos
           — cada cabo sobe diretamente da sua própria posição na calha
           até à sua própria porta (sem se cruzar com os outros, "cada um
           no seu lugar"), ligando-se um a seguir ao outro. O LED de cada
           porta acende (verde) assim que o respetivo cabo termina de
           "subir" até ela, até todas estarem ligadas e o emblema
           "CERTIFICADO" acender; depois os cabos recolhem e o ciclo
           recomeça. Fundo com grelha ligeira tipo esquema técnico/
           projeto. Os instantes-chave de cada cabo estão desfasados (ver
           "@keyframes cabling-connect-1..8") para ligarem em sequência,
           não todos ao mesmo tempo.
Autor: Emanuel Borges
Versão: 2.1.0
Última alteração: 2026-10-08
*/

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

.cabling-board {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 300;
    border-radius: 10px;
    overflow: hidden;
    background-color: #0a0f1a;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

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

/* ---------- Painel de distribuição (patch panel) ---------- */

.cabling-panel {
    fill: #1b2436;
    stroke: #4a5568;
    stroke-width: 2;
}

.cabling-port {
    fill: #0b1220;
    stroke: #4a5568;
    stroke-width: 1.5;
}

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

/* Calha/tabuleiro de onde cada cabo sobe — cada um na sua própria
   posição (em baixo, "reto" até à sua porta), sem se cruzarem. */
.cabling-tray {
    fill: #141c2b;
    stroke: #4a5568;
    stroke-width: 1.5;
}

/* LED de cada porta — cinza/apagado por omissão, acende a verde no
   instante em que o respetivo cabo chega (ver "@keyframes
   cabling-connect-N", uma por porta, todas com o mesmo formato só que
   desfasadas no tempo para ligarem uma a seguir à outra). */
.cabling-led {
    fill: #3a4558;
}

.cabling-led-1 { animation: cabling-connect-1 10s linear infinite; }
.cabling-led-2 { animation: cabling-connect-2 10s linear infinite; }
.cabling-led-3 { animation: cabling-connect-3 10s linear infinite; }
.cabling-led-4 { animation: cabling-connect-4 10s linear infinite; }
.cabling-led-5 { animation: cabling-connect-5 10s linear infinite; }
.cabling-led-6 { animation: cabling-connect-6 10s linear infinite; }
.cabling-led-7 { animation: cabling-connect-7 10s linear infinite; }
.cabling-led-8 { animation: cabling-connect-8 10s linear infinite; }

/* ---------- Cabos ---------- */

/* Cada cabo é desenhado progressivamente (como as linhas do mostruário
   de "Servidores em Cloud") desde a calha em baixo até à porta — dá a
   sensação de estar a ser instalado/ligado ali mesmo. "pathLength=1" (no
   HTML) torna o "stroke-dashoffset" uma fração de 0 a 1, independente do
   comprimento real da curva. */
.cabling-wire {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.cabling-wire-1 { stroke: color-mix(in srgb, var(--color-primary-light) 92%, black 8%); animation: cabling-draw-1 10s linear infinite; }
.cabling-wire-2 { stroke: color-mix(in srgb, var(--color-primary-light) 86%, white 14%); animation: cabling-draw-2 10s linear infinite; }
.cabling-wire-3 { stroke: color-mix(in srgb, var(--color-primary-light) 74%, white 26%); animation: cabling-draw-3 10s linear infinite; }
.cabling-wire-4 { stroke: color-mix(in srgb, var(--color-primary-light) 62%, white 38%); animation: cabling-draw-4 10s linear infinite; }
.cabling-wire-5 { stroke: color-mix(in srgb, var(--color-primary-light) 50%, white 50%); animation: cabling-draw-5 10s linear infinite; }
.cabling-wire-6 { stroke: color-mix(in srgb, var(--color-primary-light) 38%, white 62%); animation: cabling-draw-6 10s linear infinite; }
.cabling-wire-7 { stroke: color-mix(in srgb, var(--color-primary-light) 26%, white 74%); animation: cabling-draw-7 10s linear infinite; }
.cabling-wire-8 { stroke: color-mix(in srgb, var(--color-primary-light) 16%, white 84%); animation: cabling-draw-8 10s linear infinite; }

/* Janelas de cada cabo/LED: desenha-se durante ~5% do ciclo, fica ligado
   durante a "espera" até todas as portas estarem feitas e o emblema
   aparecer, depois todos recolhem/apagam juntos (84%-92%) antes do
   reinício. Cada "N" abaixo começa 6% depois do anterior. */
@keyframes cabling-draw-1 {
    0%, 1%    { stroke-dashoffset: 1; opacity: 1; }
    6%        { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-2 {
    0%, 7%    { stroke-dashoffset: 1; opacity: 1; }
    12%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-3 {
    0%, 13%   { stroke-dashoffset: 1; opacity: 1; }
    18%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-4 {
    0%, 19%   { stroke-dashoffset: 1; opacity: 1; }
    24%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-5 {
    0%, 25%   { stroke-dashoffset: 1; opacity: 1; }
    30%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-6 {
    0%, 31%   { stroke-dashoffset: 1; opacity: 1; }
    36%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-7 {
    0%, 37%   { stroke-dashoffset: 1; opacity: 1; }
    42%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cabling-draw-8 {
    0%, 43%   { stroke-dashoffset: 1; opacity: 1; }
    48%       { stroke-dashoffset: 0; opacity: 1; }
    84%       { stroke-dashoffset: 0; opacity: 1; }
    92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Mesmas janelas que os cabos (acende quando o cabo correspondente
   chega), aplicadas à cor do LED em vez do desenho da linha. */
@keyframes cabling-connect-1 {
    0%, 5%    { fill: #3a4558; }
    7%, 90%   { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-2 {
    0%, 11%   { fill: #3a4558; }
    13%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-3 {
    0%, 17%   { fill: #3a4558; }
    19%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-4 {
    0%, 23%   { fill: #3a4558; }
    25%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-5 {
    0%, 29%   { fill: #3a4558; }
    31%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-6 {
    0%, 35%   { fill: #3a4558; }
    37%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-7 {
    0%, 41%   { fill: #3a4558; }
    43%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}
@keyframes cabling-connect-8 {
    0%, 47%   { fill: #3a4558; }
    49%, 90%  { fill: #35d07f; }
    92%, 100% { fill: #3a4558; }
}

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

.cabling-cert-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: cabling-cert-glow 10s linear infinite;
}

@keyframes cabling-cert-glow {
    0%, 47% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    51%, 84% {
        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);
    }
}

.cabling-cert-icon {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cabling-cert-icon svg {
    width: 100%;
    height: 100%;
}

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

/* ---------- Rótulo do painel (HTML, canto superior esquerdo) ---------- */

.cabling-counter {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: #9fb3d1;
}

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

    .cabling-cert-badge {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .cabling-cert-text {
        font-size: 9px;
    }

    .cabling-cert-icon {
        width: 14px;
        height: 14px;
    }

    .cabling-counter {
        font-size: 9px;
    }

    .cabling-port-label {
        font-size: 7px;
    }
}

/* Animação exclusiva do passo 5 "Manutenção": um pequeno ecrã de
   painel de controlo (mesmo "molde" de ecrã usado nos outros serviços)
   com o estado da ligação (ponto verde a pulsar) e um parafuso a rodar
   continuamente no canto, como sinal de "trabalho de manutenção em
   curso". Por baixo, uma mini réplica do patch panel do hero é
   percorrida por um feixe de verificação que acende o LED de cada
   porta à medida que passa — tal como o técnico confirma porta a porta
   numa visita de manutenção — antes de recuar e recomeçar. Em baixo, um
   anel parcial a rodar devagar simboliza o acompanhamento contínuo
   (ritmo propositadamente mais lento do que o "spinner" de teste usado
   noutras páginas, para não parecer um carregamento mas sim um serviço
   contínuo). */
.process-maint-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

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

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

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

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

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

.process-maint-bolt {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 2;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-maint-bolt-turn 3s linear infinite;
}

.process-maint-bolt-hole {
    fill: var(--color-bg);
}

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

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

.process-maint-port {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 1.5;
}

/* Ficha RJ45 que "voa" de porta em porta: desce e encaixa mesmo dentro
   de cada quadrado (acendendo o respetivo LED), sai e avança para a
   porta seguinte, e no fim desaparece/reaparece ao início já na
   posição da primeira porta (enquanto invisível, para o salto não se
   notar) — ver "@keyframes process-maint-plug-move". Cada porta tem
   uma janela própria com a mesma sequência (chegar levantada -> descer
   -> encaixar -> subir -> avançar), desfasada 22% em relação à
   anterior, tal como o "process-maint-led-N" correspondente que
   acende no instante exato em que a ficha encaixa. */
.process-maint-plug-body {
    fill: var(--color-primary);
    stroke: var(--color-primary-light);
    stroke-width: 1;
}

.process-maint-plug-clip {
    fill: var(--color-primary-light);
}

.process-maint-plug-pin {
    stroke: var(--color-bg);
    stroke-width: 1.2;
}

.process-maint-plug {
    transform-box: fill-box;
    animation: process-maint-plug-move 8s ease-in-out infinite;
}

@keyframes process-maint-plug-move {
    0%   { transform: translate(0px, -10px);  opacity: 1; }
    2%   { transform: translate(0px, 0px); }
    5%   { transform: translate(0px, 16px); }
    15%  { transform: translate(0px, 16px); }
    18%  { transform: translate(0px, 0px); }
    20%  { transform: translate(0px, -10px); }
    22%  { transform: translate(30px, -10px); }
    24%  { transform: translate(30px, 0px); }
    27%  { transform: translate(30px, 16px); }
    37%  { transform: translate(30px, 16px); }
    40%  { transform: translate(30px, 0px); }
    42%  { transform: translate(30px, -10px); }
    44%  { transform: translate(60px, -10px); }
    46%  { transform: translate(60px, 0px); }
    49%  { transform: translate(60px, 16px); }
    59%  { transform: translate(60px, 16px); }
    62%  { transform: translate(60px, 0px); }
    64%  { transform: translate(60px, -10px); }
    66%  { transform: translate(90px, -10px); }
    68%  { transform: translate(90px, 0px); }
    71%  { transform: translate(90px, 16px); }
    81%  { transform: translate(90px, 16px); }
    84%  { transform: translate(90px, 0px); }
    86%  { transform: translate(90px, -10px); opacity: 1; }
    90%  { transform: translate(90px, -10px); opacity: 0; }
    92%  { transform: translate(0px, -10px);  opacity: 0; }
    100% { transform: translate(0px, -10px);  opacity: 0; }
}

.process-maint-led {
    stroke: none;
}

.process-maint-led-1 { animation: process-maint-led-1 8s ease-in-out infinite; }
.process-maint-led-2 { animation: process-maint-led-2 8s ease-in-out infinite; }
.process-maint-led-3 { animation: process-maint-led-3 8s ease-in-out infinite; }
.process-maint-led-4 { animation: process-maint-led-4 8s ease-in-out infinite; }

@keyframes process-maint-led-1 { 0%, 4%   { fill: var(--color-border); } 6%,  88% { fill: #35d07f; } 90%, 100% { fill: var(--color-border); } }
@keyframes process-maint-led-2 { 0%, 26%  { fill: var(--color-border); } 28%, 88% { fill: #35d07f; } 90%, 100% { fill: var(--color-border); } }
@keyframes process-maint-led-3 { 0%, 48%  { fill: var(--color-border); } 50%, 88% { fill: #35d07f; } 90%, 100% { fill: var(--color-border); } }
@keyframes process-maint-led-4 { 0%, 70%  { fill: var(--color-border); } 72%, 88% { fill: #35d07f; } 90%, 100% { fill: var(--color-border); } }

.process-maint-cycle {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 16 60;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-maint-cycle-turn 3s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .process-maint-ping,
    .process-maint-bolt,
    .process-maint-plug,
    .process-maint-led-1,
    .process-maint-led-2,
    .process-maint-led-3,
    .process-maint-led-4,
    .process-maint-cycle {
        animation: none;
    }

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

    .process-maint-plug {
        opacity: 0;
    }

    .process-maint-led-1,
    .process-maint-led-2,
    .process-maint-led-3,
    .process-maint-led-4 {
        fill: #35d07f;
    }
}