/* ═══ Fibra (25/09/2026) — fundo de fibras + fio guia que acende os cards ═══════
   Lógica em assets/js/fibra.js. Sem o JS, nada aqui aparece: o site fica com o
   fundo antigo (as manchas de fumaça só somem quando o canvas assume).            */

/* ── FUNDO ─────────────────────────────────────────────────────────────────── */
.bg-fibra { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-effects--fibra .bg-smoke { display: none; }        /* continuam no HTML, só escondidas */
.bg-effects--fibra .bg-grid { opacity: .5; }

/* ── FIO GUIA ──────────────────────────────────────────────────────────────── */
/* overflow: hidden nas duas camadas: o brilho do cabo na borda da tela não pode
   criar rolagem lateral (a página deslizando de lado foi corrigida em 25/09) */
.fibra-guia, .fibra-contornos {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
}
.fibra-guia { z-index: 0; }          /* atrás do conteúdo (.container tem z-index 1) */
.fibra-contornos { z-index: 2; }     /* a luz do contorno corre por cima da borda do card */
.fibra-guia__svg { position: absolute; left: 0; top: 0; overflow: visible; }

.fg-cabo, .fg-luz, .fg-drop, .fg-drop-luz { fill: none; }
/* o cabo apagado: capa escura + um fio de reflexo, visível sem competir com o texto */
.fg-cabo--capa     { stroke: #1b2438; stroke-width: 3.5; stroke-linecap: round; }
.fg-cabo--reflexo  { stroke: rgba(255, 255, 255, .08); stroke-width: 1; stroke-linecap: round; }
/* a luz que já passou: halo largo, núcleo laranja, filamento claro (o vidro).
   Pontas retas: ponta redonda deixava um ponto aceso na origem com comprimento zero */
.fg-luz            { stroke-linecap: butt; }
.fg-luz--halo      { stroke: rgba(255, 107, 0, .18); stroke-width: 14; }
.fg-luz--nucleo    { stroke: #ff7a1a; stroke-width: 3; }
.fg-luz--filamento { stroke: #ffe3c4; stroke-width: 1.1; }

.fg-drop           { stroke: #1b2438; stroke-width: 2.4; stroke-linecap: round; }
.fg-drop-luz       { stroke: #ff8a33; stroke-width: 1.8; stroke-linecap: round; }

/* emenda por fusão: o protetor termocontrátil com o pino, que acende quando a luz passa */
.fg-emenda__capa   { fill: #0d1322; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.fg-emenda__pino   { fill: #2a3350; transition: fill .45s ease; }
.fg-emenda.is-acesa .fg-emenda__pino { fill: #ffb070; }
.fg-emenda.is-acesa .fg-emenda__capa { stroke: rgba(255, 138, 51, .55); }
.fg-emenda__onda   {
    fill: none; stroke: #ff8a33; stroke-width: 1.5; opacity: 0;
    transform-box: fill-box; transform-origin: center;
}

/* a cabeça do pulso: brasa + cauda que aponta para trás na direção do movimento.
   Move só por transform (camada própria, não repinta o SVG) */
.fibra-guia__cabeca {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.fibra-guia__cabeca.is-viva { opacity: 1; }
.fibra-guia__cabeca::before {
    content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle, #fff8f0 0, #ffcf9f 18%, rgba(255, 122, 26, .6) 42%, rgba(255, 107, 0, 0) 70%);
}
.fibra-guia__cabeca::after {
    content: ""; position: absolute; right: 3px; top: -2.5px; width: 96px; height: 5px; border-radius: 5px;
    background: linear-gradient(90deg, rgba(255, 107, 0, 0), rgba(255, 122, 26, .5) 70%, #ffd6ad);
}

/* contorno: a luz entra pelo lado do cabo e corre pela borda do card */
.fibra-contorno { position: absolute; overflow: visible; }
.fibra-contorno path { fill: none; stroke-linecap: round; }
.fibra-contorno .fc-halo   { stroke: rgba(255, 107, 0, .42); stroke-width: 5; }
.fibra-contorno .fc-linha  { stroke: #ffb57a; stroke-width: 1.5; }
.fibra-contorno .fc-faisca { stroke: #fff4e8; stroke-width: 2.6; }

/* card aceso: outline, porque border, box-shadow, ::before e ::after os cards já
   usam. Nunca por cima do foco do teclado (:focus-visible fica com o anel dele). */
[data-fibra-card]:not(:focus-visible) {
    outline: 1px solid transparent; outline-offset: -1px;
    transition: outline-color .6s ease .3s;
}
[data-fibra-card][data-aceso]:not(:focus-visible) { outline-color: rgba(255, 138, 51, .55); }

@media (max-width: 767px) {
    .fg-luz--halo { stroke-width: 10; }
    .fg-cabo--capa { stroke-width: 3; }
    .fibra-guia__cabeca::before { left: -13px; top: -13px; width: 26px; height: 26px; }
    .fibra-guia__cabeca::after { width: 64px; height: 4px; top: -2px; }
}

@media (prefers-reduced-motion: reduce) {
    .fibra-guia__cabeca { display: none; }
    [data-fibra-card]:not(:focus-visible) { transition: none; }
}

@media print {
    .fibra-guia, .fibra-contornos, .bg-fibra { display: none; }
}