/**
 * FRADO Radio — Frontend Styles
 * Wave 4: Glassmorphism Apple-Style UI
 *
 * @package FradoRadio
 */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */

:root {
	--fr-bg:          #0a0a0a;
	--fr-surface:     rgba(30, 30, 40, 0.65);
	--fr-surface-solid: #1e1e28;
	--fr-accent:      #CA8A04;
	--fr-accent-h:    #EAB308;
	--fr-text:        #F8FAFC;
	--fr-muted:       #94A3B8;
	--fr-border:      rgba(255, 255, 255, 0.1);
	--fr-glow:        rgba(202, 138, 4, 0.25);
	--fr-radius:      16px;
	--fr-font:        system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fr-blur:        20px;
	--fr-transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Player Container — Glassmorphism
   ============================================ */

.frado-radio-player {
	font-family: var(--fr-font);
	background: var(--fr-surface);
	-webkit-backdrop-filter: blur(var(--fr-blur));
	backdrop-filter: blur(var(--fr-blur));
	color: var(--fr-text);
	border: 1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	padding: 24px;
	max-width: 480px;
	margin: 0 auto;
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.5),
		0 0 60px var(--fr-glow),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--fr-transition), background var(--fr-transition);
}

.frado-radio-player::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
	pointer-events: none;
}

/* Light theme override */
.frado-radio-player.fr-theme-light {
	--fr-bg:        #F8FAFC;
	--fr-surface:   rgba(255, 255, 255, 0.7);
	--fr-surface-solid: #FFFFFF;
	--fr-text:      #1B1B30;
	--fr-muted:     #64748B;
	--fr-border:    rgba(0, 0, 0, 0.08);
	--fr-glow:      rgba(202, 138, 4, 0.1);
}

/* ============================================
   Player Inner Layout
   ============================================ */

.fr-player-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ============================================
   Cover / Spectrum Area
   ============================================ */

.fr-cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.fr-spectrum {
	width: 100%;
	height: 100%;
}

/* ============================================
   Track Info
   ============================================ */

.fr-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fr-now-playing {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fr-accent);
	font-weight: 600;
}

.fr-track-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--fr-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fr-track-title:hover {
	animation: fr-scroll-text 6s linear infinite;
}

@keyframes fr-scroll-text {
	0%, 10%   { transform: translateX(0); }
	90%, 100% { transform: translateX(calc(-100% + 200px)); }
}

.fr-track-artist {
	font-size: 14px;
	color: var(--fr-muted);
}

/* ============================================
   Controls — Morphing SVG ready
   ============================================ */

.fr-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.fr-btn {
	background: none;
	border: none;
	color: var(--fr-text);
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	transition: background var(--fr-transition), color var(--fr-transition), transform var(--fr-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fr-btn:hover {
	background: rgba(202, 138, 4, 0.15);
	color: var(--fr-accent-h);
	transform: scale(1.05);
}

.fr-btn:active {
	transform: scale(0.95);
}

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

.fr-btn svg {
	transition: transform var(--fr-transition);
}

.fr-btn-play {
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, var(--fr-accent), var(--fr-accent-h));
	color: var(--fr-bg);
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(202, 138, 4, 0.4);
	transition: background var(--fr-transition), box-shadow var(--fr-transition), transform var(--fr-transition);
}

.fr-btn-play:hover {
	background: linear-gradient(135deg, var(--fr-accent-h), var(--fr-accent));
	color: var(--fr-bg);
	box-shadow: 0 6px 24px rgba(202, 138, 4, 0.6);
	transform: scale(1.08);
}

.fr-btn-play:active {
	transform: scale(0.95);
}

/* ============================================
   Progress Bar — Glow thumb
   ============================================ */

.fr-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fr-progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
	cursor: pointer;
	position: relative;
	overflow: visible;
	transition: height var(--fr-transition);
}

.fr-progress-bar:hover {
	height: 6px;
}

.fr-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--fr-accent), var(--fr-accent-h));
	border-radius: 2px;
	transition: width 0.1s linear;
	position: relative;
}

.fr-progress-fill::after {
	content: '';
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 12px;
	height: 12px;
	background: var(--fr-accent-h);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--fr-glow);
	transition: transform var(--fr-transition);
}

.fr-progress-bar:hover .fr-progress-fill::after {
	transform: translateY(-50%) scale(1);
}

.fr-times {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--fr-muted);
	font-variant-numeric: tabular-nums;
}

/* ============================================
   Volume
   ============================================ */

.fr-volume {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Volume slider — subtle translucent pill, sized so the thumb fills the
   pill height for a clean "dot slides inside a capsule" look.
   `color-scheme: dark` forces Safari / Chrome native UA parts into dark
   mode so we never see the white iOS box. Background is a soft white
   tint that reads above the time-theme surface at every hour. */

.fr-volume-slider {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color-scheme: dark;                                                   /* kills iOS white box */
	width: 110px;
	height: 18px;                                                          /* pill height = thumb height */
	background: rgba(255, 255, 255, 0.12) !important;                     /* subtle contrast vs surface */
	background-image: none !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 999px !important;
	padding: 0 !important;                                                 /* no padding — thumb fills full height */
	box-sizing: border-box;
	outline: none;
	margin: 0;
	cursor: pointer;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
	vertical-align: middle;                                                /* stops it sitting "caído" against the mute button */
}

.fr-volume-slider:focus {
	outline: none;
}

.fr-volume-slider:focus-visible {
	outline: 2px solid var(--fr-accent);
	outline-offset: 3px;
	border-radius: 999px;
}

/* iOS Safari: clear the inner container background */
.fr-volume-slider::-webkit-slider-container {
	background: transparent !important;
}

/* WebKit / Blink — track fills the full slider height so the thumb's
   vertical centre lands exactly on the pill's vertical centre. No
   margin-top gymnastics needed. */
.fr-volume-slider::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
	height: 16px;          /* = slider height minus the 1px border on each side */
	border: none;
	border-radius: 999px;
}

/* Firefox — track */
.fr-volume-slider::-moz-range-track {
	background: transparent;
	height: 16px;
	border: none;
	border-radius: 999px;
}

/* Firefox — filled portion (left of thumb): muted accent glow */
.fr-volume-slider::-moz-range-progress {
	height: 16px;
	background: rgba(202, 138, 4, 0.35);
	border-radius: 999px;
}

/* WebKit / Blink — thumb: golden dot that fills the full pill height,
   giving that clean "the dot IS the slider height" look the designer
   asked for. 16×16 inside a 18px pill (1px border on each side). */
.fr-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin-top: 0;                 /* track is same height as thumb — auto centred */
	border-radius: 50%;
	background: var(--fr-accent);
	border: 2px solid var(--fr-accent-h);
	cursor: pointer;
	box-shadow: 0 0 10px var(--fr-glow), 0 2px 4px rgba(0, 0, 0, 0.4);
	transition: box-shadow var(--fr-transition), transform var(--fr-transition);
}

.fr-volume-slider::-webkit-slider-thumb:hover {
	box-shadow: 0 0 18px var(--fr-glow), 0 2px 6px rgba(0, 0, 0, 0.5);
	transform: scale(1.12);
}

.fr-volume-slider::-webkit-slider-thumb:active {
	transform: scale(1.05);
}

/* Firefox — thumb */
.fr-volume-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fr-accent);
	cursor: pointer;
	border: 2px solid var(--fr-accent-h);
	box-shadow: 0 0 10px var(--fr-glow), 0 2px 4px rgba(0, 0, 0, 0.4);
	transition: box-shadow var(--fr-transition), transform var(--fr-transition);
}

.fr-volume-slider::-moz-range-thumb:hover {
	box-shadow: 0 0 18px var(--fr-glow), 0 2px 6px rgba(0, 0, 0, 0.5);
	transform: scale(1.12);
}

/* Volume slider stays visible on every device (desktop, Android, iOS).
   A previous rule hid it on touch to work around a phantom Android
   keyboard bug, but the real culprit was an invisible modal overlay
   from fr-suggestions.js (fixed in v1.0.10). Keep the slider. */

/* ============================================
   ON AIR LED — Pulsating red glow
   ============================================ */

.fr-is-playing .fr-now-playing::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #ef4444;
	border-radius: 50%;
	margin-right: 6px;
	box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
	animation: fr-pulse 1.5s ease-in-out infinite;
	vertical-align: middle;
}

@keyframes fr-pulse {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 4px 0 rgba(239, 68, 68, 0.6);
	}
	50% {
		opacity: 0.6;
		box-shadow: 0 0 12px 6px rgba(239, 68, 68, 0);
	}
}

/* ============================================
   Responsive — Mobile-first
   ============================================ */

@media (max-width: 480px) {
	.frado-radio-player {
		padding: 16px;
		border-radius: 12px;
	}

	.fr-track-title {
		font-size: 16px;
	}

	.fr-btn-play {
		width: 48px;
		height: 48px;
	}
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.frado-radio-player,
	.fr-btn,
	.fr-btn-play,
	.fr-btn svg,
	.fr-progress-bar,
	.fr-progress-fill::after {
		transition: none !important;
	}

	.fr-is-playing .fr-now-playing::before {
		animation: none;
	}

	.fr-track-title:hover {
		animation: none;
	}
}

/* ============================================
   Spectrograph — Wave 5.1
   Scrolling heatmap canvas, square aspect-ratio.
   ============================================ */

.fr-spectrograph {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.fr-spectrograph-canvas {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	image-rendering: pixelated; /* keep sharp heatmap pixels */
	image-rendering: crisp-edges;
}

/* Standalone FRADO Spectrum container */
.frado-spectrum-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	font-family: var(--fr-font, system-ui, -apple-system, sans-serif);
}

/* Mobile: canvas fills full viewport width */
@media (max-width: 480px) {
	.frado-spectrum-wrap {
		max-width: 100%;
	}

	.fr-spectrograph {
		border-radius: 0;
		width: 100vw;
		margin-left: calc(-1 * var(--fr-player-padding, 0px));
	}
}

/* Reduced motion: dim the spectrograph */
@media (prefers-reduced-motion: reduce) {
	.fr-spectrograph-canvas {
		opacity: 0.5;
	}
}

/* ============================================
   Reactions — Wave 6.4
   Emoji buttons bar + floating animation
   ============================================ */

/* Float area: covers the full player, no pointer events */
.fr-reactions-float {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 10;
}

/* Bar of emoji buttons, pinned at the bottom of player inner */
.fr-reactions-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 0 4px;
	position: relative;
}

/* Cooldown progress line under the bar */
.fr-reactions-bar::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	height: 2px;
	background: linear-gradient(90deg, var(--fr-accent), var(--fr-accent-h));
	border-radius: 1px;
	transform: translateX(-50%);
	transition: none;
}

.fr-reactions-bar--cooling::after {
	width: 100%;
	transition: width var(--fr-cooldown-duration, 5000ms) linear;
	/* Reverse: bar shrinks left-to-right to show countdown draining */
	animation: fr-cooldown-drain var(--fr-cooldown-duration, 5000ms) linear forwards;
}

@keyframes fr-cooldown-drain {
	0%   { width: 100%; opacity: 1; }
	95%  { width: 2%;   opacity: 1; }
	100% { width: 0%;   opacity: 0; }
}

/* Individual emoji button */
.fr-reaction-btn {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	width: 42px;
	height: 42px;
	font-size: 20px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition:
		transform var(--fr-transition),
		background var(--fr-transition),
		border-color var(--fr-transition),
		opacity var(--fr-transition);
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	position: relative;
	overflow: hidden;
}

.fr-reaction-btn:hover {
	transform: scale(1.25);
	background: rgba(202, 138, 4, 0.15);
	border-color: rgba(202, 138, 4, 0.3);
}

.fr-reaction-btn:active {
	transform: scale(0.88);
}

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

/* Cooldown state: dimmed and non-interactive */
.fr-reaction-btn--cooling,
.fr-reaction-btn:disabled {
	opacity: 0.38;
	cursor: not-allowed;
	transform: none !important;
	pointer-events: none;
}

/* Floating emoji element */
.fr-emoji-float {
	position: absolute;
	bottom: 60px;
	font-size: 30px;
	line-height: 1;
	pointer-events: none;
	will-change: transform, opacity;
	animation: fr-float-up 3s ease-out forwards;
}

@keyframes fr-float-up {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	20% {
		opacity: 1;
		transform: translateY(-40px) scale(1.3);
	}
	100% {
		opacity: 0;
		transform: translateY(-220px) scale(1.1);
	}
}

/* Reduced motion: skip animation, just fade */
@media (prefers-reduced-motion: reduce) {
	.fr-emoji-float {
		animation: fr-float-fade 0.8s ease-out forwards;
	}

	@keyframes fr-float-fade {
		0%   { opacity: 1; }
		100% { opacity: 0; }
	}

	.fr-reactions-bar--cooling::after {
		animation: none;
		transition: none;
	}

	.fr-reaction-btn {
		transition: none !important;
	}
}