/* ============================================================
   moments.css — 「此刻」动态页 v1（20260910a）
   时间轴卡片流 · 九宫格媒体 · 灯箱 · 全变量适配三主题
   ============================================================ */

.mo-wrap { max-width: 660px; margin: 0 auto; padding: 0 20px 90px; }

/* ---------- 页头 ---------- */
.mo-hero { text-align: center; padding: 56px 0 8px; }
.mo-kicker { font-size: 11px; letter-spacing: .42em; text-indent: .42em; color: var(--brand); font-weight: 600; }
.mo-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(30px, 5vw, 40px);
    margin-top: 12px;
    letter-spacing: .14em;
    text-indent: .14em;
}
.mo-desc { color: var(--text-3); font-size: 14px; margin-top: 8px; }
.mo-count { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.mo-count b { color: var(--brand); font-family: var(--font-serif); font-size: 15px; margin: 0 2px; }

/* ---------- 时间轴 ---------- */
.mo-timeline { position: relative; margin-top: 30px; padding-left: 26px; }
.mo-timeline::before {
    content: '';
    position: absolute; left: 5px; top: 8px; bottom: 8px;
    width: 1px; background: var(--border);
}

/* 年份节点 */
.mo-year { position: relative; margin: 36px 0 16px; }
.mo-timeline > .mo-year:first-child { margin-top: 6px; }
.mo-year span {
    font-family: var(--font-serif);
    font-size: 15px; font-weight: 600;
    color: var(--text-2); letter-spacing: .1em;
}
.mo-year::before {
    content: '';
    position: absolute; left: -21px; top: 50%;
    transform: translate(-50%, -50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-op);
}

/* ---------- 动态卡片 ---------- */
.mo-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 22px 12px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-card);
    transition: var(--t);
    animation: mo-in .55s ease backwards;
}
@keyframes mo-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.mo-timeline .mo-card:nth-of-type(2) { animation-delay: .06s; }
.mo-timeline .mo-card:nth-of-type(3) { animation-delay: .12s; }
.mo-timeline .mo-card:nth-of-type(4) { animation-delay: .18s; }
.mo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
/* 卡片时间节点：空心小点 */
.mo-card::before {
    content: '';
    position: absolute; left: -21px; top: 30px;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--text-3);
    transition: var(--t);
}
.mo-card:hover::before { border-color: var(--brand); background: var(--brand-op); }

/* 头部：头像 + 名字 + 时间 + 定位心情 */
.mo-card-head { display: flex; align-items: center; gap: 12px; }
.mo-avatar {
    width: 42px; height: 42px; border-radius: 26%;
    object-fit: contain; flex: none;
}
.mo-name { font-family: var(--font-serif); font-weight: 700; font-size: 14.5px; }
.mo-date { font-size: 12px; color: var(--text-3); margin-top: 2px; letter-spacing: .04em; }
.mo-meta {
    margin-left: auto;
    font-size: 12px; color: var(--text-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: var(--r-full);
    max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: none;
}

/* 正文：保留换行的随笔记 */
.mo-text {
    margin-top: 14px;
    font-size: 15.5px; line-height: 1.92;
    white-space: pre-wrap; word-break: break-word;
    color: var(--text);
}

/* ---------- 媒体区：1 图大图 / 2·4 图两列 / 其余三列 ---------- */
.mo-media { margin-top: 14px; display: grid; gap: 6px; }
.mo-media.grid-2, .mo-media.grid-4 { grid-template-columns: 1fr 1fr; }
.mo-media.grid-3 { grid-template-columns: repeat(3, 1fr); }
.mo-item {
    position: relative; margin: 0;
    border-radius: var(--r-sm);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--bg-secondary);
}
.mo-media:not(.grid-1) .mo-item { aspect-ratio: 1; }
.mo-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s ease;
}
.mo-item:hover img { transform: scale(1.045); }
.grid-1 .mo-item { cursor: zoom-in; }
.grid-1 .mo-item img { height: auto; max-height: 480px; }

/* 视频项：封面 + 播放键，点击后才加载源文件（按需加载，零预载） */
.mo-item.is-video { cursor: pointer; }
.mo-video-ph {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 25%, var(--brand-op), transparent 60%),
        repeating-linear-gradient(45deg, var(--bg-secondary) 0 12px, var(--bg-hover) 12px 24px);
}
.mo-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.mo-play i {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: relative;
    transition: transform .3s ease;
}
.mo-play i::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    transform: translate(-38%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}
.mo-item.is-video:hover .mo-play i { transform: scale(1.1); }
.mo-item.is-video.playing { cursor: default; aspect-ratio: auto; }
.mo-item.is-video.playing .mo-play { display: none; }
.mo-item.is-video.playing video {
    width: 100%; height: auto;
    display: block; background: #000;
}

/* ---------- 底部：路过 · 喜欢（纯文字） ---------- */
.mo-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 20px;
    margin-top: 14px; padding-top: 11px;
    border-top: 1px dashed var(--border);
}
.mo-views { font-size: 12.5px; color: var(--text-3); letter-spacing: .03em; }
.mo-like {
    font-size: 12.5px; color: var(--text-3);
    padding: 2px 4px;
    letter-spacing: .03em;
    transition: var(--t);
    position: relative;
}
.mo-like:hover { color: var(--brand); }
.mo-like.liked { color: var(--brand); font-weight: 600; }
.mo-like.liked { animation: mo-pop .35s ease; }
@keyframes mo-pop { 40% { transform: scale(1.14); } }

/* 点赞气泡：上浮消失 */
.mo-bubble {
    position: absolute; left: 50%; top: -8px;
    transform: translateX(-50%);
    font-size: 11px; color: var(--brand);
    white-space: nowrap; pointer-events: none;
    animation: mo-float 1.3s ease forwards;
}
@keyframes mo-float {
    from { opacity: 0; transform: translate(-50%, 6px); }
    25% { opacity: 1; }
    to { opacity: 0; transform: translate(-50%, -28px); }
}

/* ---------- 加载更多 ---------- */
.mo-more-wrap { text-align: center; margin: 4px 0 10px; }
.mo-more {
    font-size: 13px; letter-spacing: .14em; text-indent: .14em;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 10px 30px;
    cursor: pointer;
    transition: var(--t);
}
.mo-more:hover { color: var(--brand); border-color: var(--brand); box-shadow: 0 4px 14px var(--brand-op); }
.mo-more:disabled { opacity: .55; cursor: default; }

/* ---------- 空状态 ---------- */
.mo-empty {
    text-align: center;
    padding: 76px 0;
    color: var(--text-3);
    font-size: 14px;
    letter-spacing: .1em;
}

/* ---------- 右侧时间轮盘：月份快速跳转 ---------- */
.mo-dial {
    position: fixed;
    right: calc(50% - 460px);   /* 贴合 660px 内容栏右外侧 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.mo-dial-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.mo-dial-item .dl-label {
    font-size: 11.5px;
    color: var(--text-3);
    letter-spacing: .06em;
    white-space: nowrap;
    opacity: 1;               /* 月份文字常显，保证一眼可见 */
    transform: none;
    transition: var(--t);
}
.mo-dial-item:hover .dl-label,
.mo-dial-item.active .dl-label {
    color: var(--brand);
    font-weight: 600;
}
.mo-dial-item .dl-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1.5px solid var(--text-3);
    transition: var(--t);
    flex: none;
}
.mo-dial-item:hover .dl-dot { border-color: var(--brand); }
.mo-dial-item.active .dl-dot {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-op);
}

/* ---------- 灯箱 ---------- */
.mo-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(10, 10, 10, .93);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.mo-lightbox.open { opacity: 1; visibility: visible; }
.mlb-stage {
    position: absolute; inset: 0;   /* 舞台铺满整个灯箱，缩放平移不再受固定框限制 */
    display: flex; align-items: center; justify-content: center;
    touch-action: none;   /* 手势（双指缩放 / 拖拽平移）全部由 JS 接管 */
    cursor: zoom-in;
    overflow: hidden;
}
.mlb-stage img {
    max-width: 94vw; max-height: 90vh;
    display: block; border-radius: 4px;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .55);
    animation: mo-zoom .22s ease;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.mlb-stage.zoomed { cursor: grab; }
.mlb-stage.zoomed:active { cursor: grabbing; }
.mlb-stage video {
    max-width: 94vw; max-height: 90vh;
    display: block; border-radius: 4px;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .55);
    background: #000;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
}
@keyframes mo-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.mlb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;   /* 图片带 will-change 会创建层叠上下文，必须显式置顶才不会被盖住 */
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: var(--t);
    user-select: none;
}
.mlb-nav:hover { background: rgba(255, 255, 255, .22); }
.mlb-prev { left: 22px; }
.mlb-next { right: 22px; }
.mlb-close {
    position: absolute; top: 18px; right: 22px;
    z-index: 2;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px; letter-spacing: .28em; text-indent: .28em;
    background: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--r-full);
    padding: 7px 16px;
    cursor: pointer;
    transition: var(--t);
}
.mlb-close:hover { color: #fff; border-color: rgba(255, 255, 255, .65); }
.mlb-count {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .68);
    font-size: 12.5px; letter-spacing: .12em;
}

/* ---------- 移动端 ---------- */
@media (max-width: 1180px) {
    /* 屏幕较窄时轮盘收进右缘，只留小点 */
    .mo-dial { right: 6px; }
    .mo-dial-item .dl-label { opacity: 1; transform: none; font-size: 10px; }
    .mo-dial-item.active .dl-label { color: var(--brand); }
}
@media (max-width: 640px) {
    .mo-wrap { padding: 0 14px 70px; }
    .mo-hero { padding-top: 42px; }
    .mo-timeline { padding-left: 18px; }
    .mo-timeline::before { left: 3px; }
    .mo-year::before, .mo-card::before { left: -15px; }
    .mo-card { padding: 15px 14px 8px; margin-bottom: 16px; }
    .mo-card-head { flex-wrap: wrap; row-gap: 4px; }
    .mo-avatar { width: 38px; height: 38px; }
    .mo-meta { margin-left: 0; max-width: 100%; flex-basis: 100%; justify-self: start; }
    .mo-text { font-size: 15px; }
    .mo-foot { gap: 14px; padding-top: 10px; }
    .mo-like, .mo-views { padding: 6px 2px; }
    /* 轮盘：竖排细点贴右缘，label 常显小字 */
    .mo-dial { right: 3px; gap: 8px; }
    .mo-dial-item .dl-label { font-size: 9.5px; }
    .mo-dial-item .dl-dot { width: 6px; height: 6px; }
    .mlb-nav { width: 42px; height: 42px; font-size: 22px; }
    .mlb-prev { left: 10px; }
    .mlb-next { right: 10px; }
    .mlb-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .mo-card { animation: none; }
    .mo-item img { transition: none; }
}