/**
 * 佛山 AI 智题 V1 视觉（教师 Web 检查作业列表 / 详情）
 *   - 渐变描边 + 外柔光 + 左上 chip + 2.4s 进场动效
 *   - 动效后描边消失，chip 常驻
 *   - 与 design.md §视觉规范 V1 行 + 进场动效时间线一致
 *   - 与 ets_vue 学生 PC HomeworkItem.vue / 教师 App CheckHomeworkItem.vue 同视觉强度
 */

.homework-box-content.is-aizhiti,
.mark-top.is-aizhiti {
	position: relative;
	background: #ffffff;
	border-radius: 12px;
	animation: aizhitiFadeIn 0.4s ease-out both,
		aizhitiInnerGlow 2s ease-in-out 0s 1;
}

.aizhiti-card-border,
.aizhiti-card-border-glow {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	padding: 1px;
	background: linear-gradient(108deg,
		rgba(2, 127, 255, 0.7) 0%,
		rgba(56, 155, 255, 0.7) 59%,
		rgba(255, 188, 223, 0.7) 100%);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 11;
	opacity: 0;
	animation: aizhitiBorderFade 2.4s ease-out 0s 1 forwards,
		aizhitiBorderRotate 2s ease-in-out 0s 1;
}

.aizhiti-card-border-glow {
	filter: blur(6px);
	animation: aizhitiGlowFade 2.4s ease-out 0s 1 forwards;
}

.aizhiti-chip {
	margin: 11px 8px 0 0;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	background: linear-gradient(108deg,
		rgba(2, 127, 255, 0.15) 0%,
		rgba(56, 155, 255, 0.15) 59%,
		rgba(255, 188, 223, 0.15) 100%);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	z-index: 12;
	pointer-events: none;
	/* chip 文字渐变 */
	background-image:
		linear-gradient(108deg,
			rgba(2, 127, 255, 0.15) 0%,
			rgba(56, 155, 255, 0.15) 59%,
			rgba(255, 188, 223, 0.15) 100%),
		linear-gradient(108deg, #027FFF 0%, #389BFF 59%, #FFBCDF 100%);
	background-clip: padding-box, text;
	-webkit-background-clip: padding-box, text;
	-webkit-text-fill-color: transparent;
}

/* === 关键帧 === */
@keyframes aizhitiFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes aizhitiBorderFade {
	0%   { opacity: 0; }
	30%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes aizhitiGlowFade {
	0%   { opacity: 0; }
	30%  { opacity: 0.55; }
	70%  { opacity: 0.55; }
	100% { opacity: 0; }
}

@keyframes aizhitiBorderRotate {
	0%   { background: linear-gradient(78deg, rgba(2,127,255,0.7) 0%, rgba(56,155,255,0.7) 59%, rgba(255,188,223,0.7) 100%); }
	50%  { background: linear-gradient(138deg, rgba(2,127,255,0.7) 0%, rgba(56,155,255,0.7) 59%, rgba(255,188,223,0.7) 100%); }
	100% { background: linear-gradient(78deg, rgba(2,127,255,0.7) 0%, rgba(56,155,255,0.7) 59%, rgba(255,188,223,0.7) 100%); }
}

@keyframes aizhitiInnerGlow {
	0%   { box-shadow: inset  6px  6px 14px -3px rgba(120,190,255,0.28),
	                   inset -6px -6px 14px -3px rgba(255,188,223,0.20); }
	33%  { box-shadow: inset  8px  4px 16px -3px rgba(120,190,255,0.32),
	                   inset -4px -8px 16px -3px rgba(255,188,223,0.24); }
	66%  { box-shadow: inset  4px  8px 16px -3px rgba(120,190,255,0.32),
	                   inset -8px -4px 16px -3px rgba(255,188,223,0.24); }
	100% { box-shadow: inset  6px  6px 14px -3px rgba(120,190,255,0.28),
	                   inset -6px -6px 14px -3px rgba(255,188,223,0.20); }
}