/* decypher - the cinematic demo: scenes that play on their own.
   Same tokens as the site. Authorship and ownership: @Tori, @Decypher_oficial */

.cine{
  --ok:#4ade80; --stop:#f87171; --thread:#8b8fff;
  display:flex; flex-direction:column; gap:1.1rem; width:100%;
}

/* progress: one segment per scene, filling as it plays */
.cine-barra{display:flex; gap:.35rem}
.cine-barra i{
  flex:1; height:3px; border-radius:2px; background:var(--hair); position:relative; overflow:hidden;
  display:block; cursor:pointer;
}
.cine-barra i span{
  position:absolute; inset:0 auto 0 0; width:0; background:var(--gold); display:block;
}
.cine-barra i.visto span{width:100%}
.cine-barra i.activa span{animation:llenar var(--dur,9s) linear forwards}
@keyframes llenar{from{width:0}to{width:100%}}

.cine-cabeza{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.cine-rotulo{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--acc)}
.cine-cabeza h2{font-size:clamp(1.25rem,2.8vw,1.9rem); letter-spacing:-.02em; text-wrap:balance; flex:1 1 100%}

.cine-escena{
  display:grid; grid-template-columns:1.12fr .88fr; gap:1.4rem; align-items:stretch;
  min-height:22rem;
}
@media (max-width:900px){ .cine-escena{grid-template-columns:1fr; min-height:0} }

/* the stage: one of four kinds, decided per scene */
.cine-lienzo{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
}
.cine-chrome{display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; border-bottom:1px solid var(--hair-soft); background:var(--raised)}
.cine-chrome .dots{display:flex; gap:.32rem}
.cine-chrome .dots i{width:8px; height:8px; border-radius:50%; background:var(--hair); display:block}
.cine-chrome .bar{
  flex:1; font-family:var(--mono); font-size:.68rem; color:var(--muted);
  background:var(--ink-2); border:1px solid var(--hair); border-radius:999px; padding:.2rem .65rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cine-cuerpo{padding:.95rem; display:flex; flex-direction:column; gap:.6rem; flex:1; overflow:hidden}

/* terminal */
.cine-term{
  background:#06070c; border-radius:8px; padding:.85rem; font-family:var(--mono); font-size:.735rem;
  line-height:1.5; flex:1; display:flex; flex-direction:column; gap:.2rem; overflow:hidden;
}
.cine-term .l{white-space:pre-wrap; word-break:break-word; color:#9aa3bd}
.cine-term .l.tec{color:var(--gold-soft)}
.cine-term .l.a{color:var(--gold-soft)}
.cine-term .l.b{color:var(--thread)}
.cine-term .l.c{color:#7ee0d0}
.cine-term .l.ok{color:var(--ok)}
.cine-term .l.stop{color:var(--stop)}
.cine-term .l.sys{color:#5d6480}

/* rows of things: agents, collaborators, feeds */
.cine-fila{
  display:grid; grid-template-columns:auto 1fr auto; gap:.65rem; align-items:center;
  background:var(--ink-2); border:1px solid var(--hair); border-radius:10px; padding:.6rem .8rem;
}
.cine-fila .punto{width:8px; height:8px; border-radius:50%; background:var(--ok)}
.cine-fila[data-estado="espera"] .punto{background:var(--gold)}
.cine-fila[data-estado="alto"] .punto{background:var(--stop)}
.cine-fila .quien{font-weight:640; font-size:.87rem}
.cine-fila .detalle{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.cine-fila .marca{font-family:var(--mono); font-size:.66rem; color:var(--muted); white-space:nowrap; text-align:right}

/* the visual canvas: nodes wired together */
.cine-flujo{display:flex; flex-direction:column; gap:.45rem; flex:1; justify-content:center}
.cine-nodo{
  display:flex; align-items:center; gap:.7rem; background:var(--ink-2);
  border:1px solid var(--hair); border-left:3px solid var(--gold); border-radius:10px; padding:.55rem .8rem;
}
.cine-nodo .n{font-family:var(--mono); font-size:.68rem; color:var(--acc)}
.cine-nodo .t{font-size:.85rem}
.cine-nodo .p{font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-left:auto}
.cine-hilo{width:1px; height:.5rem; background:var(--hair-soft); margin-left:1.6rem}

/* the story column */
.cine-relato{display:flex; flex-direction:column; gap:.8rem; justify-content:center}
.cine-relato p{color:var(--text-2); font-size:.97rem}
.cine-relato .gancho{
  border-left:2px solid var(--gold); background:var(--raised); padding:.8rem .95rem;
  border-radius:0 10px 10px 0; font-size:.9rem; color:var(--text-2);
}
.cine-relato .gancho strong{color:var(--text)}
.cine-datos{display:flex; flex-wrap:wrap; gap:.4rem}
.cine-dato{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em;
  border:1px solid var(--hair); border-radius:999px; padding:.22rem .6rem; color:var(--text-2);
}
.cine-dato b{color:var(--acc); font-weight:700}

.cine-mandos{display:flex; gap:.55rem; flex-wrap:wrap; align-items:center}
.cine-btn{
  font:inherit; font-size:.88rem; font-weight:650; cursor:pointer; text-decoration:none; text-align:center;
  border-radius:999px; padding:.55rem 1rem; border:1px solid var(--hair); color:var(--text); background:transparent;
}
.cine-btn.solid{background:var(--gold); color:#0b0b12; border-color:var(--gold)}
.cine-btn[disabled]{opacity:.4; cursor:not-allowed}
.cine-paso{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin-left:auto}

/* the modal that carries it on the front page */
.cine-modal{
  position:fixed; inset:0; z-index:100; display:none;
  background:color-mix(in srgb, #05060b 88%, transparent); backdrop-filter:blur(6px);
  padding:clamp(.8rem,3vw,2.5rem); overflow:auto;
}
.cine-modal[open]{display:block}
.cine-caja{
  max-width:74rem; margin:0 auto; background:var(--ink); border:1px solid var(--hair);
  border-radius:16px; padding:clamp(1rem,3vw,1.8rem); position:relative;
}
.cine-cerrar{
  position:absolute; top:.8rem; right:.9rem; font:inherit; font-size:.8rem; cursor:pointer;
  background:var(--surface); color:var(--text-2); border:1px solid var(--hair);
  border-radius:999px; padding:.35rem .8rem;
}
.cine-cerrar:hover{color:var(--text)}

@media (prefers-reduced-motion: reduce){
  .cine-barra i.activa span{animation:none; width:100%}
}