/* ============================================================
   MOTOR DE ANIMACIÓN DE LÍNEAS — PCinfo
   Lenguaje visual compartido: siluetas que se dibujan trazo a trazo
   y circuitos por los que fluyen los datos. Todo vectorial.

   Uso:
     <div class="la la-<escena>">  ...svg...  </div>
   Cada trazo: <path data-draw pathLength="1" style="--d:120ms" .../>
   El JS (js/line-anim.js) añade .la-on cuando la escena entra en pantalla.
   Las escenas en bucle llevan además la clase .la-loop.
   ============================================================ */

.la {
    --la-line:   rgba(255,255,255,0.5);
    --la-dim:    rgba(255,255,255,0.28);
    --la-accent: var(--primary-color, #ff6b35);
    --la-text:   rgba(255,255,255,0.72);
    position: relative;
}
html.light-theme .la,
body.light-theme .la {
    --la-line: rgba(0,0,0,0.45);
    --la-dim:  rgba(0,0,0,0.22);
    --la-text: rgba(0,0,0,0.7);
}

.la svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Trazado ────────────────────────────────────────────── */
.la [data-draw] {
    fill: none;
    stroke: var(--la-line);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.la.la-on [data-draw] {
    animation: laDraw var(--dur, 0.5s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--d, 0ms);
}
@keyframes laDraw { to { stroke-dashoffset: 0; } }

/* Trazos secundarios, más tenues */
.la [data-draw][data-soft] { stroke: var(--la-dim); stroke-width: 1.2; }

/* ── Flujo de datos: guiones que recorren un trazado ────── */
.la .la-flow {
    fill: none;
    stroke: var(--la-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 5 14;
    opacity: 0;
}
.la.la-on .la-flow {
    animation: laFlowIn 0.3s ease var(--fd, 900ms) forwards,
               laFlow var(--fs, 0.9s) linear var(--fd, 900ms) infinite;
}
@keyframes laFlowIn { to { opacity: 1; } }
@keyframes laFlow   { to { stroke-dashoffset: -19; } }

/* ── Texto dentro de la escena ──────────────────────────── */
.la text {
    fill: var(--la-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.la text.la-t-small { font-size: 10px; fill: var(--la-dim); font-weight: 700; letter-spacing: 1px; }
.la text.la-t-accent { fill: var(--la-accent); }

/* ── Resaltado por etapas (escenas en bucle) ────────────── */
.la .la-hl {
    fill: none;
    stroke: var(--la-accent);
    stroke-width: 2;
    opacity: 0;
}
.la.la-on .la-hl {
    animation: laHl var(--cycle, 4s) linear infinite;
    animation-delay: calc(var(--i, 0) * (var(--cycle, 4s) / var(--n, 4)) + var(--lead, 1.1s));
}
@keyframes laHl {
    0%             { opacity: 0; }
    3%             { opacity: 1; }
    22%            { opacity: 1; }
    28%, 100%      { opacity: 0; }
}

/* Etiqueta que se enciende con su etapa */
.la.la-on .la-hl-t {
    animation: laHlT var(--cycle, 4s) linear infinite;
    animation-delay: calc(var(--i, 0) * (var(--cycle, 4s) / var(--n, 4)) + var(--lead, 1.1s));
}
@keyframes laHlT {
    0%             { fill: var(--la-text); }
    3%, 22%        { fill: var(--la-accent); }
    28%, 100%      { fill: var(--la-text); }
}

/* ── Pie explicativo ────────────────────────────────────── */
.la-caption {
    margin: 0.7rem 0 0;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--la-dim);
    text-align: center;
}

/* Sin movimiento: se muestra el dibujo terminado y quieto. */
@media (prefers-reduced-motion: reduce) {
    .la [data-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
    .la .la-flow    { opacity: 1 !important; animation: none !important; }
    .la .la-hl      { opacity: 0 !important; animation: none !important; }
    .la .la-hl-t    { animation: none !important; }
}


/* ════════════════════════════════════════════════════════
   ESCENA: ciclo de la CPU (guía "¿Cómo funciona un procesador?")
   ════════════════════════════════════════════════════════ */
.la-cpu-cycle {
    max-width: 720px;
    margin: 1.6rem auto;
    padding: 1.4rem 1.2rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
}
html.light-theme .la-cpu-cycle,
body.light-theme .la-cpu-cycle {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.09);
}


/* Marco común de las escenas de guía */
.la-scene {
    max-width: 720px;
    margin: 1.6rem auto;
    padding: 1.4rem 1.2rem 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
}
html.light-theme .la-scene,
body.light-theme .la-scene {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.09);
}

/* ── Nomenclatura: el nombre despiezado ── */
.la .la-big { font-size: 26px; font-weight: 800; letter-spacing: 0.5px; }
.la .la-t-dim { fill: var(--la-dim); }

.la-nomen-pick {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: -0.4rem 0 0.6rem;
    font-size: 0.72rem;
    color: var(--la-dim);
}
.la-nomen-sel {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 3px;
    color: inherit;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.la-nomen-sel:focus { border-color: var(--la-accent); }
.la-nomen-sel option { background: #1a1a1a; color: #e8e8e8; }
html.light-theme .la-nomen-sel,
body.light-theme .la-nomen-sel {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.16);
}
html.light-theme .la-nomen-sel option,
body.light-theme .la-nomen-sel option { background: #fff; color: #111; }

/* ── TDP: calor que sube y medidor que se llena ── */
.la-tdp .la-heat {
    fill: none;
    stroke: var(--la-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 66;
    opacity: 0;
}
.la-tdp.la-on .la-heat {
    animation: laHeatIn 0.3s ease forwards, laHeat 1.6s linear infinite;
    animation-delay: calc(700ms + var(--hd, 0ms)), calc(700ms + var(--hd, 0ms));
}
@keyframes laHeatIn { to { opacity: 0.9; } }
@keyframes laHeat   { to { stroke-dashoffset: -72; } }

.la-tdp .la-fill { fill: var(--la-accent); opacity: 0.75; width: 0; }
.la-tdp.la-on .la-fill { animation: laFill 5s ease-in-out 900ms infinite; }
@keyframes laFill {
    0%        { width: 0; }
    35%, 62%  { width: 150px; }
    78%, 88%  { width: 205px; fill: #f44336; }
    100%      { width: 0; }
}

/* ════════════════════════════════════════════════════════
   ESCENA: montaje en bucle (estado vacío del configurador)
   ════════════════════════════════════════════════════════ */
.la-build { max-width: 320px; margin: 0 auto 0.9rem; }

.la-build .la-part-path {
    fill: none;
    stroke: var(--la-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 12;
    opacity: 0;
}
.la-build.la-on .la-part-path {
    animation: laPartIn 0.35s ease forwards, laPartFlow 0.7s linear infinite;
    animation-delay: calc(1s + var(--i, 0) * 0.9s), calc(1s + var(--i, 0) * 0.9s);
}
@keyframes laPartIn   { to { opacity: 0.9; } }
@keyframes laPartFlow { to { stroke-dashoffset: -16; } }

/* Cada pieza se enciende en su turno del ciclo */
.la-build.la-on .la-part {
    animation: laPartTurn 3.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.9s);
}
@keyframes laPartTurn {
    0%, 8%    { opacity: 0.3; }
    16%, 32%  { opacity: 1; }
    46%, 100% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .la-build .la-part-path { opacity: 0.9 !important; animation: none !important; }
    .la-build .la-part      { opacity: 1 !important;   animation: none !important; }
}