/* kalosNetwork — restyling "Apple": Inter, liquid glass, motion.
   File separato: per tornare indietro basta togliere il link in index.html */
:root {
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --spring: cubic-bezier(.16, 1, .3, 1);
  --glass: rgba(255, 255, 255, .52);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(20, 24, 29, .07);
  --glass-lift: 0 18px 50px -20px rgba(20, 24, 29, .28);
}

body {
  font-family: var(--sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -.011em;
  background: #fbfbfd;
}

/* luce ambientale morbida dietro al vetro */
body::after {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, rgba(46, 143, 163, .17), transparent 62%),
    radial-gradient(34vmax 34vmax at 82% 28%, rgba(164, 52, 139, .12), transparent 62%),
    radial-gradient(40vmax 40vmax at 62% 88%, rgba(242, 163, 58, .13), transparent 62%),
    radial-gradient(30vmax 30vmax at 10% 85%, rgba(45, 168, 107, .10), transparent 62%);
  animation: kn-drift 28s ease-in-out infinite alternate;
}
@keyframes kn-drift { to { transform: translate3d(-5vmax, 4vmax, 0) rotate(10deg) scale(1.08); } }

/* ---------- tipografia ---------- */
h1, h2, h3, h4, .big-title, .hero-title, .statement-text, .quote-text, .lead {
  font-family: var(--sans);
  letter-spacing: -.035em;
}
.big-title, .hero-title { font-weight: 600; line-height: 1.02; }
.big-title em, .hero-title em, h2 em { font-style: normal; font-weight: 600; }
.hero-title { letter-spacing: -.045em; }
.hero-title em { font-size: 1em; letter-spacing: -.045em; }
.hero-title .split { white-space: nowrap; }
.statement-text, .quote-text { font-weight: 500; letter-spacing: -.03em; }
.eyebrow { letter-spacing: .14em; font-weight: 500; }
.partner-logo.is-text, .person-photo span { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; }
.partner-logo.is-text small { letter-spacing: .02em; font-weight: 500; }

/* ---------- liquid glass ---------- */
.site-header {
  inset: 12px 12px auto 12px;
  padding: 12px clamp(16px, 2.4vw, 28px);
  border-radius: 22px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  box-shadow: var(--glass-edge), 0 10px 40px -18px rgba(20, 24, 29, .25);
  transition: inset .6s var(--spring), border-radius .6s var(--spring), background .4s;
}
html.kn-refract .site-header {
  -webkit-backdrop-filter: blur(18px) saturate(190%) url(#kn-liquid);
  backdrop-filter: blur(18px) saturate(190%) url(#kn-liquid);
}
.site-header.kn-scrolled { inset: 8px max(12px, calc(50% - 640px)) auto max(12px, calc(50% - 640px)); background: var(--glass-strong); }

.partners {
  background: transparent;
  border: 0;
  gap: 14px;
  overflow: visible;
}
.partner-card, .project, .stats {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--glass-edge);
  border: 0;
  border-radius: 22px;
}
.partner-card, .project {
  transition: translate .7s var(--spring), scale .7s var(--spring), box-shadow .7s var(--spring), background .4s;
}
/* translate/scale separati dal transform usato da GSAP per le comparse */
.partner-card:hover, .project:hover {
  background: var(--glass-strong);
  translate: 0 -6px !important;
  scale: 1.015 !important;
  box-shadow: var(--glass-edge), var(--glass-lift);
}
.partner-logo { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(20, 24, 29, .05); }
.stats { padding: 32px; }

.btn {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--glass-edge);
  border-color: transparent;
  letter-spacing: .08em;
  transition: scale .5s var(--spring), background .35s, color .35s, box-shadow .5s var(--spring);
}
.btn:hover { scale: 1.04; box-shadow: var(--glass-edge), var(--glass-lift); }
.btn:active { scale: .97; }

/* ---------- persone ---------- */
.person-photo {
  border: 0;
  will-change: translate, scale;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent), 0 16px 40px -18px rgba(20, 24, 29, .35);
  transition: translate .7s var(--spring), scale .7s var(--spring), box-shadow .7s var(--spring);
}
.person-photo img { object-position: 50% 18%; }
.person:hover .person-photo { translate: 0 -6px; scale: 1.04; box-shadow: 0 0 0 1px #fff, 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent), 0 24px 50px -18px rgba(20, 24, 29, .4); }
@media (min-width: 1101px) { .people-grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 1100px) { .people-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- comparsa in stile Apple ---------- */
.kn-io {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.98);
  filter: blur(10px);
  transition: opacity 1.1s var(--spring), transform 1.1s var(--spring), filter 1.1s var(--spring);
  transition-delay: var(--kn-d, 0s);
}
.kn-io.kn-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .kn-io { opacity: 1; transform: none; filter: none; transition: none; }
}