/* EL HAIK Background Music: floating button. Colours follow the EL HAIK identity:
   deep Moroccan green, champagne gold and ivory. */

.ehbm{
	--ehbm-bg:#0F3B28;
	--ehbm-bg-hover:#15532E;
	--ehbm-gold:#C9AE7C;
	--ehbm-line:rgba(201,174,124,.55);
	--ehbm-ivory:#F4EFE4;
	position:fixed;
	z-index:90;
	bottom:calc(var(--ehbm-bottom,24px) + var(--ehbm-lift,0px) + env(safe-area-inset-bottom,0px));
	left:calc(var(--ehbm-side,24px) + env(safe-area-inset-left,0px));
	display:flex;
	align-items:center;
	margin:0;
	padding:0;
	/* Only the visible parts take clicks, never the empty space around them. */
	pointer-events:none;
	font-family:inherit;
	line-height:1.2;
	-webkit-tap-highlight-color:transparent;
	transition:bottom .25s ease,opacity .2s ease,visibility .2s;
}
.ehbm-right{
	left:auto;
	right:calc(var(--ehbm-side,24px) + env(safe-area-inset-right,0px));
}
.ehbm.is-covered,
.ehbm.is-tucked{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.ehbm-button{
	all:unset;
	box-sizing:border-box;
	position:relative;
	display:grid;
	place-items:center;
	width:48px;
	height:48px;
	border-radius:50%;
	background:var(--ehbm-bg);
	color:var(--ehbm-gold);
	border:1px solid var(--ehbm-line);
	box-shadow:0 8px 22px rgba(4,20,14,.28);
	cursor:pointer;
	pointer-events:auto;
	transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.ehbm-button:hover{
	background:var(--ehbm-bg-hover);
	border-color:var(--ehbm-gold);
}
.ehbm-button:active{
	transform:scale(.95);
}
.ehbm-button:focus-visible{
	outline:2px solid var(--ehbm-gold);
	outline-offset:3px;
}

.ehbm-ico{
	display:block;
	width:22px;
	height:22px;
	overflow:visible;
}
.ehbm-ico-on{
	display:none;
	fill:currentColor;
}
.ehbm.is-on .ehbm-ico-on{
	display:block;
}
.ehbm.is-on .ehbm-ico-off{
	display:none;
}
.ehbm-slash-bg{
	stroke:var(--ehbm-bg);
	stroke-width:4.5;
	transition:stroke .2s ease;
}
.ehbm-button:hover .ehbm-slash-bg{
	stroke:var(--ehbm-bg-hover);
}

/* While the music plays: the bars rise and fall, and a thin gold ring breathes. */
.ehbm-ico-on rect{
	transform-box:fill-box;
	transform-origin:center;
}
.ehbm-animate.is-playing .ehbm-ico-on rect{
	animation:ehbm-wave 1.25s ease-in-out infinite;
}
.ehbm-animate.is-playing .ehbm-ico-on rect:nth-child(2){
	animation-duration:1.05s;
	animation-delay:-.45s;
}
.ehbm-animate.is-playing .ehbm-ico-on rect:nth-child(3){
	animation-duration:1.4s;
	animation-delay:-.8s;
}
.ehbm-animate.is-playing .ehbm-ico-on rect:nth-child(4){
	animation-duration:.95s;
	animation-delay:-.2s;
}
.ehbm-animate.is-playing .ehbm-button::after{
	content:"";
	position:absolute;
	inset:-6px;
	border:1px solid var(--ehbm-line);
	border-radius:50%;
	pointer-events:none;
	animation:ehbm-ring 3s ease-out infinite;
}
@keyframes ehbm-wave{
	0%,100%{transform:scaleY(.45)}
	50%{transform:scaleY(1)}
}
@keyframes ehbm-ring{
	0%{transform:scale(.94);opacity:.85}
	70%,100%{transform:scale(1.24);opacity:0}
}

/* Label above the button, for mouse and keyboard users. Screen readers read the button's own label. */
.ehbm-tip{
	position:absolute;
	bottom:calc(100% + 10px);
	left:0;
	padding:7px 11px;
	border:1px solid rgba(201,174,124,.35);
	border-radius:4px;
	background:var(--ehbm-bg);
	color:var(--ehbm-ivory);
	box-shadow:0 6px 16px rgba(4,20,14,.2);
	font-size:12px;
	letter-spacing:.03em;
	white-space:nowrap;
	opacity:0;
	visibility:hidden;
	transform:translateY(4px);
	transition:opacity .15s ease,transform .15s ease,visibility .15s;
	pointer-events:none;
}
.ehbm-right .ehbm-tip{
	left:auto;
	right:0;
}
.ehbm-tip:lang(ar),
.ehbm-tip[dir="rtl"]{
	letter-spacing:0;
}
@media (hover:hover){
	.ehbm-button:hover~.ehbm-tip{
		opacity:1;
		visibility:visible;
		transform:none;
	}
}
.ehbm-button:focus-visible~.ehbm-tip{
	opacity:1;
	visibility:visible;
	transform:none;
}

/* Volume, on computers only: phones and tablets use their own volume buttons. */
.ehbm-panel{
	display:none;
}
@media (hover:hover) and (pointer:fine){
	.ehbm-panel{
		display:flex;
		align-items:center;
		height:48px;
		padding-inline-start:10px;
		opacity:0;
		visibility:hidden;
		pointer-events:auto;
		transform:translateX(-6px);
		transition:opacity .15s ease,transform .15s ease,visibility .15s;
	}
	.ehbm-right .ehbm-panel{
		transform:translateX(6px);
	}
	.ehbm.is-on:hover .ehbm-panel,
	.ehbm.is-on:focus-within .ehbm-panel{
		opacity:1;
		visibility:visible;
		transform:none;
	}
	.ehbm-pill{
		display:flex;
		align-items:center;
		height:36px;
		padding:0 14px;
		border:1px solid rgba(201,174,124,.35);
		border-radius:18px;
		background:var(--ehbm-bg);
		box-shadow:0 6px 16px rgba(4,20,14,.2);
	}
}
.ehbm-volume{
	-webkit-appearance:none;
	appearance:none;
	width:96px;
	height:20px;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}
.ehbm-volume:focus{
	outline:none;
}
.ehbm-volume:focus-visible{
	outline:2px solid var(--ehbm-gold);
	outline-offset:4px;
	border-radius:2px;
}
.ehbm-volume::-webkit-slider-runnable-track{
	height:2px;
	border-radius:1px;
	background:rgba(201,174,124,.5);
}
.ehbm-volume::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:12px;
	height:12px;
	margin-top:-5px;
	border:1px solid var(--ehbm-gold);
	border-radius:50%;
	background:var(--ehbm-ivory);
}
.ehbm-volume::-moz-range-track{
	height:2px;
	border-radius:1px;
	background:rgba(201,174,124,.5);
}
.ehbm-volume::-moz-range-thumb{
	width:12px;
	height:12px;
	border:1px solid var(--ehbm-gold);
	border-radius:50%;
	background:var(--ehbm-ivory);
}

@media (prefers-reduced-motion:reduce){
	.ehbm,
	.ehbm *{
		transition:none !important;
		animation:none !important;
	}
	.ehbm .ehbm-button::after{
		display:none;
	}
}
@media (forced-colors:active){
	.ehbm-button{
		border:1px solid ButtonText;
	}
}
@media print{
	.ehbm{
		display:none !important;
	}
}