/* ============================================================
   ZENITH — LE CORNICI DEI DISPOSITIVI
   Telefono, tablet e computer per le presentazioni dei prodotti.
   11 settembre 2026.

   PERCHE' ESISTE QUESTO FILE
   Telefono, tablet e PC tornano in ogni pagina di Zenith. Riscriverli
   ogni volta vuol dire ritrovarsi cornici diverse da una pagina
   all'altra. Questo file si copia in assets/ e si collega: le pagine
   non contengono piu' una riga di cornice.

   COME SI USA
       <div class="telefono">
         <div class="telaio">
           <div class="schermo">  ...qui dentro il prodotto...  </div>
         </div>
       </div>
   Uguale per .tablet e .pc.

   COME SI CAMBIANO LE MISURE
   Tutte le misure stanno nelle variabili qui sotto, in un posto solo.
   Se domani il telefono deve essere piu' basso si cambia --tel-h e
   cambiano TUTTI i telefoni di TUTTE le pagine. Non si toccano le
   regole sotto.

   LA REGOLA DEL CONFINE
   Dentro lo schermo ci vanno i colori VERI del prodotto mostrato,
   anche se non sono bianco e oro. Fuori dallo schermo siamo noi.
   La cornice, nera, e' il confine fra i due mondi.
   ============================================================ */

:root{
  /* --- telefono --- */
  --tel-largh:      232px;   /* larghezza totale, cornice compresa.
                                Col rapporto 9:19.5 questa decide
                                l altezza: 232 -> 503. Con 284 veniva
                                640, troppo. */
  --tel-largh-min:  200px;   /* sotto i 560px: 200 -> 434 di altezza */
  --tel-h:          456px;   /* NON si usa piu' come altezza: restava a litigare
                                col rapporto (il browser allargava la cornice
                                pur di rispettarla). Tenuta solo perche' qualche
                                pagina vecchia potrebbe ancora nominarla.      */
  --tel-rapporto:   9/19.5;  /* IL RAPPORTO DI UN TELEFONO VERO. E' questo che
                                rende la cornice responsive: la larghezza la
                                decide il posto, l'altezza viene da se'. Prima
                                l'altezza era fissa e stringendo la larghezza
                                usciva un telefono lungo che non esiste.      */
  --tel-h-min:      456px;
  --tel-raggio:      40px;
  --tel-bordo:       11px;   /* lo spessore della cornice            */

  /* --- tablet --- */
  --tab-largh:      560px;
  --tab-h:          700px;
  --tab-rapporto:   3/4;
  --tab-raggio:      26px;
  --tab-bordo:       14px;

  /* --- computer --- */
  --pc-largh:       880px;
  --pc-h:           520px;
  --pc-rapporto:    16/10;
  --pc-raggio:       10px;
  --pc-bordo:         9px;

  /* --- il metallo della cornice, uguale per tutti e tre --- */
  --disp-metallo: linear-gradient(115deg,#4a453e,#221f1b 18%,#131110 50%,#26231e 82%,#4a453e);
  --disp-ombra:   0 30px 70px rgba(29,26,22,.18);
  --disp-vetro:   linear-gradient(118deg,rgba(255,255,255,.15) 0 16%,rgba(255,255,255,0) 34%);
}

/* ---------- il pezzo comune ai tre ---------- */
.telefono,.tablet,.pc{ margin:0 auto; position:relative; z-index:1; }
.telaio{
  background:var(--disp-metallo);
  position:relative;
  box-shadow:
    0 2px 1px rgba(255,255,255,.22) inset,    /* filo di luce in cima   */
    0 -2px 1px rgba(0,0,0,.5) inset,          /* ombra sotto            */
    0 0 0 1px rgba(0,0,0,.55),                /* spessore               */
    var(--disp-ombra);
}
.schermo{
  overflow:hidden; position:relative; background:#fff;
  display:flex; flex-direction:column;
  /* min-height:0 NON E' UN DETTAGLIO: senza, l'altezza minima automatica
     di un flex in colonna e' quella del contenuto, e insieme al rapporto
     faceva calcolare al browser una larghezza piu' grande dello schermo
     (480px dentro a 375). Con 0 comanda la larghezza, l'altezza viene dal
     rapporto e quello che avanza si ritaglia. */
  min-width:0; min-height:0;
}
.schermo *{ min-width:0; }
/* il vetro riflette: una lama di luce in diagonale, come su un vero
   schermo spento in una stanza illuminata */
.schermo::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:var(--disp-vetro);
}

/* ---------- TELEFONO ---------- */
.telefono{ max-width:var(--tel-largh); }
.telefono .telaio{ border-radius:var(--tel-raggio); padding:var(--tel-bordo); }
.telefono .telaio::before{            /* il notch */
  content:""; position:absolute; top:var(--tel-bordo); left:50%;
  transform:translateX(-50%); width:44%; height:19px;
  background:#131110; border-radius:0 0 14px 14px; z-index:5;
}
.telefono .schermo{
  border-radius:calc(var(--tel-raggio) - var(--tel-bordo));
  aspect-ratio:var(--tel-rapporto);
}
.telefono .schermo::after{ border-radius:calc(var(--tel-raggio) - var(--tel-bordo)); }
/* i tasti: volume a sinistra, accensione a destra */
.telefono::before,.telefono::after{
  content:""; position:absolute; width:3px; border-radius:3px;
  background:linear-gradient(#3d3831,#1b1815);
}
.telefono::before{ left:-2px; top:24%; height:9%; }
.telefono::after{ right:-2px; top:31%; height:12%; }

/* ---------- TABLET ---------- */
.tablet{ max-width:var(--tab-largh); }
.tablet .telaio{ border-radius:var(--tab-raggio); padding:var(--tab-bordo); }
.tablet .schermo{
  border-radius:calc(var(--tab-raggio) - var(--tab-bordo));
  aspect-ratio:var(--tab-rapporto);
}
.tablet .schermo::after{ border-radius:calc(var(--tab-raggio) - var(--tab-bordo)); }
/* la fotocamera: un punto sul bordo lungo */
.tablet .telaio::before{
  content:""; position:absolute; top:50%; left:calc(var(--tab-bordo) / 2);
  transform:translateY(-50%); width:5px; height:5px; border-radius:50%;
  background:#2b2722; z-index:5;
}

/* ---------- COMPUTER ---------- */
.pc{ max-width:var(--pc-largh); }
.pc .telaio{ border-radius:var(--pc-raggio); padding:var(--pc-bordo) var(--pc-bordo) 0; }
.pc .schermo{
  border-radius:3px;
  aspect-ratio:var(--pc-rapporto);
}
.pc .schermo::after{ border-radius:3px; }
/* la base: il piedistallo sotto lo schermo */
.pc .telaio::after{
  content:""; display:block; height:16px;
  margin:var(--pc-bordo) calc(var(--pc-bordo) * -1) 0;
  background:linear-gradient(#3a352e,#1b1815);
  border-radius:0 0 var(--pc-raggio) var(--pc-raggio);
}
.pc-piede{
  width:22%; height:9px; margin:0 auto;
  background:linear-gradient(#2b2722,#17150f);
  border-radius:0 0 6px 6px;
}
.pc-base{
  width:40%; height:7px; margin:0 auto;
  background:linear-gradient(#3a352e,#211e18);
  border-radius:999px;
  box-shadow:0 10px 22px rgba(29,26,22,.22);
}

/* ---------- sul telefono vero: tutto si stringe ---------- */
@media (max-width:560px){
  :root{
    --tel-largh: var(--tel-largh-min);
    --tel-h:     var(--tel-h-min);
  }
  .tablet{ max-width:100%; }
  /* niente altezze minime: col rapporto in vigore servivano solo a far
     calcolare al browser una larghezza piu' grande dello schermo. */
}

/* la didascalia sotto la cornice, uguale per tutti e tre */
.didascalia{
  text-align:center; font-size:.74rem; color:#B9B2A6;
  margin-top:13px; letter-spacing:.04em;
}


/* ============================================================
   LA SCENA IN 3D
   I dispositivi non sono figurine incollate: stanno in uno spazio.
   Si mette .scena3d sul contenitore e .pezzo3d su ognuno.
   Il puntatore li inclina (lo fa /z/zenith-3d.js); quello che
   tocchi viene avanti e si raddrizza.
   Sul telefono e con le animazioni ferme: tutto dritto e immobile.
   ============================================================ */
.scena3d{perspective:1600px;perspective-origin:50% 44%;--giro:9deg;--alza:2deg}
/* SIMMETRIA: a specchio rispetto al centro, non tre angoli a caso */
.scena3d > .pezzo3d:first-child{--ry:var(--giro);  --rx:var(--alza)}
.scena3d > .pezzo3d:last-child {--ry:calc(var(--giro) * -1); --rx:var(--alza)}
.scena3d > .pezzo3d:only-child {--ry:0deg;         --rx:var(--alza)}
/* con tre pezzi quello in mezzo sta dritto */
.scena3d > .pezzo3d:first-child:nth-last-child(3) ~ .pezzo3d:nth-child(2){--ry:0deg;--rx:var(--alza)}
.scena3d .pezzo3d{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg))
            translateZ(var(--tz,0px));
  transition:transform .55s cubic-bezier(.22,.8,.28,1),
             filter .55s ease;
  /* will-change lo accende zenith-3d.js solo mentre il puntatore e' sopra */
}
.scena3d .pezzo3d:hover,.scena3d .pezzo3d:focus-within{
  --rx:0deg; --ry:0deg; --rz:0deg; --tz:70px;
  z-index:5;
}
/* l'ombra a terra: e' lei che fa sembrare che siano appoggiati */
.scena3d .pezzo3d::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-26px; height:26px;
  background:radial-gradient(ellipse at 50% 0%,rgba(29,26,22,.26),rgba(29,26,22,0) 72%);
  transform:translateZ(-40px); pointer-events:none;
  transition:opacity .55s ease; z-index:-1;
}
/* ---- il 3D SUL TELEFONO: c'e', ma costa poco ----
   Niente puntatore (non esiste), niente inclinazione che cambia a ogni
   pixel di scorrimento: una prospettiva piu' corta, una posa fissa, e
   SOLO il pezzo agganciato al centro viene avanti. Una transizione per
   volta, nessun livello grafico tenuto acceso a vuoto. */
@media (max-width:900px){
  .scena3d{perspective:900px;perspective-origin:50% 50%}
  .scena3d .pezzo3d{
    --rx:1.5deg; --ry:0deg; --rz:0deg; --tz:0px;
    will-change:auto;                    /* niente livelli tenuti aperti */
    transition:transform .32s cubic-bezier(.22,.8,.28,1), opacity .32s ease;
    opacity:.9;
  }
  .scena3d .pezzo3d:hover{--tz:0px}      /* il passaggio del dito non conta */
  /* quello agganciato al centro: viene avanti e si accende */
  .pista-guida .pezzo3d.al-centro{--tz:22px; opacity:1}
  .scena3d .pezzo3d::after{opacity:.5;bottom:-16px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .scena3d .pezzo3d{transform:none;transition:none}
  .scena3d .pezzo3d:hover{transform:none}
}


/* ============================================================
   LA PISTA — dove serve, si scorre di lato
   Sotto i 900px i dispositivi non si schiacciano: si sfogliano.
   Si mette .pista sul contenitore; i puntini li disegna
   /z/zenith-pista.js (e se il file non c'e', la pista scorre
   lo stesso: i puntini sono un di piu', non una stampella).
   ============================================================ */
/* SOPRA I 900 LA GUIDA NON ESISTE: display:contents la toglie di mezzo e
   i dispositivi tornano a essere figli diretti della griglia. Senza questo
   si impilavano in colonna, perche la griglia a tre colonne la applicava
   alla guida invece che a loro. */
.pista-guida{ display:contents; }

@media (max-width:900px){
  .pista-guida{
    display:flex; gap:20px; align-items:flex-end;
    /* dentro a una griglia serve dirlo: se no si allarga sul contenuto
       e non scorre piu' (misurato: 755px dentro a 331) */
    width:100%; max-width:100%; min-width:0;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    /* niente margini negativi: allargavano la pagina oltre lo schermo e
       il primo pezzo restava tagliato. Solo padding, dentro ai bordi. */
    padding:6px 2px 20px;
    scrollbar-width:none;
  }
  .pista-guida::-webkit-scrollbar{ display:none; }
  .pista-guida > *{ scroll-snap-align:center; flex:0 0 auto; }
  /* alla loro misura vera, non rimpicciolita fino a non leggersi */
  .pista-guida .pc     { width:min(78vw,520px); --pc-largh:none; }
  .pista-guida .tablet { width:min(58vw,318px); --tab-largh:none; }
  /* nella pista il telefono si accorcia: alto come gli altri, non un
     grissino. Fuori dalla pista resta 9:19.5, che e' la misura vera. */
  .pista-guida .telefono{width:min(46vw,196px); --tel-largh:none;
    --tel-rapporto:9/14; }
  .pista-guida .scherma{ width:auto; }
  .pista-guida .scherma .pc,.pista .scherma .tablet,.pista .scherma .telefono{ width:100%; }
  .pista-guida .scherma--pc { width:min(78vw,520px); }
  .pista-guida .scherma--tab{ width:min(58vw,318px); }
  .pista-guida .scherma--tel{ width:min(46vw,196px); --tel-rapporto:9/14; }

  /* LA MINIATURA. Dentro alla pista un computer e' largo trecento pixel:
     alla grandezza vera ci starebbe un quarto della schermata. Invece di
     tagliarla, il contenuto viene disegnato piu' grande e poi rimpicciolito,
     come una fotografia dello schermo: si legge meno, ma si vede TUTTO.
     Si scala UN involucro solo (.mini, lo mette zenith-pista.js): scalando
     i figli uno per uno si sommavano le altezze e il tablet restava bianco.
     Il fattore si cambia in un posto solo, --mini. */
  /* i fattori non si scrivono piu' a mano: li misura zenith-adatta.js,
     schermata per schermata e a ogni cambio di misura */
}
/* l'involucro della miniatura: c'e' sempre, ma finche' non e' in una
   pista si comporta come se non ci fosse */
/* L'INVOLUCRO DELLA MINIATURA. Lo mette zenith-adatta.js su ogni schermata
   e ne calcola il fattore --mini: il contenuto viene disegnato piu' grande
   e poi rimpicciolito quel tanto che basta per starci dentro, come una
   fotografia dello schermo. E' cosi' che le schermate sono responsive a
   qualunque larghezza, senza misure scritte a mano. */
.mini{ display:flex; flex-direction:column; flex:1; min-height:0; min-width:0;
  transform:scale(var(--mini,1)); transform-origin:0 0;
  /* nessuna altezza imposta qui: l'altezza imposta faceva crescere la
     cornice, il guardiano rimisurava, e la pagina si bloccava */ }

/* i puntini */
.puntini{ display:none; }
@media (max-width:900px){
  .puntini{ display:flex; justify-content:center; gap:7px; margin:-6px 0 0; }
  .puntini i{
    width:7px; height:7px; border-radius:50%; display:block; cursor:pointer;
    background:var(--linea-g, #EDE8DC); border:1px solid rgba(201,162,39,.35);
    transition:background .25s ease, transform .25s ease;
  }
  .puntini i.qui{ background:var(--oro, #C9A227); transform:scale(1.25); }
}