.c-text-barrage {
	--text-barrage-height: 170svh;
	--text-barrage-bg-top: #07111e;
	--text-barrage-bg-bottom: #0f2034;
	--text-barrage-text: #eff7ff;
	--text-barrage-accent: #cf7f9f;
	--text-barrage-accent-sub: #9ab7d2;
	--text-barrage-plane-width: min(56vw, 920px);
	--text-barrage-plane-height: min(44vh, 420px);
	--text-barrage-plane-angle: 72deg;
	--text-barrage-line-gap: 18px;
	position: relative;
	min-height: var(--text-barrage-height);
	overflow: clip;
	background: none;
	color: var(--text-barrage-text);
}

.c-text-barrage__sticky {
	position: sticky;
	top: 0;
	min-height: 100svh;
	overflow: hidden;
	perspective: 1400px;
	isolation: isolate;
}

.c-text-barrage__grid {
	position: absolute;
	inset: 0;
	background-image: none;
	mask-image: none;
	opacity: 0.24;
	pointer-events: none;
	z-index: 1;
}

.c-text-barrage__glow,
.c-text-barrage__glow::before,
.c-text-barrage__glow::after {
	position: absolute;
	border-radius: 50%;
	filter: blur(18px);
	pointer-events: none;
	content: "";
}

.c-text-barrage__glow {
	inset: 0;
	z-index: 1;
	display: none;
}

.c-text-barrage__glow::before {
	top: 14%;
	left: 8%;
	width: min(18vw, 220px);
	height: min(18vw, 220px);
	background: rgba(154, 183, 210, 0.18);
}

.c-text-barrage__glow::after {
	right: 10%;
	bottom: 18%;
	width: min(16vw, 180px);
	height: min(16vw, 180px);
	background: rgba(207, 127, 159, 0.14);
}

.c-text-barrage__center {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: min(34vw, 480px);
	transform: translate(-50%, -50%);
	text-align: center;
}

.c-text-barrage__eyebrow {
	margin: 0 0 12px;
	color: var(--text-barrage-accent);
	font-size: clamp(12px, 1vw, 14px);
	letter-spacing: 0.26em;
}

.c-text-barrage__title {
	margin: 0 0 16px;
	font-size: clamp(40px, 5vw, 88px);
	line-height: 0.92;
	letter-spacing: 0.08em;
	text-shadow: none;
}

.c-text-barrage__text {
	margin: 0;
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.85;
	color: rgba(239, 247, 255, 0.88);
}

.c-text-barrage__plane {
	position: absolute;
	top: 50%;
	width: var(--text-barrage-plane-width);
	height: var(--text-barrage-plane-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--text-barrage-line-gap);
	opacity: 0;
	transition:
		opacity 0.5s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 2;
}

.c-text-barrage__plane::before {
	content: none;
}

.c-text-barrage__plane--left {
	left: 50%;
	top: 43%;
	transform-origin: right center;
	transform: translate3d(-56vw, -50%, -80px) rotateY(var(--text-barrage-plane-angle));
	mask-image: none;
}

.c-text-barrage__plane--right {
	right: 50%;
	top: 57%;
	transform-origin: left center;
	transform: translate3d(56vw, -50%, -80px) rotateY(calc(var(--text-barrage-plane-angle) * -1));
	mask-image: none;
}

.c-text-barrage__line {
	position: relative;
	overflow: visible;
	height: clamp(58px, 5.8vw, 92px);
	display: flex;
	align-items: center;
	padding: 0;
}

.c-text-barrage__line::before,
.c-text-barrage__line::after {
	content: none;
}

.c-text-barrage__marquee {
	display: inline-flex;
	align-items: center;
	min-width: max-content;
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: none;
	white-space: nowrap;
	transform: translateX(var(--barrage-from-x, 0));
	text-shadow: none;
	animation-duration: var(--barrage-duration, 13s);
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	opacity: 0;
	will-change: transform;
}

.c-text-barrage__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(44px, 4.2vw, 64px);
	padding: 0.6em 1.4em 0.68em;
	border: 6px solid #ffffff;
	border-radius: 999px;
	background: linear-gradient(135deg, #cf7f9f 0%, #d48aa8 48%, #c4789a 100%);
	color: #ffffff;
	line-height: 1;
	box-shadow:
		0 12px 28px rgba(207, 127, 159, 0.34),
		0 0 0 3px rgba(207, 127, 159, 0.16);
	-webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.96);
	text-shadow:
		0 0 1px rgba(255, 255, 255, 0.95),
		0 2px 0 rgba(207, 127, 159, 0.35);
}

.c-text-barrage__item.is-hot {
	background: linear-gradient(135deg, #b8698a 0%, #cf7f9f 50%, #d48aa8 100%);
}

.c-text-barrage__item.is-peach {
	background: linear-gradient(135deg, #d48aa8 0%, #dba0b8 100%);
}

.c-text-barrage__item.is-rose {
	background: linear-gradient(135deg, #c4789a 0%, #cf7f9f 35%, #dba0b8 100%);
}

.c-text-barrage__plane--left .c-text-barrage__marquee.is-running {
	animation-name: text-barrage-move;
	opacity: 1;
}

.c-text-barrage__plane--right .c-text-barrage__marquee.is-running {
	animation-name: text-barrage-move;
	opacity: 1;
}

.c-text-barrage.is-active .c-text-barrage__plane {
	opacity: 1;
}

.c-text-barrage.is-active .c-text-barrage__plane--left {
	transform: translate3d(-50vw, -50%, 0) rotateY(var(--text-barrage-plane-angle));
}

.c-text-barrage.is-active .c-text-barrage__plane--right {
	transform: translate3d(50vw, -50%, 0) rotateY(calc(var(--text-barrage-plane-angle) * -1));
}

@keyframes text-barrage-move {
	from {
		transform: translateX(var(--barrage-from-x, 0));
	}

	to {
		transform: translateX(var(--barrage-to-x, 0));
	}
}

@media screen and (max-width: 960px) {
	.c-text-barrage {
		--text-barrage-height: 150svh;
		--text-barrage-plane-width: min(68vw, 720px);
		--text-barrage-plane-height: min(38vh, 340px);
		--text-barrage-plane-angle: 68deg;
	}

	.c-text-barrage__center {
		width: min(46vw, 420px);
	}

	.c-text-barrage.is-active .c-text-barrage__plane--left {
		transform: translate3d(-52vw, -50%, 0) rotateY(var(--text-barrage-plane-angle));
	}

	.c-text-barrage.is-active .c-text-barrage__plane--right {
		transform: translate3d(52vw, -50%, 0) rotateY(calc(var(--text-barrage-plane-angle) * -1));
	}
}

@media screen and (max-width: 768px) {
	.c-text-barrage {
		--text-barrage-height: 135svh;
		--text-barrage-plane-width: min(86vw, 480px);
		--text-barrage-plane-height: min(34vh, 260px);
		--text-barrage-plane-angle: 78deg;
		--text-barrage-line-gap: 12px;
	}

	.c-text-barrage__center {
		width: min(80vw, 320px);
		top: 42%;
	}

	.c-text-barrage__title {
		font-size: clamp(32px, 10vw, 54px);
	}

	.c-text-barrage__plane {
		height: auto;
	}

	.c-text-barrage__line {
		height: clamp(48px, 9vw, 62px);
		padding: 0;
	}

	.c-text-barrage__marquee {
		font-size: 14px;
	}

	.c-text-barrage__item {
		min-height: 40px;
		padding: 0.54em 1.08em 0.62em;
		border-width: 4px;
	}

	.c-text-barrage.is-active .c-text-barrage__plane--left {
		transform: translate3d(-54vw, -28%, 0) rotateY(var(--text-barrage-plane-angle));
	}

	.c-text-barrage.is-active .c-text-barrage__plane--right {
		transform: translate3d(54vw, 4%, 0) rotateY(calc(var(--text-barrage-plane-angle) * -1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-text-barrage__plane,
	.c-text-barrage__marquee {
		animation: none;
		transition: none;
	}
}