/**
 * 採用ページ: データで見る当社のイラスト（線画。template-parts/recruit/data-illust.php）
 * 動きの考え方は css/recruit-data.css と同じ（is-anim のときだけ描く前の状態にし、is-in で描く）。
 */

/* ==========================================================================
   イラスト（線画）
   ========================================================================== */

.rc-il {
	width: 100%;
	max-width: 230px;
}

.rc-il__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.rc-il__fill {
	fill: var(--rc-accent-soft);
}

.rc-il__line {
	fill: none;
	stroke: var(--rc-ink);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s, opacity 0.2s ease 0.15s;
}

.rc-il__line--accent {
	stroke: var(--rc-accent);
	transition-delay: 0.7s;
}

.rc-il__bubble {
	fill: var(--rc-accent);
	opacity: 0.55;
}

.rc-il__route {
	fill: none;
	stroke: var(--rc-accent);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 0.1 7;
}

.rc-il__hands {
	transform-box: view-box;
	transform-origin: 70px 62px;
	transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.rc-il__pin {
	transform-box: view-box;
}

/* 描く前の状態（線を消しておく） */
.rc-data.is-anim .rc-il__line {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
	opacity: 0; /* 長さ0の線の丸い端が点で見えないようにする */
}

.rc-data.is-anim .is-in .rc-il__line {
	stroke-dashoffset: 0;
	opacity: 1;
}

.rc-data.is-anim .rc-il__hands {
	transform: rotate(-300deg);
}

.rc-data.is-anim .is-in .rc-il__hands {
	transform: none;
}

.rc-data.is-anim .rc-il__bubble,
.rc-data.is-anim .rc-il__route {
	opacity: 0;
	transition: opacity 0.6s ease 1.2s;
}

.rc-data.is-anim .is-in .rc-il__bubble {
	opacity: 0.55;
}

.rc-data.is-anim .is-in .rc-il__route {
	opacity: 1;
}

/* 描き終わったあとの小さな動き（泡が上る・道を歩く・ピンが揺れる・星が光る） */
@media (prefers-reduced-motion: no-preference) {
	.rc-data.is-anim .is-in .rc-il__bubble {
		animation: rc-il-bubble 2.8s ease-in 1.4s infinite;
	}

	.rc-data.is-anim .is-in .rc-il__bubble:nth-of-type(2) {
		animation-delay: 2.3s;
	}

	.rc-data.is-anim .is-in .rc-il__bubble:nth-of-type(3) {
		animation-delay: 3s;
	}

	.rc-data.is-anim .is-in .rc-il__bubble:nth-of-type(4) {
		animation-delay: 3.6s;
	}

	.rc-data.is-anim .is-in .rc-il__route {
		animation: rc-il-walk 1.4s linear infinite;
	}

	.rc-data.is-anim .is-in .rc-il__pin {
		animation: rc-il-pin 2.4s ease-in-out 1.6s infinite;
	}

	.rc-data.is-anim .is-in .rc-il__twinkle {
		animation: rc-il-twinkle 2.6s ease-in-out 1.8s infinite;
	}
}

@keyframes rc-il-bubble {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	20% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
		transform: translateY(-34px);
	}
}

@keyframes rc-il-walk {
	to {
		stroke-dashoffset: -14.2;
	}
}

@keyframes rc-il-pin {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

@keyframes rc-il-twinkle {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
}