/* products.css — la sezione prodotti (16/09, notte). Cupola color carta che sale sopra la scena AI (products.js scrive --pr-dome-y/-s,
   --pr-content, --pr-settle), titolo in alto, tre finestre del browser Mac in fila con nome, frase e link sotto (schema di Square e Twenty su
   Mobbin); le finestre entrano dal basso a molla (--pr-in, --pr-in-o), sfalsate. */
.products-section{position:relative;z-index:2;margin-top:-160svh;background:transparent;color:var(--ink);--pr-dome-y:100svh;--pr-dome-s:1;--pr-content:0;scroll-margin-top:0}   /* comincia alla fermata finale della scena AI: risale la coda (--ai-tail, 60svh) più la schermata del palco AI (100svh); il palco AI resta fermo sotto la cupola per tutta la coda */
.products-section.is-live{height:calc(100svh + 60svh)}                   /* palco + la corsa della cupola: fermate a 0 e 1 */
.products-section.is-live .pr-stage{position:sticky;top:0;height:100svh}
html.has-reveal .products-section.is-live{--pr-tail:100svh;height:calc(100svh + 60svh + var(--pr-tail))}   /* la coda: il palco resta fermo mentre il punto ambra si allarga sui contatti (contact.js); products.js la esclude dalla corsa */
.products-section.is-still{height:auto;margin-top:0}.products-section.is-still .pr-stage{position:relative;height:auto}   /* movimento ridotto: niente sovrapposizione alla scena AI (che collassa a height:auto) */
.products-section.is-live:not(.is-arrived){pointer-events:none}   /* finché la cupola non è arrivata la sezione (che sovrasta la coda della scena AI) non intercetta clic né puntatore */
.products-section:not(.is-live){margin-top:0;--pr-content:1}
.pr-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}   /* #prodotti, #virtual-try-on, #configuratore, #showroomai in sequenza: i segnaposto alla fermata (products.js) */
.pr-stage{position:relative;overflow:clip;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8svh,90px) var(--gutter) clamp(40px,6svh,70px)}
/* la cupola: un elemento vero con la cima tonda di raggio mezzo schermo (misurato sul prototipo), che sale e poi si gonfia dall'alto al centro */
.pr-dome{position:absolute;left:0;top:0;width:100vw;height:calc(140svh + 50vw);border-radius:var(--pr-dome-rx,50vw) var(--pr-dome-rx,50vw) 0 0 / var(--pr-dome-ry,50vw) var(--pr-dome-ry,50vw) 0 0;background:var(--paper);transform:translateY(calc(var(--pr-dome-y) + var(--pr-settle,0svh))) scale(var(--pr-dome-s));transform-origin:50% 0;will-change:transform;pointer-events:none}   /* --pr-settle: l'assestamento a molla all'arrivo (products.js) */
.products-section[data-dome="wide"]{--pr-dome-ry:30vw}
.products-section.is-arrived .pr-stage,.products-section:not(.is-live) .pr-stage{background:var(--paper)}   /* dall'arrivo in poi il fondo è pieno, la geometria non conta più */
/* il punto ambra del marchio, nell'angolo in basso a destra: lo spicchio nord-ovest di un cerchio col centro appena dentro l'angolo (geometria del
   prototipo con l'iPad 3D: raggio 0,216 e rientro 0,026 di R, con R = 0,93 × mezza diagonale; contact.js scrive --dot-r e --dot-c in pixel e usa
   gli stessi numeri per il ritaglio che si allarga). È stampato sulla carta: sale con la cupola (--pr-dot-y); non si assesta con lei (23/09: il sobbalzo del punto disturbava).
   Esiste solo quando la chiusura è in sequenza (html.has-reveal). */
.pr-dot{display:none}
html.has-reveal .products-section.is-live .pr-dot{display:block;position:absolute;right:calc(var(--dot-c,0px) - var(--dot-r,0px));bottom:calc(var(--dot-c,0px) - var(--dot-r,0px));width:calc(var(--dot-r,0px)*2);height:calc(var(--dot-r,0px)*2);border-radius:50%;background:var(--accent);transform:translateY(var(--pr-dot-y,100svh));will-change:transform;pointer-events:none}   /* 23/09: senza --pr-settle — il punto sobbalzava con la molla della cupola a fine corsa (Alessandro) */
/* dietro, la scena AI arretra e si scurisce mentre la cupola sale (variabili scritte da products.js sulla sezione AI) */
.ai-stage{transform:scale(var(--pr-ai-s,1));transform-origin:50% 50%}
.ai-stage::after{content:'';position:absolute;inset:0;z-index:9;background:#000;opacity:var(--pr-ai-dim,0);pointer-events:none}
.pr-inner{position:relative;z-index:1;opacity:var(--pr-content);width:100%;max-width:1500px;margin:0 auto}
/* il titolo in alto a sinistra */
.pr-title{margin:0;text-align:center;font:500 clamp(40px,4.4vw,80px)/1.02 Satoshi,Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap;color:var(--ink)}   /* una riga sola, centrata */
/* la fila: tre finestre pari; la fila intera si assesta a molla all'arrivo (--pr-settle) */
.pr-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.8vw,28px);margin-top:clamp(28px,5svh,52px);transform:translateY(var(--pr-settle,0svh))}
.pr-window{position:relative;min-width:0;transform:translateY(var(--pr-in,0svh));opacity:var(--pr-in-o,1);will-change:transform,opacity}
.products-section.is-live:not(.is-entered):not(.is-still) .pr-window{opacity:0;visibility:hidden}   /* prima dell'entrata non esistono: fuori anche dal tab order e dal hit-test */
/* la cornice del browser Mac */
.pr-frame{display:flex;flex-direction:column;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 60px #191d201f,0 2px 6px #191d2012}
.pr-bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;background:#f1f1f0;border-bottom:1px solid #e2e3e0;flex:none}
.pr-lights{display:flex;gap:6px}.pr-lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.pr-lights i:nth-child(2){background:#febc2e}.pr-lights i:nth-child(3){background:#28c840}
.pr-url{flex:1;text-align:center;font:400 11.5px/22px Satoshi,Arial,sans-serif;color:var(--muted);background:#fff;border-radius:6px;margin-right:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-visual{flex:1;min-height:0;background:#e5e8e3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pr-visual>img{display:block;width:calc(100% - 40px);height:auto;border-radius:6px;box-shadow:0 12px 24px #191d2012}
.pr-visual--tryon{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#d4d8d3}
.pr-visual--tryon figure{margin:0;min-width:0;position:relative;background:#eceeef;overflow:hidden}
.pr-visual--tryon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%}
.pr-visual--tryon figcaption{position:absolute;left:10px;right:10px;bottom:10px;font-size:10px;text-align:center;padding:6px 4px;border-radius:99px;background:#f6f6f4e8;color:var(--ink)}
.pr-visual--config{background:#e5e5df}.pr-visual--showroom{background:#dde3d9}
/* sotto la cornice: nome, frase, link, nota (come le card di Square) */
.pr-copy{padding:22px 4px 0}
.pr-copy h3{margin:0;font:500 clamp(20px,1.6vw,26px)/1.1 Satoshi,Arial,sans-serif;letter-spacing:-.035em}
.pr-copy>p{margin:10px 0 0;font-size:15px;line-height:1.5;letter-spacing:-.015em;max-width:34ch}
/* i bottoni sono pillole, come quelle dell'header: «Parliamone» piena, «Prova la demo» chiara */
.pr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pr-actions a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1 Satoshi,Arial,sans-serif;text-decoration:none;white-space:nowrap;transition:background .16s,color .16s}
.pr-actions a>span{font-size:17px;line-height:1}
.pr-actions a:hover{background:var(--accent);color:#fff}
.pr-actions a[data-demo-open]{background:#e9eae6;color:var(--ink)}.pr-actions a[data-demo-open]:hover{background:#dcdfd9;color:var(--ink)}
.pr-copy small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:14px}
/* senza JavaScript (nessuna .is-live): la stessa fila, ferma */
.products-section:not(.is-live) .pr-dome{display:none}
.products-section:not(.is-live) .pr-window{transform:none!important;opacity:1!important}
@media(max-width:1100px){.pr-row{grid-template-columns:1fr 1fr}.pr-title{font-size:clamp(36px,5.6vw,64px)}}
@media(max-width:820px){.pr-title{white-space:normal;text-wrap:balance}}
@media(max-width:700px){.pr-row{grid-template-columns:1fr;gap:28px}.pr-copy{padding-top:16px}}
@media(max-height:760px){.pr-stage{padding-top:56px}.pr-row{margin-top:28px}.pr-copy>p{display:none}.pr-copy small{display:none}}   /* schermi bassi: resta il nome con i link */