/* ============================================================
   unna — stili componenti (blob, media evento, onde)
   ============================================================ */

/* Blob avatar -------------------------------------------- */
.blob {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--blob-bg);
  color: var(--blob-fg);
  border-radius: 62% 38% 46% 54% / 58% 50% 50% 42%;
  overflow: hidden;
  transition: border-radius .9s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
  flex: none;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--blob-bg) 35%, transparent);
}
@keyframes blobMorph {
  0%,100% { border-radius: 62% 38% 46% 54% / 58% 50% 50% 42%; }
  33%     { border-radius: 42% 58% 62% 38% / 46% 60% 40% 54%; }
  66%     { border-radius: 54% 46% 38% 62% / 52% 42% 58% 48%; }
}
.blob--active, .group:hover .blob, .team-node:hover .blob, .team-node:focus-visible .blob {
  animation: blobMorph calc(8s / var(--motion)) var(--ease) infinite;
  transform: scale(1.04);
}
.blob__init {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  user-select: none;
}
.blob__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Media evento (placeholder duotone) --------------------- */
.evento-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--em-fg);
  isolation: isolate;
}
.evento-media__stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 22px,
    color-mix(in srgb, var(--em-ink) 22%, transparent) 22px 44px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.evento-media__onda {
  position: absolute; left: -2%; right: -2%; top: 50%; width: 104%; height: 60%;
  transform: translateY(-50%);
  transition: transform 1.2s var(--ease);
}
.evento-card:hover .evento-media__onda { transform: translateY(-50%) translateX(2%); }
.evento-media__label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--em-fg) 88%, transparent);
  color: var(--em-ink);
}

/* onda-linea: respiro verticale leggero */
.onda-linea path { animation: ondaBreath calc(7s / var(--motion)) ease-in-out infinite; transform-origin: center; }
@keyframes ondaBreath { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@media (prefers-reduced-motion: reduce) { .onda-linea path, .blob--active { animation: none !important; } }