/* ── Chi Siamo / Team ───────────────────────────────────────────── */

.team-section {
  position: relative;
  padding: 120px 0 140px;
  overflow: hidden;
  isolation: isolate;
}

.team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 85% 10%, rgba(101, 202, 242, 0.08), transparent 60%),
    radial-gradient(900px 400px at 10% 90%, rgba(101, 202, 242, 0.06), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Floating abstract asterisks in accent */
.team-aster {
  position: absolute;
  color: var(--eon-azzurro);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: drop-shadow(0 6px 18px rgba(101, 202, 242, 0.25));
  will-change: transform;
}

.team-aster svg {
  width: 100%;
  height: 100%;
  display: block;
}

.team-aster--a { top: 8%;  left: 4%;  width: 42px; height: 42px; animation: teamFloat 7s ease-in-out infinite; }
.team-aster--b { top: 22%; right: 6%; width: 28px; height: 28px; animation: teamFloat 6s ease-in-out infinite 1s; opacity: 0.7; }
.team-aster--c { bottom: 14%; left: 10%; width: 56px; height: 56px; animation: teamSpin 22s linear infinite; opacity: 0.4; }
.team-aster--d { bottom: 26%; right: 8%; width: 34px; height: 34px; animation: teamFloat 8s ease-in-out infinite 2s; }
.team-aster--e { top: 52%; left: 48%; width: 22px; height: 22px; animation: teamPulse 3.8s ease-in-out infinite; opacity: 0.5; }

@keyframes teamFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(12deg); }
}

@keyframes teamSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes teamPulse {
  0%, 100% { transform: scale(1);   opacity: 0.35; }
  50%      { transform: scale(1.4); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .team-aster { animation: none !important; }
}

/* Intro (asterisk + editorial claim, coerente con about-section) */
.team-intro {
  position: relative;
  z-index: 1;
  max-width: 84ch;
  margin-bottom: 80px;
}

.team-intro .section-asterisk {
  color: var(--eon-azzurro);
}

.team-intro h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--eon-nero);
  letter-spacing: -0.005em;
}

.team-intro h2 em {
  font-style: italic;
  color: var(--eon-azzurro);
  font-weight: 500;
}

.team-intro h2 em.claim {
  background: var(--eon-azzurro);
  color: var(--eon-bianco);
  padding: 0.05em 0.28em;
  border-radius: 2px;
  font-style: italic;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Grid */
.team-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr; gap: 56px; max-width: 360px; }
  .team-section { padding: 80px 0 100px; }
  .team-intro { margin-bottom: 56px; }
}

/* Card */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.team-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 340px;
  width: 100%;
  border-radius: 32px;
  background: var(--eon-grigio-chiaro, #f4f4f4);
  margin: 0;
  transform: translateZ(0);
}

.team-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(101, 202, 242, 0) 40%, rgba(101, 202, 242, 0.28) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.02);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s ease;
}

.team-card:hover .team-card__photo img,
.team-card:focus-within .team-card__photo img {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1);
}

.team-card:hover .team-card__photo::after,
.team-card:focus-within .team-card__photo::after {
  opacity: 1;
}

/* Badge asterisk in corner of photo */
.team-card__aster {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  color: var(--eon-azzurro);
  background: var(--eon-bianco);
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  transform: rotate(-12deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.team-card__aster svg { width: 60%; height: 60%; display: block; }

.team-card:hover .team-card__aster,
.team-card:focus-within .team-card__aster {
  transform: rotate(24deg) scale(1.08);
}

/* Staggered vertical offset to break the grid */
.team-card:nth-child(2) { transform: translateY(64px); }

@media (max-width: 768px) {
  .team-card:nth-child(2) { transform: none; }
}

/* Body */
.team-card__role {
  display: inline-block;
  color: var(--eon-grigio, #6a6a6a);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.team-card__name {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--eon-nero);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}

.team-card__name em {
  font-style: italic;
  color: var(--eon-azzurro);
  font-weight: 600;
}

.team-card__name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--eon-azzurro);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.team-card:hover .team-card__name::after,
.team-card:focus-within .team-card__name::after {
  width: 64%;
}

.team-card__bio {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  color: var(--eon-nero);
  max-width: 44ch;
  margin: 0;
  opacity: 0.85;
}

.team-card__bio em {
  font-style: italic;
  color: var(--eon-azzurro);
}

/* ── Dark mode ─────────────────────────────────────────────────── */
.dark .team-section::before {
  background:
    radial-gradient(1200px 500px at 85% 10%, rgba(101, 202, 242, 0.14), transparent 60%),
    radial-gradient(900px 400px at 10% 90%, rgba(101, 202, 242, 0.09), transparent 60%);
}

.dark .team-intro h2,
.dark .team-card__name,
.dark .team-card__bio {
  color: var(--eon-bianco);
}

.dark .team-card__role { color: #9a9a9a; }

.dark .team-card__aster {
  background: #191919;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.dark .team-card__photo {
  background: #1f1f1f;
}

.dark .team-aster { opacity: 0.7; }