/* ==========================================================
   responsive.css — 全局响应式 + 减弱动画适配 (Global Responsive)
   ------------------------------------------------------------
   物理拆分, 不使用 CSS @import. 在 index.html 头部按顺序引入
   (后加载覆盖前加载, 最后加载, 用于覆盖式全局响应式, 15 CSS):

       1.  base.css                    (基础层: 重置 + 变量 + 纸纹 + scrollbar)
       2.  scene.css                   (场景层: 海草 + 潜水员 + 标题 + 进场)
       3.  portfolio-layout.css        (作品集骨架)
       4.  portfolio-grid.css          (作品集卡片栅格)
       5.  resume.css                  (简历, 含 experience-tag 八边形化)
       6.  portfolio-preview.css       (预览: Lightbox + PDF 模态框)
       7.  portfolio-x1-sidebar.css    (X1 侧栏: Markdown + modal)
       8.  contact.css                 (联系表单 + 社交)
       9.  life-layout.css             (兴趣卡骨架: 4 张核心卡 + 散落 Polaroid)
      10.  life-modal.css              (通用 modal: 4 主题 + 流体特效 + 响应式)
      11.  life-marathon.css           (Marathon 列表 + 节点 + 响应式) ← 原 lifeCollage.css 一部分
      12.  life-travel.css             (Travel 地图 + 时间轴 + 响应式) ← 原 lifeCollage.css 一部分
      13. life-photography.css        (Photography 骨架位, Backlog #27 待实现)
      14. life-finance.css            (Finance 骨架位, Backlog #27 待实现)
      15. responsive.css              ← 本文件 (最后加载, 用于覆盖式全局响应式)

   完整文件结构与职责归属见 [WORKFLOW.md §4](./WORKFLOW.md).

   (历史 portfolio.css / style.css 已删除)

   包含:
       1. 减弱动画 (@media prefers-reduced-motion: reduce)
       2. 1024px / 768px / 480px / 360px 全局断点兜底
       3. 横屏 (max-height: 500px) 兜底
   ========================================================== */


/* ==========================================================
   1. 减弱动画 / Reduced Motion (操作系统级偏好)
   ------------------------------------------------------------
   `prefers-reduced-motion: reduce` 用户对动画敏感时,
   把所有动画/过渡/平滑滚动压到 0.01ms, 几乎"瞬时",
   但保留状态切换, 避免 layout 崩塌.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================
   2. 触屏设备: 关闭自定义光标 + 移动端入场动画
   ========================================================== */
@media (hover: none) and (pointer: coarse) {
    body { cursor: auto !important; }

    /* 禁用 backface-visibility 等可能干扰移动渲染的属性 */
    .project-card, .interest-card--interactive {
        -webkit-tap-highlight-color: transparent;
    }
}


/* ==========================================================
   3. iOS 安全区 (灵动岛 / 底部小白条)
   ========================================================== */
@supports (padding: env(safe-area-inset-top)) {
    /* 注意: 标题容器 #cinematic-title-container 的安全区已在 scene.css 中处理 */
    .interest-modal-container {
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    .pdf-modal-container {
        margin-top: env(safe-area-inset-top);
        margin-bottom: env(safe-area-inset-bottom);
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}


/* ==========================================================
   4. 通用大骨架间距微调
   ------------------------------------------------------------
   用于整体页面骨架的响应式间距, 不属于任何具体模块.
   各模块的内部断点 (1024/768/480/360) 已由对应文件处理.
   ========================================================== */
@media (max-width: 1024px) {
    body { font-size: 15px; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .content-section { padding: 40px 0; }
    .content-section .container { width: 94% !important; }
}

@media (max-width: 480px) {
    body { font-size: 13px; }
}

@media (max-width: 360px) {
    body { font-size: 12px; }
}