/* ============================================================================
 *  animacions.css — Estils de les animacions conceptuals (GSAP), Digitalització
 * ==========================================================================*/

.anim-controls{display:flex;justify-content:center;margin-top:.8rem}
.anim-replay{
  padding:.5rem 1rem;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);
  font-size:.85rem;font-weight:600;color:var(--text-dim);
}
.anim-replay:hover{color:var(--accent);border-color:var(--accent)}

/* U01: economia lineal (fletxa) vs economia circular (bucle) */
.elec-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.elec-row{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;align-items:flex-start}
.elec-col{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.elec-col-title{font-size:.85rem;font-weight:700;color:var(--text-dim);margin-bottom:.2rem}
.elec-chip{
  min-width:120px;padding:.5rem .8rem;border-radius:8px;background:var(--bg-card);
  border:2px solid var(--border);font-family:var(--mono);font-size:.8rem;text-align:center;
  opacity:0;transform:translateY(8px);
}
.elec-chip.active{border-color:var(--accent);color:var(--accent)}
.elec-arrow{font-size:1.1rem;color:var(--text-dim);text-align:center}
.elec-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.9rem;min-height:1.4em}

/* U02: sistema ciberfísic — bucle sensor→dades→decisió→actuador */
.cps-stage{display:flex;justify-content:center;padding:1rem 0}
.cps-ring{position:relative;width:260px;height:260px}
.cps-node{
  position:absolute;width:92px;padding:.5rem .6rem;border-radius:10px;background:var(--bg-card);
  border:2px solid var(--border);font-family:var(--mono);font-size:.75rem;text-align:center;
  opacity:.5;transition:border-color .25s,opacity .25s,color .25s;color:var(--text-dim);
}
.cps-node.active{border-color:var(--accent);color:var(--accent);opacity:1}
.cps-n1{top:0;left:50%;transform:translateX(-50%)}
.cps-n2{top:50%;right:0;transform:translateY(-50%)}
.cps-n3{bottom:0;left:50%;transform:translateX(-50%)}
.cps-n4{top:50%;left:0;transform:translateY(-50%)}
.cps-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.5rem;min-height:1.4em}

/* U03: capes cloud/fog/mist/edge */
.layers-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.layers-col{display:flex;flex-direction:column;gap:.6rem;align-items:stretch;max-width:420px;margin:0 auto}
.layers-item{
  padding:.55rem .9rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.85rem;opacity:0;transform:translateX(-14px);
  display:flex;justify-content:space-between;gap:.6rem;
}
.layers-item.active{border-color:var(--accent);color:var(--accent)}
.layers-item .tag{color:var(--text-dim);font-size:.75rem}
.layers-pulse{
  width:12px;height:12px;border-radius:50%;background:var(--accent);position:absolute;opacity:0;
}
.layers-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U04: graella de THD */
.thdgrid-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.thdgrid-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(84px,1fr));gap:.6rem}
.thdgrid-item{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.6rem .3rem;
  border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  opacity:0;transform:scale(.8);
}
.thdgrid-item.active{border-color:var(--accent)}
.thdgrid-ico{font-size:1.4rem}
.thdgrid-name{font-size:.68rem;text-align:center;color:var(--text-dim);line-height:1.2}
.thdgrid-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U05: diagrama de blocs clàssic → digitalitzat */
.plan-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.plan-row{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;align-items:center;min-height:70px}
.plan-block{
  min-width:88px;padding:.55rem .7rem;border-radius:8px;background:var(--bg-card);
  border:2px solid var(--border);font-family:var(--mono);font-size:.78rem;text-align:center;
  opacity:.55;
}
.plan-block.digital{border-color:var(--accent);color:var(--accent);opacity:1}
.plan-arrow{color:var(--text-dim)}
.plan-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.9rem;min-height:1.4em}