/* 得意分野リング（Three.js）
   表示枠の縦横比を元画像（1828×757）と同じにし、
   文字やタグはすべて --tag-scale（表示幅 / 1828）で拡大縮小する */
.tech-ring {
	position: relative;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	user-select: none;
	--tag-scale: 0.6;
}
.tech-ring.is-ready {
	aspect-ratio: 1828 / 757;
	overflow: hidden;
}
.tech-ring:not(.is-ready) .tech-ring-dept {
	display: none;
}

/* WebGL 初期化前・非対応時は元画像を表示 */
.tech-ring-fallback {
	display: block;
	width: 100%;
	height: auto;
}
.tech-ring.is-ready .tech-ring-fallback {
	display: none;
}
.tech-ring canvas,
.tech-ring .tech-ring-labels {
	position: absolute;
	inset: 0;
}
.tech-ring canvas {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.tech-ring.is-ready canvas {
	opacity: 1;
}

/* 部門見出し（位置は元画像に合わせて % 指定） */
.tech-ring-dept {
	position: absolute;
	z-index: 2;
	margin: 0;
	font-weight: 900;
	font-style: italic;
	font-size: calc(40px * var(--tag-scale));
	line-height: 1.2;
	color: #111;
	white-space: nowrap;
	pointer-events: none;
}
.tech-ring-dept::before {
	content: "■";
	margin-right: 0.1em;
}
.tech-ring-dept--hw {
	top: 3%;
	left: 4%;
}
.tech-ring-dept--sw {
	right: 2.5%;
	bottom: 6%;
}

/* タグ */
.tech-ring-tag {
	display: inline-block;
	padding: 0.18em 0.5em;
	border-radius: 0.3em;
	background: var(--c);
	color: #fff;
	font-weight: 900;
	font-style: italic;
	font-size: calc(var(--fs) * var(--tag-scale));
	line-height: 1.25;
	white-space: nowrap;
	cursor: default;
	box-shadow: 0 0.2em 0.6em -0.2em color-mix(in srgb, var(--c) 70%, transparent);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
	opacity: 0;
	animation: techRingTagIn 0.6s ease forwards;
	animation-delay: var(--delay, 0s);
}
.tech-ring-tag:hover,
.tech-ring-tag.is-active {
	transform: scale(1.1);
	box-shadow: 0 0.3em 1.2em -0.1em var(--c);
	filter: brightness(1.08);
}
@keyframes techRingTagIn {
	from { opacity: 0; translate: 0 0.5em; }
	to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tech-ring-tag {
		animation: none;
		opacity: 1;
	}
}