/**
 * #Text mark（文字の白背景）
 */

.c-mark {
	display: inline-block;
	padding: 0.2em 0.05em;
	background-color: var(--white);
	color: #111;
	line-height: 1;
	text-box: trim-both cap alphabetic;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.c-mark--en {
	padding: 0.1em 0.05em;
}

/**
 * 帯が左からスライドイン → 文字がマスクで左から露出
 */
.js-mark-reveal {
	--mark-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mark-bg-duration: 0.55s;
	--mark-text-duration: 0.5s;
	--mark-text-delay: 0.5s;
	--mark-stagger: 0s;
	position: relative;
	overflow: hidden;
	width: fit-content;
	max-width: 100%;
	background-color: transparent;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background-color: var(--white);
		transform: translateX(-100%);
		pointer-events: none;
	}

	&.js-mark-reveal--dark::before {
		background-color: #111;
	}

	.c-mark__text {
		position: relative;
		z-index: 1;
		display: inline-block;
		max-width: 100%;
		clip-path: inset(0 100% 0 0);
		line-height: 1.1;
	}
}

.js-mark-reveal + .js-mark-reveal,
.js-mark-reveal + * .js-mark-reveal {
	--mark-stagger: 0.25s;
}

.js-mark-reveal.is-in::before {
	animation: mark-reveal-bg var(--mark-bg-duration) var(--mark-ease) var(--mark-stagger) forwards;
}

.js-mark-reveal.is-in .c-mark__text {
	animation: mark-reveal-text var(--mark-text-duration) var(--mark-ease) calc(var(--mark-text-delay) + var(--mark-stagger)) forwards;
}

@keyframes mark-reveal-bg {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

@keyframes mark-reveal-text {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js-mark-reveal::before,
	.js-mark-reveal.is-in::before {
		animation: none;
		transform: none;
	}

	.js-mark-reveal .c-mark__text,
	.js-mark-reveal.is-in .c-mark__text {
		animation: none;
		clip-path: none;
	}
}