/**
 * 「枠」モチーフをホバー/フォーカス時のマイクロインタラクションとして
 * サイト全体で繰り返し使う（カメラのファインダー風コーナーマーク）。
 * あわせて、少し弾む（オーバーシュートする）スケール変化も付与し、
 * Works/Service/Company/Contact等、corner-frameを使う箇所全体に触れた感触を出す。
 * コーナーマークの色は--corner-frame-accentで上書き可能（未指定時は--color-accent-brightに
 * フォールバック）。TOPページのService/Worksセクションでは差し色として使う。
 */
.corner-frame {
	position: relative;
	transform: scale(1);
	transition: transform var(--duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.corner-frame:hover,
.corner-frame:focus-visible {
	transform: scale(1.025);
}

.corner-frame:active {
	transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
	.corner-frame {
		transition: none;
	}

	.corner-frame:hover,
	.corner-frame:focus-visible,
	.corner-frame:active {
		transform: none;
	}
}

.corner-frame__mark {
	position: absolute;
	width: 16px;
	height: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-fast) var(--ease-standard),
		width var(--duration-fast) var(--ease-standard),
		height var(--duration-fast) var(--ease-standard);
}

.corner-frame__mark--tl {
	top: -2px;
	left: -2px;
	border-top: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
	border-left: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
}

.corner-frame__mark--tr {
	top: -2px;
	right: -2px;
	border-top: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
	border-right: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
}

.corner-frame__mark--bl {
	bottom: -2px;
	left: -2px;
	border-bottom: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
	border-left: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
}

.corner-frame__mark--br {
	bottom: -2px;
	right: -2px;
	border-bottom: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
	border-right: 2px solid var(--corner-frame-accent, var(--color-accent-bright));
}

.corner-frame:hover .corner-frame__mark,
.corner-frame:focus-visible .corner-frame__mark {
	opacity: 1;
	width: 20px;
	height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.corner-frame__mark {
		transition: opacity var(--duration-fast) linear;
	}
}

/**
 * 常時表示・大型版：CTAボタンなど、ホバーを待たずに「枠」を主役として見せたい箇所で使う。
 */
.corner-frame--static .corner-frame__mark {
	opacity: 1;
	width: 22px;
	height: 22px;
}

.corner-frame--static:hover .corner-frame__mark,
.corner-frame--static:focus-visible .corner-frame__mark {
	width: 28px;
	height: 28px;
}