/*
 * Public-facing CSS for the Header Messages Bar plugin.
 */
#header-messages-bar {
	position: relative;
	overflow: hidden;
	background-color: #000000;
	color: #ffffff;
	padding: 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	z-index: 1;
}

/* Ensure aurora has a background to blend against */
#header-messages-bar.has-aurora {
	background: #000000;
}

#header-messages-bar.header-messages-bar-hidden {
	display: none;
}

.header-messages-bar-messages-wrapper {
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.header-messages-bar-messages-inner {
	display: flex;
	transition-property: transform;
	transition-timing-function: ease-in-out;
	/* Transition speed will be set by JS via inline style for paused mode */
	/* For continuous mode, transition is disabled via JS */
}

.header-messages-bar-message {
	flex: 0 0 auto; /* Allow message to be its natural width */
	min-width: 100%; /* At minimum take full width */
	box-sizing: border-box;
	padding: 10px 20px;
	white-space: nowrap;
	/* font-weight is set dynamically via inline CSS */
}

.header-messages-bar-message.header-messages-bar-clickable {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.header-messages-bar-message a {
	color: inherit;
	text-decoration: none;
}

.header-messages-bar-message a:hover {
	text-decoration: underline;
}

/* Aurora Effect Styles */
.aurora {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	mix-blend-mode: darken;
	pointer-events: none;
	overflow: hidden;
}

.aurora__item {
	overflow: hidden;
	position: absolute;
	width: 60vw;
	height: 60vw;
	border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	filter: blur(1rem);
	mix-blend-mode: overlay;
	opacity: 0.8;
	/* background-color is set dynamically via inline CSS */
}

.aurora__item:nth-of-type(1) {
	top: -50%;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
	right: 0;
	top: 0;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
	left: 0;
	bottom: 0;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
	right: 0;
	bottom: -50%;
	animation: aurora-border 6s ease-in-out infinite,
		aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
	0% {
		top: 0;
		right: 0;
	}
	50% {
		top: 100%;
		right: 75%;
	}
	75% {
		top: 100%;
		right: 25%;
	}
	100% {
		top: 0;
		right: 0;
	}
}

@keyframes aurora-2 {
	0% {
		top: -50%;
		left: 0%;
	}
	60% {
		top: 100%;
		left: 75%;
	}
	85% {
		top: 100%;
		left: 25%;
	}
	100% {
		top: -50%;
		left: 0%;
	}
}

@keyframes aurora-3 {
	0% {
		bottom: 0;
		left: 0;
	}
	40% {
		bottom: 100%;
		left: 75%;
	}
	65% {
		bottom: 40%;
		left: 50%;
	}
	100% {
		bottom: 0;
		left: 0;
	}
}

@keyframes aurora-4 {
	0% {
		bottom: -50%;
		right: 0;
	}
	50% {
		bottom: 0%;
		right: 40%;
	}
	90% {
		bottom: 50%;
		right: 25%;
	}
	100% {
		bottom: -50%;
		right: 0;
	}
}

@keyframes aurora-border {
	0% {
		border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	}
	25% {
		border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
	}
	50% {
		border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
	}
	75% {
		border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
	}
	100% {
		border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
	}
}