/* ==========================================================================
   SOUND ALCHEMISTS — Home: hero a due metà e pannelli "Selected work"

   Il markup sta in index.html (hero) e viene generato da home.js (pannelli).
   Nessun colore scritto a mano, salvo il gradiente nero translucido dei
   pannelli, che nel prototipo non è una variabile. Il tema di ogni metà e di
   ogni pannello lo decide la classe .theme-espresso / .theme-petrol.
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  overflow: hidden;   /* il velo sfocato sotto esce di qualche pixel dai bordi */
}

/* Fotografia di sfondo dietro le due metà: sfumata e appena percepibile.
   Le metà le stanno sopra con il loro colore quasi pieno (vedi sotto), quindi
   la foto traspare solo di un soffio e prende la tinta espresso / petrolio.
   Sta ferma mentre le metà si allargano. */
.hero::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: 0;
  background: url("../img/bg-home.jpg") center / cover no-repeat;
  filter: blur(3px);
  pointer-events: none;
}

/* A riposo un unico velo continuo copre la foto e passa da espresso a petrolio
   senza linea al centro. Quando il puntatore entra in una metà, il velo si
   dissolve in modo lineare e ogni metà prende il suo colore pieno (e velato). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--espresso) 82%, transparent) 0%,
    color-mix(in srgb, var(--espresso) 82%, transparent) 32%,
    color-mix(in srgb, var(--petrol) 82%, transparent) 68%,
    color-mix(in srgb, var(--petrol) 82%, transparent) 100%);
  opacity: 1;
  transition: opacity .7s linear;
  pointer-events: none;
}
@media (max-width: 639px) {
  .hero::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--espresso) 82%, transparent) 0%,
      color-mix(in srgb, var(--espresso) 82%, transparent) 38%,
      color-mix(in srgb, var(--petrol) 82%, transparent) 62%,
      color-mix(in srgb, var(--petrol) 82%, transparent) 100%);
  }
}

/* Barra in alto: marchio a sinistra, lingua a destra, sopra le metà. Lascia
   passare i clic alle metà e li prende solo dove serve (il selettore lingua). */
.hero__bar {
  position: absolute;
  top: 28px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__brand { font-weight: 600; white-space: nowrap; }
.hero__bar .lang-switch { pointer-events: auto; }
/* Area di tocco più alta senza spostare nulla: i due pulsanti sono alti una riga */
.hero__bar .lang-switch button { padding: 8px 0; margin: -8px 0; }

/* Barra delle pagine (stile in layout.css): a destra accanto alla lingua, come
   nelle pagine interne. Sta sopra le metà, quindi riprende i clic. */
.hero__bar { gap: 28px; align-items: baseline; }
.hero__brand { margin-right: auto; }
.hero__bar .site-header__pages { pointer-events: auto; }
@media (max-width: 760px) {
  /* telefono: marchio e lingua in alto, le tre pagine sotto (restano nei 120px
     di respiro sopra il titolo della prima metà) */
  .hero__bar { flex-wrap: wrap; gap: 10px 18px; }
  .hero__bar .site-header__pages { order: 3; flex: 1 0 100%; flex-wrap: nowrap; gap: 22px; }
}
@media (max-width: 480px) {
  .hero__bar { font-size: 11px; letter-spacing: .1em; }
}

/* Le due metà. flex-grow 1 → 2.2 allarga quella sotto il puntatore; sotto
   ~640 px (2 × 320) vanno a capo e si impilano da sole. */
.hero__half {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  flex: 1 1 320px;
  min-width: 0;
  min-height: 50vh;
  padding: 120px var(--gutter);
  /* A riposo la metà è trasparente: il colore lo dà il velo continuo .hero::after
     (82%, così la foto del .hero si intravede). Quando il puntatore entra in una
     metà, questa prende il proprio colore all'82% (vedi più sotto). Più alta la
     percentuale, meno si vede la foto. */
  z-index: 1;
  background-color: transparent;
  /* Il link non deve virare a sand-dark al passaggio (lo farebbe a:hover di base.css) */
  color: var(--sand);
  transition: flex-grow .7s var(--ease-half), background-color .7s linear;
}
.hero__half:hover { color: var(--sand); }

/* Sfumatura al centro: ogni metà sfuma verso il colore medio fra espresso e
   petrolio lungo il bordo interno, così le due metà convergono senza un taglio
   netto. La sfumatura segue il bordo anche quando una metà si allarga. */

/* Mix & Master allineata a destra, speculare a Sound Design */
.hero__half[data-half="mm"] { align-items: flex-end; text-align: right; }
.hero__half[data-half="mm"] .hero__text { align-items: flex-end; text-align: right; margin-left: auto; }
@media (max-width: 639px) {
  .hero__half[data-half="mm"],
  .hero__half[data-half="mm"] .hero__text { align-items: flex-start; text-align: left; margin-left: 0; }
}

/* Sfumatura al centro: un velo che porta ogni metà verso il colore medio fra
   espresso e petrolio lungo il bordo interno. Quando il puntatore entra in una
   metà sparisce in modo lineare, e il bordo fra i due colori torna netto.
   Il colore delle metà resta velato (82%): la foto dello studio si intravede. */
.hero__half > * { position: relative; }
.hero__half > .hero__video,
.hero__half > .hero__shade { position: absolute; }
@media (hover: hover) and (pointer: fine) {
  .hero:has(.hero__half:hover)::after { opacity: 0; }
  .hero:has(.hero__half:hover) .hero__half { background-color: color-mix(in srgb, var(--bg) 82%, transparent); }
}
.hero:has(.hero__half:focus-visible)::after { opacity: 0; }
.hero:has(.hero__half:focus-visible) .hero__half { background-color: color-mix(in srgb, var(--bg) 82%, transparent); }

/* Titolo che si ingrandisce nella metà attiva. Solo transform: la descrizione
   sotto non si sposta; il numero sale quanto serve per non essere coperto. */
.hero__title {
  transform-origin: left bottom;
  transition: transform .7s var(--ease-half), letter-spacing .7s var(--ease-half);
  will-change: transform;
}
.hero__half[data-half="mm"] .hero__title { transform-origin: right bottom; }
.hero__num { transition: transform .7s var(--ease-half); }
@media (hover: hover) and (pointer: fine) {
  .hero__half:hover .hero__title { transform: scale(1.32); letter-spacing: -.02em; }
  .hero__half:hover .hero__num { transform: translateY(-.9em); }
}
.hero__half:focus-visible .hero__title { transform: scale(1.32); letter-spacing: -.02em; }
.hero__half:focus-visible .hero__num { transform: translateY(-.9em); }
@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero__half, .hero__title, .hero__num { transition: none; }
}

/* Frase al centro della home, sopra la linea di unione delle due metà */
.hero__claim {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  max-width: calc(100% - 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-size: clamp(16px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--sand);
  pointer-events: none;
}
.hero__claim::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--sand-dark);
}
@media (max-width: 639px) {
  .hero__claim { display: none; }
}

/* L'espansione al passaggio solo dove esiste un puntatore vero: su touch :hover
   resta "appiccicato" dopo il tocco e le metà non devono restare squilibrate. */
@media (hover: hover) and (pointer: fine) {
  .hero__half:hover { flex-grow: 2.2; }
}
.hero__half:focus-visible { flex-grow: 2.2; }

/* Il contorno del focus, qui, finirebbe sotto il video: lo disegna un
   pseudo-elemento in cima, stesso tratto del contorno globale di base.css. */
.hero__half:focus-visible { outline: none; }
.hero__half:focus-visible::after {
  content: "";
  position: absolute;
  inset: 8px;
  outline: 1px solid var(--sand);
  pointer-events: none;
}

/* Video di sfondo e gradiente dal basso: compaiono (.7s) solo quando home.js
   segna la metà come is-hover E il video ha dati da mostrare (is-ready). */
.hero__video,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.hero__video { object-fit: cover; }
/* Colore della metà: --bg cambia con il tema della metà stessa */
.hero__shade { background: linear-gradient(to top, var(--bg) 0%, transparent 60%); }
.hero__half.is-hover.is-ready .hero__video,
.hero__half.is-hover.is-ready .hero__shade { opacity: 1; }

.hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero__num {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.hero__half[data-half="mm"] .hero__num { color: var(--sand-dark); }
.hero__title {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -.035em;
  line-height: .95;
  color: var(--sand);
}
.hero__desc {
  font-size: 15px;
  color: var(--muted);
}
/* Tra ~640 e ~1320 px la descrizione di Sound Design (più lunga) va a capo e quella
   di Mix & Master no: i titoli, ancorati in basso, finirebbero a quote diverse.
   Riservando a entrambe due righe restano allineati. */
@media (min-width: 640px) and (max-width: 1320px) {
  .hero__desc { min-height: 3.2em; }
}

/* Onda animata in fondo: la disegna home.js dentro [data-wave] */
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 1;
  pointer-events: none;
}
.hero__wave canvas { width: 100%; height: 100%; }

/* h1 per i motori di ricerca, discreto in basso a sinistra */
.hero__intro {
  position: absolute;
  left: var(--gutter);
  bottom: 72px;
  z-index: 2;
  max-width: calc(100% - 2 * var(--gutter));
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

/* Invito a scorrere, al centro in basso */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .hero__half { min-height: 50svh; }
}

/* Impilato (telefono): il testo dell'h1 e l'invito stanno in fondo alla metà
   petrolio, quindi la sua descrizione sale un poco per non toccarli. */
@media (max-width: 639px) {
  .hero__half[data-half="mm"] { padding-bottom: 150px; }
}

/* --- Pannelli "Selected work" ----------------------------------------------- */
.panels { position: relative; }

.panel {
  position: relative;
  overflow: hidden;
  height: 100vh;
  min-height: 520px;
  background: var(--bg);
  color: var(--sand);
}
@supports (height: 100svh) {
  .panel { height: 100svh; }
}

/* Copertina e video a tutto campo; senza copertina resta il fondo del tema */
.panel__img,
.panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel__video {
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease;
}
.panel__video.is-ready { opacity: 1; }

/* Gradiente dal basso per la leggibilità del testo */
.panel__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* dal basso come da design, più un velo leggero in alto: su un video chiaro
     la riga "selected work / 02 / 04" altrimenti non si legge */
  background:
    linear-gradient(to bottom, rgba(18, 14, 11, .5) 0%, rgba(18, 14, 11, 0) 22%),
    linear-gradient(to top, rgba(18, 14, 11, .82) 0%, rgba(18, 14, 11, .2) 45%, rgba(18, 14, 11, 0) 70%);
}

.panel__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--gutter);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
.panel__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

.panel__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 0 var(--gutter) 72px;
  pointer-events: none;
}
.panel__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 900px;
  flex: 1 1 auto;
}
.panel__kicker {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sand-dark);
}
.panel__title {
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* La pillola (.pill, base.css) è l'unica parte dei pannelli che prende i clic */
.panel__cta { flex: none; pointer-events: auto; }