/* ============================================================
   CONTACTS — video già presente in un rettangolo piccolo centrato che si
   allarga (apertura via clip-path) mentre la sezione entra, poi pin a pieno
   schermo. Effetto LOCALIZZATO qui (contacts.js con GSAP). Testi rivelati
   alla fine, come prima. Tokens/reset da hero.css.
   ============================================================ */
  body {
    background: var(--bg-green);
    color: var(--cream);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .contacts {
    position: relative;
    width: 100%;
    background: var(--bg-green);
  }
  /* Ogni "pagina" della sezione: il pin lo gestisce ScrollTrigger */
  .contacts-panel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  /* Finestra del video: apertura iniziale = rettangolo piccolo CENTRATO.
     contacts.js allarga il clip-path fino a inset(0) (pieno schermo).
     Il video sotto è a scala fissa 'cover' → NON si deforma, si svela. */
  .contacts-video-wrap {
    position: absolute; inset: 0;
    -webkit-clip-path: inset(34% 34% 34% 34%);
            clip-path: inset(34% 34% 34% 34%);
    transform: translateZ(0);            /* promozione a layer: no flicker clip+video */
    backface-visibility: hidden;
    will-change: clip-path;
  }
  .contacts-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; background: var(--bg-green);
    pointer-events: none;
  }

  /* ---------- "DO YOU TRUST THE EYE?" (Futura Bold) ---------- */
  /* "DO YOU TRUST … ?" già presente; "THE EYE" (rosso) si attiva via scroll. */
  .trust {
    position:absolute; top:54.5%; left:50%; transform:translate(-50%,-50%);
    margin:0; white-space:nowrap; line-height:1; z-index:2;
    font-weight:700; font-size:clamp(38px, 6.25vw, 90px);
    letter-spacing:var(--tracking); color:var(--cream);
  }
  /* "THE EYE": nascosta all'inizio, dissolvenza 600ms. Niente scroll trigger:
     compare 500ms dopo l'ingresso (JS aggiunge .overlay-in su #contactsPanel1). */
  .trust .eye { display:inline-block; color:var(--red); opacity:0; transition:opacity var(--eye-fade,.6s) ease; }
  #contactsPanel1.overlay-in .trust .eye,
  #contactsPanel1.overlay-in .sound-toggle { opacity:1; }

  /* ---------- "YOU STILL HERE? LET'S CHAT" (si attiva via scroll) ---------- */
  .lets-chat {
    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
    margin:0; white-space:nowrap; z-index:2;
    font-weight:500; font-size:26px; letter-spacing:var(--tracking);
    color:var(--cream); -webkit-text-stroke:3px var(--red); paint-order:stroke fill;
    /* sempre presente su video2, niente scroll trigger */
  }
  .lets-chat .red { color:var(--red); }

  /* ---------- Mail (centrata su video2, Futura Medium, rosso, NO stroke) ---------- */
  /* Niente mailto: testo semplice, comodo da copiare/incollare. Un clic ne
     seleziona tutta la stringa (user-select:all) per copiarla al volo. */
  .contacts-email {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    margin:0; white-space:nowrap; z-index:2;
    font-family:var(--font-display); font-weight:500; font-size:26px;
    letter-spacing:var(--tracking); color:var(--red);
    text-decoration:none;   /* nessuno stroke, nessuna sottolineatura */
    -webkit-user-select:all; user-select:all; cursor:text;
  }
  .lets-chat .chat-link {
    color:var(--red); text-decoration:underline; cursor:pointer;
    transition:filter .2s ease, text-shadow .2s ease;
  }
  .lets-chat .chat-link:hover {
    text-shadow:0 0 4px rgba(181,36,0,.5); filter:blur(0.25px);
  }

  /* ---------- Toggle audio (icona altoparlante) ---------- */
  .sound-toggle {
    position:absolute; left:var(--edge-x); bottom:40px; z-index:2;
    width:38px; height:38px; padding:7px;
    background:none; border:0; cursor:pointer; color:var(--cream);
    opacity:0; transition:opacity var(--eye-fade,.6s) ease;   /* reveal a tempo (.overlay-in) */
  }
  .sound-toggle svg { width:100%; height:100%; display:block; overflow:visible; }
  .sound-toggle .spk   { fill:var(--cream); }
  .sound-toggle .waves { fill:none; stroke:var(--cream); stroke-width:2; stroke-linecap:round; }
  .sound-toggle .slash { stroke:var(--red); stroke-width:2.5; stroke-linecap:round; opacity:0; }
  .sound-toggle.is-muted .waves { opacity:0; }
  .sound-toggle.is-muted .slash { opacity:1; }
  .sound-toggle:hover { filter:drop-shadow(0 0 3px rgba(181,36,0,.5)); }
  /* su video2 l'icona è sempre presente (come la frase), niente reveal */
  #contactsPanel2 .sound-toggle { opacity:1; }

  @media (max-width:768px){
    .lets-chat{ font-size:18px; }
  }