/*
 * Servizi Starter - hero "orbita 2.5D".
 *
 * Caricato solo dove il blocco servizi-starter/hero-orbit e presente
 * (dichiarato in blocks/hero-orbit/block.json).
 *
 * Il CSS definisce da solo una posa statica gradevole delle sei icone: e
 * quella che si vede nell'editor, con prefers-reduced-motion attivo o se il
 * JS non parte. Il JS si limita a sovrascrivere left/top/transform frame per
 * frame, senza toccare il layout.
 */

/* -------------------------------------------------------------------------
 * 1. Palcoscenico
 * ---------------------------------------------------------------------- */

.hero-orbit__stage {
	position: relative;
	width: min(100%, 640px);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	/* Alone morbido dietro la postazione: da theme.json, non un colore crudo. */
	background:
		radial-gradient(
			closest-side circle at 50% 52%,
			color-mix(in srgb, var(--wp--preset--color--primary, #2563eb) 22%, transparent),
			transparent 70%
		);
	isolation: isolate;
}

/* -------------------------------------------------------------------------
 * 2. Layer
 * ---------------------------------------------------------------------- */

.hero-orbit__center,
.hero-orbit__icon {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.hero-orbit__center {
	left: 50%;
	top: 52%;
	width: 52%;
	transform: translate(-50%, -50%);
	z-index: 100;
}

/*
 * I sette PNG hanno proporzioni diverse (dal quasi quadrato al verticale):
 * un box quadrato con object-fit: contain le normalizza, cosi a scala 1 tutte
 * pesano visivamente allo stesso modo.
 */
.hero-orbit__icon {
	width: 22%;
	height: 22%;
	object-fit: contain;
	transform: translate(-50%, -50%) scale(var(--hero-orbit-scale, 1));
	opacity: var(--hero-orbit-opacity, 1);
	z-index: var(--hero-orbit-z, 40);
	will-change: transform, opacity;
}

/* -------------------------------------------------------------------------
 * 3. Posa statica (editor, reduced motion, no-JS)
 *
 * Sei icone equispaziate sull'ellisse rx 40% / ry 22% attorno al centro
 * (50%, 52%), con scala e opacita coerenti con la profondita 2.5D. La posa e
 * ruotata di 30 gradi rispetto all'asse verticale: cosi nessuna icona finisce
 * nascosta dietro al monitor della postazione.
 * ---------------------------------------------------------------------- */

.hero-orbit__icon[data-i="0"] { left: 70.00%; top: 32.95%; --hero-orbit-scale: 0.753; --hero-orbit-opacity: 0.580; --hero-orbit-z: 40; }
.hero-orbit__icon[data-i="1"] { left: 90.00%; top: 52.00%; --hero-orbit-scale: 0.970; --hero-orbit-opacity: 0.775; --hero-orbit-z: 40; }
.hero-orbit__icon[data-i="2"] { left: 70.00%; top: 71.05%; --hero-orbit-scale: 1.187; --hero-orbit-opacity: 0.970; --hero-orbit-z: 150; }
.hero-orbit__icon[data-i="3"] { left: 30.00%; top: 71.05%; --hero-orbit-scale: 1.187; --hero-orbit-opacity: 0.970; --hero-orbit-z: 150; }
.hero-orbit__icon[data-i="4"] { left: 10.00%; top: 52.00%; --hero-orbit-scale: 0.970; --hero-orbit-opacity: 0.775; --hero-orbit-z: 40; }
.hero-orbit__icon[data-i="5"] { left: 30.00%; top: 32.95%; --hero-orbit-scale: 0.753; --hero-orbit-opacity: 0.580; --hero-orbit-z: 40; }

/*
 * Quando il JS prende il controllo, left/top vengono riportati al centro
 * dell'ellisse via stile inline: da li in poi il posizionamento vive tutto
 * nella transform. La classe segnala solo lo stato.
 */

/* -------------------------------------------------------------------------
 * 4. Hero: colonne e ordine su mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* Su mobile l'illustrazione va sopra il testo. */
	.ss-hero--orbit .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column-reverse;
	}

	.hero-orbit__stage {
		width: min(86vw, 460px);
	}
}

/* -------------------------------------------------------------------------
 * 5. Movimento ridotto
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.hero-orbit__icon {
		transition: none;
		will-change: auto;
	}
}