/* ——— Campanella con lampada ———
   Tutta la scena è in em: una sola misura (font-size di .bell-rig) la fa crescere
   o rimpicciolire. 80em = il lato della campanella. */
.bell-scene {
	container-type: size;
	height: 34rem;
	padding: 0;
	background: #000;
	border-color: #1f1f1f;
}
.bell-rig {
	--base-clr: #b7b5b4;
	--degofrot: 1.2;
	position: absolute;
	inset: 0 0 6rem;
	font-size: calc(min(0.8 * (100cqh - 6rem), 100cqw) / 80);
}

.bell-container {
	appearance: none;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: start; /* da <button> erediterebbe "center" e sposterebbe i pseudo-elementi */
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	width: 80em;
	height: 80em;
	border-radius: 12em;
	transform-origin: 50% -60em; /* il perno è in alto, in cima alla corda */
	animation: 5s ease-in-out infinite bell;
}
@keyframes bell {
	0%,
	100% {
		rotate: calc(1deg * var(--degofrot));
	}
	50% {
		rotate: calc(-1deg * var(--degofrot));
	}
}
.bell-container:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -4em;
}

.bell-container,
.bell-container * {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: block;
}
.bell-container *,
.bell-container *::before,
.bell-container *::after {
	transition:
		filter 0.4s ease-in-out,
		box-shadow 0.4s ease-in-out,
		opacity 0.4s ease-in-out,
		background 0.4s ease-in-out;
}

/* Fuori dalla vista tutto si ferma. */
.bell-scene:not(.is-live) *,
.bell-scene:not(.is-live) *::before,
.bell-scene:not(.is-live) *::after {
	animation-play-state: paused;
}

.rope {
	height: 100em;
	width: 2em;
	translate: 0 -52%;
	background:
		linear-gradient(90deg, #2d54744d 0%, #000b 30%, transparent 100%),
		repeating-linear-gradient(-70deg, #252525, #888 2%, #3a3a3a 3%);
}

.bell-top {
	width: 14%;
	height: 14%;
	border-radius: 50%;
	translate: 0 -28em;
	background: var(--base-clr);
	box-shadow:
		inset -1em -0.5em 2em 0.5em #fff,
		inset 1em -1em 2em 3em #000,
		0 -0.1em 0.4em 0.3em #c6eaffa8;
}

.bell-base {
	width: 50%;
	height: 50%;
	border-radius: 50%;
	translate: 0 -24%;
	background: var(--base-clr);
	box-shadow: 0 -0.1em 0.4em 0.2em #c6eaffa8;
}
.bell-base::before {
	content: '';
	background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--base-clr) 50em);
	position: absolute;
	translate: -18em 20em;
	width: 100%;
	height: 80%;
}
.bell-base::after {
	content: '';
	background-image: radial-gradient(circle at -80% -12%, transparent 50.1em, #cacaca 50.3em, var(--base-clr) 50.5em);
	position: absolute;
	translate: 18em 20em;
	width: 100%;
	height: 80%;
	transform: rotateY(180deg);
}
.shadow-l1 {
	width: 30em;
	height: 42em;
	border-radius: 50%;
	rotate: 12deg;
	translate: -3em -6em;
	filter: blur(2em);
	background: #797a80;
}
.shadow-l2 {
	width: 130%;
	height: 90%;
	filter: blur(5em);
	translate: -6em 9em;
}
.shadow-l2::before {
	display: block;
	content: '';
	width: 68%;
	height: 64%;
	border-radius: 50%;
	rotate: -54deg;
	translate: -8em 2em;
	scale: 1;
	background: #000;
}
.glow {
	width: 100%;
	height: 100%;
	filter: brightness(2) blur(2em);
}
.glow::before {
	clip-path: polygon(9% 83%, 12% 79%, 15% 74%, 18% 68%, 20% 62%, 22% 56%, 23% 50%, 24% 43%, 25% 38%, 25% 34%, 26% 29%, 26% 26%, 27% 22%, 29% 19%, 30% 15%, 32% 13%, 34% 10%, 37% 7%, 41% 5%, 44% 4%, 47% 3%, 51% 3%, 55% 3%, 58% 5%, 62% 6%, 73% 29%, 72% 25%, 70% 20%, 67% 16%, 63% 12%, 60% 9%, 58% 8%, 55% 7%, 52% 6%, 48% 6%, 44% 8%, 41% 9%, 37% 12%, 36% 14%, 33% 16%, 31% 20%, 30% 23%, 29% 26%, 28% 31%, 27% 36%, 27% 39%, 26% 44%, 26% 48%, 26% 52%, 25% 56%, 23% 61%, 22% 65%, 21% 69%, 19% 72%, 17% 75%, 15% 78%, 13% 81%);
	width: 100%;
	height: 80%;
	translate: 0 6em;
	scale: 0.94 0.94;
	background: #fff3;
	display: block;
	content: '';
}
.glow2 {
	width: 100%;
	height: 100%;
	filter: brightness(1) blur(0.3em);
	opacity: 0.1;
}
.glow2::before {
	clip-path: polygon(9.21% 83%, 12.28% 79%, 15.35% 74%, 18.41% 68%, 20.46% 62%, 22.51% 56%, 23.53% 50%, 24.55% 43%, 25.58% 34%, 26.6% 29%, 27.62% 22%, 29.16% 18.5%, 30.95% 15.75%, 32.74% 13%, 34.78% 10%, 37.85% 7%, 41.94% 5%, 45.01% 4%, 48.08% 3%, 52.17% 3%, 56.27% 3%, 64.01% 6.36%, 55.75% 4.5%, 47.83% 4.75%, 42.84% 5.88%, 39.51% 7.88%, 36.45% 10.38%, 33.38% 14.88%, 30.69% 19%, 29.67% 22.5%, 28.8% 26.72%, 28.21% 31.36%, 26.92% 38.44%, 26.57% 43.67%, 25.51% 48.34%, 25% 54.34%, 23.4% 60.69%, 21.23% 65.38%, 18.41% 71.5%, 16.88% 74.75%, 12.28% 80.5%);
	width: 100%;
	height: 84%;
	translate: -1em 8.4em;
	scale: 1;
	background: #fff3;
	display: block;
	content: '';
}
.left-glow {
	--lgc: #5d819666;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	translate: 0 -24%;
	background: transparent;
	box-shadow: inset 1em 0em 1em 0.2em var(--lgc);
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.left-glow2 {
	--lgc2: #5d819666;
	width: 49%;
	height: 50%;
	background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--lgc2) 50.3em, transparent 52em);
	translate: -19em 10.35em;
	clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%);
}
.r-glow {
	--lgc: #fffaf680;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	translate: 0 -24%;
	background: transparent;
	box-shadow: inset 1em 0em 1em 0.2em var(--lgc);
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
	transform: rotateY(180deg);
}
.r-glow2 {
	--lgc2: #fffaf680;
	width: 49%;
	height: 50%;
	background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--lgc2) 50.3em, transparent 52em);
	translate: 18.2em 10.35em;
	clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%);
	transform: rotateY(180deg) rotateZ(-2deg);
}
.mid-ring.small {
	translate: 0.04em -8em;
	scale: 0.8 0.5;
}
.mid-ring {
	width: 64%;
	height: 10%;
	border-radius: 50%;
	translate: -0.1em 10em;
	box-shadow:
		inset -0.3em 1.3em 0.4em -1em #fff5,
		-0.2em -1.2em 0.4em -0.4em #505050,
		-0.1em -1.8em 0.4em -0.4em #fff5,
		0 -2.5em 0.4em -1em #000;
	mix-blend-mode: hard-light;
	filter: brightness(0.8);
}
.mid-ring::before,
.mid-ring::after {
	content: '';
	display: block;
	background: #000;
	width: 2em;
	height: 2em;
	top: 10%;
	border-radius: 50%;
	position: absolute;
}
.mid-ring::after {
	right: -2%;
	left: auto;
}
.mid-ring::before {
	left: -2%;
}
.bell-buff-t {
	background: #fff2;
	width: 72%;
	height: 12%;
	border-radius: 50%;
	translate: 0 16em;
	filter: blur(1em);
}
.bell-buff {
	background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
	width: 88%;
	height: 20%;
	border-radius: 50% 50% 50% 50% / 50% 50% 30% 30%;
	translate: 0 20em;
	box-shadow:
		inset 1em 0 2em -1em #5d819666,
		inset -1em 0 2em -1em #fff;
}
.bell-btm {
	width: 88%;
	height: 18%;
	border-radius: 50%;
	translate: 0 23em;
	background: linear-gradient(90deg, black 40%, var(--base-clr) 90%);
}
.bell-btm2 {
	width: 74%;
	height: 12%;
	border-radius: 50%;
	translate: 0 24em;
	background: #fffff6;
	box-shadow:
		0 0 1em 0.6em #ffe9d4,
		-0.8em 0.2em 2em 1em #cca37f,
		-5.4em -0.6em 3em -1em #ce6e1abb,
		6em -0.6em 3em -1em #ce6e1abb,
		inset 0em 30.3em 0.3em -30em #c7962d,
		inset 0 -2em 2em -2em #ffe9d4,
		inset 0em -1em 2em 1em #ce6e1a66;
	filter: brightness(1);
}
.off .bell-btm2 {
	filter: brightness(0.02);
}
.bell-ring-container {
	width: 74%;
	height: 24%;
	border-radius: 50% 50% 50% 50% / 25% 25% 0% 0%;
	translate: 0 29.2em;
	overflow: hidden;
}
.bell-ring {
	width: 12em;
	height: 12em;
	background: #fff;
	border-radius: 50%;
	translate: 0 -6em;
	box-shadow:
		0 0.8em 1em -0.3em #f8e1d0,
		inset 0 -6em 4em -4em #e3b695,
		inset 0 1em 3em 1em #fff4,
		inset 0 2em 3em 1em #fff,
		inset 0 100em 0 100em #2c2c2c;
}
.off .bell-ring {
	background: #000;
	box-shadow:
		0 0.8em 1em -0.3em #f8e1d000,
		inset 0 -6em 4em -4em #e3b69500,
		inset 0 1em 3em 1em #fff0,
		inset 0 -2em 3em 1em #fff2,
		inset 0 100em 0 100em #000;
}

.bell-rays {
	mix-blend-mode: soft-light;
	box-shadow: inset 0 -21em 4em -20em #000;
	width: 100%;
	height: 140%;
	translate: 0 -4em;
	border-radius: 50%;
}
.bell-rays::before {
	content: '';
	display: block;
	width: 100em;
	height: 100em;
	transform-origin: 50% 50%;
	position: absolute;
	left: -21em;
	top: -77em;
	border-radius: 100%;
	filter: blur(0.6em);
	background: repeating-conic-gradient(at 50% 50%, #fff2 0%, transparent 0.6%, #fff2 0.8%);
	animation: radiate 1s linear infinite;
}
.off .bell-rays {
	opacity: 0;
}
@keyframes radiate {
	from {
		rotate: 0deg;
	}
	to {
		rotate: 6deg;
	}
}

.volumetric {
	width: 98%;
	height: 224%;
	translate: 0 124em;
	opacity: 0.2;
}
.volumetric .vl {
	width: 100%;
	height: 100%;
	transform-origin: 50% 20em;
	rotate: 22deg;
	box-shadow: inset 40em 0 20em -20em #fff1;
}
.volumetric .vr {
	width: 100%;
	height: 100%;
	transform-origin: 50% 20em;
	rotate: -22deg;
	box-shadow: inset -40em 0 20em -20em #fff1;
}
.off .volumetric {
	opacity: 0;
}

/* Macchia di luce sul pavimento: si accende e si spegne con la lampada. */
.bell-pool {
	position: absolute;
	left: 50%;
	bottom: 2.6rem;
	width: min(60%, 22rem);
	height: 3rem;
	translate: -50% 0;
	background: radial-gradient(ellipse at center, #e3b695aa 0%, #e3b69566 40%, transparent 72%);
	filter: blur(6px);
	transition: opacity 0.4s ease-in-out;
}
.bell-pool::after {
	content: '';
	position: absolute;
	inset: 32% 30%;
	background: #000c;
	border-radius: 50%;
	filter: blur(4px);
}
.bell-scene:has(.off) .bell-pool {
	opacity: 0;
}

/* Grana: un rumore SVG fermo, sopra tutto. Una sola volta rasterizzato. */
.grain {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	background:
		radial-gradient(circle at 50% 50%, #000, #0000),
		url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	filter: contrast(100%) brightness(200%) grayscale(1) opacity(0.168);
	mix-blend-mode: screen;
}

.bell-status {
	position: absolute;
	z-index: 11;
	left: 0;
	right: 0;
	bottom: 1rem;
	margin: 0;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: #c9c9c9;
	pointer-events: none;
}

/* Il dondolio è movimento: con "riduci movimento" la campanella sta ferma. */
@media (prefers-reduced-motion: reduce) {
	.bell-container,
	.bell-rays::before {
		animation: none;
	}
}

/* ——— Campanella da barra ——— */
.stage--mini {
	grid-auto-flow: column;
	justify-content: center;
	gap: 2rem;
	min-height: 11rem;
	padding-bottom: 3rem;
}
.bell-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	color: var(--text);
	background: #232323;
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out), scale 0.15s var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}
.bell-icon:active {
	scale: 0.97;
}
@media (hover: hover) and (pointer: fine) {
	.bell-icon:hover {
		background: #2e2e2e;
	}
}
.bell-icon__svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
	transform-origin: 50% 8%;
}
.bell-icon__clapper {
	transform-box: fill-box;
	transform-origin: 50% 0%;
}
.bell-icon.is-ringing .bell-icon__svg {
	animation: ring 0.9s var(--ease-out);
}
.bell-icon.is-ringing .bell-icon__clapper {
	animation: clapper 0.9s var(--ease-out);
}
@keyframes ring {
	0% { rotate: 0deg; }
	15% { rotate: 16deg; }
	30% { rotate: -14deg; }
	45% { rotate: 10deg; }
	60% { rotate: -7deg; }
	78% { rotate: 3deg; }
	100% { rotate: 0deg; }
}
@keyframes clapper {
	0% { translate: 0 0; }
	15% { translate: -2px 0; }
	30% { translate: 2px 0; }
	45% { translate: -1.5px 0; }
	60% { translate: 1px 0; }
	100% { translate: 0 0; }
}
.bell-icon__badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.3rem;
	display: grid;
	place-items: center;
	font: 700 0.72rem / 1 var(--font-text);
	color: #fff;
	background: var(--accent);
	border: 2px solid var(--surface);
	border-radius: 1rem;
}
.bell-icon__badge[hidden] {
	display: none;
}
.bell-icon__badge.is-new {
	animation: badge-pop 0.45s var(--ease-out);
}
@keyframes badge-pop {
	from { scale: 0.4; }
	60% { scale: 1.2; }
	to { scale: 1; }
}
.chip {
	padding: 0.7rem 1.1rem;
	font: 600 0.875rem var(--font-text);
	color: var(--text);
	background: transparent;
	border: 1px solid var(--muted);
	border-radius: 2rem;
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out), scale 0.15s var(--ease-out);
}
.chip:active {
	scale: 0.97;
}
@media (hover: hover) and (pointer: fine) {
	.chip:hover {
		background: rgb(255 255 255 / 0.08);
	}
}
.stage__hint {
	position: absolute;
	bottom: 0.9rem;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 0.75rem;
	color: var(--muted);
}
@media (max-width: 30rem) {
	.stage--mini {
		grid-auto-flow: row;
		gap: 1.25rem;
	}
}