/* AIGC导演台 · 极客终端主题 · 组件层（展示类页面专用）
 * 只给首页 / 作品列表这类「卡片 + 首屏」页面用；工具页不要引，避免撞各自的表单布局。
 * 必须与 theme-terminal-base.css 一起引入，且都在页面内联 <style> 之后。
 */

/* ---------- 首屏：命令行 ---------- */
html .hero { position: relative; padding-left: 14px; border-left: 2px solid var(--accent); }
html .hero h2 { font-size: 25px; line-height: 1.55; font-weight: 500; }
html .hero h2::before { content: "> "; color: var(--accent); font-family: var(--mono); }
html .hero p { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
html .hero p::before {
  content: "$ ./showcase --all";
  display: block; margin-bottom: 6px; color: var(--accent); opacity: .8;
}

/* ---------- 作品 = 小行星 ----------
 * 卡片是透明轨道容器；.cover 是星球（圆形 + 气态表面 + 球面明暗）；
 * .cover::after 是星环（负 inset 椭圆环，溢出到星球两侧）。
 * 会员青 / 非会员绿 —— 只换颜色表达，判定逻辑一行未动。
 */
html .card,
html.js-motion .card.mv-done,
body.js-motion .card.mv-done {
  opacity: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
  padding: 6px 4px 2px;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
html .card::before { display: none; }
html .card::after { display: none; }

/* 星球本体：背景是「气态行星」表面，透明封面也不会变成黑洞 */
html .card .cover {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 76%; margin: 8px auto 10px;
  aspect-ratio: 1 / 1; min-height: 0;
  border-radius: 50%;
  overflow: visible;
  background:
    repeating-linear-gradient(97deg,
      rgba(150, 208, 255, .075) 0 13px,
      rgba(26, 48, 96, .13) 13px 30px),
    radial-gradient(circle at 32% 26%, #2f4f77 0%, #16243f 34%, #0a1220 62%, #05080e 88%, #04060b 100%);
  box-shadow:
    inset -18px -14px 38px rgba(0, 0, 0, .94),
    inset 10px 10px 30px rgba(160, 205, 255, .12),
    0 0 0 1px rgba(150, 200, 255, .22),
    0 0 26px -2px rgba(56, 160, 255, .40),
    0 0 74px -16px rgba(96, 132, 255, .45),
    0 22px 50px -22px rgba(0, 0, 0, .92);
  transition: box-shadow .45s ease;
}
html .card .cover img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; opacity: .96;
  filter: saturate(1.06) brightness(1.10);
}
/* 无封面作品：占位改成气态行星（条纹 + 侧光），并自己裁圆（overflow 已打开） */
html .card .cover .ph {
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(150, 205, 255, .40), rgba(60, 110, 200, .14) 46%, transparent 70%),
    repeating-linear-gradient(97deg,
      rgba(148, 205, 255, .10) 0 13px,
      rgba(28, 52, 104, .16) 13px 30px),
    linear-gradient(152deg, #1c3055 0%, #101d34 52%, #070d17 100%);
  font-size: 44px;
  text-shadow: 0 2px 18px rgba(34, 211, 238, .45);
}

/* 球面层：边缘大气弧 + 晨昏线 + 大气条纹 + 高光 + 背光面（全静态，零动画开销） */
html .card .cover::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 82%, rgba(168, 228, 255, .30) 96%, rgba(168, 228, 255, 0) 100%),
    linear-gradient(116deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .42) 100%),
    repeating-linear-gradient(64deg,
      rgba(172, 216, 255, .05) 0 9px, rgba(172, 216, 255, 0) 9px 26px),
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 78% 84%, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0) 54%),
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(3, 5, 10, .34) 100%);
}

/* 星环：负 inset 出椭圆 + scaleY 压扁，左右露出、上下穿过星球背面 */
html .card .cover::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: -6% -28%;
  border: 1.2px solid rgba(34, 211, 238, .50);
  border-radius: 50%;
  transform: rotate(-14deg) scaleY(.55);
  opacity: .9;
  transition: opacity .4s ease, border-color .4s ease, box-shadow .4s ease;
}
/* 会员作品：环 + 辉光都走主色青（更亮一档） */
html .card:has(.wtag.c-gold) .cover::after {
  border-color: rgba(34, 211, 238, .64);
  box-shadow: 0 0 18px -6px rgba(34, 211, 238, .45);
}
html .card:has(.wtag.c-gold) .cover {
  box-shadow:
    inset -18px -14px 38px rgba(0, 0, 0, .92),
    inset 10px 10px 30px rgba(160, 205, 255, .14),
    0 0 0 1px rgba(34, 211, 238, .26),
    0 0 30px -2px rgba(34, 211, 238, .42),
    0 0 80px -16px rgba(34, 211, 238, .34),
    0 22px 50px -22px rgba(0, 0, 0, .92);
}
/* 非会员作品：环走终端绿 */
html .card:has(.wtag.c-green) .cover::after {
  border-color: rgba(57, 255, 136, .50);
  box-shadow: 0 0 18px -8px rgba(57, 255, 136, .38);
}

/* 分类角标：圆形裁切会切掉左上角，改到星球下部居中 */
html .card .cover .tag {
  left: 50%; right: auto; top: auto; bottom: 15%;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 2px;
  background: rgba(3, 6, 12, .62);
  border: 1px solid rgba(140, 190, 255, .18);
  white-space: nowrap;
}
/* 播放/查看按钮：移到星球正中，像行星核心 */
html .card .cover .play-badge {
  left: 50%; right: auto; top: 50%; bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 5; width: 44px; height: 44px; font-size: 15px;
  background: rgba(4, 8, 14, .5);
  border: 1px solid rgba(34, 211, 238, .5);
  box-shadow: 0 0 22px rgba(34, 211, 238, .32);
  backdrop-filter: blur(4px);
}
/* 常用网站 favicon：白底方块在星球上很跳，改透明 */
html .card .cover .nav-favicon {
  background: transparent; padding: 0; box-shadow: none;
  width: 46px; height: 46px; border-radius: 8px;
}

/* 星球下方文字：居中，像行星标签 */
html .grid { gap: 34px 22px; }
html .card .title, html .card h3, html .card .name {
  font-family: var(--mono); font-size: 13.5px; text-align: center;
}
html .card .body .desc { text-align: center; }
html .card .body .wtags { justify-content: center; }
html .card .body .foot { justify-content: center; }

@media (hover: hover) {
  html .card:hover {
    transform: translateY(-6px);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  html .card:hover .cover {
    box-shadow:
      inset -18px -14px 38px rgba(0, 0, 0, .90),
      inset 10px 10px 30px rgba(160, 205, 255, .18),
      0 0 0 1px rgba(34, 211, 238, .50),
      0 0 34px 0 rgba(34, 211, 238, .40),
      0 0 96px -12px rgba(70, 150, 255, .45),
      0 26px 56px -20px rgba(0, 0, 0, .95);
  }
  /* 星球不做缩放：圆形边缘 + 星环保持同心，缩放会顶出轨道 */
  html .card:hover .cover img,
  html .card:hover .cover .nav-favicon { transform: none; }
  html .card:hover .cover::after {
    opacity: 1;
    border-color: rgba(34, 211, 238, .85);
    box-shadow: 0 0 26px -4px rgba(34, 211, 238, .6);
  }
}

/* 作品标签：方括号风格（会员/非会员标识的配色与判定逻辑完全不动） */
html .wtags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
html .wtag {
  border-radius: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  padding: 3px 7px; white-space: nowrap;
}
html .wtag::before { content: "["; opacity: .55; margin-right: 2px; }
html .wtag::after { content: "]"; opacity: .55; margin-left: 2px; }

/* ---------- 动效覆盖 ----------
 * 原站 .js-motion .card.mv-in 用 animation ... both，动画终态的 opacity 会盖过普通声明，
 * 必须重定义同名 keyframes 才能真正改成全不透明。
 */
@keyframes mvCard {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html.js-motion .card.mv-done,
html.js-motion .card.mv-in,
body.js-motion .card.mv-done,
body.js-motion .card.mv-in,
html .card { opacity: 1; }

/* ---------- 响应式：组件 ---------- */
@media (max-width: 1024px) {
  html .hero h2 { font-size: 22px; }
}

@media (max-width: 768px) {
  html main { padding: 20px 14px 48px; }
  html .hero { padding-left: 10px; margin: 4px 0 16px; }
  html .hero h2 { font-size: 18px; line-height: 1.6; }
  html .hero p { font-size: 12px; }
  html .grid { grid-template-columns: 1fr !important; gap: 26px 16px; }
  html .card .cover { width: 58%; }
  html .card .cover::after { inset: -4% -18%; }
  html .filters { gap: 8px; }
}

@media (max-width: 480px) {
  html .hero h2 { font-size: 16.5px; }
  html .card .title, html .card h3, html .card .name { font-size: 13px; }
  html .wtag { font-size: 10.5px; padding: 3px 6px; }
  html .card .cover { width: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  html .card:hover { transform: none; }
  html body::before { animation: none; }
}
@media (hover: none) {
  html .card:hover { transform: none; box-shadow: none; }
  html .card .cover::after { opacity: .95; }
}