/*
 * Studio Arfia — dispositivi.css · v0.39 · 29/09/2026
 * iPhone e MacBook disegnati (inc/dispositivi.php): telaio, vetro, isola, notch, scocca, ombre.
 * Le app dentro leggono le zone sicure dalle variabili --sa-su / --sa-giu / --sa-lato del contenitore
 * schermo, e --u (UN PUNTO dello schermo vero) per scrivere in punti: calc(17 * var(--u)).
 * La taglia è una sola: il font-size del dispositivo (o --scala). iPhone: 19em = larghezza dello
 * schermo (402 punti). MacBook: 60em = larghezza del coperchio (lo schermo è 1512 × 982 punti).
 * Misure vere: iPhone 17 Pro, corpo 71,9 × 150 mm, vetro e telaio concentrici (schermo 62 punti di
 * raggio, vetro 71, telaio 78), isola 126 × 37 a 14 punti dall'alto. MacBook Pro 14": 312,6 mm di
 * coperchio, schermo 302,4 × 196,4 mm (3024 × 1964), cornice 3,5 mm, tacca 196 × 32 punti.
 */

/* --u è registrata come lunghezza: si calcola sul dispositivo e scende ai figli già in px
   (la stessa registrazione di demo.css: dove ci sono tutti e due i fogli, è identica). */
@property --u { syntax: '<length>'; inherits: true; initial-value: 1px; }

.as-disp { position: relative; isolation: isolate; display: block; flex: none; margin: 0; font-size: var(--scala, 1em); line-height: normal; text-align: left; }
.as-disp__schermo { position: absolute; overflow: hidden; isolation: isolate; background: var(--sfondo, #000); }
/* L'app: un contenitore posizionato SENZA z-index, così gli z-index dell'app (sotto il 30) stanno
   sotto la barra di stato, l'isola e la barra home del kit, e un velo dell'app può salire sopra. */
.as-disp__app { position: absolute; inset: 0; }
/* Il riquadro già dentro le zone sicure, per le app che non vanno a tutto schermo. */
.as-disp__sicura { position: absolute; top: var(--sa-su); right: var(--sa-lato); bottom: var(--sa-giu); left: var(--sa-lato); }
/* Il riflesso del vetro: una luce obliqua appena accennata (sul bianco non si vede, sul nero sì). */
.as-disp__riflesso { position: absolute; inset: 0; z-index: 32; pointer-events: none; background: linear-gradient(126deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 34%, rgba(255, 255, 255, 0) 58%); }
/* Lo schermo spento: nero pieno, lo accende l'entrata (motion.js). Di base è acceso. */
.as-disp__spento { position: absolute; inset: 0; z-index: 33; background: #000; opacity: 0; pointer-events: none; }
.as-disp__ombra { position: absolute; z-index: -2; pointer-events: none; }
.as-disp__ic { display: block; flex: none; fill: currentColor; }
.as-disp__ora > [data-mondo-di] { display: none; }
.as-disp__ora > [data-mondo-di]:first-child { display: inline; }

/* ══ L'iPHONE ════════════════════════════════════════════════════════════════════════ */
.as-iphone {
	--u: calc(1em * 19 / 402);
	width: calc(434 * var(--u));
	height: calc(906 * var(--u));
	/* il metallo: titanio naturale (di base), grigio freddo spazzolato */
	--m1: #c9ccd0; --m2: #e3e5e7; --m3: #8f9296; --m4: #74777b; --m5: #585b5f; --m6: #9fa2a6; --m7: #6a6d71; --m8: #a7aaae; --m9: #7b7e82; --m10: #979a9e;
	--m-filo: rgba(255, 255, 255, .62);
}
.as-iphone.is-argento { --m1: #e6e8ea; --m2: #f6f7f8; --m3: #b3b6b9; --m4: #9a9da1; --m5: #7e8185; --m6: #c2c5c8; --m7: #919498; --m8: #cbced1; --m9: #a3a6a9; --m10: #bcbfc2; }
.as-iphone.is-grafite { --m1: #8a8d91; --m2: #9c9fa3; --m3: #54575b; --m4: #45484c; --m5: #34373a; --m6: #5e6165; --m7: #414447; --m8: #676a6e; --m9: #4b4e52; --m10: #5a5d61; --m-filo: rgba(255, 255, 255, .32); }

/* Il telaio: l'anello di metallo che si vede di fronte (7 punti). La luce viene da sinistra in
   alto: angoli e bordo alto chiari, fianco destro e basso più scuri, due bagliori sugli angoli di
   sotto. Sul bordo esterno il filo di luce, poi uno spigolo scuro verso il vetro. */
.as-iphone__telaio {
	position: absolute;
	inset: 0;
	border-radius: calc(78 * var(--u));
	background: conic-gradient(from 0deg at 50% 50%, var(--m1) 0deg, var(--m2) 22deg, var(--m3) 40deg, var(--m4) 90deg, var(--m5) 140deg, var(--m6) 158deg, var(--m7) 180deg, var(--m8) 202deg, var(--m9) 232deg, var(--m10) 292deg, var(--m2) 336deg, var(--m1) 360deg);
	box-shadow:
		inset 0 0 0 calc(.55 * var(--u)) var(--m-filo),
		inset 0 0 0 calc(1.7 * var(--u)) rgba(0, 0, 0, .34),
		inset 0 0 0 calc(2.6 * var(--u)) rgba(255, 255, 255, .1),
		0 calc(34 * var(--u)) calc(64 * var(--u)) calc(-20 * var(--u)) rgba(0, 0, 0, .5),
		0 calc(8 * var(--u)) calc(18 * var(--u)) calc(-4 * var(--u)) rgba(0, 0, 0, .22);
}
/* Il vetro: nero, 9 punti di cornice tutto intorno, lo stesso centro degli angoli. */
.as-iphone__vetro {
	position: absolute;
	inset: calc(7 * var(--u));
	border-radius: calc(71 * var(--u));
	background: #030304;
	box-shadow: 0 0 0 calc(.7 * var(--u)) #0b0c0e, 0 0 0 calc(1.35 * var(--u)) rgba(255, 255, 255, .3), inset 0 0 0 calc(.6 * var(--u)) rgba(255, 255, 255, .07);
}
.as-iphone__schermo {
	--sa-su: calc(62 * var(--u));
	--sa-giu: calc(34 * var(--u));
	--sa-lato: calc(16 * var(--u));
	left: calc(16 * var(--u));
	top: calc(16 * var(--u));
	width: calc(402 * var(--u));
	height: calc(874 * var(--u));
	border-radius: calc(62 * var(--u));
	/* v0.97 (Rami, 04/11: «il mockup dentro l'iPhone esce in alto fuori dall'iPhone, dagli angoli»): in Safari su iPhone un figlio
	   con backdrop-filter (le testate in vetro) sfugge al taglio tondo di overflow: hidden; clip-path taglia anche quelli. */
	clip-path: inset(0 round calc(62 * var(--u)));
}
/* L'isola: 126 × 37 a 14 punti, con la lente della fotocamera frontale nella parte destra. */
.as-iphone__isola { position: absolute; z-index: 31; top: calc(14 * var(--u)); left: 50%; width: calc(126 * var(--u)); height: calc(37 * var(--u)); margin-left: calc(-63 * var(--u)); border-radius: 999px; background: #000; pointer-events: none; }
.as-iphone__isola::after { content: ""; position: absolute; top: 50%; right: calc(12 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5.5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgba(120, 132, 190, .5) 0, rgba(40, 46, 78, .6) 22%, #0a0b10 55%, #050507 100%); box-shadow: 0 0 0 calc(.8 * var(--u)) #0c0d11; }
/* La barra di chiusura: 140 × 5 a 8 punti dal fondo, del colore della barra di stato. */
.as-iphone__home { position: absolute; z-index: 31; left: 50%; bottom: calc(8 * var(--u)); width: calc(140 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-70 * var(--u)); border-radius: 999px; background: rgba(0, 0, 0, .88); pointer-events: none; }
.as-iphone.as-disp--chiaro .as-iphone__home { background: rgba(255, 255, 255, .92); }
/* La barra di stato: l'ora al centro dell'orecchio sinistro, le icone a destra, allineate
   sul centro dell'isola (32,5 punti). */
.as-iphone .as-disp__stato {
	position: absolute;
	z-index: 30;
	top: 0;
	left: 0;
	right: 0;
	height: calc(65 * var(--u));
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(126 * var(--u)) minmax(0, 1fr);
	align-items: center;
	font: 600 calc(17 * var(--u)) / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
	letter-spacing: -.01em;
	color: #000;
	pointer-events: none;
}
.as-iphone.as-disp--chiaro .as-disp__stato { color: #fff; }
.as-iphone .as-disp__ora { grid-column: 1; justify-self: center; padding-left: calc(14 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-iphone .as-disp__icone { grid-column: 3; justify-self: center; display: flex; align-items: center; gap: calc(6 * var(--u)); padding-right: calc(8 * var(--u)); }
.as-iphone .is-campo { width: calc(17.5 * var(--u)); height: calc(11.3 * var(--u)); }
.as-iphone .is-wifi { width: calc(16 * var(--u)); height: calc(11.5 * var(--u)); }
.as-iphone .is-batteria { width: calc(27 * var(--u)); height: calc(12.8 * var(--u)); }
/* I tasti: sporgono di 2,8 punti dal telaio. A sinistra azione e volume, a destra
   l'accensione e Camera Control (a filo, in cristallo scuro). Misure dal disegno vero. */
.as-iphone__tasto { position: absolute; z-index: -1; width: calc(8 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, var(--m5), var(--m2) 40%, var(--m3) 70%, var(--m5)); box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, .35), inset 0 calc(-1.5 * var(--u)) 0 rgba(0, 0, 0, .25); }
.as-iphone__tasto.is-azione, .as-iphone__tasto.is-vol-su, .as-iphone__tasto.is-vol-giu { left: calc(-2.8 * var(--u)); }
.as-iphone__tasto.is-azione { top: calc(178 * var(--u)); height: calc(44 * var(--u)); }
.as-iphone__tasto.is-vol-su { top: calc(262 * var(--u)); height: calc(72 * var(--u)); }
.as-iphone__tasto.is-vol-giu { top: calc(350 * var(--u)); height: calc(72 * var(--u)); }
.as-iphone__tasto.is-laterale { right: calc(-2.8 * var(--u)); top: calc(275 * var(--u)); height: calc(118 * var(--u)); }
.as-iphone__tasto.is-camera { right: calc(-1.4 * var(--u)); top: calc(598 * var(--u)); height: calc(96 * var(--u)); background: linear-gradient(90deg, #2a2c30, #5b5f66 45%, #34363a); }
/* L'ombra a terra: morbida, più stretta del telefono. */
.as-iphone .as-disp__ombra { left: 14%; right: 14%; bottom: calc(-30 * var(--u)); height: calc(40 * var(--u)); background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); }

/* ══ IL MACBOOK ══════════════════════════════════════════════════════════════════════ */
.as-macbook {
	--u: calc(1em * 58.04 / 1512);
	width: 66em;
	/* l'alluminio: argento (di base) */
	--a-alto: #eef0f1; --a1: #d4d6d9; --a2: #c3c5c8; --a3: #aeb0b4; --a4: #8e9094; --a-piede: #232426;
}
.as-macbook.is-nero { --a-alto: #6a6c70; --a1: #3d3e41; --a2: #333437; --a3: #28292b; --a4: #1b1c1e; --a-piede: #0d0d0e; }
/* Il coperchio: 60em × 40,19em. Il bordo di alluminio (1,6 mm) intorno alla cornice nera. */
.as-macbook__coperchio {
	position: relative;
	width: 60em;
	height: 40.19em;
	margin: 0 auto;
	border-radius: 1.75em 1.75em .5em .5em;
	background: linear-gradient(180deg, var(--a-alto) 0, var(--a1) .5em, var(--a2) 55%, var(--a3) 100%);
	box-shadow: inset 0 .05em 0 rgba(255, 255, 255, .55), inset 0 0 0 .04em rgba(0, 0, 0, .25), 0 1.6em 3.2em -1.4em rgba(0, 0, 0, .55);
}
/* La cornice: vetro nero, 3,5 mm ai lati e in alto, un mento più alto in basso. */
.as-macbook__cornice { position: absolute; inset: .31em; border-radius: 1.45em 1.45em .22em .22em; background: #060607; box-shadow: inset 0 0 0 .05em rgba(255, 255, 255, .06); }
.as-macbook__schermo {
	--sa-su: calc(37 * var(--u));
	--sa-giu: 0px;
	--sa-lato: 0px;
	left: .67em;
	top: .67em;
	width: calc(1512 * var(--u));
	height: calc(982 * var(--u));
	border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
	background: var(--sfondo, #1f2126);
}
.as-macbook--menu-pieno .as-macbook__schermo { --sa-su: calc(32 * var(--u)); background: #000; }
/* v0.53: a schermo intero davvero. L'app parte dal bordo alto e la tacca (z 31) le sta sopra: è il
   MacBook di oggi visto com'è, col notch nero sul fondo della pagina. Chi ci mette un'app tiene libera
   la fascia della tacca (196 × 32 punti al centro, --tacca-l/--tacca-r dai bordi) e alta la sua testata
   almeno 32 punti (--sa-tacca). */
.as-macbook--menu-tutto .as-macbook__schermo { --sa-su: 0px; --sa-tacca: calc(32 * var(--u)); --tacca-l: calc(658 * var(--u)); --tacca-r: calc(658 * var(--u)); }
/* Nel MacBook l'app sta già sotto la barra dei menu (le finestre non ci vanno mai sotto). */
.as-macbook .as-disp__app { top: var(--sa-su); }
/* La tacca: 196 × 32 punti, nera come la cornice, con i raccordi concavi in alto e la lente. */
.as-macbook__tacca { position: absolute; z-index: 31; top: 0; left: 50%; width: calc(196 * var(--u)); height: calc(32 * var(--u)); margin-left: calc(-98 * var(--u)); border-radius: 0 0 calc(9 * var(--u)) calc(9 * var(--u)); background: #060607; pointer-events: none; }
.as-macbook__tacca::before, .as-macbook__tacca::after { content: ""; position: absolute; top: 0; width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.as-macbook__tacca::before { left: calc(-6 * var(--u)); background: radial-gradient(circle at 0 100%, transparent calc(5.6 * var(--u)), #060607 calc(6 * var(--u))); }
.as-macbook__tacca::after { right: calc(-6 * var(--u)); background: radial-gradient(circle at 100% 100%, transparent calc(5.6 * var(--u)), #060607 calc(6 * var(--u))); }
.as-macbook__tacca i { position: absolute; left: 50%; top: calc(12 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-3.5 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 36% 34%, rgba(122, 132, 196, .55) 0, rgba(38, 44, 76, .7) 26%, #0a0b10 60%); box-shadow: 0 0 0 calc(1.2 * var(--u)) #0e0f12; }
/* La barra dei menu: 37 punti, testo a 13, l'app in grassetto, a destra batteria, wifi,
   Centro di Controllo, data e ora. Le voci stanno tutte a sinistra della tacca. */
.as-macbook__menu {
	position: absolute;
	z-index: 30;
	top: 0;
	left: 0;
	right: 0;
	height: var(--sa-su);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 calc(16 * var(--u)) 0 calc(20 * var(--u));
	font: 500 calc(13 * var(--u)) / 1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
	color: rgba(0, 0, 0, .86);
	background: rgba(236, 236, 239, .97);
	box-shadow: 0 calc(.5 * var(--u)) 0 rgba(0, 0, 0, .08);
	white-space: nowrap;
	pointer-events: none;
}
.as-macbook--menu-scuro .as-macbook__menu { color: rgba(255, 255, 255, .92); background: #000; box-shadow: none; }
.as-macbook__voci, .as-macbook__destra { display: flex; align-items: center; gap: calc(19 * var(--u)); }
.as-macbook__voci { max-width: calc(620 * var(--u)); overflow: hidden; }
.as-macbook__voci b { font-weight: 700; }
.as-macbook__destra { gap: calc(15 * var(--u)); }
.as-macbook .is-wifi { width: calc(15 * var(--u)); height: calc(11 * var(--u)); }
.as-macbook .is-batteria { width: calc(25 * var(--u)); height: calc(12 * var(--u)); }
.as-macbook .is-centro { width: calc(15 * var(--u)); height: calc(12.5 * var(--u)); }
.as-macbook .as-disp__ora { font-variant-numeric: tabular-nums; }
/* La base vista di fronte: più larga del coperchio (è più vicina), il bordo alto chiaro del
   piano, il labbro con l'incavo per il pollice, i fianchi che girano via, i piedini. */
.as-macbook__base {
	position: relative;
	width: 66em;
	height: 2.3em;
	border-radius: .22em .22em 1.45em 1.45em / .22em .22em 1.1em 1.1em;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, .22)),
		linear-gradient(180deg, var(--a-alto) 0, var(--a1) .3em, var(--a2) .42em, var(--a2) 45%, var(--a3) 78%, var(--a4) 100%);
	box-shadow: inset 0 .04em 0 rgba(255, 255, 255, .7), inset 0 -.08em .1em rgba(0, 0, 0, .18);
}
.as-macbook__base::before { content: ""; position: absolute; left: 1.2em; right: 1.2em; top: .36em; height: .04em; background: rgba(0, 0, 0, .12); }
.as-macbook__incavo { position: absolute; top: 0; left: 50%; width: 9.6em; height: .5em; margin-left: -4.8em; border-radius: 0 0 1.1em 1.1em / 0 0 .5em .5em; background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .1) 55%, rgba(255, 255, 255, .22)); box-shadow: inset 0 .05em .08em rgba(0, 0, 0, .25), 0 .03em 0 rgba(255, 255, 255, .35); }
.as-macbook__piede { position: absolute; bottom: -.24em; z-index: -1; width: 3em; height: .4em; border-radius: 0 0 .35em .35em; background: var(--a-piede); }
.as-macbook__piede.is-sx { left: 9%; }
.as-macbook__piede.is-dx { right: 9%; }
.as-macbook .as-disp__ombra { left: -3%; right: -3%; bottom: -1.9em; height: 3.2em; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }