@keyframes popIn {
	from {
		transform: scale(0.92);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes jtRevealFlip {
	0% {
		transform: perspective(900px) rotateY(0deg) scale(1);
	}
	50% {
		transform: perspective(900px) rotateY(90deg) scale(1.03);
	}
	100% {
		transform: perspective(900px) rotateY(0deg) scale(1);
	}
}

@keyframes jtIconPop {
	0% {
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@keyframes jtMaskGain {
	0%{ transform: scale(0.8); }
	55%{ transform: scale(1.18); }
	100%{ transform: scale(1); }
}

@keyframes jtMaskUse {
	0%{ transform: scale(1); opacity: 1; }
	100%{ transform: scale(0.6); opacity: 0.25; }
}

@keyframes shake {
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-2px);
	}
	40% {
		transform: translateX(2px);
	}
	60% {
		transform: translateX(-2px);
	}
	80% {
		transform: translateX(2px);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.05);
		opacity: 0.6;
	}
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

@keyframes multiplierPulse {
	0% {
		transform: scale(1);
		box-shadow: 0 4px 15px rgba(255, 220, 120, 0.2);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 8px 25px rgba(255, 220, 120, 0.4);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 4px 15px rgba(255, 220, 120, 0.2);
	}
}

@keyframes jtTileFall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
		filter: blur(0);
	}
	100% {
		transform: translateY(26px) rotate(var(--jt-fall-rot, 0deg));
		opacity: 0;
		filter: blur(1.2px);
	}
}

.grid.jt-grid--falling .tile {
	animation: jtTileFall 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: var(--jt-fall-delay, 0ms);
}

/* Deal-in: stagger the existing popIn on fresh tiles */
.grid.jt-grid--deal .tile {
	animation: popIn 180ms ease-out both;
	animation-delay: var(--jt-deal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.grid.jt-grid--falling .tile,
	.grid.jt-grid--deal .tile {
		animation: none !important;
	}
	.tile--just-revealed,
	.tile--just-revealed .tile__icon {
		animation: none !important;
	}
	.jtMaskHud__slot.jt-mask--gain,
	.jtMaskHud__slot.jt-mask--use{
		animation: none !important;
	}
}

.tile--just-revealed {
	animation: jtRevealFlip 320ms ease-in-out;
}

.tile--just-revealed .tile__icon {
	animation: jtIconPop 320ms ease-out;
}

.tile--snake:not(.tile--just-revealed) {
	animation: shake 250ms ease-in-out;
}

.tile--snake.tile--just-revealed {
	animation: jtRevealFlip 320ms ease-in-out, shake 250ms ease-in-out 320ms;
}

.jtMaskHud__slot.jt-mask--gain{
	animation: jtMaskGain 420ms ease-out;
}

.jtMaskHud__slot.jt-mask--use{
	animation: jtMaskUse 420ms ease-in;
}

.tile--lose-tier {
	animation: shake 400ms ease-in-out;
}

.tile--low-tier {
	animation: popIn 140ms ease-out;
}

.tile--mid-tier::after {
	content: "";
	position: absolute;
	inset: -12%;
	background-image: url("../assets/images/fx/glow.png");
	background-size: cover;
	background-position: center;
	opacity: 0.4;
	pointer-events: none;
}

.tile--high-tier::after {
	content: "";
	position: absolute;
	inset: -18%;
	background-image: url("../assets/images/fx/glow.png");
	background-size: cover;
	background-position: center;
	opacity: 0.6;
	pointer-events: none;
}

.tile--ultra-rare::after {
	content: "";
	position: absolute;
	inset: -25%;
	background-image: url("../assets/images/fx/glow.png");
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	pointer-events: none;
	animation: pulse 1s ease-in-out infinite;
}