/* Local visual layer: lightweight scroll-driven atmosphere, independent of the app bundle. */
.mahban-scroll-atelier {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
	--atelier-progress: 0;
	--atelier-shift: 0px;
	font-family: inherit;
}

.atelier-orbit {
	position: absolute;
	right: -7vw;
	top: 31vh;
	width: min(42vw, 620px);
	height: min(13vw, 190px);
	border: 1px solid rgba(92, 157, 255, .25);
	border-radius: 50%;
	transform: translate3d(0, calc(var(--atelier-shift) * -.18), 0) rotate(-22deg);
	transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
	opacity: .72;
}

.atelier-orbit-a { box-shadow: 0 0 42px rgba(22, 106, 255, .08); }
.atelier-orbit-b {
	top: 36vh;
	right: -12vw;
	width: min(49vw, 730px);
	height: min(17vw, 250px);
	border-color: rgba(255, 61, 44, .2);
	transform: translate3d(0, calc(var(--atelier-shift) * .28), 0) rotate(18deg);
	opacity: .5;
}

.atelier-node {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5c9dff;
	box-shadow: 0 0 0 5px rgba(92,157,255,.09), 0 0 20px rgba(92,157,255,.7);
	animation: atelier-float 5s ease-in-out infinite;
	transform: translate3d(0, calc(var(--atelier-shift) * -.3), 0);
}
.atelier-node-a { right: 23vw; top: 29vh; }
.atelier-node-b { right: 13vw; top: 51vh; width: 5px; height: 5px; animation-delay: -1.8s; background: #ff3d2c; box-shadow: 0 0 0 5px rgba(255,61,44,.08), 0 0 20px rgba(255,61,44,.7); }
.atelier-node-c { right: 38vw; top: 67vh; width: 4px; height: 4px; animation-delay: -3.1s; }

.atelier-signal {
	position: absolute;
	right: 26px;
	bottom: 106px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(205,220,245,.65);
	font-size: 9px;
	letter-spacing: .22em;
	writing-mode: vertical-rl;
	transform: translateY(calc(var(--atelier-shift) * -.15));
	transition: transform .7s cubic-bezier(.2,.7,.2,1), color .4s ease;
}
.atelier-signal i { display: block; width: 1px; height: 38px; background: linear-gradient(#ff3d2c, transparent); }
.atelier-signal b { font-weight: 600; }
.is-scrolling-deep .atelier-signal { color: rgba(255,255,255,.9); }

/* Keep the existing React theme switch, but replace its mojibake glyph with a crisp icon. */
.theme-toggle span {
	font-size: 0;
}
.theme-toggle span::before {
	content: "☼";
	display: inline-block;
	font-size: 1.05rem;
	line-height: 1;
}
html[data-theme="light"] .theme-toggle span::before { content: "☾"; }

@keyframes atelier-float {
	0%, 100% { margin-top: 0; opacity: .65; }
	50% { margin-top: -11px; opacity: 1; }
}

@media (max-width: 700px) {
	.mahban-scroll-atelier { opacity: .7; }
	.atelier-orbit { right: -34vw; top: 28vh; width: 92vw; height: 30vw; }
	.atelier-orbit-b { right: -44vw; top: 33vh; width: 105vw; height: 38vw; }
	.atelier-node-a { right: 19vw; top: 27vh; }
	.atelier-node-b { right: 9vw; top: 48vh; }
	.atelier-node-c { right: 55vw; top: 65vh; }
	.atelier-signal { right: 12px; bottom: 86px; font-size: 8px; }
}