/* ==========================================================================
   Hashimi Configurator — preview.css
   Anteprima live del prodotto (preview.js) e illustrazioni delle card.
   Solo token del tema con fallback. L'impaginazione (colonna, sticky, mobile)
   sta in app.css: qui c'è il componente.
   ========================================================================== */

.hxp {
	--hxp-gold: var(--gold, #f5b81c);
	--hxp-line: var(--line, #2a2a2a);
	--hxp-line2: var(--line-2, #383838);
	--hxp-text: var(--text, #ece8e1);
	--hxp-muted: var(--muted, #9c968e);
	--hxp-dim: var(--dim, #6f6a63);
	--hxp-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
	display: grid;
	gap: 12px;
	min-width: 0;
}

.hxp *,
.hxp *::before,
.hxp *::after {
	box-sizing: border-box;
}

.hxp__view {
	position: relative;
	min-width: 0;
}

/* palco: sfondo scuro con luce morbida al centro, come uno studio fotografico */
.hxp__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid var(--hxp-line);
	border-radius: var(--radius-sm, 12px);
	background:
		radial-gradient(62% 56% at 50% 44%, #2c2c2c 0%, #1c1c1c 58%, #141414 100%);
}

@supports not (aspect-ratio: 1 / 1) {
	.hxp__stage {
		height: 0;
		padding-bottom: 100%;
	}
}

.hxp__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .34s var(--hxp-ease);
}

.hxp__layer.is-in {
	opacity: 1;
}

.hxp__layer > svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Fronte / Retro */
.hxp__sides {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--hxp-line2);
	border-radius: 999px;
	background: rgba(15, 15, 15, .8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.hxp__side {
	min-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hxp-muted);
	font: 700 11px/1 var(--f-mono, "Space Mono", ui-monospace, monospace);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.hxp__side:hover {
	color: var(--hxp-text);
}

.hxp__side[aria-pressed="true"] {
	background: var(--hxp-gold);
	color: #140d02;
}

.hxp__side:focus-visible {
	outline: 2px solid var(--hxp-gold);
	outline-offset: 2px;
}

/* didascalia */
.hxp__info {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.hxp__name {
	margin: 0;
	font: 400 24px/1.05 var(--f-goth, "Pirata One", serif);
	color: var(--hxp-text);
	overflow-wrap: anywhere;
}

.hxp__meta {
	margin: 0;
	font: 700 12px/1.45 var(--f-mono, "Space Mono", ui-monospace, monospace);
	letter-spacing: .04em;
	color: var(--hxp-gold);
	overflow-wrap: anywhere;
}

.hxp__meta:empty {
	display: none;
}

.hxp__cap {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--hxp-dim);
}

/* ---------- dentro l'SVG ---------- */
.hxp-goth {
	font-family: var(--f-goth, "Pirata One", serif);
}

.hxp-mono {
	font-family: var(--f-mono, "Space Mono", ui-monospace, monospace);
}

/* aiuti per lo step corrente: misure (1), materiale (2), pezzi (3), area di stampa (4) */
.hxp-svg .hxp-dims,
.hxp-svg .hxp-area,
.hxp-svg .hxp-hl,
.hxp-svg .hxp-stack,
.hxp-svg .hxp-sweepwrap {
	opacity: 0;
	transition: opacity .4s var(--hxp-ease);
}

.hxp[data-step="1"] .hxp-dims {
	opacity: 1;
}

.hxp[data-step="2"] .hxp-hl {
	opacity: .5;
}

.hxp[data-step="2"] .hxp-sweepwrap {
	opacity: 1;
}

.hxp[data-step="2"] .hxp-sweep {
	animation: hxp-sweep 3.4s var(--hxp-ease) infinite;
}

.hxp[data-step="3"] .hxp-stack {
	opacity: 1;
}

.hxp[data-step="4"] .hxp-area {
	opacity: 1;
	animation: hxp-dash 1.4s linear infinite;
}

/* impulso sulla parte che è appena cambiata */
.hxp-svg .hxp-p-logo,
.hxp-svg .hxp-p-closure,
.hxp-svg .hxp-p-cap {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.hxp__layer[data-pulse~="logo"] .hxp-p-logo,
.hxp__layer[data-pulse~="closure"] .hxp-p-closure,
.hxp__layer[data-pulse~="cap"] .hxp-p-cap {
	animation: hxp-pop .7s var(--hxp-ease);
}

.hxp__layer[data-pulse~="body"] .hxp-flash {
	animation: hxp-flash .9s ease-out;
}

@keyframes hxp-pop {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.06);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes hxp-flash {
	0% {
		opacity: 0;
	}

	30% {
		opacity: .2;
	}

	100% {
		opacity: 0;
	}
}

@keyframes hxp-sweep {
	0% {
		transform: translateX(0);
	}

	60%,
	100% {
		transform: translateX(640px);
	}
}

@keyframes hxp-dash {
	to {
		stroke-dashoffset: -22;
	}
}

/* ---------- illustrazioni delle card (swatch) ---------- */
.hxs {
	display: block;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.hxp__layer {
		transition: none;
	}

	.hxp *,
	.hxs * {
		animation: none !important;
	}
}