/* ==========================================================================
   手机版适配 mobile.css
   --------------------------------------------------------------------------
   规则全部收在媒体查询里（≤780px 时间轴竖版 / ≤640px 主断点），桌面端零影响。
   加载顺序在 style.css / photo.css 之后，同级覆盖以后写的为准。
   深色与多巴胺（html.dopa）双主题都要覆盖。
   ========================================================================== */

/* ==========================================================================
   ① 时间轴：横向年代轴 → 竖版时间线（≤780px）
   立绘横排与横向轴隐藏，改成左侧竖线 + 逐条下排；
   点亮态改由滚动入场 .is-in 驱动（JS 的横向进度算法在竖版下失真）。
   ========================================================================== */
@media (max-width: 780px) {
  .tl2__stage,
  .tl2__axis { display: none; }

  .tl2__row {
    display: block;
    position: relative;
    padding: 10px 0 0;
    margin-top: 2px;
  }
  /* 左侧竖向主线：沿用横向轴的四段配色（转 180deg），低亮度打底 */
  .tl2__row::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 14px;
    bottom: 34px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg,
      #f2c94c 0%, #f2c94c 13%,
      #8ee05e 37.7%,
      #f472b6 62.3%,
      #8b7bff 87%, #8b7bff 100%);
    opacity: .28;
  }

  .tl2__item {
    width: 100%;
    text-align: left;
    position: relative;
    padding: 4px 0 34px 46px;
  }
  .tl2__item:last-child { padding-bottom: 10px; }

  /* 节点菱形（代替横向轴上的 dot） */
  .tl2__item::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 14px;
    width: 11px;
    height: 11px;
    transform: rotate(45deg);
    background: var(--c, var(--red));
    opacity: .3;
    transition: opacity .4s, box-shadow .4s;
  }
  .tl2__item.is-in::before {
    opacity: 1;
    box-shadow: 0 0 10px var(--c, var(--red));
  }

  .tl2__year { font-size: 42px; }
  /* 窄屏下 JS 横向进度会把 is-lit 全点亮 → 先压回灰，再用 is-in 逐条点亮 */
  .tl2__item.is-lit .tl2__year {
    color: rgba(236, 232, 225, .22);
    text-shadow: none;
  }
  .tl2__item.is-in .tl2__year,
  .tl2__item.is-lit.is-in .tl2__year {
    color: var(--c, var(--red));
    text-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--red)) 40%, transparent);
  }

  .tl2__date { font-size: 13px; margin-top: 2px; }
  .tl2__tag  { font-size: 13px; margin-top: 8px; }
  .tl2__co   { font-size: 16.5px; margin-top: 7px; }
  .tl2__desc { font-size: 13.5px; margin-top: 6px; padding: 0; }

  /* —— 多巴胺主题同步（内嵌 dopa 样式带 !important，这里同权级压回） —— */
  html.dopa .tl2__row::before { opacity: .22; }
  html.dopa .tl2__item { padding: 4px 0 34px 46px !important; background: transparent !important; }
  html.dopa .tl2__item.is-lit .tl2__year {
    color: rgba(51, 41, 79, .18) !important;
    text-shadow: none !important;
  }
  html.dopa .tl2__item.is-in .tl2__year,
  html.dopa .tl2__item.is-lit.is-in .tl2__year {
    color: var(--c, #E85D8A) !important;
    text-shadow:
      0 0 2px rgba(255, 255, 255, .9),
      0 0 9px color-mix(in srgb, var(--c, #E85D8A) 45%, transparent),
      0 0 20px color-mix(in srgb, var(--c, #E85D8A) 22%, transparent) !important;
  }
}

/* ==========================================================================
   ② ≤640px 主断点：档案区归位 + 能力封面重排 + 整体缩放
   ========================================================================== */
@media (max-width: 640px) {

  /* —— 档案区：3D 工牌与简历面板回归单列文档流（桌面栅格的跨行占位必须清掉） —— */
  .profile__grid { grid-template-columns: minmax(0, 1fr); }
  .profile__grid .badge-stage,
  .profile__grid .resume-panel {
    grid-column: 1;
    grid-row: auto;
    max-width: 420px;
    width: 100%;
    margin-left: auto; margin-right: auto;
  }
  .profile__grid .resume-panel { margin-top: 26px; }
  /* style.css 760px 断点里同选择器定了 480px，这里必须同特异性才能压住；
     收起态收紧凑，点开工牌看简历时恢复 480px 保证可读 */
  .profile__grid .resume-panel { min-height: 250px; }
  .profile__grid .resume-panel[data-open="true"] { min-height: 480px; }
  .resume-panel__spray { width: 84px; }
  .resume-panel__tip { font-size: 15px; }
  .profile__name { font-size: clamp(34px, 11vw, 44px); }
  .profile__lead { margin-top: 20px; font-size: 13.5px; }

  /* —— 能力板块封面：文件夹从「压在文字上」改为「沉底居中」 —— */
  /* 注意：.wk-art 子元素全是绝对定位（自身高度为 0），必须给显式高度；
     入场动画 artPop 会 fill 覆盖 transform，所以只能用 left/right 定位，不能靠 translate 居中 */
  .wk-cover { min-height: 96svh; }
  .wk-art {
    left: 4vw;
    right: 4vw;
    top: auto;
    bottom: 24%;
    width: auto;
    height: 52vw;
    /* JS 滚动视差会写行内 --art-y 把立绘下推导致压到吸顶条，手机上锁死 */
    --art-y: 0px !important;
  }
  .wkf { --wkf-k: .42; --pop-k: 2.3; }
  /* 「分别是：」那行是行内 nowrap，手机上必须放开换行 */
  .wk-head__lead span { white-space: normal !important; }
  /* 手机没有 hover，提示语换成不误导：直接隐藏 */
  .wkf-tip { display: none; }
  /* 文字区上移一点，给底部文件夹让位 */
  .wk-head { justify-content: flex-start; padding-top: 8vh; }
  .wk-ghost { top: 34%; font-size: clamp(96px, 30vw, 150px); }

  /* —— 板块切换条：2×2 → 单列四行更清爽？保持 2×2 但收紧 —— */
  .wk-nav__item { padding: 11px 10px 12px; }
  .wk-nav__item strong { font-size: 13px; }

  /* —— 标题与留白整体收紧 —— */
  .section { padding-top: 38px; padding-bottom: 38px; }
  .sec-head { margin-bottom: 18px; }
  .wk-cover h2, .wk-head h2 { font-size: clamp(34px, 10.5vw, 46px); }

  /* —— 案例大标题（CASE 01 / PART 02…）防断行溢出 —— */
  .case-title, .wk-case h2 { overflow-wrap: anywhere; }

  /* —— 数据卡与阅读量列表（已较紧凑，微调） —— */
  .stat { padding: 16px 14px; }
  .contact__cell { padding: 18px 16px; }

  /* —— 摄影手风琴说明 —— */
  .acc-panel__text { font-size: .95rem; }

  /* —— 漂移照片墙：矮一点，减少压迫感 —— */
  .drift-wall { height: clamp(420px, 120vw, 560px); }

  /* —— 灯箱按钮 —— */
  .lb__nav { bottom: -50px; }
}

/* ==========================================================================
   ③ 超窄屏（≤380px）：再收一档
   ========================================================================== */
@media (max-width: 380px) {
  .tl2__year { font-size: 36px; }
  .tl2__item { padding-left: 40px; }
  .tl2__row::before { left: 12px; }
  .tl2__item::before { left: 8px; }
  .wkf { --wkf-k: .46; }
}


/* ==========================================================================
   ④ 手机性能止损（≤780px）：桌面炫效在手机 GPU 上全是杀手，一律关停
   ========================================================================== */
@media (max-width: 780px) {
  /* 全屏背景渐变动画（dopaFloat）与首屏极光团：定格为静态 */
  html.dopa body::before,
  html.dopa body::after { animation: none !important; }
  .hero__aurora i { animation: none !important; }
  /* 毛玻璃在手机上极贵：全部降级为纯色半透明（底色本就有 rgba 兜底） */
  .nav, .wkf-pop, .wk-nav, .lb__bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav { background: rgba(11, 15, 23, .92) !important; }
  html.dopa .nav { background: rgba(255, 252, 247, .92) !important; }
  /* 气泡墙漂浮动画定格（窄屏布局已是规整两列，不需要 bob） */
  .bub__inner { animation: none !important; }
  /* 大标题流光每帧重绘大面积文字（background-position 动画），手机上定格为静态渐变 */
  .hero__cn .ch, .hero__title .ch {
    animation: none !important;
    background-position: 34% 0 !important;
  }
  /* 视频逐帧 saturate/contrast 滤镜叠加在解码上很贵 */
  .hero__video { display: none; }

  /* R118: 手机端首页动效改为动画 WebP —— 不受 autoplay 策略限制，打开就动 */
  .hero__anim {
    display: block;
    position: absolute;
    top:0; right:0; bottom:0; left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 42%;
    z-index: 0;
  }
  /* WebGL 拖尾光标：触屏设备 JS 侧已不启动，这里兜底隐藏 */
  #glowCursor, .glow-cursor, canvas[data-glow] { display: none !important; }
}

/* ==========================================================================
   ⑤ 观感修正（≤640px）：标题缩小 / 喷漆不压字 / 文件夹图标一起缩 /
      地图弹卡收进屏 / 胶带缩小 / 人像墙 3 列
   ========================================================================== */
@media (max-width: 640px) {
  /* —— 所有区块大标题统一缩小一档 —— */
  .sec-head h2 { font-size: clamp(24px, 6.6vw, 31px); }
  .wk-cover h2, .wk-head h2, .wk-case h2 { font-size: clamp(27px, 8vw, 36px); }
  /* —— h2 里行内样式的喷漆装饰会盖住标题文字：inline display 必须 !important 才能压过 —— */
  h2 .deco { display: none !important; }

  /* —— 能力板块：文件夹和弹出的图标一起再缩，绝不压正文 —— */
  .wk-art { bottom: 30%; height: 40vw; }
  .wkf { --wkf-k: .32; --pop-k: 2.0; }

  /* —— 3D 胶带卷：真正缩小 ——
     R118 定案：光收画布宽度没用（相机按高度取景，画面窄了内容占比反而更大，
     而且 fitStageHeight 有 Math.max(320,..) 下限把舞台高度钉在 320，实测看不出变化）。
     必须同时压低舞台高度（!important 压过 JS 行内样式）+ 收窄画布，整体才会小。 */
  .tape-stage { height: 196px !important; }
  .tape-canvas { left: 8% !important; width: 84% !important; }
  .tape-hint { display: none; }

  /* —— 地图项目弹卡：不再跟随触点（窄屏下必跑出屏幕被裁），改为面板内居中 + 内部可滚 —— */
  .pmap__canvas { width: min(100%, 860px) !important; }
  .pmap__pop {
    position: absolute !important;
    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    transform: none !important;
    --ox: 0px !important; --oy: 0px !important;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 9;
  }
  .pmap__pop-card {
    position: static !important;
    width: min(84vw, 320px) !important;
    max-height: calc(100% - 10px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
    transform: none !important;
    margin: 0 !important;
  }
  .pmap__pop-media { max-height: 21vh !important; }
  .pmap__pop.is-tall .pmap__pop-media img { max-height: 22vh !important; }
  .pmap__pop-body { padding: 10px 12px 12px !important; }
  .pmap__pop-text { font-size: 12px !important; line-height: 1.6 !important; }
  .pmap__pop-title { font-size: 14.5px; }
  .pmap__pop-meta { font-size: 11.5px; letter-spacing: .08em; }

  /* —— 成都站大卡片：手机端全屏浮层（JS 已把 .pmd 搬到 body 并加 .pmd--fixed） —— */
  .pmd { padding: 8px; }
  .pmd__box { width: 100% !important; }
  .pmd--fixed {
    position: fixed !important;
    top:0; right:!important; bottom:0; left:!important;
    top: 0 !important; bottom: 0 !important; height: auto !important;
    z-index: 90;
    padding: 10px;
  }
  .pmd--fixed .pmd__box {
    width: 100%; width: min(100%, 460px);
    max-height: 100%;
    height: auto;
  }
  .pmd--fixed .pmd__body { padding: 12px 12px 20px; }
  .pmd--fixed .pmd__fig img { aspect-ratio: 16 / 11; }
  .pmd__head { padding: 16px 16px 12px; }
  .pmd__title { font-size: clamp(20px, 5.6vw, 26px); }
  .pmd__meta { font-size: 11px; }
  .pmd__body {
    padding: 14px 14px 22px;
    min-height: 0;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .pmd__grid { gap: 10px; }
  .pmd__fig img { aspect-ratio: 16 / 11; }
  .pmd__fig figcaption { font-size: 11px; padding: 7px 9px 8px; }

  /* —— 人像墙：JS 已切 3 列 × 12 张，容器压矮配合 —— */
  .drift-wall { height: clamp(340px, 92vw, 460px); --dw-gap: 9px; --dw-radius: 10px; }

  /* —— CASE02 标题：三个账号一行一个（桌面端 span 行内，不受影响） —— */
  .tseg { display: block; margin-bottom: .16em; }
  .tsep { display: none; }
}