/**
 * Cosmic Sound — front-end styles.
 *
 * Scoped hard to .cosmic-* so nothing leaks into the host theme. The background
 * sits at z-index 0 behind everything, and the player floats above content but
 * below WordPress's own admin bar.
 *
 * @package CosmicSound
 */

/* ---------------------------------------------------------------
 * Background layers
 * ------------------------------------------------------------- */

.cosmic-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.cosmic-bg__canvas,
.cosmic-bg__image,
.cosmic-bg__video,
.cosmic-bg__fallback,
.cosmic-bg__overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.cosmic-bg__image {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cosmic-bg__video {
	object-fit: cover;
}

.cosmic-bg__canvas {
	/* Sits above the CSS fallback so the fallback only shows pre-paint. */
	position: relative;
	z-index: 1;
}

/*
 * CSS-only gradient fallback per preset. Renders instantly (before the canvas
 * engine's first frame), and is the whole background for visitors with JS
 * disabled. Colours mirror the `bg` stops in cosmic-background-engine.js.
 */
.cosmic-bg__fallback {
	z-index: 0;
	background: linear-gradient( 160deg, #050718, #0a0f2c );
}

.cosmic-bg__fallback--starfield-classic { background: linear-gradient( 160deg, #050718, #0a0f2c ); }
.cosmic-bg__fallback--deep-space-drift  { background: linear-gradient( 160deg, #03040f, #0b1030 60%, #05061a ); }
.cosmic-bg__fallback--nebula-violet     { background: linear-gradient( 160deg, #0a0418, #160a33 ); }
.cosmic-bg__fallback--aurora-borealis   { background: linear-gradient( 160deg, #030b14, #06202b ); }
.cosmic-bg__fallback--meteor-shower     { background: linear-gradient( 160deg, #04061a, #0d1030 ); }
.cosmic-bg__fallback--nebula-emerald    { background: linear-gradient( 160deg, #02120f, #062a24 ); }
.cosmic-bg__fallback--warp-speed        { background: linear-gradient( 160deg, #01030d, #06091f ); }
.cosmic-bg__fallback--galaxy-spiral     { background: linear-gradient( 160deg, #03041a, #0a0a2e ); }
.cosmic-bg__fallback--solar-flare       { background: linear-gradient( 160deg, #12040a, #2a0b06 ); }
.cosmic-bg__fallback--black-hole        { background: linear-gradient( 160deg, #010104, #08061a ); }
.cosmic-bg__fallback--northern-lights   { background: linear-gradient( 160deg, #020a12, #04161f ); }
.cosmic-bg__fallback--comet-trail       { background: linear-gradient( 160deg, #040616, #0a1030 ); }
.cosmic-bg__fallback--pulsar-pulse      { background: linear-gradient( 160deg, #04041a, #0b0930 ); }
.cosmic-bg__fallback--asteroid-field    { background: linear-gradient( 160deg, #05060f, #0c1024 ); }
.cosmic-bg__fallback--milky-way         { background: linear-gradient( 160deg, #02030c, #070a20 ); }
.cosmic-bg__fallback--red-giant         { background: linear-gradient( 160deg, #120206, #2b060a ); }
.cosmic-bg__fallback--ice-planet        { background: linear-gradient( 160deg, #03101a, #082438 ); }
.cosmic-bg__fallback--supernova         { background: linear-gradient( 160deg, #04030f, #0d0722 ); }
.cosmic-bg__fallback--wormhole          { background: linear-gradient( 160deg, #02020c, #080524 ); }
.cosmic-bg__fallback--cosmic-dust       { background: linear-gradient( 160deg, #060418, #0f0a2b ); }

.cosmic-bg__overlay {
	z-index: 2;
}

/* An inline (in-content) background block is contained, not fixed. */
.cosmic-bg--inline {
	position: absolute;
	z-index: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.cosmic-bg__video {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Visitor sound on/off switch
 * ------------------------------------------------------------- */

.cosmic-player {
	--cosmic-accent: #7c5cff;
	--cosmic-surface: rgba( 12, 14, 34, 0.82 );
	--cosmic-border: rgba( 255, 255, 255, 0.14 );
	--cosmic-text: #eef1ff;

	position: fixed;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: inherit;
	line-height: 1.3;
}

/*
 * Bottom-anchored players use column-reverse so the sound switch sits closest
 * to the screen edge — within thumb reach on a phone — with the player panel
 * expanding upward above it.
 */
.cosmic-player--bottom-right { right: 20px; bottom: 20px; flex-direction: column-reverse; }
.cosmic-player--bottom-left  { left: 20px;  bottom: 20px; flex-direction: column-reverse; align-items: flex-start; }
.cosmic-player--top-right    { right: 20px; top: 20px; }
.cosmic-player--top-left     { left: 20px;  top: 20px; align-items: flex-start; }

.admin-bar.cosmic-has-player .cosmic-player--top-right,
.admin-bar.cosmic-has-player .cosmic-player--top-left {
	top: 52px;
}

.cosmic-sound-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px 8px 12px;
	border: 1px solid var( --cosmic-border );
	border-radius: 999px;
	background: var( --cosmic-surface );
	color: var( --cosmic-text );
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.38 );
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cosmic-sound-switch:hover {
	border-color: var( --cosmic-accent );
	transform: translateY( -1px );
}

.cosmic-sound-switch:focus-visible {
	outline: 3px solid var( --cosmic-accent );
	outline-offset: 3px;
}

.cosmic-sound-switch__icon {
	display: inline-flex;
	opacity: 0.8;
}

.cosmic-sound-switch .cosmic-icon-on { display: none; }
.cosmic-sound-switch[aria-checked="true"] .cosmic-icon-on { display: block; }
.cosmic-sound-switch[aria-checked="true"] .cosmic-icon-off { display: none; }

/* The switch track — the visual "toggle" affordance. */
.cosmic-sound-switch__track {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.18 );
	transition: background-color 0.22s ease;
}

.cosmic-sound-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.22s cubic-bezier( 0.4, 0, 0.2, 1 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
}

.cosmic-sound-switch[aria-checked="true"] .cosmic-sound-switch__track {
	background: var( --cosmic-accent );
}

.cosmic-sound-switch[aria-checked="true"] .cosmic-sound-switch__thumb {
	transform: translateX( 16px );
}

.cosmic-sound-switch[aria-checked="true"] {
	border-color: var( --cosmic-accent );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.38 ), 0 0 0 1px var( --cosmic-accent ) inset;
}

/* Icon-only mode: label exists for screen readers but is visually hidden. */
.cosmic-sound-switch__label[data-cosmic-sr-only],
.cosmic-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
 * Floating mini player panel
 * ------------------------------------------------------------- */

.cosmic-player__panel {
	width: 268px;
	padding: 14px 16px 12px;
	border: 1px solid var( --cosmic-border );
	border-radius: 16px;
	background: var( --cosmic-surface );
	color: var( --cosmic-text );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	box-shadow: 0 10px 34px rgba( 0, 0, 0, 0.45 );
	animation: cosmic-panel-in 0.24s ease;
}

.cosmic-player__panel[hidden] {
	display: none;
}

@keyframes cosmic-panel-in {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: none; }
}

.cosmic-player__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 10px;
	min-height: 40px;
}

.cosmic-player__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.55;
}

.cosmic-player__title {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cosmic-player__artist {
	font-size: 12px;
	opacity: 0.65;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cosmic-player__controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cosmic-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var( --cosmic-border );
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.06 );
	color: var( --cosmic-text );
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cosmic-btn:hover {
	background: rgba( 255, 255, 255, 0.14 );
	border-color: var( --cosmic-accent );
}

.cosmic-btn:focus-visible {
	outline: 3px solid var( --cosmic-accent );
	outline-offset: 2px;
}

.cosmic-btn--primary {
	width: 38px;
	height: 38px;
	background: var( --cosmic-accent );
	border-color: transparent;
	color: #fff;
}

.cosmic-btn--primary:hover {
	background: var( --cosmic-accent );
	filter: brightness( 1.12 );
}

.cosmic-btn .cosmic-icon-pause { display: none; }
.cosmic-btn.is-playing .cosmic-icon-pause { display: block; }
.cosmic-btn.is-playing .cosmic-icon-play { display: none; }

.cosmic-player__volume {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}

.cosmic-player__progress {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.cosmic-player__seek {
	flex: 1;
	min-width: 0;
}

.cosmic-player input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	margin: 0;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.2 );
	cursor: pointer;
}

.cosmic-player input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var( --cosmic-accent );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
}

.cosmic-player input[type="range"]::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var( --cosmic-accent );
}

.cosmic-player input[type="range"]:focus-visible {
	outline: 3px solid var( --cosmic-accent );
	outline-offset: 4px;
}

/* Inline block variant sits in the content flow, not fixed to the viewport. */
.cosmic-player--inline {
	position: static;
	align-items: stretch;
	margin: 1.5em 0;
}

.cosmic-player--inline .cosmic-player__panel {
	width: 100%;
	max-width: 460px;
}

@media ( max-width: 600px ) {
	.cosmic-player__panel {
		width: min( 268px, calc( 100vw - 40px ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cosmic-player__panel { animation: none; }
	.cosmic-sound-switch,
	.cosmic-sound-switch__thumb,
	.cosmic-sound-switch__track { transition: none; }
}

/* Print: none of this belongs on paper. */
@media print {
	.cosmic-bg,
	.cosmic-player { display: none !important; }
}