:root{
	--size: 64px; /* ボール直径 */
	--floor: 24px; /* 着地点の余白（床との距離） */
	--dur: 3.4s; /* 全体の所要時間（ゆっくりめ） */
	--amp: 200px; /* ジグザグの振れ幅（左右移動量） */
}
html, body { height: 100%; }
body{
	margin: 0;
	background: radial-gradient(1000px 500px at 50% -10%, #0b2237, #061a2b 60%, #051420);
}

.ball{
	position: fixed; left: 12%; top: 0; /* transformで初期位置を上に出す */
	width: var(--size); height: var(--size);
	transform: translateX(-50%) translateY(calc(-1 * var(--size)));
	border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--size)*.75);
	background: radial-gradient(circle at 35% 30%, #ffffff, #e8e8e8 45%, #bdbdbd 70%, #8c8c8c 100%);
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
	animation: zigfall var(--dur) cubic-bezier(.25,.8,.25,1) forwards;
	will-change: transform;
	user-select: none; pointer-events: none;
	/* ここではアニメを付けない（.playing を付けたときだけ動かす） */
	animation: none;
}

/* 実行時（このクラスを付け外しするだけでリスタート可） */
.ball.playing{
	animation: zigfall var(--dur) cubic-bezier(.25,.8,.25,1) forwards;
}

/* ジグザグでゆっくり降下 → 最後に軽くバウンド */
@keyframes zigfall{
	0% { transform: translateX(-50%) translateY(calc(-1 * var(--size))); }
	20% { transform: translateX(calc(-50% + var(--amp))) translateY(20vh); }
	40% { transform: translateX(calc(-50% - var(--amp))) translateY(40vh); }
	60% { transform: translateX(calc(-50% + var(--amp))) translateY(60vh); }
	78% { transform: translateX(-50%) translateY(calc(100vh - var(--size) - var(--floor))); } /* 着地 */
	88% { transform: translateX(-50%) translateY(calc(100vh - var(--size) - var(--floor) - 35px)); } /* ふわっと跳ねる */
	100% { transform: translateX(-50%) translateY(calc(100vh - var(--size) - var(--floor))); }
}


/* 動きを抑制したいユーザー設定に配慮 */
@media (prefers-reduced-motion: reduce){
.ball{ animation: none; transform: translateX(-50%) translateY(calc(100vh - var(--size) - var(--floor))); }
}