/*
 * Render 3D delle schede device ([tqg_device_render], assets/js/device-render.js).
 * Le dimensioni e i margini negativi del visore restano quelli del CSS di
 * Breakdance: qui solo ciò che serve a immagine statica e caricamento ritardato.
 */

/*
 * model-viewer è un custom element: finché la libreria non è caricata il
 * browser lo tratta come un elemento in linea sconosciuto e ignora width e
 * height. Il riquadro nasceva alto 0 e si apriva a 60vh all'arrivo della
 * libreria, spingendo giù la sezione: era tutto il CLS della scheda (0,62).
 * Vale per ogni model-viewer, anche quello ancora scritto a mano nel Code Block.
 */
model-viewer {
	display: block;
}

/*
 * Il CSS di Breakdance tiene il visore invisibile (opacity 0) fino a
 * .is-loaded. Con l'immagine statica davanti non serve più: deve vedersi
 * subito, ed è model-viewer a dissolverla quando il 3D è pronto.
 */
model-viewer.tqg-render {
	position: relative;
	overflow: hidden;
	opacity: 1;
	transform: none;
	container-type: size;
}

/*
 * L'immagine è un render del modello con la stessa telecamera, fatto su un
 * riquadro 4:5, e deve cadere esattamente dove comparirà il 3D. model-viewer
 * applica l'angolo di campo al lato più corto del riquadro: sui riquadri
 * verticali (desktop 30vw × 60vh, telefono 80vw × 60vh) comanda la larghezza,
 * su quelli orizzontali (tablet, 50vw × 60vh) l'altezza. L'immagine fa lo
 * stesso: larga quanto il lato corto (100cqmin), centrata, e ciò che avanza
 * — solo sfondo trasparente — esce dal riquadro. Verificato a 1440, 1024 e
 * 412 px: il passaggio al 3D non cambia né scala né posizione.
 */
model-viewer.tqg-render > .tqg-render__poster {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100cqmin;
	max-width: none;
	height: auto;
	transform: translate( -50%, -50% );
}