/*
 * お問い合わせフォームの演出（public/wizard/js/contact-motion.js と組で使う）
 *
 * すべて .wz-motion の下だけに効く（スクリプトが動いたときだけ付く）。
 * サイトの基調（白と黒の鋭い形・主役のネイビー）に合わせ、動きは控えめにしている。
 */

.wz-motion {
	--wz-ink: var(--black);
	--wz-accent: var(--navy-600);
	--wz-accent-soft: rgba(10, 61, 128, 0.08);
	--wz-ok: #1f8a5b;
	--wz-error: var(--red-600);
	--wz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 見出し ---------- */

.wz-motion .contact-hero .hero-title {
	position: relative;
	display: inline-block;
	padding-bottom: 18px;
	animation: wz-rise 0.9s var(--wz-ease) both;
}

.wz-motion .wz-title-line {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 72px;
	height: 3px;
	margin-left: -36px;
	background: linear-gradient(90deg, var(--navy-600), var(--navy-500) 60%, var(--red-600));
	transform-origin: left center;
	animation: wz-draw 1s 0.35s var(--wz-ease) both;
}

.wz-motion .intro-text {
	animation: wz-rise 0.9s 0.15s var(--wz-ease) both;
}

/* ---------- 項目が順に浮かび上がる ---------- */

.wz-motion .wz-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.7s var(--wz-ease) var(--wz-delay, 0ms),
		transform 0.7s var(--wz-ease) var(--wz-delay, 0ms);
}

.wz-motion .wz-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- 進み具合 ---------- */

.wz-motion .wz-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 36px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gray-650);
}

.wz-motion .wz-progress-text {
	flex: none;
	min-width: 13em;
	transition: color 0.4s ease;
}

.wz-motion .wz-progress-bar {
	position: relative;
	flex: 1;
	height: 4px;
	overflow: hidden;
	background: var(--gray-300);
}

.wz-motion .wz-progress-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--navy-600), var(--navy-500));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.6s var(--wz-ease), background 0.4s ease;
}

.wz-motion .wz-progress.is-complete .wz-progress-text {
	color: var(--wz-ok);
}

.wz-motion .wz-progress.is-complete .wz-progress-fill {
	background: linear-gradient(90deg, var(--navy-600), var(--wz-ok));
}

/* ---------- ラベルと印 ---------- */

.wz-motion .wz-field {
	position: relative;
	padding-left: 14px;
}

/* 入力中の項目の左に、細い線が伸びる */
.wz-motion .wz-field::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 3px;
	background: var(--wz-accent);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform 0.45s var(--wz-ease);
}

.wz-motion .wz-field.is-focus::before {
	transform: scaleY(1);
}

.wz-motion .wz-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.wz-motion .wz-label-text {
	transition: color 0.3s ease;
}

.wz-motion .wz-field.is-focus .wz-label-text {
	color: var(--wz-accent);
}

.wz-motion .wz-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.08em;
}

.wz-motion .wz-badge--required {
	color: var(--white);
	background: var(--wz-error);
}

.wz-motion .wz-badge--optional {
	color: var(--gray-650);
	background: var(--gray-200);
}

/* ---------- 入力欄 ---------- */

/* 入力中は、下からネイビーの線が引かれる */
.wz-motion .wpcf7-form-control:not(.wpcf7-submit) {
	background-image: linear-gradient(var(--wz-accent), var(--wz-accent));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition:
		background-size 0.5s var(--wz-ease),
		border-color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease;
}

.wz-motion .wpcf7-form-control:not(.wpcf7-submit):focus {
	background-size: 100% 2px;
	border-color: var(--gray-450);
	box-shadow: 0 10px 30px -18px rgba(10, 61, 128, 0.45);
}

.wz-motion .wz-field.is-valid .wpcf7-form-control {
	padding-right: 46px;
}

/* 印の位置の基準にするため、入力欄の入れ物を箱にする（元は行の中の要素で、位置がずれる） */
.wz-motion .wpcf7-form-control-wrap {
	display: block;
}

/* 正しく入力されたら、右に印が出る（入力欄の1行目の高さの中央） */
.wz-motion .wz-ok {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wz-ok);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.wz-motion .wz-ok svg {
	position: absolute;
	inset: 4px;
	fill: none;
	stroke: var(--white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 22;
	stroke-dashoffset: 22;
	transition: stroke-dashoffset 0.35s 0.1s ease;
}

.wz-motion .wz-field.is-valid .wz-ok {
	opacity: 1;
	transform: scale(1);
}

.wz-motion .wz-field.is-valid .wz-ok svg {
	stroke-dashoffset: 0;
}

/* 文字数 */
.wz-motion .wz-count {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	text-align: right;
	color: var(--gray-600);
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
}

.wz-motion .wz-count.is-near {
	color: var(--wz-error);
}

/* ---------- 誤りがあるとき ---------- */

.wz-motion .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wz-error);
	background-image: linear-gradient(var(--wz-error), var(--wz-error));
	background-size: 100% 2px;
}

.wz-motion .wz-field:has(.wpcf7-not-valid)::before {
	background: var(--wz-error);
	transform: scaleY(1);
}

.wz-motion .wpcf7-not-valid-tip {
	display: block;
	animation: wz-tip 0.35s var(--wz-ease) both;
}

.wz-motion .wz-shake {
	animation: wz-shake 0.45s ease both;
}

/* ---------- 任意の項目の区切り ---------- */

.wz-motion .wz-divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 50px 0 30px;
	font-size: 0.85rem;
	color: var(--gray-650);
}

.wz-motion .wz-divider::before,
.wz-motion .wz-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gray-350);
}

/* ---------- 送信ボタン ---------- */

.wz-motion .wz-submit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	overflow: hidden;
	isolation: isolate;
	font-family: inherit;
}

/* ネイビーが左から満ちる */
.wz-motion .wz-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wz-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s var(--wz-ease);
}

.wz-motion .wz-submit:hover,
.wz-motion .wz-submit:focus-visible {
	color: var(--white);
	background-color: var(--black);
	border-color: var(--wz-accent);
}

.wz-motion .wz-submit:hover::before,
.wz-motion .wz-submit:focus-visible::before {
	transform: scaleX(1);
}

.wz-motion .wz-submit-arrow {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.4s var(--wz-ease);
}

.wz-motion .wz-submit:hover .wz-submit-arrow {
	transform: translateX(6px);
}

/* 送信中: 矢印の代わりに点が流れる */
.wz-motion .wz-submit.is-loading {
	cursor: progress;
}

.wz-motion .wz-submit.is-loading .wz-submit-arrow {
	display: none;
}

.wz-motion .wz-submit.is-loading .wz-submit-label::after {
	content: "";
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: wz-dots 1.2s steps(4, end) infinite;
}

/* CF7 の読み込み中の印は、ボタンの中の表示に置き換えたので出さない */
.wz-motion .wpcf7-spinner {
	display: none;
}

/* ---------- 送信完了 ---------- */

.wz-motion .wz-success {
	margin: 0 0 40px;
	padding: 40px 24px;
	text-align: center;
	background: linear-gradient(180deg, var(--wz-accent-soft), transparent);
	border-top: 3px solid var(--wz-accent);
}

.wz-motion .wz-success.is-shown {
	animation: wz-pop 0.6s var(--wz-ease) both;
}

.wz-motion .wz-success-mark {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: block;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wz-motion .wz-success-circle {
	stroke: var(--wz-accent);
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
}

.wz-motion .wz-success-check {
	stroke: var(--wz-accent);
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
}

.wz-motion .wz-success.is-shown .wz-success-circle {
	animation: wz-stroke 0.7s 0.15s var(--wz-ease) forwards;
}

.wz-motion .wz-success.is-shown .wz-success-check {
	animation: wz-stroke 0.45s 0.75s var(--wz-ease) forwards;
}

.wz-motion .wz-success-title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--black);
}

.wz-motion .wz-success-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--gray-750);
}

/* ---------- 動き ---------- */

@keyframes wz-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes wz-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes wz-tip {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@keyframes wz-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

@keyframes wz-dots {
	0% { content: ""; }
	25% { content: "."; }
	50% { content: ".."; }
	75% { content: "..."; }
}

@keyframes wz-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes wz-stroke {
	to { stroke-dashoffset: 0; }
}

/* ---------- スマホ ---------- */

@media (max-width: 1080px) {
	.wz-motion .wz-progress {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.wz-motion .wz-progress-text {
		min-width: 0;
	}
}

/* ---------- 動きを減らす設定の人には動かさない ---------- */

@media (prefers-reduced-motion: reduce) {
	.wz-motion *,
	.wz-motion *::before,
	.wz-motion *::after {
		animation: none !important;
		transition: none !important;
	}

	.wz-motion .wz-reveal {
		opacity: 1;
		transform: none;
	}

	.wz-motion .wz-title-line,
	.wz-motion .wz-success-circle,
	.wz-motion .wz-success-check {
		transform: none;
		stroke-dashoffset: 0;
	}
}