/* 预设风格c1：多色渐变+立体阴影 */
.countdown-card.preset-c1 {
  background-color: hsla(240, 15%, 9%, 1);
  background-image: radial-gradient(
      at 88% 40%,
      hsla(240, 15%, 9%, 1) 0px,
      transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsla(263, 93%, 56%, 1) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsla(284, 100%, 84%, 1) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsla(306, 100%, 57%, 1) 0px, transparent 85%);

  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  position: relative;
  overflow: hidden; /* 防止内部元素溢出 */
}

.countdown-card.preset-c1::before {
  content: "";
  pointer-events: none; /* 不影响交互 */
  position: absolute;
  z-index: 1; /* 确保在卡片背景之上，内容之下 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -1px; /* 扩大1px形成边框效果 */
  background-image: linear-gradient(
    0deg,
    hsl(0, 0%, 100%) -50%,
    hsl(0, 0%, 40%) 100%
  );
  /* 使用裁剪显示边框 */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.countdown-card.preset-c1::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0; /* 置于主体背景之上，边框之下 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: left center; /* 修正旋转原点 */
  width: 200%;
  height: 10rem;
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(277, 95%, 60%) 40%,
    hsl(277, 95%, 60%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );
  animation: preset-c1-rotate 8s linear infinite;
}

@keyframes preset-c1-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


/* 绿色预设 c2 */
.countdown-card.preset-c2 {
  background-color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) inset;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 绿色发光动画层 */
.countdown-card.preset-c2::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #34d399 15%, rgba(52, 211, 153, 0.2) 60%, transparent 80%);
  animation: c2-animate 10s linear infinite;
  z-index: -1;
}

/* 半透明内部背景 */
.countdown-card.preset-c2::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.7);
  border-radius: calc(1rem - 2px);
  z-index: 0;
}

/* 文字强制白色并置顶 */
.countdown-card.preset-c2 .countdown-title,
.countdown-card.preset-c2 .countdown-date,
.countdown-card.preset-c2 .countdown-days,
.countdown-card.preset-c2 .countdown-unit,
.countdown-card.preset-c2 .countdown-time span {
  position: relative;
  z-index: 2;
}

@keyframes c2-animate {
  0% {
    transform: translate(-150px, -150px);
  }
  25% {
    transform: translate(50px, -150px);
  }
  50% {
    transform: translate(50px, 0px);
  }
  75% {
    transform: translate(-150px, 0px);
  }
  100% {
    transform: translate(-150px, -150px);
  }
}

/* 红色预设 c3 */
.countdown-card.preset-c3 {
  background-color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) inset;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 红色发光动画层 */
.countdown-card.preset-c3::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #f87171 15%, rgba(248, 113, 113, 0.2) 60%, transparent 80%);
  animation: c3-animate 10s linear infinite;
  z-index: -1;
}

/* 半透明内部背景 */
.countdown-card.preset-c3::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.7);
  border-radius: calc(1rem - 2px);
  z-index: 0;
}

/* 文字强制置顶 */
.countdown-card.preset-c3 .countdown-title,
.countdown-card.preset-c3 .countdown-date,
.countdown-card.preset-c3 .countdown-days,
.countdown-card.preset-c3 .countdown-unit,
.countdown-card.preset-c3 .countdown-time span {
  position: relative;
  z-index: 2;
}

@keyframes c3-animate {
  0% {
    transform: translate(-150px, -150px);
  }
  25% {
    transform: translate(50px, -150px);
  }
  50% {
    transform: translate(50px, 0px);
  }
  75% {
    transform: translate(-150px, 0px);
  }
  100% {
    transform: translate(-150px, -150px);
  }
}

/* 蓝色预设 c4 */
.countdown-card.preset-c4 {
  background-color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) inset;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 蓝色发光动画层 */
.countdown-card.preset-c4::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #60a5fa 15%, rgba(96, 165, 250, 0.2) 60%, transparent 80%);
  animation: c4-animate 10s linear infinite;
  z-index: -1;
}

/* 半透明内部背景 */
.countdown-card.preset-c4::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: rgba(45, 45, 45, 0.7);
  border-radius: calc(1rem - 2px);
  z-index: 0;
}

/* 文字强制置顶 */
.countdown-card.preset-c4 .countdown-title,
.countdown-card.preset-c4 .countdown-date,
.countdown-card.preset-c4 .countdown-days,
.countdown-card.preset-c4 .countdown-unit,
.countdown-card.preset-c4 .countdown-time span {
  position: relative;
  z-index: 2;
}

@keyframes c4-animate {
  0% {
    transform: translate(-150px, -150px);
  }
  25% {
    transform: translate(50px, -150px);
  }
  50% {
    transform: translate(50px, 0px);
  }
  75% {
    transform: translate(-150px, 0px);
  }
  100% {
    transform: translate(-150px, -150px);
  }
}

/* 预设 c5：深蓝色主体+亮蓝色辉光（现代未来感） */
.countdown-card.preset-c5 {
  /* 深蓝色主体背景及径向纹理 */
  background-color: hsla(222, 40%, 10%, 1); /* 深蓝底色 */
  background-image: radial-gradient(
      at 88% 40%,
      hsla(222, 40%, 10%, 1) 0px,
      transparent 85%
    ),
    radial-gradient(at 49% 30%, hsla(222, 40%, 10%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(222, 40%, 10%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsla(210, 90%, 45%, 0.6) 0px, transparent 85%), /* 深蓝渐变点 */
    radial-gradient(at 41% 94%, hsla(195, 100%, 60%, 0.4) 0px, transparent 85%), /* 亮蓝渐变点 */
    radial-gradient(at 100% 99%, hsla(210, 90%, 35%, 0.5) 0px, transparent 85%); /* 深蓝渐变点 */

  /* 内阴影增强科技感 */
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.2) inset; /* 弱化内阴影，更显未来感 */
  border-radius: 1rem; /* 圆角适配 */
  position: relative;
  overflow: hidden;
}

/* 边框基础渐变层（深蓝色金属感） */
.countdown-card.preset-c5::before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 1; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -1px; 
  border-radius: 1rem;
  /* 边框渐变：深蓝→亮蓝，增强未来感 */
  background-image: linear-gradient(
    135deg,
    hsl(210, 90%, 30%) -50%,
    hsl(195, 100%, 50%) 50%,
    hsl(210, 90%, 30%) 150%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

/* 亮蓝色动态旋转辉光（核心未来感动画） */
.countdown-card.preset-c5::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0; /* 位于主体背景之上，边框之下 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: left center; 
  width: 200%;
  height: 10rem;
  /* 辉光渐变：透明→亮蓝→透明，现代科技感 */
  background-image: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsl(195, 100%, 60%) 40%,
    hsl(195, 100%, 60%) 60%,
    hsla(0, 0%, 40%, 0) 100%
  );
  animation: preset-c5-rotate 8s linear infinite;
}

/* 辉光旋转动画 */
@keyframes preset-c5-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 内容层级确保（不强制颜色，仅保层级） */
.countdown-card.preset-c5 .countdown-title,
.countdown-card.preset-c5 .countdown-date,
.countdown-card.preset-c5 .countdown-days,
.countdown-card.preset-c5 .countdown-unit,
.countdown-card.preset-c5 .countdown-time span {
  position: relative;
  z-index: 2; /* 内容在最上层，不被动画遮挡 */
}