/* ============================================================
   Bytex — Circuito decorativo 2 (global, reutilizable)
   File: assets/css/bytex-circuit-2.css

   Markup generado por bytex_circuit_2() en includes/bytex-circuit.php.
   Versión cargada del circuito: más trazas, más junctions y flujo de
   luz recorriendo las troncales en loop continuo.

   El contenedor debe tener position:relative y (normalmente)
   overflow:hidden para que el circuito sangre desde el borde.
   El contenido por encima debe ir con z-index.
   ============================================================ */

.bytex-circuit-2 {
    position: absolute;
    width: 780px;
    max-width: 70%;
    pointer-events: none;
    overflow: visible;
    opacity: .65;
    z-index: 0;
}

/* ============================================================
   Posición por variante (anclada a una esquina, sangrando hacia afuera)
   ============================================================ */
.bytex-circuit-2--a { top: -50px;    left: -40px; }
.bytex-circuit-2--b { top: -50px;    right: -40px; opacity: .55; }
.bytex-circuit-2--c { bottom: -50px; left: -40px;  opacity: .5; width: 680px; }
.bytex-circuit-2--d { bottom: -50px; right: -40px; opacity: .5; width: 680px; }

/* ============================================================
   Flujo de luz sobre las troncales
   El dash viaja a lo largo del path en loop continuo. El valor de
   dasharray es fijo y generoso: cubre paths de distinta longitud sin
   necesidad de medirlos con JS. Si un trazo es más largo que 2400,
   el segmento reaparece antes de llegar al final.
   ============================================================ */
.bytex-circuit-2__flow {
    stroke: #9fd8ff;
    stroke-width: 2.5;
    fill: none;
    opacity: .9;
    stroke-dasharray: 70 2400;
    stroke-dashoffset: 2470;
    filter: drop-shadow(0 0 6px #2b9bff);
    animation-name: bytex-circuit-2-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bytex-circuit-2-flow {
    from { stroke-dashoffset: 2470; }
    to   { stroke-dashoffset: 0; }
}

/* ============================================================
   Glow pulsante de los junctions
   ============================================================ */
.bytex-circuit-2__pulse {
    animation-name: bytex-circuit-2-pulse;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes bytex-circuit-2-pulse {
    0%, 100% { opacity: .45; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.28); }
}

/* ============================================================
   Mobile: achicar y aligerar
   ============================================================ */
@media (max-width: 767px) {
    .bytex-circuit-2 {
        width: 520px;
        opacity: .3;
    }
    .bytex-circuit-2--c,
    .bytex-circuit-2--d {
        display: none;
    }
    /* El flujo se apaga: en pantallas chicas suma ruido, no lectura. */
    .bytex-circuit-2__flow {
        animation: none;
        opacity: 0;
    }
}

/* ============================================================
   Accesibilidad
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .bytex-circuit-2__pulse,
    .bytex-circuit-2__flow {
        animation: none !important;
    }
    .bytex-circuit-2__flow {
        opacity: 0;
    }
}