/* Peça 0 — Els tres cicles que es noten a la pell */

:root{--ample:760px}

h2{font-size:30px; margin:0 0 6px}
.acte{margin-top:72px; padding-top:40px; border-top:1px solid var(--vora)}
.num{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--apagat); margin:0 0 10px}

/* ---------- els dos panells ---------- */
.panells{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 16px}
@media (max-width:700px){ .panells{grid-template-columns:1fr} }
.panell{position:relative; background:var(--panell); border:1px solid var(--vora); border-radius:14px; overflow:hidden}
.panell canvas{width:100%; height:260px; display:block}
.panell canvas.alt{height:320px}
.capsa{
  position:absolute; top:12px; left:14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--apagat);
  pointer-events:none; z-index:2;
}

/* el vel del panell de fora: es destapa una sola vegada i no torna */
.vel{
  position:absolute; inset:0; background:#100D20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; z-index:3;
  transition:opacity .5s ease, visibility .5s;
}
.vel.fora{opacity:0; visibility:hidden}
.vel p{font-family:var(--serif); font-size:18px; color:var(--apagat); margin:0; max-width:30ch}

/* ---------- comandament ---------- */
.comanda{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.comanda input[type=range]{accent-color:var(--sol); flex:1; min-width:150px}
.valor{font-family:var(--mono); font-size:15px; min-width:112px; text-align:right; font-variant-numeric:tabular-nums}

.sensacio{font-family:var(--serif); font-size:20px; line-height:1.45; margin:14px 0 0; min-height:62px; max-width:56ch}
.sensacio b{font-weight:600; color:var(--sol)}
.sensacio i{font-style:normal; color:var(--lluna)}

/* ---------- marees ---------- */
.marea{display:flex; align-items:center; gap:12px; margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--apagat)}
.marea .pista{flex:1; height:10px; background:var(--fosc); border:1px solid var(--vora); border-radius:999px; overflow:hidden}
/* display:block no és decoració: .om és un <span> dins d'un bloc, i un element
   en línia ignora width i height. Sense això el JS li anava posant l'amplada
   i la barra no es dibuixava mai. */
.marea .om{display:block; height:100%; background:var(--lluna); transition:width .25s linear}
.marea .lectura{min-width:104px}

/* els blocs de context canvien de color segons de què parlen */
.cossos{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:22px}
.cossos.mar .t{color:var(--lluna)}
.cossos.est .t{color:var(--verd)}

.pont{margin-top:72px}

@media (prefers-reduced-motion:reduce){
  .vel{transition:none}
  .marea .om{transition:none}
}