/* （本站 ≤768px 只显示移动端提示遮罩，此规则为基础适配兜底） */

/* ============================================================
   摄影作品弹窗（v1.8.7）
   ------------------------------------------------------------
   点击 .work[data-cam] 摄影卡片后，以 FLIP 动画从卡片原位
   展开的左图右文详情弹窗（交互逻辑见 js/photo-modal.js）：
   - .photo-modal-overlay  遮罩层（压暗为主，不加背景模糊）
   - .photo-modal          弹窗窗体（仅定义视觉外观，
                           尺寸/位置/变换全部由 JS 内联控制）
   - .photo-modal-media    左栏：作品大图
   - .photo-modal-info     右栏：作品信息
   - .photo-modal-close    右上角圆形毛玻璃关闭按钮
   显隐仍由 .is-open 类控制（与网站信息弹窗同一套约定）。
   注意：FLIP 展开动画依赖 JS 逐帧写入 transform，窗体的
   width / height / transform 不在本文件定义，避免与
   JS 内联样式相互覆盖；transform-origin 固定为左上角。
   ============================================================ */

/* ---- 遮罩层 ---- */
/* 全屏固定遮罩，仅压暗（72% 黑）不加 backdrop-filter， */
/* 弹窗打开期间背后页面保持可辨识的暗化轮廓而非完全消失 */
/* 默认 visibility:hidden + opacity:0，.is-open 时 300ms 淡入 */
.photo-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5100; /* 高于网站信息弹窗（5000） */
    background: rgba(9, 10, 13, 0.72);
    visibility: hidden;
    opacity: 0;
    /* 关闭时：先完成 300ms 淡出，再延迟把 visibility 切回 hidden */
    /* （visibility 参与过渡且延迟 300ms，无需 JS 计时器即可实现淡出后隐藏） */
    transition: opacity 300ms ease, visibility 0s linear 300ms;
}

/* 打开状态 — 立即恢复可见并淡入（visibility 不带延迟） */
.photo-modal-overlay.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 300ms ease;
}

/* ---- 弹窗窗体 ---- */
/* 深色毛玻璃长方形窗体；最终形态宽高由 JS 计算： */
/* min(1040px, 100vw - 64px) × min(640px, 100vh - 64px) 并居中。 */
/* position / left / top / margin / width / height / transform */
/* 均由 js/photo-modal.js 内联设置以驱动 FLIP 展开动画， */
/* 此处只定义圆角、边框、背景、阴影等静态视觉外观 */
.photo-modal {
    position: fixed;
    left: 0;
    top: 0;
    margin: 0;
    display: flex;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(15, 17, 22, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
        0 48px 140px rgba(0, 0, 0, 0.6),
        0 12px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* FLIP 以卡片左上角为基准缩放，原点固定在窗体左上角 */
    transform-origin: 0 0;
}

/* ---- 左栏：作品大图（LQIP 双图叠放，逐级变清晰） ---- */
/* 占窗体宽度 56%；图片等比不裁切、不留黑边（弹窗高度被钳制时以 cover 裁切铺满）。
   采用 LQIP 双图：底层 .photo-modal-lqip 为缩略小图（立即可见 + 高斯模糊占位），
   上层 .photo-modal-img 为高清大图（decode 就绪后由 JS 在容器加 .is-loaded 淡入覆盖）；
   两图同一容器、同为 cover，比例即使不同也被裁齐、中心重叠，不会错位。 */
.photo-modal-media {
    flex: 0 0 56%;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
}

/* 两图均铺满媒体区并相对定位叠放 */
.photo-modal-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 360ms ease;
}

/* 底层占位：等比例下采样 LQIP 小图，立即可见 + 高斯模糊柔化放大颗粒
   （scale 1.08 扩大以盖住模糊边缘的缺口） */
.photo-modal-media .photo-modal-lqip {
    opacity: 1;
    filter: blur(14px) saturate(1.12);
    transform: scale(1.08);
}

/* 上层高清大图：默认隐藏，就绪后随容器 .is-loaded 淡入 */
.photo-modal-media .photo-modal-img {
    opacity: 0;
}

/* 高清就绪 — 高清淡入、占位淡出 */
.photo-modal-media.is-loaded .photo-modal-lqip { opacity: 0; }
.photo-modal-media.is-loaded .photo-modal-img { opacity: 1; }

/* ---- 右栏：作品信息 ---- */
/* 垂直居中的信息列：kicker → 标题 → 元信息 |分隔线| 描述 → 相机参数， */
/* 层级间距由各子元素自身的 margin 控制 */
.photo-modal-info {
    flex: 1;
    min-width: 0; /* 防止长文本把 flex 子项撑破窗体 */
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    /* safe center：内容未溢出时垂直居中；内容超高（很宽的横图导致弹窗很矮）时
       安全对齐到顶部并允许滚动，避免裁切文字起始（配合 overflow-y） */
    justify-content: safe center;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 241, 232, 0.2) transparent;
}
.photo-modal-info::-webkit-scrollbar { width: 6px; }
.photo-modal-info::-webkit-scrollbar-track { background: transparent; }
.photo-modal-info::-webkit-scrollbar-thumb { background: rgba(245, 241, 232, 0.2); border-radius: 3px; }

/* kicker — 小号大写字距标签（muted 色），紧凑引导标题 */
.photo-modal-kicker {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* 标题 — 大号粗字重（覆盖全局 h3 字号），适度下距 */
.photo-modal-title {
    margin: 0 0 16px;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 0.01em;
}

/* 元信息行 — 时间 + 地点（「·」分隔），muted 色偏粗字重 */
.photo-modal-meta {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* 描述正文 — 顶部 1px 细分隔线与元信息分层，行高 1.8 保证阅读舒适 */
.photo-modal-desc {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    line-height: 1.8;
    color: rgba(255, 253, 248, 0.78);
}

/* 相机参数块 — 等宽字体 + 左侧竖线，muted 色小字号 */
/* white-space:pre-wrap 保留 data-cam 中「型号  ·  参数」的双空格排版 */
.photo-modal-cam {
    margin-top: 26px;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--line);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--muted);
    white-space: pre-wrap;
}

/* ---- 右栏信息入场动画（stagger 上移淡入） ---- */
/* 默认（关闭）状态：子元素整体下移 14px 且透明 */
.photo-modal-info > * {
    opacity: 0;
    transform: translateY(14px);
}

/* 打开状态 — 子元素依次上移淡入（相邻元素错开 40ms）， */
/* 首个延迟 240ms，待窗体 FLIP 展开过半后再进场，层次感更强； */
/* 过渡只定义在 .is-open 状态上，关闭移除类时子元素瞬间复位（无退场动画） */
.photo-modal.is-open .photo-modal-info > * {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 240ms;
}

.photo-modal.is-open .photo-modal-info > *:nth-child(2) { transition-delay: 280ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(3) { transition-delay: 320ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(4) { transition-delay: 360ms; }
.photo-modal.is-open .photo-modal-info > *:nth-child(5) { transition-delay: 400ms; }

/* ---- 关闭按钮 ---- */
/* 右上角绝对定位的圆形毛玻璃按钮，层级高于左右两栏内容，悬停变亮 */
/* （圆形毛玻璃按钮，风格与全站弹窗关闭按钮一致） */
.photo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(20, 22, 27, 0.6);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    cursor: none; /* 全站自定义光标风格 */
    transition: color 240ms ease, background 240ms ease, border-color 240ms ease;
}

/* 悬停 — 文字变亮 + 背景提亮 + 边框微亮 */
.photo-modal-close:hover {
    color: var(--ink);
    background: var(--hover-bg);
    border-color: rgba(245, 241, 232, 0.3);
}

/* ---- 弹窗响应式 — 窄屏断点 860px ---- */
/* 窄屏改为上图下文纵向布局：图片栏占 44% 高，信息栏占余下高度并允许滚动 */
/* （本站移动端仅显示访问提示遮罩，此处做基础适配兜底） */
@media (max-width: 860px) {
    .photo-modal {
        flex-direction: column;
    }

    /* v1.9.1：媒体区高度改由图片真实宽高比决定（--photo-ratio 由 JS 在打开时写入），
       修复此前固定占高 44% 导致 object-fit:cover 裁切、照片比例失真的问题 */
    .photo-modal-media {
        flex: 0 0 auto;
        height: auto;
        aspect-ratio: var(--photo-ratio, 1.5);
        min-height: 0;
    }

    /* 信息栏：取消垂直居中避免长内容被裁切，改独立滚动 + 收窄内边距 */
    .photo-modal-info {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 28px 22px;
        /* Firefox 细滚动条 */
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 241, 232, 0.2) transparent;
    }

    /* WebKit 细滚动条 */
    .photo-modal-info::-webkit-scrollbar {
        width: 6px;
    }
    .photo-modal-info::-webkit-scrollbar-track {
        background: transparent;
    }
    .photo-modal-info::-webkit-scrollbar-thumb {
        background: rgba(245, 241, 232, 0.2);
        border-radius: 3px;
    }
}