/* ════════════════════════════════════════════════════════
   family.css — Selector discret dels projectes «Cat»
   Depèn de tokens.css. El crea js/family/family.js dins de
   la capçalera de cada pàgina.

   Només es fa servir a la portada (index.html de l'arrel). ≥ 720 px: les 4
   icones, centrades; «EXPLORA» (≥ 900 px) penja a l'esquerra i no mou res.
   A sota: a la dreta de la barra.
   ════════════════════════════════════════════════════════ */

/* Tipografia de «EXPLORA»: Josefin Sans 600 (OFL), servida des de fonts/ */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/josefin-sans-600.woff2") format("woff2");
}

.cat-family {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
}

/* Barra de la portada: només hi ha el selector, a la dreta en pantalles estretes */
.barra--portada {
  position: relative;   /* les icones es centren respecte d'aquesta barra */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
}

/* ── Text «EXPLORA» / nom del projecte (mateix espai, es creuen) ── */

.cat-label {
  display: grid;
  align-items: center;
  justify-items: end;
  margin-right: 4px;
  font: 600 0.68rem/1 "Josefin Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  /* centrat òptic: les majúscules de Josefin queden altes dins la línia */
  transform: translateY(0.2em);
}

.cat-label > span {
  grid-area: 1 / 1;
  margin-right: -0.3em;   /* compensa l'espai final del letter-spacing */
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cat-explora {
  color: var(--color-muted);
}

.cat-name {
  color: var(--color-text);
  opacity: 0;
  transform: translateX(8px);
}

.cat-family.has-active .cat-explora {
  opacity: 0;
  transform: translateX(-8px);
}

.cat-family.has-active .cat-name {
  opacity: 1;
  transform: none;
}

/* ── Icones ── */

.cat-family-item {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  opacity: 0.55;
  filter: grayscale(0.6);
  outline-offset: 3px;
  transform-origin: center;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out, filter 0.5s ease-out;
}

.cat-family-item img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Projecte actual: una mica més visible, amb un puntet a sota */
.cat-family-item.is-current {
  opacity: 0.9;
  filter: none;
  cursor: default;
}

.cat-family-item.is-current::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--color-muted);
}

/* Quan una icona és activa, les altres 3: -20 % de mida i +10 % de lluminositat */
.cat-family.has-active .cat-family-item:not(.is-active) {
  transform: scale(0.8);
  filter: grayscale(0.6) brightness(1.1);
}

.cat-family.has-active .cat-family-item.is-current:not(.is-active) {
  filter: brightness(1.1);
}

/* Icona activa: creix, color ple i «shake-and-blink» d'1 s.
   L'animació va a la <img>: el transform de l'element ja porta l'escala. */
.cat-family-item.is-active {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: scale(1.9);
}

.cat-family-item.is-active img {
  animation: cat-shake-blink 1s ease-in-out 1;
}

@keyframes cat-shake-blink {
  0% { transform: translateX(0) rotate(0); opacity: 1; }
  10% { transform: translateX(-1.5px) rotate(-8deg); opacity: 1; }
  20% { transform: translateX(1.5px) rotate(8deg); opacity: 0.2; }
  30% { transform: translateX(-1.5px) rotate(-8deg); opacity: 1; }
  40% { transform: translateX(1.5px) rotate(8deg); opacity: 0.2; }
  50% { transform: translateX(-1px) rotate(-5deg); opacity: 1; }
  60% { transform: translateX(1px) rotate(5deg); opacity: 0.3; }
  70% { transform: translateX(-0.5px) rotate(-2deg); opacity: 1; }
  80% { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}

/* ── Pantalles amples: icones centrades a la capçalera ── */

@media (min-width: 720px) {
  .cat-family {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cat-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 16px);
    margin: 0;
    transform: translateY(calc(-50% + 0.2em));
  }
}

/* ── Pantalles tàctils: sense hover, icones una mica més grans, sense nom ── */

@media (hover: none) {
  .cat-family-item {
    width: 20px;
    height: 20px;
    opacity: 0.8;
    filter: none;
  }

  .cat-name {
    display: none;
  }
}

/* Sota 900 px «EXPLORA» no hi cap: només les icones */
@media (max-width: 899px) {
  .cat-label {
    display: none;
  }
}

@media (max-width: 500px) {
  .cat-family {
    gap: 9.6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cat-family-item,
  .cat-label > span {
    transition: none;
  }

  .cat-family-item.is-active img {
    animation: none;
  }
}