/* ============================================================
 * animations.css — V2.0 全站动画层 · Creative 版（2026-08-27）
 *
 * 设计主张：拟物 = 光、深度、物理。
 *   凝现  blur → clear（玻璃从雾中凝出）
 *   揭示  clip-path（画面被裁开、光进来）
 *   弹性  back-easing（物理回弹，克制不滑稽）
 *   视差  hero 背景随滚动缓移（空间纵深）
 *
 * token（本层新增，site.css 既有 token 不动）：
 *   --motion-creative-ease: cubic-bezier(.16,1,.3,1)  快速切入、慢速落定
 *   --motion-spring-ease:   cubic-bezier(.34,1.56,.64,1) 轻回弹
 * 全部尊重 prefers-reduced-motion。
 * ============================================================ */

:root {
  --motion-creative-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 1) Dropdown 展开：容器揭示 + 项目逐个滑入 ---------- */
/* 容器：自顶部轻微收拢后展开（scaleY origin top），配合 fade。 */
.w-dropdown-list.w--open {
  transform-origin: top center;
  animation: dropdown-in 340ms var(--motion-creative-ease) both;
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem) scaleY(0.94);
  }
}

/* 列表项：逐个自左滑入（stagger 由 nth-child 承担，最多 12 项；
 * 超出 12 项的尾部同时落定，避免长尾延迟）。 */
.w-dropdown-list.w--open .detail-dropdown__item {
  animation: dropdown-item-in 300ms var(--motion-creative-ease) both;
}
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(1)  { animation-delay: 30ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(2)  { animation-delay: 60ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(3)  { animation-delay: 90ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(4)  { animation-delay: 120ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(5)  { animation-delay: 150ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(6)  { animation-delay: 180ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(7)  { animation-delay: 210ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(8)  { animation-delay: 240ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(9)  { animation-delay: 270ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(10) { animation-delay: 300ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(11) { animation-delay: 330ms; }
.w-dropdown-list.w--open .detail-dropdown__item:nth-child(n+12) { animation-delay: 360ms; }

@keyframes dropdown-item-in {
  from {
    opacity: 0;
    transform: translateX(-0.75rem);
  }
}

/* ---------- 2) Lightbox 图片：弹性落定 ---------- */
.x-lightbox img {
  animation: lightbox-image-in 420ms var(--motion-spring-ease) both;
}

@keyframes lightbox-image-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* ---------- 3) 玻璃按钮箭头：hover 微滑 ---------- */
/* 跳转意图的物理化：箭头朝目标方向轻移。 */
.card-action-bar__icon .icon-chevron,
.listing-card__action-icon .icon-chevron {
  transition: transform var(--motion-hover-duration, 320ms)
    var(--motion-spring-ease);
}

@media (hover: hover) and (pointer: fine) {
  .home-portfolio-link:hover .card-action-bar__icon .icon-chevron,
  .home-card-link:hover .card-action-bar__icon--compact .icon-chevron,
  .listing-card__link:hover .card-action-bar__icon .icon-chevron,
  .listing-card__link:hover .listing-card__action-icon .icon-chevron,
  .portfolio-card__link:hover .card-action-bar__icon .icon-chevron {
    transform: translateX(0.25rem);
  }
}

/* ---------- 4) 渐进图片：缩略图 blur 占位 → 原图凝清 ---------- */
/* 与全站"凝现"语言一致：缩略图先以 blur 占位，
 * 原图预载完成后 swap src 并凝清。JS 侧加/去 .x-prog 类。 */
img.x-prog {
  filter: blur(10px) saturate(0.85);
  transition: filter 0.5s var(--motion-creative-ease);
}

img.x-prog.x-prog-done {
  filter: blur(0) saturate(1);
}

/* ---------- 5) Reduced motion：全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  .w-dropdown-list.w--open,
  .w-dropdown-list.w--open .detail-dropdown__item,
  .x-lightbox img {
    animation: none;
  }
  .card-action-bar__icon .icon-chevron,
  .listing-card__action-icon .icon-chevron {
    transition: none;
  }
  img.x-prog {
    filter: none;
    transition: none;
  }
}