/* =========================================================
   AO Selected Works · 作品封面「暗色毛玻璃」实验 V1
   ---------------------------------------------------------
   只作用于封面视觉层（.card-media），文字 / 时长 / 分类 / 按钮不受影响。
   层级：Layer1 封面图 → Layer2 暗色蒙层 → Layer3 底部渐变(style.css)
         → Layer4 文字(style.css)

   开关：html.ao-frost（由 frost.js 控制；URL 加 ?frost=0 直接关闭）
   参数：--frost-blur  --frost-veil  --frost-dur  --frost-ease
   ========================================================= */

:root{
  --frost-blur: 4px;                     /* 默认模糊半径（桌面） */
  --frost-veil: .30;                     /* 黑色蒙层透明度（桌面） */
  --frost-dur: 400ms;                    /* 揭示 / 恢复时长 */
  --frost-ease: cubic-bezier(.4,0,.2,1);  /* 缓入缓出 */
}

/* 手机 / 触屏：始终暗色毛玻璃，且不做 hover 揭示 */
@media (hover:none), (pointer:coarse){
  html.ao-frost{
    --frost-blur: 3px;
    --frost-veil: .25;
  }
}

/* ---------- 恒定模式（flat）：桌面直接套用手机端的观感 ----------
   参数与手机一致（blur 3px / 蒙层 25%），并且**不做 hover 揭示**，
   鼠标移入 / 键盘聚焦都保持暗色毛玻璃。
   由 frost.js 通过 ?frost=flat 或 aoFrost.flat(true) 开启。 */
html.ao-frost.ao-frost-flat{
  --frost-blur: 3px;
  --frost-veil: .25;
}

/* ---------- Layer 1 + Layer 2 ---------- */
/* 外扩 14px：blur 会让边缘向内透明，外扩后由 .card 的 overflow:hidden 裁掉，
   避免封面边缘露白/发虚 */
html.ao-frost .card-media{
  inset:-14px;
  filter: blur(var(--frost-blur));
  transition: transform 1.2s var(--ease),
              filter var(--frost-dur) var(--frost-ease);
}

/* 暗色蒙层（纯色，随父层一起模糊，视觉无差异） */
html.ao-frost .card-media::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,var(--frost-veil));
  opacity:1;
  transition: opacity var(--frost-dur) var(--frost-ease);
}

/* ---------- 桌面：hover / 键盘聚焦 → 恢复清晰 ---------- */
/* 注：interaction.css 里有一条 .ao-cardFocus .grid .card:hover .card-media 的
   brightness/saturate 滤镜 + 1.035 缩放；这里用同等结构 + 更高特异性只覆盖
   filter（去掉模糊与压暗），transform 完全交给原有规则，不额外叠加缩放。 */
@media (hover:hover) and (pointer:fine){
  html.ao-frost .grid .card:hover .card-media,
  html.ao-frost .grid .card:focus-visible .card-media{
    filter: blur(0px);
  }
  html.ao-frost .grid .card:hover .card-media::after,
  html.ao-frost .grid .card:focus-visible .card-media::after{
    opacity:0;
  }
  /* 键盘聚焦可见状态 */
  html.ao-frost .card:focus-visible{
    outline:2px solid rgba(255,90,54,.9);
    outline-offset:2px;
  }
}

/* ---------- 手机 / 触屏：始终保持模糊，点击也不会解锁 ---------- */
@media (hover:none), (pointer:coarse){
  html.ao-frost .grid .card .card-media,
  html.ao-frost .grid .card:hover .card-media{
    filter: blur(var(--frost-blur));
  }
  html.ao-frost .grid .card:hover .card-media::after{ opacity:1; }
}

/* ---------- 恒定模式：压掉上面的 hover 揭示 ----------
   上方揭示规则特异性为 (0,4,2)，这里用双类叠加到 (0,5,2) 才压得住。 */
html.ao-frost.ao-frost-flat .grid .card:hover .card-media,
html.ao-frost.ao-frost-flat .grid .card:focus-visible .card-media{
  filter: blur(var(--frost-blur));
}
html.ao-frost.ao-frost-flat .grid .card:hover .card-media::after,
html.ao-frost.ao-frost-flat .grid .card:focus-visible .card-media::after{
  opacity:1;
}

/* ---------- 稳定性 / 性能 ---------- */
html.ao-frost .card{ contain: paint; }

@media (prefers-reduced-motion: reduce){
  html.ao-frost .card-media,
  html.ao-frost .card-media::after{ transition:none; }
}