/* Announcement bar extracted from the uploaded static homepage. */
.announce {
	position: relative;
	z-index: 300;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--announce-height);
	overflow: hidden;
	background: #0f1820;
	border-bottom: 1px solid rgba(79, 114, 150, 0.3);
}

.announce::before,
.announce::after {
	content: "";
	position: absolute;
	top: 0;
	z-index: 2;
	width: 80px;
	height: 100%;
	pointer-events: none;
}

.announce::before {
	left: 0;
	background: linear-gradient(to right, #0f1820, transparent);
}

.announce::after {
	right: 0;
	background: linear-gradient(to left, #0f1820, transparent);
}

.announce-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: dr-takashi-announce-scroll 22s linear infinite;
}

.announce-track:hover {
	animation-play-state: paused;
}

.announce-group {
	display: flex;
	align-items: center;
}

.announce-slogan {
	padding: 0 18px;
	color: var(--cream);
	font-family: var(--serif);
	font-size: 15px;
	font-style: italic;
	font-weight: 300;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.announce-slogan em {
	color: var(--wood);
	font-style: normal;
}

.announce-sep {
	display: inline-flex;
	align-items: center;
	padding: 0 8px;
	color: var(--blue);
	font-size: 11px;
	letter-spacing: 0.2em;
	opacity: 0.7;
}

.announce-kanji {
	padding: 0 4px;
	color: var(--blue);
	font-family: "Noto Serif JP", var(--serif);
	font-size: 13px;
	opacity: 0.8;
}

@keyframes dr-takashi-announce-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.announce-track {
		animation: none;
	}
}