/* ============================================================
   cover.css - Boat World 封面图系统
   四层结构：背景色 → 衬托物 → 产品主体光晕 → 闪烁光点
   光点动画只用 opacity，不造成 CLS
   三级降级：外部图片 → SVG → 纯色背景 + 标题
   ============================================================ */

/* ============================================================
   封面容器
   ============================================================ */
.cover-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-deep);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}

/* 文章详情页横幅变体（2:3 比例适配） */
.cover-wrapper.cover-banner {
  aspect-ratio: 2 / 3;
}

@media (max-width: 768px) {
  .cover-wrapper.cover-banner {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   第一层：背景色
   ============================================================ */
.cover-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, var(--c-deep) 0%, var(--c-deep-2) 55%, var(--c-deep-3) 100%);
  transition: background var(--duration-slow) var(--ease-out);
}

/* 类别背景变体 */
.cover-bg.cover-bg-forest {
  background: linear-gradient(165deg, #1A3A2A 0%, #2A5A3E 55%, #3A6B4E 100%);
}

.cover-bg.cover-bg-ocean {
  background: linear-gradient(165deg, #0A2E4D 0%, #0D3B63 55%, #1A5A7E 100%);
}

.cover-bg.cover-bg-warm {
  background: linear-gradient(165deg, #4A2E1A 0%, #6B4A2A 55%, #7E5A3E 100%);
}

.cover-bg.cover-bg-cool {
  background: linear-gradient(165deg, #1A2A3E 0%, #2A3A5A 55%, #3A4A6B 100%);
}

/* ============================================================
   第二层：衬托背景物品
   ============================================================ */
.cover-props {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
}

.cover-props svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   第三层：产品主体 + 柔光边缘
   ============================================================ */
.cover-subject {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cover-subject img {
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(232, 115, 74, 0.45)) drop-shadow(0 0 48px rgba(255, 255, 255, 0.15));
  transition: filter var(--duration-base) var(--ease-out);
}

.cover-wrapper:hover .cover-subject img {
  filter: drop-shadow(0 0 32px rgba(232, 115, 74, 0.6)) drop-shadow(0 0 64px rgba(255, 255, 255, 0.22));
}

/* 无外部图片时，产品主体用 SVG 替代 */
.cover-subject svg {
  max-width: 62%;
  max-height: 62%;
  filter: drop-shadow(0 0 24px rgba(232, 115, 74, 0.45)) drop-shadow(0 0 48px rgba(255, 255, 255, 0.15));
}

/* ============================================================
   第四层：闪烁光点
   ============================================================ */
.cover-sparkles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 16px rgba(232, 115, 74, 0.35);
  animation: sparkle-twinkle var(--sparkle-duration, 3s) ease-in-out infinite;
  animation-delay: var(--sparkle-delay, 0s);
  opacity: 0.5;
}

/* 每个光点独立闪烁节奏，由内联 CSS 变量控制 */
.sparkle:nth-child(1) { --sparkle-duration: 2.4s; --sparkle-delay: 0s; }
.sparkle:nth-child(2) { --sparkle-duration: 3.2s; --sparkle-delay: 0.6s; }
.sparkle:nth-child(3) { --sparkle-duration: 2.8s; --sparkle-delay: 1.1s; }
.sparkle:nth-child(4) { --sparkle-duration: 3.6s; --sparkle-delay: 1.8s; }
.sparkle:nth-child(5) { --sparkle-duration: 2.2s; --sparkle-delay: 2.3s; }
.sparkle:nth-child(6) { --sparkle-duration: 3s; --sparkle-delay: 2.8s; }
.sparkle:nth-child(7) { --sparkle-duration: 2.6s; --sparkle-delay: 0.3s; }
.sparkle:nth-child(8) { --sparkle-duration: 3.4s; --sparkle-delay: 1.5s; }
.sparkle:nth-child(9) { --sparkle-duration: 2.3s; --sparkle-delay: 2s; }
.sparkle:nth-child(10) { --sparkle-duration: 3.1s; --sparkle-delay: 2.5s; }
.sparkle:nth-child(11) { --sparkle-duration: 2.7s; --sparkle-delay: 0.9s; }
.sparkle:nth-child(12) { --sparkle-duration: 3.5s; --sparkle-delay: 1.3s; }

@keyframes sparkle-twinkle {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

/* 光点位置变体 */
.sparkle-1 { top: 18%; left: 22%; }
.sparkle-2 { top: 28%; left: 68%; }
.sparkle-3 { top: 55%; left: 12%; }
.sparkle-4 { top: 62%; left: 82%; }
.sparkle-5 { top: 12%; left: 48%; }
.sparkle-6 { top: 78%; left: 35%; }
.sparkle-7 { top: 35%; left: 85%; }
.sparkle-8 { top: 70%; left: 55%; }
.sparkle-9 { top: 8%; left: 75%; }
.sparkle-10 { top: 45%; left: 8%; }
.sparkle-11 { top: 82%; left: 15%; }
.sparkle-12 { top: 15%; left: 38%; }

/* ============================================================
   封面标题
   ============================================================ */
.cover-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(180deg, transparent 0%, rgba(10, 46, 77, 0.85) 100%);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  pointer-events: none;
}

/* ============================================================
   三级降级机制
   ============================================================ */
/* 降级状态 1：SVG 显示 */
.cover-wrapper.using-svg .cover-subject img {
  display: none;
}

/* 降级状态 2：纯色背景 + 标题 */
.cover-wrapper.cover-fallback {
  background: var(--c-deep);
}

.cover-wrapper.cover-fallback .cover-bg,
.cover-wrapper.cover-fallback .cover-props,
.cover-wrapper.cover-fallback .cover-subject,
.cover-wrapper.cover-fallback .cover-sparkles {
  display: none;
}

.cover-wrapper.cover-fallback .cover-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(165deg, var(--c-deep), var(--c-deep-2));
  padding: var(--space-5);
  font-size: clamp(1rem, 2vw, 1.4rem);
}

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 768px) {
  /* 移动端光点数量减半 */
  .sparkle:nth-child(n+7) {
    display: none;
  }

  .cover-subject img,
  .cover-subject svg {
    max-width: 70%;
    max-height: 70%;
  }

  .cover-title {
    padding: var(--space-3) var(--space-4);
    font-size: 0.88rem;
  }

  .cover-wrapper {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .sparkle {
    width: 4px;
    height: 4px;
  }

  .sparkle:nth-child(n+6) {
    display: none;
  }

  .cover-subject img,
  .cover-subject svg {
    max-width: 75%;
    max-height: 75%;
    filter: drop-shadow(0 0 16px rgba(232, 115, 74, 0.4));
  }

  .cover-title {
    font-size: 0.82rem;
    padding: var(--space-2) var(--space-3);
  }
}

/* ============================================================
   无障碍：减少动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sparkle {
    animation: none;
    opacity: 0.7;
  }

  .cover-wrapper:hover .cover-subject img {
    filter: drop-shadow(0 0 16px rgba(232, 115, 74, 0.35));
  }
}