/* ==========================================================================
   一同 · 视觉系统 v2
   目标：高保真、有节奏、有呼吸。只做加法，不改结构。
   1) 动效令牌  2) 入场与滚动揭示  3) 交互微反馈  4) 品牌细节  5) 空状态/骨架
   ========================================================================== */

:root {
  /* 动效 */
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
  --ease-1: cubic-bezier(.2, .8, .2, 1);          /* 出场 */
  --ease-2: cubic-bezier(.34, 1.36, .64, 1);      /* 轻微回弹 */
  --ease-3: cubic-bezier(.4, 0, .2, 1);           /* 标准 */
  /* 层次 */
  --dz-1: 0 1px 2px rgba(23,20,15,.05);
  --dz-2: 0 6px 18px -10px rgba(23,20,15,.28), 0 2px 4px rgba(23,20,15,.05);
  --dz-3: 0 24px 60px -28px rgba(23,20,15,.34), 0 6px 14px rgba(23,20,15,.06);
  /* 圆角 */
  --rad-1: 8px;
  --rad-2: 12px;
  --rad-3: 18px;
}

/* ---------- 1. 入场：整页淡入，避免"啪"地出现 ---------- */
@keyframes vi-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes vi-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
main { animation: vi-fade var(--dur-3) var(--ease-3) both; }

/* 首屏标题分两段入场 */
.hero .h1, .pdp__title, .section__head .h1 {
  animation: vi-fade-up var(--dur-4) var(--ease-1) both;
}
.hero .lede { animation: vi-fade-up var(--dur-4) var(--ease-1) 80ms both; }

/* 卡片进入视口：用 IntersectionObserver 打标 */
[data-vi-reveal] { opacity: 0; transform: translateY(12px); }
[data-vi-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-1), transform var(--dur-3) var(--ease-1);
}

/* ---------- 2. 交互微反馈 ---------- */
.btn {
  position: relative;
  transition: transform var(--dur-1) var(--ease-2), box-shadow var(--dur-2) var(--ease-3),
              background-color var(--dur-2) var(--ease-3), color var(--dur-2) var(--ease-3),
              border-color var(--dur-2) var(--ease-3);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--solid { box-shadow: var(--dz-1); }
.btn--solid:hover { box-shadow: var(--dz-2); }
.btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* 链接：下划线生长 */
.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-3);
}
.link-arrow:hover::after { transform: scaleX(1); }

/* 导航：下划线从中点展开 */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px;
  background: var(--clay); transition: left var(--dur-2) var(--ease-3), right var(--dur-2) var(--ease-3);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { left: 12px; right: 12px; }

/* 卡片：抬升 + 图像缓推 */
.cw-card, .wall-card, .board-card, .off-card, .follow-card, .work-pair {
  transition: transform var(--dur-3) var(--ease-1), box-shadow var(--dur-3) var(--ease-1),
              border-color var(--dur-2) var(--ease-3);
  will-change: transform;
}
.cw-card:hover, .wall-card:hover, .board-card:hover, .off-card:hover, .follow-card:hover, .work-pair:hover {
  transform: translateY(-4px);
  box-shadow: var(--dz-2);
}
.cw-card__cover svg, .wall-card__art svg, .off-card__art svg {
  transition: transform var(--dur-4) var(--ease-1);
}
.cw-card:hover .cw-card__cover svg, .wall-card:hover .wall-card__art svg, .off-card:hover .off-card__art svg {
  transform: scale(1.04);
}

/* 输入：聚焦时轻微上浮与描边发声 */
.input, select.input, textarea {
  transition: border-color var(--dur-2) var(--ease-3), box-shadow var(--dur-2) var(--ease-3),
              background-color var(--dur-2) var(--ease-3);
}
.input:focus { box-shadow: 0 0 0 3px rgba(178,63,39,.16); }

/* Tab / chip 选中：底色滑动感的过渡 */
.adm-tab, .tag-chip, .wall-subject__a, .wall-view__btn {
  transition: color var(--dur-1) var(--ease-3), background-color var(--dur-2) var(--ease-3),
              border-color var(--dur-2) var(--ease-3), transform var(--dur-1) var(--ease-2);
}
.tag-chip:hover, .wall-subject__a:hover { transform: translateY(-1px); }

/* ---------- 3. 品牌细节 ---------- */
/* 页头：滚动后收窄并加一层薄阴影 */
.site-header { transition: box-shadow var(--dur-3) var(--ease-3), background-color var(--dur-3) var(--ease-3); }
.site-header.is-scrolled {
  background: rgba(247,242,232,.92);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -20px rgba(23,20,15,.4);
}

/* 品牌名后的英文小签：hover 轻微发亮 */
.brand:hover .brand__abbr { border-color: var(--clay); color: var(--clay); }

/* 分割线：渐隐，避免硬边界 */
hr, .hairline {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* 区块编号/眉标：小方块呼吸 */
.eyebrow__dot { animation: vi-pulse 3.2s var(--ease-3) infinite; }
@keyframes vi-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.86); }
}

/* ---------- 4. 空状态 / 骨架 ---------- */
.empty, [data-empty] {
  animation: vi-fade var(--dur-3) var(--ease-3) both;
}
.skeleton {
  background: linear-gradient(90deg, var(--paper-deep) 25%, #f3ebdc 37%, var(--paper-deep) 63%);
  background-size: 400% 100%;
  animation: vi-shimmer 1.4s ease infinite;
  border-radius: var(--rad-1);
}
@keyframes vi-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 5. 响应式与无障碍 ---------- */
@media (max-width: 760px) {
  .cw-card:hover, .wall-card:hover, .board-card:hover, .off-card:hover { transform: none; }
  main { animation-duration: var(--dur-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-vi-reveal] { opacity: 1; transform: none; }
  .btn:hover, .cw-card:hover, .wall-card:hover { transform: none; }
}