/*
 * NPL ball event animation (+1 / +2 / FOUR / SIX / WICKET).
 * Shared by the NPL match score card (npl.css) and the home page live score card (npl-home-score.css).
 * Each card positions .npl-ballfx itself. Driven by assets/js/npl-ballfx.js.
 */

.npl-ballfx {
	/* Colours: NPL tokens when present; cards on dark backgrounds override --npl-ballfx-ink. */
	--npl-ballfx-ink: var(--npl-color-dark-700, #000d4d);
	--npl-ballfx-run-bg: var(--npl-color-primary-50, #ebf4fe);
	--npl-ballfx-run-ink: var(--npl-color-primary-500, #1685f8);
	--npl-ballfx-four: var(--npl-raw-four, #6b00c9);
	--npl-ballfx-six: var(--npl-raw-six, #107ced);
	--npl-ballfx-ball: var(--npl-raw-wicket, #ff0201);
	--npl-ballfx-wicket: var(--npl-color-secondary-500, #f64e4e);
	position: absolute;
	width: 120px;
	height: 44px;
	pointer-events: none;
}

.npl-ballfx__chip {
	position: absolute;
	left: 50%;
	bottom: 4px;
	padding: 3px 9px;
	border-radius: 20px;
	background: var(--npl-ballfx-run-bg);
	font-weight: 800;
	font-size: 13px;
	line-height: 16px;
	color: var(--npl-ballfx-run-ink);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-50%) scale(0.6);
}

.npl-ballfx__ball,
.npl-ballfx__bat {
	position: absolute;
	opacity: 0;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.npl-ballfx__ball {
	left: 0;
	bottom: 6px;
	width: 12px;
	height: 12px;
	background: var(--npl-ballfx-ball);
	-webkit-mask-image: url('../../img/npl/icon-ball.png');
	mask-image: url('../../img/npl/icon-ball.png');
}

.npl-ballfx__bat {
	left: 8px;
	bottom: 4px;
	width: 20px;
	height: 20px;
	background: var(--npl-ballfx-ink);
	-webkit-mask-image: url('../../img/npl/icon-bat.png');
	mask-image: url('../../img/npl/icon-bat.png');
	transform-origin: 80% 85%;
}

/* +1 / +2 / +3: chip pops and floats up */
.npl-ballfx.is-run .npl-ballfx__chip {
	animation: npl-fx-float 1.6s ease-out forwards;
}

/* FOUR: ball rolls along the ground to the boundary, then chip */
.npl-ballfx.is-four .npl-ballfx__chip {
	background: var(--npl-ballfx-four);
	color: #fff;
	animation: npl-fx-pop 2.2s 0.55s ease-out forwards;
}

.npl-ballfx.is-four .npl-ballfx__ball {
	animation: npl-fx-roll 0.8s ease-in forwards;
}

/* SIX: bat swings, ball arcs up and away, then chip */
.npl-ballfx.is-six .npl-ballfx__chip {
	background: var(--npl-ballfx-six);
	color: #fff;
	animation: npl-fx-pop 2.2s 0.6s ease-out forwards;
}

.npl-ballfx.is-six .npl-ballfx__bat {
	animation: npl-fx-swing 0.7s ease-out forwards;
}

.npl-ballfx.is-six .npl-ballfx__ball {
	left: 22px;
	animation: npl-fx-arc 0.9s 0.18s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

/* WICKET: ball rolls into the stumps, bails fly, stumps tilt, then chip */
.npl-ballfx__stumps {
	position: absolute;
	left: 76px;
	bottom: 4px;
	display: flex;
	gap: 2px;
	width: 16px;
	height: 22px;
	opacity: 0;
}

.npl-ballfx__stumps i {
	width: 4px;
	height: 100%;
	border-radius: 2px 2px 0 0;
	background: var(--npl-ballfx-ink);
	transform-origin: 50% 100%;
}

.npl-ballfx__stumps b {
	position: absolute;
	top: -2px;
	width: 8px;
	height: 2px;
	border-radius: 1px;
	background: var(--npl-ballfx-ink);
}

.npl-ballfx__stumps b:first-of-type {
	left: 0;
}

.npl-ballfx__stumps b:last-of-type {
	left: 8px;
}

.npl-ballfx.is-wicket .npl-ballfx__stumps {
	animation: npl-fx-show 1.1s linear forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__ball {
	animation: npl-fx-bowl 0.5s ease-in forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__stumps i:nth-child(2) {
	animation: npl-fx-stump-mid 0.5s 0.45s ease-out forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__stumps i:nth-child(3) {
	animation: npl-fx-stump-off 0.5s 0.48s ease-out forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__stumps b:first-of-type {
	animation: npl-fx-bail-a 0.7s 0.45s ease-out forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__stumps b:last-of-type {
	animation: npl-fx-bail-b 0.7s 0.45s ease-out forwards;
}

.npl-ballfx.is-wicket .npl-ballfx__chip {
	background: var(--npl-ballfx-wicket);
	color: #fff;
	animation: npl-fx-pop 2s 0.75s ease-out forwards;
}

@keyframes npl-fx-float {
	0% { opacity: 0; transform: translate(-50%, 6px) scale(0.6); }
	15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
	25% { transform: translate(-50%, 0) scale(1); }
	75% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}

@keyframes npl-fx-pop {
	0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
	12% { opacity: 1; transform: translateX(-50%) scale(1.15); }
	22% { transform: translateX(-50%) scale(1); }
	80% { opacity: 1; transform: translateX(-50%) scale(1); }
	100% { opacity: 0; transform: translateX(-50%) scale(0.9); }
}

@keyframes npl-fx-roll {
	0% { opacity: 1; transform: translateX(0) rotate(0); }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translateX(108px) rotate(720deg); }
}

@keyframes npl-fx-swing {
	0% { opacity: 1; transform: rotate(-70deg); }
	35% { opacity: 1; transform: rotate(35deg); }
	80% { opacity: 1; transform: rotate(25deg); }
	100% { opacity: 0; transform: rotate(25deg); }
}

@keyframes npl-fx-arc {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	50% { transform: translate(44px, -26px) rotate(360deg); }
	85% { opacity: 1; }
	100% { opacity: 0; transform: translate(88px, -10px) rotate(720deg); }
}

@keyframes npl-fx-show {
	0% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes npl-fx-bowl {
	0% { opacity: 1; transform: translateX(0) rotate(0); }
	90% { opacity: 1; transform: translateX(66px) rotate(540deg); }
	100% { opacity: 0; transform: translateX(64px) rotate(560deg); }
}

@keyframes npl-fx-stump-mid {
	to { transform: rotate(18deg); }
}

@keyframes npl-fx-stump-off {
	to { transform: rotate(32deg); }
}

@keyframes npl-fx-bail-a {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	60% { opacity: 1; transform: translate(6px, -14px) rotate(160deg); }
	100% { opacity: 0; transform: translate(10px, -4px) rotate(260deg); }
}

@keyframes npl-fx-bail-b {
	0% { opacity: 1; transform: translate(0, 0) rotate(0); }
	60% { opacity: 1; transform: translate(14px, -10px) rotate(-200deg); }
	100% { opacity: 0; transform: translate(20px, 0) rotate(-300deg); }
}

@media (prefers-reduced-motion: reduce) {
	.npl-ballfx__ball,
	.npl-ballfx__bat,
	.npl-ballfx__stumps {
		display: none;
	}

	.npl-ballfx.is-run .npl-ballfx__chip,
	.npl-ballfx.is-four .npl-ballfx__chip,
	.npl-ballfx.is-six .npl-ballfx__chip,
	.npl-ballfx.is-wicket .npl-ballfx__chip {
		animation: none;
		opacity: 1;
		transform: translateX(-50%);
	}
}