/* ============================================================

   cover.css · Our Smart Baby

   封面图系统 · 十一层结构 + 光点动画

   加载顺序：31/34

   ============================================================ */



/* 封面容器 · 16:9比例 */

.cover-container {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: var(--radius-md);

  overflow: hidden;

  background-color: var(--color-neutral-100);

  isolation: isolate;

}



.cover-container img,

.cover-container svg {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* 第一层 · 背景色（由SVG控制） */

.cover-layer-bg {

  position: absolute;

  inset: 0;

  z-index: 1;

}



/* 第二层 · 纹理层 */

.cover-layer-texture {

  position: absolute;

  inset: 0;

  z-index: 2;

  opacity: 0.08;

  pointer-events: none;

}



/* 第三至九层 · 由SVG内部元素控制 */

/* 第十层 · 产品主体 + 柔光边缘 */

.cover-subject {

  position: relative;

  z-index: 10;

  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));

}



/* 第十一层 · 闪烁光点 */

.cover-light-dots {

  position: absolute;

  inset: 0;

  z-index: 11;

  pointer-events: none;

}



.cover-light-dot {

  position: absolute;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);

  animation: cover-dot-pulse 3s ease-in-out infinite;

}



.cover-light-dot:nth-child(1) { top: 20%; left: 15%; animation-duration: 2.5s; }

.cover-light-dot:nth-child(2) { top: 60%; left: 25%; animation-duration: 3.2s; animation-delay: 0.5s; }

.cover-light-dot:nth-child(3) { top: 35%; left: 75%; animation-duration: 2.8s; animation-delay: 1s; }

.cover-light-dot:nth-child(4) { top: 75%; left: 60%; animation-duration: 3.5s; animation-delay: 0.3s; }

.cover-light-dot:nth-child(5) { top: 45%; left: 50%; animation-duration: 2.6s; animation-delay: 1.5s; }

.cover-light-dot:nth-child(6) { top: 80%; left: 85%; animation-duration: 3.1s; animation-delay: 0.8s; }

.cover-light-dot:nth-child(7) { top: 15%; left: 65%; animation-duration: 2.9s; animation-delay: 1.8s; }

.cover-light-dot:nth-child(8) { top: 55%; left: 5%; animation-duration: 3.3s; animation-delay: 1.2s; }



@keyframes cover-dot-pulse {

  0%, 100% { opacity: 0.3; transform: scale(0.8); }

  50% { opacity: 1; transform: scale(1.2); }

}



/* 纯色降级背景（当SVG和图片都失败时） */

.cover-fallback {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: var(--radius-md);

  background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500));

  color: white;

  font-size: var(--text-xl);

  font-weight: var(--font-semibold);

  padding: var(--space-6);

  text-align: center;

}



/* 文章详情页封面横幅 */

.article-cover-banner {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto var(--rhythm-loose);

  aspect-ratio: 16 / 9;

  border-radius: var(--radius-lg);

  overflow: hidden;

}



/* 移动端 */

@media (max-width: 768px) {

  .cover-container { border-radius: var(--radius-sm); }



  .cover-light-dot:nth-child(n+5) { display: none; }



  .article-cover-banner { border-radius: var(--radius-md); }

}



/* 减少动效偏好 */

@media (prefers-reduced-motion: reduce) {

  .cover-light-dot { animation: none; opacity: 0.6; }

}