/* =========================
   Suifeel 360 Viewer
========================= */

.suifeel-360-viewer {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 40px;
	overflow: hidden;

	background:
		radial-gradient(
			circle at center,
			rgba(196,224,240,0.10) 0%,
			rgba(255,255,255,0) 72%
		);

	cursor: grab;
	user-select: none;
}

.suifeel-360-viewer:active {
	cursor: grabbing;
}

/* 外側の静かな光 */

.suifeel-360-viewer::before {
	content: "";

	position: absolute;
	left: 50%;
	top: 50%;

	width: 68%;
	height: 68%;

	transform: translate(-50%, -50%);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(215,235,246,0.22) 0%,
			rgba(215,235,246,0.10) 42%,
			rgba(215,235,246,0.00) 72%
		);

	filter: blur(2px);

	z-index: 1;
}

/* 製品画像 */

.suifeel-360-main {
	position: relative;
	z-index: 3;

	width: 58%;
	height: auto;

	display: block;

	object-fit: contain;

	pointer-events: none;
	user-select: none;

	filter:
		drop-shadow(0 28px 45px rgba(12,22,38,0.10));
}

/* ガイド */

.suifeel-360-guide {
	position: absolute;

	left: 50%;
	bottom: 36px;

	transform: translateX(-50%);

	z-index: 5;

	padding: 11px 18px;

	border-radius: 999px;

	background: rgba(255,255,255,0.62);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	border: 1px solid rgba(180,205,220,0.20);

	font-size: 10px;
	font-weight: 500;

	letter-spacing: 0.28em;

	color: #7d9cb0;

	line-height: 1;
}

/* hover */

.suifeel-360-viewer:hover .suifeel-360-main {
	transform: scale(1.01);
	transition: transform 0.35s ease;
}