/**
 * HANSA Brand Ambience — the on-page control.
 *
 * Everything is scoped under .hs-amb and prefixed --hs-* so Semplice's
 * theme styles cannot collide with it. The control is deliberately always
 * present and always visible: WCAG 1.4.2 requires a way to stop audio
 * that plays for more than three seconds, and at an event it saves people
 * hunting for whichever tab is humming.
 */

.hs-amb {
	--hs-cyan: #8fd3ff;
	--hs-cyan-lo: #3f6b85;
	--hs-line: #1a222d;
	--hs-muted: #78899a;
	position: fixed;
	/* above Semplice's own fixed chrome, its mobile menu, and cookie bars */
	z-index: 2147483000;
	/* env() carries a fallback so the whole declaration stays valid on
	   browsers that don't support it. The bottom inset keeps the control
	   clear of the iPhone home indicator. */
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	font-family: "Archivo", system-ui, -apple-system, sans-serif;
}

.hs-amb[hidden] {
	display: none;
}

.hs-amb__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(4, 5, 10, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--hs-line);
	color: var(--hs-muted);
	padding: 10px 15px;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.2s, border-color 0.2s;
}

.hs-amb__btn:hover {
	color: var(--hs-cyan);
	border-color: var(--hs-cyan-lo);
}

.hs-amb__btn:focus-visible {
	outline: 2px solid var(--hs-cyan);
	outline-offset: 3px;
}

.hs-amb__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
}

.hs-amb__eq i {
	width: 2px;
	background: currentColor;
	height: 35%;
}

.hs-amb__btn[aria-pressed="true"] {
	color: var(--hs-cyan);
	border-color: var(--hs-cyan-lo);
}

.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i {
	animation: hs-eq 0.9s ease-in-out infinite alternate;
}

.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i:nth-child(2) { height: 85%; animation-delay: 0.12s; }
.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i:nth-child(3) { height: 55%; animation-delay: 0.24s; }
.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i:nth-child(4) { height: 95%; animation-delay: 0.36s; }
.hs-amb__btn[aria-pressed="true"] .hs-amb__eq i:nth-child(5) { height: 45%; animation-delay: 0.48s; }

@keyframes hs-eq {
	from { transform: scaleY(0.4); }
	to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hs-amb__eq i { animation: none !important; }
}

@media (max-width: 600px) {
	.hs-amb {
		right: 14px;
		/* Mobile Safari's bottom toolbar overlays fixed elements, so sit
		   well clear of it — at 14px the control can be completely hidden
		   behind the toolbar and read as "not working". */
		bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
	.hs-amb__btn { padding: 9px 13px; font-size: 10px; }
}