/* ============================= audio toggle ============================= */
/* Fixed to the viewport, not to <header>. It is deliberately outside the
   page's stacking contexts and outside anything the router animates, so it
   is present and clickable on every section. z-index sits under
   .page_spinner (99) so it stays hidden behind the loading screen. */

.audToggle {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 50;

	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.45;
	/* Slow, symmetrical fade in and out, matching the section headings. */
	transition: opacity 0.8s ease;
}

.audToggle:hover,
.audToggle:focus-visible {
	opacity: 1;
}

.audToggle:focus-visible {
	outline: 1px solid #2f80ad;
	outline-offset: 4px;
}

.audToggle svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: #767676;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
	transition: filter 0.8s ease, stroke 0.8s ease;
}

/* Hover lifts the grey rather than going to full white. */
.audToggle:hover svg,
.audToggle:focus-visible svg {
	stroke: #cfcfcf;
}

.audToggle ._horn {
	fill: #767676;
	stroke-width: 1.2;
	transition: fill 0.8s ease;
}

.audToggle:hover ._horn,
.audToggle:focus-visible ._horn {
	fill: #cfcfcf;
}

/* The cut sits under the slash so the diagonal reads over the filled cone.
   Colour matches the dark page background rather than being transparent. */
.audToggle ._cut {
	stroke: #141414;
	stroke-width: 4;
}

/* --- glow on hover only, eased slowly both ways --- */

.audToggle:hover svg,
.audToggle:focus-visible svg {
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
}

.audToggle[data-state="on"]:hover svg,
.audToggle[data-state="on"]:focus-visible svg {
	filter: drop-shadow(0 0 6px rgba(47, 128, 173, 0.6));
}

/* --- states --- */

.audToggle[data-state="on"] {
	opacity: 0.55;
}

.audToggle[data-state="on"] svg {
	stroke: #2f80ad;
}

.audToggle[data-state="on"] ._horn {
	fill: #2f80ad;
}

/* The generic :hover rules above tie with these state rules on specificity
   and lose on source order, so the playing state needs its own. Adding
   :hover here also outranks them outright. */
.audToggle[data-state="on"]:hover,
.audToggle[data-state="on"]:focus-visible {
	opacity: 1;
}

.audToggle[data-state="on"]:hover svg,
.audToggle[data-state="on"]:focus-visible svg {
	stroke: #4a9ecb;
}

.audToggle[data-state="on"]:hover ._horn,
.audToggle[data-state="on"]:focus-visible ._horn {
	fill: #4a9ecb;
}

.audToggle[data-state="on"] ._slash,
.audToggle[data-state="on"] ._cut,
.audToggle[data-state="loading"] ._slash,
.audToggle[data-state="loading"] ._cut {
	opacity: 0;
}

.audToggle[data-state="off"] ._wave1,
.audToggle[data-state="off"] ._wave2,
.audToggle[data-state="idle"] ._wave1,
.audToggle[data-state="idle"] ._wave2,
.audToggle[data-state="failed"] ._wave1,
.audToggle[data-state="failed"] ._wave2 {
	opacity: 0;
}

.audToggle[data-state="loading"] {
	cursor: progress;
	animation: audPulse 1.1s ease-in-out infinite;
}

/* Load failed. The control stays put and stays clickable — a click retries. */
.audToggle[data-state="failed"] {
	opacity: 0.18;
}

@keyframes audPulse {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
	.audToggle, .audToggle svg { transition: none; animation: none; }
}