/* Home — sezioni proprie della pagina. */

/* Hero: tre righe che salgono in sequenza al caricamento */
.hero { padding: var(--spazio-7) 5% 74px; text-align: center; }
.hero h1 {
  margin: 0;
  font-size: var(--titolo-xl);
  font-weight: var(--peso-bold);
  line-height: 1.08;
  letter-spacing: var(--tracking-titolo);
  animation: hero-in var(--durata-ingresso) var(--easing) both;
}
.hero > p {
  margin: 34px 0 0;
  color: var(--colore-testo-secondario);
  font-size: var(--testo-l);
  font-weight: var(--peso-light);
  line-height: var(--interlinea-testo);
  animation: hero-in var(--durata-ingresso) 0.18s var(--easing) both;
}
.hero-actions {
  margin-top: 46px;
  display: flex;
  justify-content: center;
  gap: var(--spazio-4);
  animation: hero-in var(--durata-ingresso) 0.34s var(--easing) both;
}
@keyframes hero-in { from { opacity: 0; transform: translateY(30px); } }

/* Showreel: lo stage è sticky; scorrendo si apre fino a tutta larghezza
 * (--progress 0→1, da js/site.js) mentre due immagini si alternano in dissolvenza. */
.showcase { --progress: 0; position: relative; height: 155vh; }
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  clip-path: inset(0 calc((1 - var(--progress)) * 5%) round calc((1 - var(--progress)) * 54px));
}
.showcase-slides { position: absolute; inset: 0; transform: scale(calc(1.1 - var(--progress) * 0.1)); }
.showcase-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-slide-next { animation: showcase-slide 12s ease-in-out infinite; }
@keyframes showcase-slide {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--colore-sfondo);
  box-shadow: 0 0 11px rgb(0 0 0 / 0.04);
  cursor: pointer;
  transition: transform var(--durata-media) var(--easing);
}
.play:hover { transform: scale(1.08); }
.play:focus-visible { border-radius: 50%; }
.play img { width: 34px; height: 34px; }

/* Approccio: tre colonne, testo + foto + (foto / principio) */
.approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spazio-5); min-height: 760px; }
.approach-grid > *, .approach-stack > * { overflow: hidden; border-radius: var(--raggio-l); }
.approach-copy { padding: var(--spazio-8); display: flex; flex-direction: column; justify-content: space-between; background: var(--colore-accento-sage); }
.approach-copy h2 {
  margin: 0 0 26px;
  font-size: var(--titolo-s);
  font-weight: var(--peso-semibold);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.approach-copy p { margin: 0 0 34px; color: var(--colore-testo-corpo); font-size: var(--testo-base); line-height: var(--interlinea-testo); }
.approach-image img, .team-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--easing); }
.approach-image:hover img, .team-image:hover img { transform: scale(1.045); }
.approach-stack { display: grid; grid-template-rows: 39fr 61fr; gap: var(--spazio-5); }
.principle { padding: var(--spazio-8); display: flex; flex-direction: column; justify-content: space-between; background: var(--colore-accento-lilac); }
.principle p { margin: 0; font-size: var(--testo-2xl); font-weight: var(--peso-medium); line-height: 1.15; letter-spacing: -0.02em; }

/* Lavori in evidenza: due colonne, la destra sfalsata */
.work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--spazio-7); }
.work-list > :nth-child(even) { padding-top: 120px; }

/* Discipline: tre card colorate */
.disciplines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spazio-5); }
.discipline {
  padding: var(--spazio-6);
  display: flex;
  flex-direction: column;
  border-radius: var(--raggio-l);
  transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing);
}
.discipline-sun { background: var(--colore-accento-sun); }
.discipline-lilac { background: var(--colore-accento-lilac); }
.discipline-sky { background: var(--colore-accento-sky); }
.discipline-image { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raggio-s); }
.discipline-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--easing); }
.discipline h3 { margin: var(--spazio-7) 0 var(--spazio-4); font-size: 27px; font-weight: var(--peso-bold); }
.discipline p { margin: 0 0 35px; font-size: var(--testo-bottone); font-weight: var(--peso-light); line-height: var(--interlinea-ampia); }
.discipline > a { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: var(--peso-bold); }
.discipline.is-visible:hover { transform: translateY(-8px); box-shadow: var(--ombra-card-hover); }
.discipline:hover .discipline-image img { transform: scale(1.07); }
.discipline:hover .arrow { transform: translate(6px, -6px); }

/* Clienti: nastro di loghi che scorre all'infinito (due serie identiche) */
.clients { padding: 90px 0 var(--spazio-11); overflow: hidden; }
.client-track { display: flex; width: max-content; animation: client-drift 36s linear infinite; }
.client-track:hover { animation-play-state: paused; }
.client-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.client-set img { width: 190px; height: 110px; object-fit: contain; }
@keyframes client-drift { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .hero { padding-top: 38px; }
  .hero h1 { font-size: clamp(42px, 11vw, 68px); }
  .hero > p { font-size: var(--testo-base); }
  .showcase { height: 125vh; }
  .showcase-stage { top: 12vh; height: 76vh; }
  .approach-grid { grid-template-columns: 1fr 1fr; min-height: auto; }
  .approach-copy { grid-column: 1 / -1; min-height: 550px; }
  .approach-image, .approach-stack { min-height: 620px; }
  .disciplines { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hero { padding-inline: var(--margine-pagina-mobile); }
  .hero h1 br, .desktop-break { display: none; }
  .hero-actions { flex-direction: column; align-items: center; }
  .play { width: 74px; height: 74px; }
  .approach-grid { display: flex; flex-direction: column; }
  .approach-copy { min-height: 520px; padding: var(--spazio-7); }
  .approach-image { min-height: 540px; }
  .principle { padding: var(--spazio-7); }
  .principle p { font-size: 25px; }
  .work-list { grid-template-columns: 1fr; gap: 52px; }
  .work-list > :nth-child(even) { padding-top: 0; }
  .clients { padding: 70px 0; }
  .client-set { gap: 35px; padding-right: 35px; }
  .client-set img { width: 120px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-stage { clip-path: none; }
}