/* Cowboy Up — Ambient Audio
   Palette and type deliberately inherit the site tokens where they exist,
   with hard fallbacks so the control still looks right if the shortcode is
   ever previewed outside the theme. */

.cuk-audio {
	--cuk-a-ink:    var(--cuk-ink, #0C0F17);
	--cuk-a-raised: var(--cuk-raised, #121826);
	--cuk-a-cream:  var(--cuk-cream, #F5EEE1);
	--cuk-a-amber:  var(--cuk-amber, #E0A94A);
	--cuk-a-ember:  var(--cuk-ember, #B4512B);

	display: flex;
	line-height: 1;
}

.cuk-audio--inline  { width: 100%; }
.cuk-audio--left    { justify-content: flex-start; }
.cuk-audio--center  { justify-content: center; }
.cuk-audio--right   { justify-content: flex-end; }

.cuk-audio--fixed {
	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 9990;
}

/* -- the control ------------------------------------------------------- */

.cuk-audio__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 18px;
	background: color-mix(in srgb, var(--cuk-a-raised) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--cuk-a-amber) 34%, transparent);
	border-radius: 999px;
	color: var(--cuk-a-cream);
	font-family: var(--cuk-font-ui, "Jost", system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .28s ease, background-color .28s ease, color .28s ease;
}

.cuk-audio__btn:hover {
	border-color: color-mix(in srgb, var(--cuk-a-amber) 70%, transparent);
	background: color-mix(in srgb, var(--cuk-a-raised) 100%, transparent);
}

.cuk-audio__btn:focus-visible {
	outline: 2px solid var(--cuk-a-amber);
	outline-offset: 3px;
}

.cuk-audio__btn[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--cuk-a-amber) 72%, transparent);
	color: var(--cuk-a-amber);
}

.cuk-audio__label {
	white-space: nowrap;
	padding-top: 1px; /* optical centring against the bars */
}

/* -- lantern bars ------------------------------------------------------ */
/* Echoes the amber lantern dots on the run-of-show rail: at rest they are
   three low embers; playing, they flicker. */

.cuk-audio__bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 14px;
	width: 15px;
}

.cuk-audio__bars i {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--cuk-a-amber) 45%, var(--cuk-a-ember));
	transition: height .3s ease, background-color .3s ease;
}

.cuk-audio__btn[aria-pressed="true"] .cuk-audio__bars i {
	background: var(--cuk-a-amber);
	box-shadow: 0 0 6px color-mix(in srgb, var(--cuk-a-amber) 55%, transparent);
	animation: cuk-flicker 1.15s ease-in-out infinite;
}

.cuk-audio__btn[aria-pressed="true"] .cuk-audio__bars i:nth-child(2) { animation-delay: .18s; animation-duration: .95s; }
.cuk-audio__btn[aria-pressed="true"] .cuk-audio__bars i:nth-child(3) { animation-delay: .38s; animation-duration: 1.3s;  }

@keyframes cuk-flicker {
	0%, 100% { height: 4px;  }
	35%      { height: 13px; }
	60%      { height: 7px;  }
	80%      { height: 11px; }
}

/* Suspended or pending: the control reads "on", but no sound yet — a video has
   the room, or we're waiting for the first tap. Bars settle to embers rather
   than flickering, so the difference is visible without contradicting the label. */
.cuk-audio__btn[data-state="suspended"] .cuk-audio__bars i,
.cuk-audio__btn[data-state="pending"] .cuk-audio__bars i {
	animation: none;
	height: 4px;
	box-shadow: none;
	background: color-mix(in srgb, var(--cuk-a-amber) 45%, var(--cuk-a-ember));
}

/* Buffering: quiet pulse, no height jitter. */
.cuk-audio__btn[data-state="loading"] .cuk-audio__bars i {
	animation: cuk-pulse .9s ease-in-out infinite;
	height: 6px;
}

@keyframes cuk-pulse {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1;   }
}

/* -- fallbacks and preferences ---------------------------------------- */

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.cuk-audio__btn        { background: #121826; border-color: rgba(224,169,74,.34); }
	.cuk-audio__btn:hover  { border-color: rgba(224,169,74,.70); }
	.cuk-audio__bars i     { background: #B4512B; }
	.cuk-audio__btn[aria-pressed="true"] .cuk-audio__bars i { background: #E0A94A; }
}

@media (prefers-reduced-motion: reduce) {
	.cuk-audio__btn[aria-pressed="true"] .cuk-audio__bars i,
	.cuk-audio__btn[data-state="loading"] .cuk-audio__bars i {
		animation: none;
		height: 10px;
	}
	.cuk-audio__btn,
	.cuk-audio__bars i { transition: none; }
}

/* Editor-only notice when no file is set. */
.cuk-audio-notice {
	margin: 0;
	padding: 10px 14px;
	border: 1px dashed rgba(224,169,74,.5);
	border-radius: 6px;
	color: #E0A94A;
	font-family: "Jost", system-ui, sans-serif;
	font-size: 13px;
}