/* =========================================================
   SCHERMI — la finestra Mac e l'iPhone

   Due cornici disegnate in CSS, senza una sola immagine. Servono a
   far vedere un servizio dentro il posto in cui lo useresti: un
   programma dentro una finestra, un'app dentro un telefono.

   Perche' in CSS e non con delle immagini:
     · un'immagine di cornice pesa 100-300 kB, va servita in tre
       densita' diverse e sfoca appena la si scala;
     · il contenuto dentro dev'essere vivo, non una fotografia — e
       sopra un'immagine ci si puo' solo sovrapporre, con tutti i
       problemi di allineamento che ne seguono;
     · cosi' la cornice si adatta a qualsiasi larghezza, sempre nitida.

   Tutte le misure interne sono in unita' di contenitore (cqw): il
   telefono e la finestra si rimpiccioliscono INTERI, con le loro
   proporzioni intatte, senza una riga di JavaScript e senza punti
   di rottura scritti a mano.
   ========================================================= */

/* ══════════════════════════════════════════════════════════════════
   FINESTRA MAC
   Proporzioni prese dalla cosa vera: barra 38px su una finestra di
   1200, angoli 11px, semafori 12px con 8px di distanza.
   ══════════════════════════════════════════════════════════════════ */
.mac{
  container-type:inline-size;
  position:relative;
  width:100%;
  /* misura fissa apposta: un cqw scritto qui si calcolerebbe sul
     contenitore esterno, non su questa finestra. E comunque una
     finestra macOS ha lo stesso raggio a qualunque dimensione. */
  border-radius:12px;
  overflow:hidden;
  background:#0a0a0b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 34px 70px -30px rgba(0,0,0,1),
    0 90px 120px -60px rgba(0,0,0,.9);
  isolation:isolate;
}

/* la barra del titolo */
.mac__barra{
  display:flex;align-items:center;gap:3.2cqw;
  padding:0 2.6cqw;height:3.4cqw;min-height:30px;max-height:44px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}

/* i semafori: sono il segnale che dice "Mac" in un decimo di secondo.
   Tenuti un filo desaturati per non litigare con la tavolozza. */
.mac__semafori{display:flex;gap:.7cqw;flex:none}
.mac__semafori i{
  width:1.05cqw;height:1.05cqw;min-width:9px;min-height:9px;
  max-width:13px;max-height:13px;border-radius:50%;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28);
}
.mac__semafori i:nth-child(1){background:#e8654f}
.mac__semafori i:nth-child(2){background:#e0b040}
.mac__semafori i:nth-child(3){background:#4ea85c}

.mac__titolo{
  flex:1;text-align:center;
  font-family:var(--f-body);font-size:clamp(9.5px,1.05cqw,12.5px);
  letter-spacing:.02em;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* una spalla invisibile a destra, cosi' il titolo resta al centro vero
   della finestra e non spostato di mezza larghezza dei semafori */
.mac__spalla{width:4.2cqw;flex:none}

.mac__schermo{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.035),transparent 60%),
    #060607;
}

/* il riflesso: una diagonale appena accennata sul vetro. Senza, la
   finestra sembra un rettangolo; con, sembra uno schermo. */
.mac::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,rgba(255,255,255,.05) 0%,transparent 22%,transparent 78%,rgba(255,255,255,.025) 100%);
  border-radius:inherit;
}

/* ══════════════════════════════════════════════════════════════════
   IPHONE
   Proporzioni reali di un iPhone 15/16 (393 x 852 punti).

   ATTENZIONE, ed e' l'errore che avevo fatto: le unita' di contenitore
   NON valgono sull'elemento che dichiara il contenitore. Un `cqw` scritto
   dentro .telefono si calcola sul contenitore PIU' ESTERNO — qui non ce
   n'e' uno, quindi finiva sulla larghezza della finestra. Il risultato
   era un raggio degli angoli di 190px su un telefono largo 205, cioe' una
   bolla, e tasti laterali lunghi duecento pixel.

   La cura: .telefono dichiara il contenitore e non ha nessuno stile
   visibile; tutto quello che si vede sta in .telefono__scocca, che e' un
   DISCENDENTE e quindi misura sul telefono. Da qui in giu' ogni cqw vale
   l'1% della larghezza del telefono, sempre, a qualunque dimensione.
   ══════════════════════════════════════════════════════════════════ */
.telefono{
  container-type:inline-size;
  position:relative;
  width:100%;
  max-width:280px;
  aspect-ratio:393/852;
}

/* la scocca di titanio */
.telefono__scocca{
  position:absolute;inset:0;
  border-radius:15.6cqw;          /* 61 punti su 393: il raggio vero */
  padding:1.7cqw;                 /* la cornice attorno allo schermo */
  background:linear-gradient(147deg,
    #45454a 0%, #17171a 9%, #26262a 26%, #1a1a1d 52%,
    #2e2e33 74%, #131316 90%, #4a4a50 100%);
  box-shadow:
    inset 0 0 0 .35cqw rgba(255,255,255,.16),
    inset 0 0 .8cqw .2cqw rgba(0,0,0,.9),
    0 30px 60px -26px rgba(0,0,0,1),
    0 80px 100px -60px rgba(0,0,0,.85);
}

/* i tasti: sporgono dalla scocca, e sono l'ultimo dettaglio che fa dire
   "e' un iPhone" invece di "e' un rettangolo con gli angoli tondi" */
.telefono__scocca::before,
.telefono__scocca::after{
  content:'';position:absolute;
  width:.85cqw;border-radius:.5cqw;
  background:linear-gradient(180deg,#4a4a50,#242428);
  pointer-events:none;
}
.telefono__scocca::before{        /* volume su e giu', a sinistra */
  left:-.6cqw;top:24cqw;height:8.4cqw;
  box-shadow:0 10.6cqw 0 0 #33333a;
}
.telefono__scocca::after{         /* accensione, a destra */
  right:-.6cqw;top:31cqw;height:12.6cqw;
}

.telefono__schermo{
  position:relative;
  width:100%;height:100%;
  border-radius:14cqw;            /* 55 punti su 393 */
  overflow:hidden;
  background:#000;
  isolation:isolate;
}

/* il riflesso sul vetro: una diagonale appena accennata, sopra tutto.
   Costa niente e toglie l'aria di finto. */
.telefono__schermo::after{
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(128deg,
    rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 16%,
    transparent 42%, transparent 82%, rgba(255,255,255,.03) 100%);
}

/* l'isola: nera su nero, si vede per il bordo e per la fotocamera */
.telefono__isola{
  position:absolute;top:2.9cqw;left:50%;transform:translateX(-50%);
  width:31.8cqw;height:9.4cqw;border-radius:5cqw;
  background:#000;z-index:6;pointer-events:none;
  box-shadow:inset 0 0 0 .3cqw rgba(255,255,255,.055);
}
.telefono__isola::after{
  content:'';position:absolute;right:2.4cqw;top:50%;transform:translateY(-50%);
  width:3.4cqw;height:3.4cqw;border-radius:50%;
  background:radial-gradient(circle at 34% 34%,#2b323c,#080a0e 72%);
  box-shadow:inset 0 0 0 .25cqw rgba(255,255,255,.07);
}

/* la barra di stato */
.telefono__stato{
  position:absolute;top:0;left:0;right:0;height:13.7cqw;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:3.6cqw 8.4cqw 0;pointer-events:none;
  font-family:var(--f-body);font-weight:600;
  font-size:4.2cqw;letter-spacing:.01em;color:#fff;
}
.telefono__ora{font-variant-numeric:tabular-nums}
.telefono__spie{display:flex;align-items:center;gap:1.7cqw}

/* campo, wifi e batteria: forme, non icone da scaricare */
.telefono__campo{display:flex;align-items:flex-end;gap:.55cqw;height:3.1cqw}
.telefono__campo i{width:.95cqw;background:#fff;border-radius:.3cqw}
.telefono__campo i:nth-child(1){height:36%}
.telefono__campo i:nth-child(2){height:57%}
.telefono__campo i:nth-child(3){height:78%}
.telefono__campo i:nth-child(4){height:100%}

.telefono__wifi{width:4.2cqw;height:3.1cqw;position:relative}
.telefono__wifi::before,.telefono__wifi::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  border:.72cqw solid transparent;border-top-color:#fff;border-radius:50%;
}
.telefono__wifi::before{width:4.2cqw;height:4.2cqw;top:0}
.telefono__wifi::after{width:1.7cqw;height:1.7cqw;top:1.55cqw}

.telefono__batteria{
  width:6.9cqw;height:3.3cqw;border-radius:1cqw;position:relative;
  box-shadow:inset 0 0 0 .35cqw rgba(255,255,255,.42);
}
.telefono__batteria::before{
  content:'';position:absolute;top:.75cqw;bottom:.75cqw;left:.75cqw;right:1.7cqw;
  border-radius:.4cqw;background:#fff;
}
.telefono__batteria::after{
  content:'';position:absolute;right:-1.05cqw;top:50%;transform:translateY(-50%);
  width:.75cqw;height:1.3cqw;border-radius:0 .5cqw .5cqw 0;
  background:rgba(255,255,255,.42);
}

/* la riga di casa */
.telefono__casa{
  position:absolute;bottom:2.2cqw;left:50%;transform:translateX(-50%);
  width:35.6cqw;height:1.35cqw;border-radius:1cqw;
  background:rgba(255,255,255,.82);z-index:6;pointer-events:none;
}

/* lo spazio utile: quello che sta fra la barra di stato e la riga di casa.
   E' qui che il motore monta la scena, e ha gli angoli arrotondati come lo
   schermo: senza, il contenuto usciva dagli angoli. */
.telefono__area{
  position:absolute;left:0;right:0;top:13.7cqw;bottom:6cqw;
  overflow:hidden;
}

/* ══════════════════════════════════════════════════════════════════
   I DUE INSIEME — la vetrina di un servizio
   Sul largo il telefono si sovrappone all'angolo della finestra,
   come in una fotografia di prodotto. Sotto i 900px si mette in fila.
   ══════════════════════════════════════════════════════════════════ */
.vetrina{
  position:relative;
  margin-top:clamp(30px,4vw,52px);
  padding-right:clamp(0px,13vw,190px);
}
.vetrina__telefono{
  position:absolute;right:0;bottom:-4%;width:clamp(150px,16vw,232px);
  z-index:4;
}
.vetrina__nota{
  margin:18px 0 0;font-size:11.5px;letter-spacing:.03em;color:var(--ink-4);
}

/* la tela che le scene creano dentro gli schermi */
.vetrina__tela{position:absolute;inset:0;width:100%;height:100%;display:block}

@media (max-width:900px){
  .vetrina{padding-right:0}
  .vetrina__telefono{
    /* relative e non static: qui il telefono deve solo rientrare nel
       flusso, non smettere di essere il riferimento dei suoi pezzi.
       Con `static` .telefono__scocca (position:absolute;inset:0) saltava
       al primo antenato posizionato, cioe' .vetrina, e si stirava sulla
       sua misura: a 375px di finestra la scocca veniva 335x829 — la
       vetrina intera — dentro un telefono di 260x564. Succedeva in tutte
       le vetrine del sito, non in una sola. */
    position:relative;width:min(260px,72vw);margin:26px auto 0;
  }
}

/* Chi ha chiesto meno movimento: le cornici restano, il contenuto si
   ferma. E' il motore delle vetrine a occuparsene — qui si toglie solo
   il riflesso che striscia. */
@media (prefers-reduced-motion:reduce){
  .mac::after{background:none}
}