/* =========================================================
   responsive.css
   滚动进场 · 断点适配 · 动效降级
   ========================================================= */

/* =========================================================
   滚动进场动画
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 720px) {
  .nav { padding: 8px 8px 8px 16px; gap: 6px; }
  .nav-link { padding: 8px 10px; font-size: 13.5px; }
  .nav-cta { padding: 8px 16px; font-size: 13px; }

  .hero { min-height: 92dvh; padding-top: 110px; }
  .avatar { width: 78px; height: 78px; margin-bottom: 26px; }
  .avatar-initial { font-size: 31px; }
  .scroll-hint { display: none; }

  .section-en { display: none; }

  .apps-search { flex: 1 1 100%; max-width: none; margin-left: 0; }

  .contact-card { border-radius: 24px; }
  .contact-link { padding: 10px 16px; font-size: 13px; }

  .toast { font-size: 13.2px; padding: 12px 18px; }
}

@media (max-width: 430px) {
  .contact-links { flex-direction: column; align-items: stretch; }
  .contact-link { justify-content: center; }
}

/* 极窄屏：导航只留名字和按钮 */
@media (max-width: 352px) {
  .nav-links { display: none; }
}

/* =========================================================
   动效降级
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}