/*
 * Studio Arfia · contatti.css · v0.2.0 · 26/09/2026
 * /contatti/ + /grazie/ (stesso enqueue).
 * v0.24: /contatti/ è il componente Conosciamoci a schermo intero (in
 * base.css, lo condivide con la home): qui resta solo quello che è suo.
 */

/* Su uno schermo basso il form a passi non deve finire sotto l'header: la
   sezione cresce invece di centrare un contenuto più alto di lei. */
.as-conosciamoci--pagina { align-items: flex-start; }
@media (min-height: 760px) {
	.as-conosciamoci--pagina { align-items: center; }
}
/* v0.38 (29/09, revisione del portatile): finita la recita la pagina scende
   DA SOLA con la cima della sezione in cima allo schermo ('top top'); a
   1280×720 il padding era 43px e, appena l'header tornava giù (basta un filo
   di scroll in su), la riga «1 / 3 · Chi sei» e le tacche finivano sotto la
   pillola della barra e sotto suono e menu. Il margine sopra ora tiene conto
   dell'header: il titolo e i passi partono sempre sotto la barra. A 1440×900
   (contenuto centrato) il blocco scende di 26px, dentro un vuoto di 250. */
@media (min-width: 700px) {
	.as-conosciamoci--pagina { padding-top: calc(var(--as-header-h) + var(--as-sp-5)); }
}

/* ── IL BENVENUTO DEL ROBOT (v0.28: era la sequenza device in fondo alla
   home; Rami: «spostiamolo nella hero di contatti»). La base è identica;
   in fondo le varianti --hero (palco già a schermo intero). ── */
.as-device { min-height: 100svh; }
.as-device__palco {
	position: relative;
	height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: clip;
}
/* Il palco della scena: NIENTE cornice-device (Rami, 17/08: «leva quel
   bordo stile iPad») — nessun bezel, nessun filo, nessun padding. Resta
   un campo carbone puro che lo scrub porta a schermo intero; il robot
   ci fluttua dentro senza chrome. */
.as-device__corpo {
	--as-r-out: calc(24px * var(--as-brm));
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: min(72vw, 960px);
	aspect-ratio: 16 / 10;
	border-radius: var(--as-r-out);
	will-change: width, height, border-radius;
}
@supports (corner-shape: squircle) { .as-device__corpo { corner-shape: squircle; } }
.as-device__schermo {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--as-r-out);
	background: var(--as-carbone);
}
@supports (corner-shape: squircle) { .as-device__schermo { corner-shape: squircle; } }
/* La scena 3D dentro lo schermo. */
.as-device__scena, .as-device__scena canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
/* Il claim appare a schermo pieno (autoAlpha via scrub). */
.as-device__claim {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--as-bianco);
	padding-inline: var(--as-gutter);
	pointer-events: none;
	z-index: 3;
	opacity: 0; /* stato scenografico: lo governa SOLO lo scrub (che è
	               autocorreggente); senza JS il claim non serve — c'è il
	               device fermo col sito dentro, completo e sensato */
}
.as-device__sotto {
	position: absolute;
	left: var(--as-gutter); right: var(--as-gutter); bottom: var(--as-sp-6);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-sp-4);
	color: var(--as-bianco);
	z-index: 2;
}
.as-device__label { font-size: var(--as-type-meta); letter-spacing: .04em; color: var(--as-grigio-testo-inv); }
.as-device__sotto .as-tlink { color: var(--as-bianco); }

/* ── Da telefono e su touch: la sequenza è STATICA (v0.22) ─────────────
   Niente pin, niente cinema, niente approdo (Rami, 25/09: «da mobile è
   orrendo», «sminchia il layout»). Il palco è una card squircle 4:5 col
   protagonista in posa, claim ed etichetta sotto, nel flusso normale. */
.as-device--statico { min-height: auto; padding-block: var(--as-sect); }
.as-device--statico .as-device__palco {
	height: auto;
	display: block;
	padding-inline: var(--as-gutter);
	overflow: visible;
}
.as-device--statico .as-device__corpo {
	position: relative;
	left: auto; top: auto;
	transform: none;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 4 / 5;
	margin-inline: auto;
	will-change: auto;
}
.as-device--statico .as-device__claim {
	position: static;
	opacity: 1;
	display: block;
	text-align: left;
	padding-inline: 0;
	margin-top: var(--as-sp-6);
	max-width: 560px;
	margin-inline: auto;
}
.as-device--statico .as-device__sotto {
	position: static;
	margin-top: var(--as-sp-4);
	max-width: 560px;
	margin-inline: auto;
	flex-wrap: wrap;
}

/* Durante il cinema lo header si fa da parte (lo scroll è del film). */
html.as-cinema .as-header { transform: translateY(-110%); }

/* ── La variante HERO: niente crescita, il corpo È lo schermo intero. ── */
/* Prima sezione della pagina: niente padding per l'header (il palco è suo);
   stessa forma di selettore della finestra (Errori §1.33) per vincere sulla
   regola della prima sezione. Il ramo statico da touch il padding lo tiene. */
.as-main > section.as-device.as-device--hero:first-child { padding-top: 0; }
.as-main > section.as-device--hero.as-device--statico:first-child { padding-top: var(--as-sect); }
.as-device--hero .as-device__corpo {
	left: 0;
	top: 0;
	transform: none;
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.as-device--hero .as-device__schermo { border-radius: 0; }

/* ── IL BENVENUTO DA TELEFONO E SU TOUCH (v0.38, 29/09, DIREZIONE-MOBILE) ──
   Prima: una card 4:5 da 342×427, carbone su carbone (cioè invisibile), 118px
   di padding sopra e sotto, 250px di nero tra i piedi del robot e il titolo;
   «Conosciamoci.» compariva sul bordo in basso dello schermo e il form dal
   secondo. Ora il robot è un COMPAGNO, non la scena: un palco piccolo e
   visibile (una tessera squircle un tono sopra il carbone, con una luce
   morbida da studio dietro la figura, niente ombra a terra: bocciata da Rami
   il 17/08), largo quanto la colonna del titolo e basso (10:7, ~240px a 390),
   subito sotto la barra. Il titolo arriva a metà del primo schermo e la lede
   subito dopo. La posa resta quella ferma col respiro (decisione di Rami). */
.as-main > section.as-device--hero.as-device--statico:first-child {
	padding-top: calc(var(--as-header-h) + var(--as-sp-5));
	padding-bottom: 0;
}
.as-device--hero.as-device--statico .as-device__palco { padding-inline: var(--as-gutter); }
.as-device--hero.as-device--statico .as-device__corpo {
	--as-r-out: calc(28px * var(--as-brm));
	width: 100%;
	max-width: 560px;
	height: auto;
	aspect-ratio: 10 / 7;
	margin-inline: 0;
	border-radius: var(--as-r-out);
	overflow: hidden;
	background:
		radial-gradient(58% 62% at 50% 46%, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, 0) 80%),
		var(--as-superficie-c);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.as-device--hero.as-device--statico .as-device__schermo {
	border-radius: inherit;
	background: transparent;
}
/* Sul tablet e sui portatili touch la colonna è larga: il palco resta a
   sinistra col titolo, alto al massimo 380px. */
@media (min-width: 700px) {
	.as-main > section.as-device--hero.as-device--statico:first-child { padding-top: calc(var(--as-header-h) + var(--as-sp-6)); }
	.as-device--hero.as-device--statico .as-device__palco { max-width: var(--as-container, 1440px); margin-inline: auto; }
	.as-device--hero.as-device--statico .as-device__corpo { max-width: 540px; }
}
/* La sezione del form, subito sotto il palco: niente secondo ritmo di sezione
   (erano altri 76px di nero): 48px separano il palco dal titolo. */
@media (max-width: 699px) {
	.as-device--statico + .as-conosciamoci--pagina { padding-top: var(--as-sp-7); }
}