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

   cover.css · trackandreact.com

   封面图系统 — 十一层结构/光点动画/产品光晕/三级降级/移动端

   生成者：Crystal Yifei Liu · 2026-09-25

   依赖：tokens.css, animations.css

   核心原则：全站统一16:9，光点只用opacity，降级永不出现破图

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



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

   一、封面容器基础

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



.cover-container {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

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

  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;

  transition: transform var(--duration-slower) var(--ease-out);

}



.cover-container:hover img,

.cover-container:hover svg {

  transform: scale(1.03);

}



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

   二、十一层结构定义

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



.cover-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.cover-layer-1-bg { z-index: 1; }

.cover-layer-2-texture { z-index: 2; opacity: 0.08; }

.cover-layer-3-nature { z-index: 3; opacity: 0.35; }

.cover-layer-4-trees { z-index: 4; opacity: 0.40; }

.cover-layer-5-architecture { z-index: 5; opacity: 0.35; }

.cover-layer-6-light { z-index: 6; opacity: 0.15; }

.cover-layer-7-flowers { z-index: 7; opacity: 0.40; }

.cover-layer-8-water { z-index: 8; opacity: 0.35; }

.cover-layer-9-industry { z-index: 9; opacity: 0.45; }

.cover-layer-10-subject { z-index: 10; }

.cover-layer-11-dots { z-index: 11; }



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

   三、产品主体光晕（第十层）

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



.cover-subject {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 10;

  max-width: 50%;

  max-height: 70%;

  filter: drop-shadow(0 0 30px var(--color-primary-alpha-20))

          drop-shadow(0 0 15px var(--color-accent-alpha-20));

}



.cover-subject-glow {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60%;

  height: 60%;

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

  background: radial-gradient(circle,

    hsla(var(--cover-accent-h), var(--cover-accent-s), var(--cover-accent-l), 0.3) 0%,

    transparent 70%);

  z-index: 9;

  pointer-events: none;

  animation: coverGlow 6s var(--ease-in-out) infinite;

}



@keyframes coverGlow {

  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }

  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }

}



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

   四、光点闪烁（第十一层）

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



.cover-light-dot {

  position: absolute;

  width: 4px;

  height: 4px;

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

  background-color: hsla(var(--cover-accent-h), var(--cover-accent-s), var(--cover-accent-l), 1);

  box-shadow: 0 0 6px hsla(var(--cover-accent-h), var(--cover-accent-s), var(--cover-accent-l), 0.8);

  animation: coverDot 3s var(--ease-in-out) infinite;

  pointer-events: none;

}



.cover-dot-1 { animation-duration: 2.0s; animation-delay: 0s; }

.cover-dot-2 { animation-duration: 2.5s; animation-delay: 0.4s; }

.cover-dot-3 { animation-duration: 3.0s; animation-delay: 0.8s; }

.cover-dot-4 { animation-duration: 3.5s; animation-delay: 1.2s; }

.cover-dot-5 { animation-duration: 4.0s; animation-delay: 1.6s; }

.cover-dot-6 { animation-duration: 2.3s; animation-delay: 2.0s; }

.cover-dot-7 { animation-duration: 3.2s; animation-delay: 0.6s; }

.cover-dot-8 { animation-duration: 2.8s; animation-delay: 1.0s; }



@keyframes coverDot {

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

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

}



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

   五、HSL变量控制（Mood适配）

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



.cover-container {

  --cover-bg-h: 220;

  --cover-bg-s: 65%;

  --cover-bg-l: 35%;

  --cover-accent-h: 145;

  --cover-accent-s: 45%;

  --cover-accent-l: 45%;

}



.cover-bg-dynamic {

  background-color: hsl(var(--cover-bg-h), var(--cover-bg-s), var(--cover-bg-l));

}



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

   六、三级降级机制

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



/* 第一级：外部图片 */

.cover-with-external .cover-external-img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* 第二级：SVG封面图 */

.cover-with-svg .cover-svg-img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* 第三级：纯色背景+标题 */

.cover-fallback {

  display: none;

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg,

    hsl(var(--cover-bg-h), var(--cover-bg-s), var(--cover-bg-l)),

    hsl(var(--cover-accent-h), var(--cover-accent-s), var(--cover-accent-l)));

  color: hsl(0, 0%, 100%);

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: var(--space-6);

  z-index: 20;

}



.cover-fallback-title {

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

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

  line-height: var(--leading-snug);

  max-width: 80%;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



.cover-container.fallback-active .cover-fallback {

  display: flex;

}



.cover-container.fallback-active .cover-external-img,

.cover-container.fallback-active .cover-svg-img,

.cover-container.fallback-active .cover-light-dot {

  display: none;

}



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

   七、封面图在文章页

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



.article-cover {

  margin-bottom: var(--rhythm-loose);

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

  overflow: hidden;

}



.article-cover .cover-container {

  border-radius: 0;

}



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

   八、封面图在卡片中

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



.card-cover {

  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

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

}



.card-cover .cover-container {

  border-radius: 0;

}



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

   九、封面图在L3页面（S级变体）

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



.l3-cover .cover-container {

  border: 2px solid var(--color-l3-border);

  box-shadow: var(--shadow-lg);

}



.l3-cover .cover-container::after {

  content: '🔒';

  position: absolute;

  top: var(--space-3);

  right: var(--space-3);

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

  background-color: hsla(0, 0%, 100%, 0.9);

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

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 15;

}



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

   十、封面图比例强制

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



.cover-container,

.card-cover,

.article-cover,

.article-card-cover,

.home-card-cover {

  aspect-ratio: 16 / 9;

  width: 100%;

}



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

   十一、移动端适配

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



@media (max-width: 768px) {

  .cover-container {

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

  }



  .cover-light-dot {

    width: 3px;

    height: 3px;

  }



  /* 移动端光点数量减半 */

  .cover-dot-5,

  .cover-dot-6,

  .cover-dot-7,

  .cover-dot-8 {

    display: none;

  }



  .cover-fallback-title {

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

  }



  .cover-subject {

    max-width: 60%;

  }

}



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

   十二、减少动效偏好

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



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

  .cover-light-dot {

    animation: none;

    opacity: 0.6;

  }



  .cover-subject-glow {

    animation: none;

    opacity: 0.7;

  }



  .cover-container:hover img,

  .cover-container:hover svg {

    transform: none;

  }

}



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

   十三、图片降级触发类

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



/* JS在图片加载失败时添加此class */

.img-error {

  opacity: 0;

  visibility: hidden;

}



.img-loaded {

  opacity: 1;

  visibility: visible;

  transition: opacity var(--duration-slow) var(--ease-out);

}



/* 渐进式图片加载 */

.progressive-image {

  position: relative;

  overflow: hidden;

}



.progressive-image .placeholder {

  filter: blur(10px);

  transition: filter var(--duration-slow) var(--ease-out);

}



.progressive-image .full-image {

  opacity: 0;

  transition: opacity var(--duration-slow) var(--ease-out);

}



.progressive-image.loaded .placeholder {

  filter: blur(0);

}



.progressive-image.loaded .full-image {

  opacity: 1;

}



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

   十四、封面图骨架屏

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



.cover-skeleton {

  aspect-ratio: 16 / 9;

  width: 100%;

  background: linear-gradient(

    90deg,

    var(--color-neutral-100) 0%,

    var(--color-neutral-200) 50%,

    var(--color-neutral-100) 100%

  );

  background-size: 200% 100%;

  animation: skeletonShimmer 2s var(--ease-in-out) infinite;

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

}



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

  .cover-skeleton {

    animation: none;

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

  }

}



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

   cover.css 结束

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