/* ============================================================
 * animate.css — 滚动渐入 / 首屏入场 / 关键帧动画 / 动效降级
 * ------------------------------------------------------------
 * 1) [data-reveal]：滚动渐入（JS IntersectionObserver 添加 .is-revealed）
 * 2) [data-hero]：首屏阶梯入场（loader 消失后 JS 添加 .hero-in 触发）
 * 3) 关键帧：pulse / floaty / loader-pop / tip-breathe
 *    （menu-in 已在 main.css 第 4 区定义，此处不重复）
 * 4) prefers-reduced-motion：全量降级为「直接可见、无位移动画」
 *
 * 门控约定：所有初始隐藏态均以 .js 开头——
 * 禁用 JS 时 [data-reveal]/[data-hero] 保持自然可见，loader 不出现。
 * ============================================================ */

/* ==================== 1. 滚动渐入 ==================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease),
    filter 0.7s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* ---- 1.1 #work 作品展示向：卡片上移归位（封面推近在 main.css 第 6 区） ---- */
.js [data-work-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.js [data-work-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 1.2 #essay 贴纸卡片向：下移 + 3 倍倾角 + 微缩 → 回正到静态倾斜角 ---- */
.js [data-essay-reveal] {
  opacity: 0;
  transform: translateY(54px) rotate(calc(var(--tilt, 0deg) * 3)) scale(0.94);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease-back);
}
.js [data-essay-reveal].is-revealed {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg));
}

/* ==================== 2. 首屏入场（loader 关闭后触发） ==================== */
.js [data-hero] {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
}
.js .hero-inner.hero-in [data-hero] {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.85s var(--ease),
    transform 0.85s var(--ease);
}
/* .hero-copy 的五个子元素依次阶梯入场（nth-child 与元素类型无关） */
.js .hero-copy > [data-hero]:nth-child(1) { transition-delay: 0.05s; }
.js .hero-copy > [data-hero]:nth-child(2) { transition-delay: 0.14s; }
.js .hero-copy > [data-hero]:nth-child(3) { transition-delay: 0.23s; }
.js .hero-copy > [data-hero]:nth-child(4) { transition-delay: 0.32s; }
.js .hero-copy > [data-hero]:nth-child(5) { transition-delay: 0.41s; }
/* 贴纸稍晚上场，与文字形成层次 */
.js .hero-sticker-wrap[data-hero] { transition-delay: 0.20s; }

/* loader 展示期间锁定页面滚动 */
body.is-loading { overflow: hidden; }

/* ==================== 3. 关键帧 ==================== */
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.75); opacity: 0.35; }
}

@keyframes floaty {
  0%, 100% { transform: translate(var(--drag-x, 0px), var(--drag-y, 0px)) rotate(var(--drag-rot, 0deg)); }
  50%      { transform: translate(var(--drag-x, 0px), calc(var(--drag-y, 0px) - 14px)) rotate(calc(var(--drag-rot, 0deg) + 1.5deg)); }
}

@keyframes loader-pop {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tip-breathe {
  from { opacity: 0.55; letter-spacing: 0.1em; }
  to   { opacity: 1;    letter-spacing: 0.16em; }
}

/* ==================== 4. 减弱动效：保留可读性，去掉位移与循环动画 ==================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 渐入/入场直接到位，不做过渡 */
  .js [data-reveal],
  .js [data-work-reveal],
  .js [data-essay-reveal],
  .js [data-hero] {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
  /* 随笔保留静态倾斜（属排版错落，非动画），其余位移一律取消 */
  .js [data-reveal],
  .js [data-work-reveal],
  .js [data-hero] { transform: none !important; }
  .js [data-essay-reveal] { transform: rotate(var(--tilt, 0deg)) !important; }

  /* work 封面揭幕/推近直接到位 */
  .js [data-work-reveal]:not(.is-revealed) .card-media { clip-path: none; }
  .js [data-work-reveal]:not(.is-revealed) .card-media img { transform: none; }

  /* 循环动画一律停止 */
  .pulse-dot,
  .hero-sticker,
  .footer-sticker,
  .loader-avatar,
  .loader-tip {
    animation: none !important;
  }

  /* 悬停上浮/旋转改为即时不变形 */
  .btn:hover,
  .card-hover:hover,
  .book-card:hover,
  .social-btn:hover,
  .to-top:hover,
  .mode-toggle:hover,
  .accent-dot:hover,
  .essay-card:hover,
  .essay-card:hover .essay-btn {
    transform: none !important;
  }
  /* 照片堆不再散开 */
  .essay-card:hover .essay-paper,
  .essay-card:hover .essay-photo { transform: none !important; }
}