/**
 * 十周年UI - 动画定义
 */

/** 基础动画 */

/* 淡入 */
@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* 向右滑出 */
@keyframes left-to-right-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		transform: translateX(100%);
	}
}

/* 缩放打开 */
@keyframes open {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

/** 对话框动画 */

@keyframes open-dialog {
	from {
		opacity: 0.1;
		transform: scale(0.8);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes close-dialog {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.8);
	}
}

/** 移动动画 */

@keyframes moveout-left {
	from {
		left: 100%;
	}

	to {
		left: -100%;
	}
}

/** 玩家状态动画 */

/* 死亡抖动 */
@keyframes player-died {
	5%,
	15%,
	25%,
	35%,
	55%,
	65% {
		transform: translateX(5px) rotate(0deg);
	}

	10%,
	30%,
	40%,
	50%,
	70% {
		transform: translateX(-5px) rotate(0deg);
	}

	20%,
	60% {
		transform: translate(-1px) rotate(0deg);
	}

	45%,
	85% {
		transform: translateX(1px) rotate(0deg);
	}

	95% {
		transform: translateX(-2px) rotate(0deg);
	}

	100% {
		transform: none;
	}
}

/* 受伤抖动 */
@keyframes player-hurt {
	0% {
		transform: translateX(0);
	}

	4% {
		transform: translateX(1px);
	}

	50% {
		transform: translateX(-14px);
	}

	100% {
		transform: translateX(0);
	}
}

/* 翻面 */
@keyframes turned-over {
	0% {
		transform: rotateY(0deg);
	}

	50% {
		transform: rotateY(90deg);
	}

	100% {
		transform: rotateY(0deg);
	}
}

/** 卡牌动画 */

@keyframes use-card {
	0% {
		transform: scale(4);
		opacity: 1;
	}

	20% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/** 特效动画 */

/* 淡入淡出（可选中状态） */
@keyframes fade-in-out-selectable {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0.2;
	}

	100% {
		opacity: 0;
	}
}

/* 缩放淡入淡出 */
@keyframes open-fade-in-out {
	0% {
		opacity: 0;
		transform: scale(0.7);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}

	60% {
		opacity: 1;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
	}
}

/* 摇摆 */
@keyframes swing {
	0% {
		transform: rotate(-5deg);
		transform-origin: top center;
	}

	100% {
		transform: rotate(5deg);
		transform-origin: top center;
	}
}

/** 精灵图动画 */

/*
 * 发光精灵图动画
 * 默认尺寸: 2530px (player1/3/4/5/6)
 * player2 使用 --glow-sprite-width: 2400px 覆盖
 */
@keyframes kf-sprites-glow {
	0% {
		background-size: var(--glow-sprite-width, 2530px) 100%;
		background-position: 0 0;
	}

	10% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10) 0;
	}

	20% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 2) 0;
	}

	30% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 3) 0;
	}

	40% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 4) 0;
	}

	50% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 5) 0;
	}

	60% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 6) 0;
	}

	70% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 7) 0;
	}

	80% {
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 8) 0;
	}

	90%,
	100% {
		background-size: var(--glow-sprite-width, 2530px) 100%;
		background-position: calc(var(--glow-sprite-width, 2530px) / -10 * 9) 0;
	}
}

/** 技能名称弹出动画 - 文字从两边飞入 */

#arena > .damage.skill-popup {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: yuanli;
	font-size: 30px;
	color: #ffffff;
	text-shadow: 0 0 4px #000;
	opacity: 1;
	z-index: 9999;
	pointer-events: none;
	position: absolute;
}

.player > .damage.skill-popup {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-family: yuanli;
	font-size: 40px;
	top: 80px;
	color: #ffffff;
	text-shadow: 0 0 4px #000;
	opacity: 1;
	z-index: 91;
	pointer-events: none;
}

/* 字符样式 - 通用 */
.damage.skill-popup > span {
	display: inline-block;
	opacity: 0;
}

/* 左边字符：从左侧飞入 */
.damage.skill-popup > .char-left {
	animation: skill-char-from-left 0.4s ease-out forwards;
}

/* 右边字符：从右侧飞入 */
.damage.skill-popup > .char-right {
	animation: skill-char-from-right 0.4s ease-out forwards;
}

@keyframes skill-char-from-left {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes skill-char-from-right {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 整体淡出 */
.damage.skill-popup {
	animation: skill-popup-fadeout 1.5s ease-in-out forwards;
}

@keyframes skill-popup-fadeout {
	0%,
	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
