/* =========================================================
   AO Portfolio · 视觉升级层 V3（P0–P2，不含 Hero 横带改造）
   ---------------------------------------------------------
   本文件只做「覆盖」，不修改 style.css / interaction.css /
   frost.css / immersive.css 的原始规则。删掉本文件与 v3.js，
   页面即回到上一版（毛玻璃揭示版）的观感。

   说明：Hero 首屏（三联窗随机作品 / 光圈环 / 取景框）经确认
   不采用，故本层不含任何 hero 专属规则，Hero 保持原「能力系统
   动画横带」。

   对应审查报告 docs/technical-art-review.md 的提案编号：
     P0  C01 毛玻璃降强度    C03 卡片对比度
     P1  C06 分区标题揭示    C07 标题字体      C08 明度分层
         C09 冷色辅助        C10 手机首屏留白  C11 卡片排版 scale
     P2  C12 错落入场        C13 hover 反馈    C14 精选定格
         C16 AI 影像显影

   开关：URL 加 ?v3=0 可整层关闭。
   ========================================================= */

/* ========== 0. 设计令牌（C01 / C07 / C08 / C09 / C11） ========== */
:root{
  /* C08 黑底明度分层：0 最深（hero 底），4 最浅（卡片/浮层） */
  --bg-0: #060607;
  --bg-1: #0a0a0b;
  --bg-2: #0d0d10;
  --bg-3: #121216;
  --bg-4: #040405;

  /* C09 冷色辅助：低饱和青蓝，只给「AI 影像」这一支身份用 */
  --cool:      #6fa8c9;
  --cool-soft: rgba(111,168,201,.42);
  --cool-line: rgba(111,168,201,.24);

  /* C07 标题字体：英文走 Georgia 的编辑部笔触，中文回落到宋体系 */
  --font-display: Georgia, "Times New Roman", "Songti SC", "Source Han Serif SC",
                  "Noto Serif CJK SC", STSong, SimSun, serif;

  /* C11 卡片文字 scale（桌面） */
  --card-title: clamp(17px, 1.85vw, 22px);
  --card-sub:   11.5px;
  --card-meta:  11px;
  --card-gap:   6px;
  --card-gap2:  12px;
}

/* C01 毛玻璃降强度：桌面 4px/30% → 2px/20%，手机 3px/25% → 2px/19%
   只覆盖变量，frost.css 的揭示逻辑与性能处理全部保留。 */
html.ao-frost{ --frost-blur: 2px; --frost-veil: .20; }
@media (hover:none), (pointer:coarse){
  html.ao-frost{ --frost-blur: 2px; --frost-veil: .19; }
}
html.ao-frost.ao-frost-flat{ --frost-blur: 2px; --frost-veil: .19; }

body{ background: var(--bg-1); }

/* 区块环境光：极淡的暖色，从顶部渗下来，避免整页一块死黑 */
.section{
  background-image:
    radial-gradient(80% 42% at 14% 0%, rgba(255,90,54,.05), transparent 72%),
    radial-gradient(64% 38% at 92% 6%, rgba(70,100,190,.045), transparent 76%);
}
.marquee{ background: var(--bg-2); }
.lightbox{ background: rgba(4,4,5,.95); }
.card{ background: var(--bg-3); }

/* C10 收紧手机首屏顶部留白 */
@media (max-width:700px){
  .hero{ padding-top:84px; }
  .eyebrow{ margin-bottom:18px; font-size:10.5px; letter-spacing:.24em; }
  .hero-title{ margin-bottom:24px; }
  .hero-actions{ margin-top:28px; }
}

/* ========== 1. 分区标题：电影化揭示（C06） ========== */
/* 父层不再整体淡入，改由标题遮罩上移 + 数字徽章对焦 + 底部细线划开承担 */
.section-head.reveal{ opacity:1; transform:none; }
.section-head{
  position:relative; border-bottom-color:transparent;
}
.section-head::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line);
}
.section-head::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,
    rgba(255,90,54,.85) 0%, rgba(255,255,255,.20) 32%, transparent 88%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.2s var(--ease) .1s;
}
.section-head.in::after{ transform:scaleX(1); }

.section-head h2{
  font-family:var(--font-display);
  font-weight:600; letter-spacing:-.028em;
  padding-bottom:.06em;
  clip-path:inset(0 0 104% 0);
  transform:translateY(.3em);
  transition:clip-path 1s var(--ease) .05s, transform 1s var(--ease) .05s;
}
.section-head.in h2{
  clip-path:inset(-14% -6% -18% -6%);
  transform:none;
}

.section-head .idx{
  position:relative; opacity:0; transform:translateY(-5px);
  transition:opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s;
}
.section-head.in .idx{ opacity:1; transform:none; }
.section-head .idx::before,
.section-head .idx::after{
  content:""; position:absolute; top:50%; width:9px; height:1px;
  background:rgba(255,90,54,.45);
  transform:scaleX(0);
  transition:transform .7s var(--ease) .34s;
}
.section-head .idx::before{ right:calc(100% + 6px); transform-origin:right; }
.section-head .idx::after{ left:calc(100% + 6px);  transform-origin:left; }
.section-head.in .idx::before,
.section-head.in .idx::after{ transform:scaleX(1); }

.section-note{
  opacity:0; transform:translateY(6px);
  transition:opacity .8s var(--ease) .26s, transform .8s var(--ease) .26s;
}
.section-head.in .section-note{ opacity:1; transform:none; }

/* ========== 2. 作品卡信息层（C03 / C09 / C11） ========== */
/* C03 上下双向压暗：顶部给 kicker 兜底，底部加深；文字明度整体抬一档 */
.card-scrim{
  background:
    linear-gradient(to bottom,
      rgba(6,6,8,.78) 0%, rgba(6,6,8,.34) 9%, rgba(6,6,8,0) 24%),
    linear-gradient(to top,
      rgba(6,6,8,.97) 0%, rgba(6,6,8,.86) 22%,
      rgba(6,6,8,.46) 44%, rgba(6,6,8,0) 66%);
}
.card-kicker{
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}
.card-title{
  font-size:var(--card-title);
  line-height:1.26; letter-spacing:-.012em;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
  text-wrap:pretty;
}
.card-sub{
  margin-top:var(--card-gap);
  font-size:var(--card-sub); line-height:1.5;
  color:rgba(255,255,255,.72);
}
.card-foot{ margin-top:var(--card-gap2); }
.card-meta{ color:rgba(255,255,255,.64); }
.card-dur{ background:rgba(0,0,0,.58); border-color:rgba(255,255,255,.14); }

/* C09 AI 影像：斜杠与标签切到冷色，其余分类保持暖色 */
.card.is-ai .card-kicker i{ background:var(--cool); }
.card.is-ai .card-kicker{ color:rgba(220,238,248,.9); }
.card.is-ai .card-dur{ border-color:var(--cool-line); }
.filters .chip[data-cat="AI 影像"]{ border-color:var(--cool-line); }
.ao-filterEntrance .filters .chip[data-cat="AI 影像"].is-active{ border-color:var(--cool-soft); }
.ao-filterEntrance .filters .chip[data-cat="AI 影像"].is-active::after{ background:var(--cool); }

/* ========== 3. 悬停与入场（C12 / C13 / C14） ========== */
.card{
  transition:opacity .8s var(--ease), transform .6s var(--ease),
             border-color .45s var(--ease), box-shadow .6s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  /* C13 光斑更大更细腻 + 1px 内描边高光 */
  .ao-cardFocus .grid .card::after{
    background:radial-gradient(420px circle at var(--focus-x,50%) var(--focus-y,50%),
      rgba(255,90,54,.20) 0%, rgba(255,90,54,.05) 42%, transparent 72%);
  }
  .ao-cardFocus .grid .card:hover{
    box-shadow:0 26px 60px -30px rgba(0,0,0,.95),
               inset 0 0 0 1px rgba(255,255,255,.11);
  }
  .grid .card-play span{ transition:transform .55s cubic-bezier(.34,1.4,.64,1); }
  .grid .card:hover .card-play span{ transform:scale(1); }

  /* C14 精选定格：视口中线那一张轻微放大，其余压暗一档 */
  .grid.is-cinema .card::before{
    content:""; position:absolute; inset:0; z-index:3;
    background:#07070a; opacity:0;
    transition:opacity .55s var(--ease);
    pointer-events:none;
  }
  .grid.is-cinema .card:not(.is-cinema)::before{ opacity:.38; }
  .grid.is-cinema .card.is-cinema{
    transform:scale(1.022);
    box-shadow:0 34px 70px -36px rgba(0,0,0,.95),
               inset 0 0 0 1px rgba(255,255,255,.10);
  }
}

/* C12 错落入场：沿用原有 .in 揭示，只加「列序 × 90ms」延迟；
   进场结束后 v3.js 会打上 .in-done 把延迟清零，不影响 hover */
html.ao-v3 .grid .card{ transition-delay:calc(var(--stagger,0) * 90ms); }
html.ao-v3 .grid .card.in-done{ transition-delay:0s; }

/* C16 AI 影像「显影」过渡 */
.grid{ position:relative; }
.grid.is-developing::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
  animation:scanSweep 1.05s var(--ease) both;
}
@keyframes scanSweep{
  0%{ opacity:0; transform:translateY(-2%); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translateY(2%); }
}

/* ========== 4. 手机端细节（C10 / C11 收尾） ========== */
@media (max-width:560px){
  :root{
    --card-sub: 11px;
    --card-meta: 10.5px;
    --card-gap2: 10px;
  }
  .card-title{ font-size:16px; }
  .card-sub{ color:rgba(255,255,255,.76); }
}

/* ========== 5. 降级 ========== */
@media (prefers-reduced-motion:reduce){
  .section-head h2,
  .section-head.in h2{ clip-path:none !important; transform:none !important; }
  .section-head .idx,
  .section-note{ opacity:1 !important; transform:none !important; }
  .section-head::after{ transform:scaleX(1) !important; }
  .grid.is-cinema .card.is-cinema{ transform:none; }
  .grid.is-developing::after{ display:none; }
}