/* =============================================================
   水滴カーソル（PCのみ）
   - .slabo-drop：レンズ状の雫（backdrop-filterで背景が屈折して見える）
   - .slabo-drop-dot：中心の小さなドット（正確な位置の目印）
   - .slabo-drop-ripple：クリック時の波紋
   ============================================================= */

@media (hover: hover) and (pointer: fine) {

	/* ネイティブカーソルは隠し、雫＋ドットに置き換える。
	   テキスト入力中は編集キャレットが分かるよう通常表示に戻す */
	html.slabo-cursor-on,
	html.slabo-cursor-on body,
	html.slabo-cursor-on a,
	html.slabo-cursor-on button {
		cursor: none;
	}
	html.slabo-cursor-on input,
	html.slabo-cursor-on textarea,
	html.slabo-cursor-on select {
		cursor: auto;
	}

	.slabo-drop,
	.slabo-drop-dot,
	.slabo-drop-ripple {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 100000;
		opacity: 0;
	}

	/* 雫本体：水のレンズ */
	.slabo-drop {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background:
			radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 40%),
			radial-gradient(circle at 50% 50%, rgba(11, 180, 170, 0.06) 0, rgba(11, 180, 170, 0.10) 65%, rgba(255, 255, 255, 0.22) 100%);
		border: 1px solid rgba(255, 255, 255, 0.35);
		box-shadow:
			inset 0 -4px 8px rgba(255, 255, 255, 0.25),
			inset 0 3px 6px rgba(0, 0, 0, 0.08),
			0 2px 10px rgba(0, 0, 0, 0.10);
		-webkit-backdrop-filter: blur(2.5px) saturate(1.35) brightness(1.06);
		backdrop-filter: blur(2.5px) saturate(1.35) brightness(1.06);
		transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
		will-change: transform;
	}

	/* 中心ドット */
	.slabo-drop-dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--slabo-accent, #0bb4aa);
		box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
		will-change: transform;
	}

	html.slabo-cursor-visible .slabo-drop,
	html.slabo-cursor-visible .slabo-drop-dot {
		opacity: 1;
	}

	/* リンク・ボタンにホバー：雫が膨らむ */
	.slabo-drop.slabo-drop--hover {
		width: 56px;
		height: 56px;
	}

	/* 押下：表面張力でキュッと縮む */
	.slabo-drop.slabo-drop--down {
		width: 24px;
		height: 24px;
	}

	/* クリック後の波紋 */
	.slabo-drop-ripple {
		width: 12px;
		height: 12px;
		margin: -6px 0 0 -6px;
		border-radius: 50%;
		border: 1.5px solid rgba(11, 180, 170, 0.65);
		opacity: 1;
		animation: slabo-drop-ripple 0.65s ease-out forwards;
	}
	@keyframes slabo-drop-ripple {
		to {
			transform: scale(6);
			opacity: 0;
			border-width: 0.5px;
		}
	}
}

/* 動きを減らす設定・タッチ端末では何も表示しない（JS側でも無効化済み） */
@media (prefers-reduced-motion: reduce) {
	.slabo-drop,
	.slabo-drop-dot,
	.slabo-drop-ripple {
		display: none !important;
	}
}