@charset "UTF-8";
/* La constel·lació orgànica a la fitxa (js/constellation-organic/organic-fitxa.js).
   La caixa —amplada de la columna, 60vh, fons gris— ja la posa styles.css a
   #constellation-container i svg#constellation-graph: aquí només hi ha el que
   és propi de l'orgànica. */
#constellation-container.organic {
  position: relative;
  /* La taca que envolta l'autor marcat i el que ha signat. L'opacitat va al
     GRUP: el filtre de fusió necessita el traç opac per retallar la silueta. */
  /* Els botons, amb el llenguatge del web: caixes negres de cantonada recta i
     text blanc en majúscules (LL Replica), sense ombra. El panell de la
     llegenda sí que en porta: és una capa que s'aixeca damunt del gràfic. */
  /* «Veure-ho tot», a l'esquerra de la pantalla completa; només quan cal. */
  /* La llegenda (0.19): plegada, un botó negre; oberta, un panell blanc. */
  /* L'espera: la forma del node central amb les boles a dins. */
  /* L'ENTRADA (organic-fitxa.js, `entrada()`), PER ONADES. El central en fos
     (al lloc de l'espera, que es fon alhora); després els connectors del
     nivell 1 creixen del pare al fill (`pathLength=1`) i apareixen els seus
     nodes; després els del nivell 2 (premis, autors, intervencions)… `--d`
     és el nivell, que el posa el motor. `backwards`: acabada l'animació,
     mana el que posa el motor. */
  /* EL QUE NEIX D'UN "+" (organic.js, classe `neix` als nous): el mateix
     tempo que l'entrada, comptat des del node que s'obre. `--dn` és el
     nivell des del primer que neix. */
  /* El node creix des del seu centre, a la punta del connector. No es pot
     escalar el `g.node` —porta la translació de la seva posició i l'escala
     el desplaçaria—: s'escalen els seus fills amb la propietat `scale`, que
     s'aplica DESPRÉS del `transform` de cadascun i al voltant de l'origen
     del node. */
}
#constellation-container.organic .taca {
  pointer-events: none;
}
#constellation-container.organic .taques-group {
  opacity: 0.45;
}
#constellation-container.organic .organic-fs,
#constellation-container.organic .organic-tot {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
#constellation-container.organic .organic-fs svg,
#constellation-container.organic .organic-tot svg {
  width: 18px;
  height: 18px;
}
#constellation-container.organic .organic-fs:hover,
#constellation-container.organic .organic-tot:hover {
  background: #333;
}
#constellation-container.organic .organic-tot {
  right: 52px;
}
#constellation-container.organic .organic-tot[hidden] {
  display: none;
}
#constellation-container.organic .organic-llegenda {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  font-family: "LL Replica Pro Regular Web", Helvetica, Arial, sans-serif;
  color: #000;
  /* Oberta, el panell va a sobre del botó. */
}
#constellation-container.organic .organic-llegenda summary {
  display: inline-block;
  padding: 11px 16px;
  background: #000;
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s;
}
#constellation-container.organic .organic-llegenda summary::-webkit-details-marker {
  display: none;
}
#constellation-container.organic .organic-llegenda summary:hover {
  background: #333;
}
#constellation-container.organic .organic-llegenda ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  gap: 7px 18px;
  margin: 0 0 6px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13);
  list-style: none;
  font-size: 11px;
  line-height: 1.3;
}
#constellation-container.organic .organic-llegenda[open] {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}
#constellation-container.organic .organic-llegenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#constellation-container.organic .organic-llegenda svg {
  flex-shrink: 0;
}
#constellation-container.organic .organic-carregant {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#constellation-container.organic .organic-carregant[hidden] {
  display: none;
}
#constellation-container.organic .organic-carregant svg {
  overflow: visible;
}
#constellation-container.organic.organic-entrada {
  --onada: 1.1s;
}
#constellation-container.organic.organic-entrada g.node.central {
  animation: org-fos 0.5s ease-out backwards;
}
#constellation-container.organic.organic-entrada .links line {
  stroke-dasharray: 1;
  animation: org-creix 0.5s cubic-bezier(0.3, 0.6, 0.3, 1) backwards;
  animation-delay: calc(0.5s + (var(--d, 1) - 1) * var(--onada));
}
#constellation-container.organic.organic-entrada g.node:not(.central) > * {
  animation: org-creix-node 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) backwards;
  animation-delay: calc(0.95s + (var(--d, 1) - 1) * var(--onada));
}
#constellation-container.organic.organic-entrada .link-xifres,
#constellation-container.organic.organic-entrada .taques-group {
  animation: org-fos 0.4s ease-out 0.95s backwards;
}
#constellation-container.organic .links line.neix {
  stroke-dasharray: 1;
  animation: org-creix 0.5s cubic-bezier(0.3, 0.6, 0.3, 1) backwards;
  animation-delay: calc(var(--dn, 0) * 1.1s);
}
#constellation-container.organic g.node.neix > * {
  animation: org-creix-node 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) backwards;
  animation-delay: calc(0.45s + var(--dn, 0) * 1.1s);
}
#constellation-container.organic g.node > * {
  transform-origin: 0 0;
}
#constellation-container.organic .organic-carregant.es-fon {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
#constellation-container.organic.is-fullscreen {
  background: #fff;
}
#constellation-container.organic.is-fullscreen svg#constellation-graph {
  height: 100vh !important;
}

/* EL CARTELL DEL HOVER (constellation-shared/utils/nodeTooltip.js). El mòdul
   el porta amb l'aspecte del Relacional; a la fitxa, el del web: caixa negra
   recta, el títol en blanc i la xifra en majúscules petites. `body #tooltip`
   guanya el `#tooltip` del mòdul sense tocar les altres vistes. */
body #tooltip {
  padding: 6px 9px;
  max-width: 240px;
  border: 0;
  border-radius: 0;
  background: #000;
  backdrop-filter: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13);
  font-family: "LL Replica Pro Regular Web", Helvetica, Arial, sans-serif;
  /* Les boles mentre s'obre la fitxa del node clicat (organic-fitxa.js). */
}
body #tooltip .tt-title {
  margin-bottom: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}
body #tooltip .tt-anant {
  position: absolute;
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
body #tooltip .tt-anant img {
  width: 14px;
  height: 14px;
}
body #tooltip .tt-meta {
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes org-fos {
  from {
    opacity: 0;
  }
}
@keyframes org-creix {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes org-creix-node {
  from {
    scale: 0;
  }
}