@charset "utf-8";

/*=============================太极图===========================*/
:root {
	--taiji-yin-color: #000; /* 阴鱼颜色，必须全不透明 */
	--taiji-yang-color: #fff; /* 阳鱼颜色，必须全不透明 */
}

.taiji {
	position: relative;
}

.taiji::before {
	content: '';
	position: absolute;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%; /* 靠边框围成圆形 */
	background: /* 阴鱼头，在上 */ radial-gradient(circle closest-side at 50% 25%,
	var(--taiji-yang-color) 0%,
	var(--taiji-yang-color) 25%,
	var(--taiji-yin-color) 25%,
	var(--taiji-yin-color) 100%,
	transparent 100%),
		/* 阳鱼头，在下 */ radial-gradient(circle closest-side at 50% 75%,
			var(--taiji-yin-color) 0%,
			var(--taiji-yin-color) 25%,
			var(--taiji-yang-color) 25%,
			var(--taiji-yang-color) 100%,
			transparent 100%),
		/* 左阴右阳 */ linear-gradient(to right, var(--taiji-yin-color) 50%, var(--taiji-yang-color) 50%);
}

/*================================脉动动画================================*/
:root {
	--border-pulse-color: #3498db;
	--color-pulse-color: #3498db;
}

@keyframes box-shadow-pulse {
	0% { box-shadow: 0 0 0 0 var(--border-pulse-color); }
	70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--border-pulse-color) 0%, transparent) }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--border-pulse-color) 0%, transparent); }
}

.border-pulse {
	border-color: var(--border-pulse-color);
	animation: box-shadow-pulse 2s infinite;
}

@keyframes color-pulse {
	0% { color: var(--color-pulse-color); }
	50% { color: color-mix(in srgb, var(--color-pulse-color) 0%, transparent) }
	100% { color: var(--color-pulse-color); }
}

.color-pulse {
	color: var(--color-pulse-color);
	animation: color-pulse 2s infinite;
}

/*================================三角箭头=============================*/
:root {
	--border-triangle-color: #333;
	--border-triangle-size: 10px;
	--border-triangle-style: solid;
}

.border.triangle {
	width: 0;
	height: 0;
	border-style: var(--border-triangle-style);
}

.border.triangle.to.down {
	border-width: var(--border-triangle-size) var(--border-triangle-size) 0;
	border-color: var(--border-triangle-color) transparent transparent;
}

.border.triangle.to.up {
	border-width: 0 var(--border-triangle-size) var(--border-triangle-size);
	border-color: transparent transparent var(--border-triangle-color);
}

.border.triangle.to.left {
	border-width: var(--border-triangle-size) var(--border-triangle-size) var(--border-triangle-size) 0;
	border-color: transparent var(--border-triangle-color) transparent transparent;
}

.border.triangle.to.right {
	border-width: var(--border-triangle-size) 0 var(--border-triangle-size) var(--border-triangle-size);
	border-color: transparent transparent transparent var(--border-triangle-color);
}

/*
==========================================================================
  撒花效果 (Confetti) - 纯 CSS 实现
==========================================================================
*/
.confetti {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 10px;
	opacity: 0.8;
	animation: fall 5s linear infinite;
}

@keyframes fall {
	to {
		transform: translateY(100vh) rotate(720deg);
		opacity: 0;
	}
}

.confetti:nth-child(10n) {
	background-color: #f44336;
	left: 9%;
	animation-delay: 0;
	animation-duration: 7.2s;
}
.confetti:nth-child(10n + 1) {
	background-color: #e91e63;
	left: 18%;
	animation-delay: -1.5s;
	animation-duration: 5s;
}
.confetti:nth-child(10n + 2) {
	background-color: #9c27b0;
	left: 27%;
	animation-delay: -3s;
	animation-duration: 7.749s;
}
.confetti:nth-child(10n + 3) {
	background-color: #673ab7;
	left: 36%;
	animation-delay: -4.5s;
	animation-duration: 6.66s;
}
.confetti:nth-child(10n + 4) {
	background-color: #3f51b5;
	left: 45%;
	animation-delay: -6s;
	animation-duration: 6.18s;
}
.confetti:nth-child(10n + 5) {
	background-color: #2196f3;
	left: 54%;
	animation-delay: -7.5s;
	animation-duration: 3.14s;
}
.confetti:nth-child(10n + 6) {
	background-color: #03a9f4;
	left: 63%;
	animation-delay: -9s;
	animation-duration: 2.414s;
}
.confetti:nth-child(10n + 7) {
	background-color: #009688;
	left: 72%;
	animation-delay: -10.5s;
	animation-duration: 2.33s;
}
.confetti:nth-child(10n + 8) {
	background-color: #4caf50;
	left: 81%;
	animation-delay: -12s;
	animation-duration: 8.88s;
}
.confetti:nth-child(10n + 9) {
	background-color: #ffeb3b;
	left: 90%;
	animation-delay: -13.5s;
	animation-duration: 9.981s;
}