/* Ogni stile vive nel suo "ambiente": il fondo fa parte del bottone, perché
   luci e riflessi hanno senso solo sul fondo giusto. */
.stage {
	min-height: 15rem;
}
.demo__lead code {
	padding: 0.1rem 0.4rem;
	background: var(--surface);
	border-radius: 4px;
	font-size: 0.85em;
}

/* ---------- Orbe luminoso ---------- */
.stage--orb {
	background: #0b0f19;
	border-color: #1a2133;
}
.orbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
}
.orb-wrap {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms var(--ease-out),
		transform 700ms var(--ease-out);

	@starting-style {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.92);
	}
}
.orb-wrap:nth-child(2) { transition-delay: 120ms; }
.orb-wrap:nth-child(3) { transition-delay: 240ms; }

.orb {
	--glow: 52 142 150;
	position: relative;
	display: grid;
	place-items: center;
	width: 5rem;
	height: 5rem;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: radial-gradient(circle, rgb(0 0 0 / 0.1) 0%, rgb(var(--glow) / 0.08) 50%, rgb(var(--glow) / 0.35) 100%);
	box-shadow:
		inset 0 0 25px 2px rgb(var(--glow) / 0.35),
		inset 0 0 8px 1px rgb(var(--glow) / 0.6),
		0 0 35px 2px rgb(var(--glow) / 0.25);
	transition:
		transform 400ms var(--ease-out),
		box-shadow 400ms var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.orb--teal { --glow: 52 142 150; }
.orb--silver { --glow: 180 195 210; }
.orb--mauve { --glow: 188 108 148; }
.orb::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, rgb(255 255 255 / 0.25) 0%, transparent 40%, rgb(0 0 0 / 0.5) 100%);
	box-shadow: inset 1px 2px 4px rgb(255 255 255 / 0.4);
	pointer-events: none;
}
.orb::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.3), transparent);
	transform: skewX(-25deg);
	pointer-events: none;
}
.orb svg {
	position: relative;
	z-index: 1;
	width: 2.125rem;
	height: 2.125rem;
	fill: none;
	stroke: #fff;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 3px rgb(255 255 255 / 0.3));
	transition: transform 600ms var(--ease-out);
}
.orb--mauve svg path {
	stroke-dasharray: 40;
}
.orb:active {
	transform: scale(0.92);
	box-shadow:
		inset 0 0 35px 5px rgb(var(--glow) / 0.8),
		inset 0 0 15px 4px rgb(255 255 255 / 0.7),
		0 0 30px 5px rgb(var(--glow) / 0.4);
}
.orb-label {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.9);
	opacity: 0;
	filter: blur(6px);
	transform: translateY(-0.4rem);
	transition:
		opacity 500ms var(--ease-out),
		filter 500ms var(--ease-out),
		transform 500ms var(--ease-out);
}
/* Dove non c'è hover (telefono) l'etichetta resta visibile. */
@media (hover: none) {
	.orb-label {
		opacity: 0.8;
		filter: none;
		transform: none;
	}
}
@keyframes sweep {
	to {
		left: 200%;
	}
}
@keyframes fly {
	40% { transform: translate(1.25rem, -1.25rem); opacity: 0; }
	41% { transform: translate(-1.25rem, 1.25rem); opacity: 0; }
	to { transform: translate(0.2rem, -0.2rem); opacity: 1; }
}
@keyframes draw {
	from { stroke-dashoffset: 40; }
	to { stroke-dashoffset: 0; }
}
@media (hover: hover) and (pointer: fine) {
	.orb-wrap:hover .orb,
	.orb-wrap:focus-within .orb { transform: scale(1.06); box-shadow:
		inset 0 0 30px 4px rgb(var(--glow) / 0.45),
		inset 0 0 12px 2px rgb(var(--glow) / 0.7),
		0 0 50px 8px rgb(var(--glow) / 0.35); }
	.orb-wrap:hover .orb::after,
	.orb-wrap:focus-within .orb::after { animation: sweep 800ms ease-out forwards; }
	.orb-wrap:hover .orb-label,
	.orb-wrap:focus-within .orb-label { opacity: 1; filter: none; transform: none; }
	.orb-wrap:hover .orb--teal svg,
	.orb-wrap:focus-within .orb--teal svg { transform: scale(1.15) rotate(180deg); }
	.orb-wrap:hover .orb--silver svg,
	.orb-wrap:focus-within .orb--silver svg { animation: fly 600ms var(--ease-out) forwards; }
	.orb-wrap:hover .orb--mauve svg,
	.orb-wrap:focus-within .orb--mauve svg { transform: scale(1.25); }
	.orb-wrap:hover .orb--mauve svg path,
	.orb-wrap:focus-within .orb--mauve svg path { animation: draw 600ms var(--ease-out) forwards; }
}

/* ---------- Vetro e neon ---------- */
.stage--neon {
	background: linear-gradient(to bottom, #5d326c, #350048);
	border-color: #4a2a5a;
}
.neons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}
.neon {
	position: relative;
	width: 15.5rem;
	height: 3.1rem;
}
.neon button {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 0.6rem;
	overflow: hidden;
	font: inherit;
	letter-spacing: 0.06em;
	color: #fff;
	cursor: pointer;
	background: rgb(255 255 255 / 0.05);
	border: 0;
	border-block: 1px solid rgb(255 255 255 / 0.1);
	border-radius: 2rem;
	box-shadow: 0 1rem 1rem rgb(0 0 0 / 0.3);
	backdrop-filter: blur(15px);
	transition: letter-spacing 500ms var(--ease-out);
}
.neon button::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	background: linear-gradient(to left, rgb(255 255 255 / 0.15), transparent);
	transform: skewX(45deg);
	transition: transform 500ms var(--ease-out);
}
/* Le due barre di luce sopra e sotto: a riposo sono piccole pillole, al
   hover si allargano fino a riempire mezza altezza. */
.neon::before,
.neon::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 1.9rem;
	height: 0.6rem;
	background: var(--neon);
	border-radius: 0.6rem;
	box-shadow:
		0 0 5px var(--neon),
		0 0 15px var(--neon),
		0 0 30px var(--neon),
		0 0 60px var(--neon);
	transform: translateX(-50%);
	transition:
		width 500ms var(--ease-out) 150ms,
		height 500ms var(--ease-out) 150ms,
		top 500ms var(--ease-out) 150ms,
		bottom 500ms var(--ease-out) 150ms,
		border-radius 500ms var(--ease-out) 150ms;
}
.neon::before { bottom: -0.3rem; }
.neon::after { top: -0.3rem; }
@media (hover: hover) and (pointer: fine) {
	.neon:hover button,
	.neon:focus-within button { letter-spacing: 0.18em; }
	.neon:hover button::before,
	.neon:focus-within button::before { transform: skewX(45deg) translateX(12rem); }
	.neon:hover::before,
	.neon:focus-within::before { bottom: 0; height: 50%; width: 80%; border-radius: 2rem; }
	.neon:hover::after,
	.neon:focus-within::after { top: 0; height: 50%; width: 80%; border-radius: 2rem; }
}
.neon button:active {
	transform: scale(0.97);
}

/* ---------- Steampunk ---------- */
.stage--brass {
	background: #141312;
	border-color: #26231f;
}
.brass {
	--bronze-dark: #2b2927;
	--bronze-mid: #63431f;
	--bronze-light: #856233;
	--bronze-hi: #fce3a1;
	--glass-deep: #281d08;
	--glass-bright: #544212;
	--amber: #ffc95e;
	--amber-glow: #fa9a6a;
	position: relative;
	width: 7rem;
	height: 7rem;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 1.4rem;
	box-shadow:
		0 15px 25px rgb(0 0 0 / 0.8),
		0 5px 10px rgb(0 0 0 / 0.5),
		inset 0 1px 1px rgb(255 255 255 / 0.2);
	transition:
		transform 150ms var(--ease-out),
		box-shadow 150ms ease;
	-webkit-tap-highlight-color: transparent;
}
.brass__frame {
	display: grid;
	width: 100%;
	height: 100%;
	padding: 0.4rem;
	border-radius: 1.4rem;
	background: linear-gradient(135deg, var(--bronze-hi) 0%, var(--bronze-light) 20%, var(--bronze-mid) 45%, var(--bronze-dark) 70%, var(--bronze-light) 100%);
	box-shadow:
		inset 0 2px 3px rgb(255 255 255 / 0.6),
		inset 0 -3px 5px rgb(0 0 0 / 0.8),
		inset 2px 2px 4px var(--bronze-hi),
		inset -2px -2px 4px #000;
}
.brass__glass {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 0.9rem;
	background: radial-gradient(circle, var(--glass-bright) 0%, var(--glass-deep) 85%);
	box-shadow:
		inset 0 0 8px rgb(0 0 0 / 0.9),
		inset 0 0 15px rgb(0 0 0 / 0.7);
	transition: background 100ms ease, box-shadow 100ms ease;
}
.brass__mesh {
	position: absolute;
	inset: 0;
	opacity: 0.25;
	background-image:
		radial-gradient(var(--bronze-light) 0.5px, transparent 0.5px),
		linear-gradient(45deg, transparent 49%, #000 50%, transparent 51%);
	background-size: 0.5rem 0.5rem, 0.375rem 0.375rem;
	mix-blend-mode: overlay;
}
.brass__glow {
	position: absolute;
	width: 4.4rem;
	height: 4.4rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--amber) 0%, var(--amber-glow) 40%, transparent 75%);
	opacity: 0.6;
	filter: blur(6px);
	mix-blend-mode: color-dodge;
	transition:
		opacity 300ms ease,
		transform 300ms var(--ease-out),
		filter 300ms ease;
}
.brass__shine {
	position: absolute;
	inset: 0;
	border-radius: 0.9rem;
	pointer-events: none;
}
.brass__shine::before {
	content: '';
	position: absolute;
	inset: 3px 6px auto;
	height: 40%;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.4) 0%, rgb(255 255 255 / 0.05) 80%, transparent 100%);
	border-radius: 10px 10px 80% 80% / 8px 8px 15px 15px;
}
.brass__mark {
	position: relative;
	z-index: 2;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3rem;
	line-height: 1;
	background: linear-gradient(180deg, #fff 0%, var(--bronze-hi) 50%, var(--bronze-mid) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.8));
	user-select: none;
}
@keyframes amber-pulse {
	0%, 100% { opacity: 0.5; transform: scale(1); filter: blur(6px); }
	50% { opacity: 0.9; transform: scale(1.12); filter: blur(4px); }
}
@media (hover: hover) and (pointer: fine) {
	.brass:hover {
		transform: translateY(-2px);
		box-shadow: 0 20px 30px rgb(0 0 0 / 0.85), 0 0 15px rgb(255 170 0 / 0.3);
	}
	.brass:hover .brass__glow {
		opacity: 0.95;
		transform: scale(1.15);
		filter: blur(4px);
		animation: amber-pulse 1s ease-in-out infinite;
	}
}
.brass:active {
	transform: translateY(1px);
	box-shadow:
		0 5px 10px rgb(0 0 0 / 0.9),
		inset 0 2px 5px rgb(0 0 0 / 0.8),
		0 0 35px rgb(252 153 15 / 0.47),
		0 0 85px rgb(252 153 15 / 0.29);
}
.brass:active .brass__glow {
	animation: none;
	opacity: 0.9;
	transform: scale(1.3);
	filter: blur(15px);
	background: radial-gradient(circle, #fff 0%, var(--amber) 30%, var(--amber-glow) 60%, transparent 80%);
}
.brass:active .brass__glass {
	background: radial-gradient(circle, var(--glass-bright) 0%, #4a3b10 60%, var(--glass-deep) 100%);
	box-shadow: inset 0 0 10px #000, inset 0 0 20px rgb(250 154 106 / 0.2);
}

/* ---------- Riquadro vettoriale ---------- */
.stage--box {
	background: #f0f4f8;
	border-color: #dbe3ec;
}
.box {
	--point: 0.5rem;
	--line: rgb(0 0 0 / 0.1);
	--speed: 1s;
	position: relative;
	display: grid;
	place-items: center;
	min-width: 17rem;
	min-height: 3rem;
	margin: 1.5rem 0 2.5rem;
	padding: 1.5rem 5rem;
	user-select: none;
}
.box__btn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	background: none;
	border: 0;
	filter: drop-shadow(0 6px 2px rgb(0 0 0 / 0.2)) drop-shadow(0 14px 4px rgb(0 0 0 / 0.2)) drop-shadow(0 32px 8px rgb(0 0 0 / 0.15));
}
.box__frame {
	position: absolute;
	inset: 0;
	background: rgb(181 250 255 / 0.2);
	border: 1px solid var(--line);
	box-shadow: inset 0 1px 4px 1px rgb(255 255 255 / 0.33);
	animation: frame-half calc(var(--speed) * 0.5) var(--ease-out) forwards;
}
.pt {
	position: absolute;
	box-sizing: border-box;
	width: var(--point);
	aspect-ratio: 1;
	background-color: #fff;
	background-image: radial-gradient(circle at 50% 120%, rgb(0 0 0 / 0.3), #fff);
	border: 1px solid var(--line);
	border-radius: 25%;
}
.pt--tl { top: calc(var(--point) / -2); left: calc(var(--point) / -2); }
.pt--tr { top: calc(var(--point) / -2); right: calc(var(--point) / -2); }
.pt--bl { bottom: calc(var(--point) / -2); left: calc(var(--point) / -2); }
.pt--br { bottom: calc(var(--point) / -2); right: calc(var(--point) / -2); }

.box__text {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: clip;
	white-space: nowrap;
}
.box__line {
	position: absolute;
	padding: 1rem 2rem;
	font-weight: 500;
	font-size: 1.15rem;
	color: #283a3b;
	text-shadow: 0 -1px 1px rgb(255 255 255 / 0.4), 0 2px 1px rgb(0 0 0 / 0.08), 0 4px 2px rgb(0 0 0 / 0.08);
	transition: opacity calc(var(--speed) * 0.5) ease;
}
.box__line:last-child {
	opacity: 0;
}
@keyframes frame-half {
	from { inset: 0 50%; }
	to { inset: 0 0; }
}
@keyframes frame {
	50% { inset: 0 50%; }
}
.box__hint {
	position: absolute;
	inset: auto 0 -2rem;
	text-align: center;
	font-size: 0.78rem;
	font-style: italic;
	color: rgb(0 0 0 / 0.62);
	transition: opacity calc(var(--speed) * 0.5) ease;
}
.box__hint[data-hint='hover'],
.box__hint[data-hint='done'] {
	opacity: 0;
}
.box__hint[data-hint='done'] {
	font-style: normal;
	font-weight: 600;
	color: #1f7a3a;
}
.box.is-copied .box__hint[data-hint='done'] {
	opacity: 1;
}
.box.is-copied .box__hint[data-hint='hover'],
.box.is-copied .box__hint[data-hint='idle'] {
	opacity: 0;
}
.box.is-open .box__line:first-child { opacity: 0; }
.box.is-open .box__line:last-child { opacity: 1; }
.box.is-open .box__frame { animation: frame var(--speed) var(--ease-in-out); }
.box.is-open .box__hint[data-hint='idle'] { opacity: 0; }
.box.is-open:not(.is-copied) .box__hint[data-hint='hover'] { opacity: 1; }
.box__btn:active .box__text {
	filter: contrast(1.4) brightness(1.2);
}

/* ---------- Far west ---------- */
.stage--west {
	background:
		radial-gradient(circle at center, transparent 25%, rgb(0 0 0 / 0.2) 50%, rgb(0 0 0 / 0.55) 100%),
		linear-gradient(rgb(139 69 19 / 0.1) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
		linear-gradient(90deg, rgb(139 69 19 / 0.1) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
		linear-gradient(rgb(139 69 19 / 0.2) 2px, transparent 2px) 0 0 / 6.25rem 6.25rem,
		linear-gradient(90deg, rgb(139 69 19 / 0.2) 2px, transparent 2px) 0 0 / 6.25rem 6.25rem,
		#d2b48c;
	border-color: #a98b63;
}
.west {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.9rem;
	overflow: hidden;
	font: inherit;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f1dabb;
	cursor: pointer;
	background: linear-gradient(45deg, #8b4513, #a0522d);
	border: 0;
	border-radius: 0.65rem;
	box-shadow: 0 10px 20px rgb(0 0 0 / 0.3), inset 0 -5px 10px rgb(0 0 0 / 0.2);
	transition:
		transform 300ms var(--ease-out),
		box-shadow 300ms var(--ease-out);
}
.west svg {
	width: 1.9rem;
	height: 1.9rem;
	transition: transform 400ms var(--ease-out);
}
.west::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent) 200% 50% / 200% 100%;
	animation: shine 3s linear infinite;
	pointer-events: none;
}
@keyframes shine {
	to {
		background-position: -200% 50%;
	}
}
@media (hover: hover) and (pointer: fine) {
	.west:hover {
		transform: translateY(-0.3rem) scale(1.05);
		box-shadow: 0 15px 30px rgb(0 0 0 / 0.4), inset 0 -5px 10px rgb(0 0 0 / 0.2);
	}
	.west:hover svg {
		transform: rotate(360deg) scale(1.2);
	}
}
.west:active {
	transform: translateY(0.1rem) scale(0.96);
	box-shadow: 0 5px 10px rgb(0 0 0 / 0.3), inset 0 -3px 5px rgb(0 0 0 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.west::after {
		display: none;
	}
}