/* ============================================================================
 * zzerfu-motion.css — Lovey 动效与布局润色覆盖层
 * ----------------------------------------------------------------------------
 * 加载在 zzerfu.css 之后。只补充滚动入场、悬停微动、计时卡片与间距，
 * 不改主题令牌，不覆盖留言胶囊 / 顶栏结构 / 卡片整块可点层（a::after）。
 * 所有颜色走 CSS 变量，深色模式单独收光晕与描边。
 * ========================================================================== */

/* ============================================================
   1. 主题切换：只过渡背景 / 文字 / 玻璃面，不用 transition: all
   ============================================================ */
.header-wrap {
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.header-wrap.is-scrolled {
    box-shadow: 0 8px 24px -18px rgba(13, 92, 78, 0.35);
}

[data-theme="dark"] .header-wrap.is-scrolled {
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.55);
}

.bg-img .middle,
.card-wrap .row .card,
.central .little_texts,
.central .list_texts,
.img_card,
.central.bg,
.lg-sidebar-item,
div.time.time--hero {
    transition:
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

/* ============================================================
   2. 首屏头像：心跳曲线、柔光、悬停光环
   ============================================================ */
.bg-img .middle .love-icon {
    position: relative;
    isolation: isolate;
}

.bg-img .middle .love-icon::after {
    content: "";
    position: absolute;
    inset: -28%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
    filter: blur(10px);
    opacity: 0.85;
    animation: zf-heart-glow 1.8s ease-in-out infinite;
}

[data-theme="dark"] .bg-img .middle .love-icon::after {
    opacity: 0.4;
    background: radial-gradient(circle, rgba(94, 224, 200, 0.20) 0%, transparent 70%);
}

.bg-img .middle .love-icon img {
    filter: drop-shadow(0 8px 18px rgba(15, 155, 134, 0.28));
    animation: zf-heartbeat 1.8s ease-in-out infinite !important;
    transform-origin: center;
}

[data-theme="dark"] .bg-img .middle .love-icon img {
    filter: drop-shadow(0 6px 14px rgba(94, 224, 200, 0.16));
}

/* 停顿 + 轻跳两下，再休息，避免匀速缩放 */
@keyframes zf-heartbeat {
    0%,
    18% { transform: scale(1); }
    28% { transform: scale(1.14); }
    40% { transform: scale(0.96); }
    50% { transform: scale(1.10); }
    62%,
    100% { transform: scale(1); }
}

@keyframes zf-heart-glow {
    0%,
    18%,
    62%,
    100% { opacity: 0.55; transform: scale(0.92); }
    28%,
    50% { opacity: 0.95; transform: scale(1.06); }
}

[data-theme="dark"] .bg-img .middle .love-icon::after {
    animation-name: zf-heart-glow-dark;
}

@keyframes zf-heart-glow-dark {
    0%,
    18%,
    62%,
    100% { opacity: 0.28; transform: scale(0.92); }
    28%,
    50% { opacity: 0.5; transform: scale(1.05); }
}

.bg-img .middle .img-male,
.bg-img .middle .img-female {
    position: relative;
}

.bg-img .middle .img-male:hover img,
.bg-img .middle .img-female:hover img {
    transform: translateY(-5px);
    box-shadow:
        0 18px 40px -22px rgba(8, 40, 34, 0.65),
        0 0 0 4px var(--accent-soft);
}

[data-theme="dark"] .bg-img .middle .img-male:hover img,
[data-theme="dark"] .bg-img .middle .img-female:hover img {
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, 0.7),
        0 0 0 4px rgba(94, 224, 200, 0.18);
}

/* 头像区极淡浮尘：少量、不可点、不铺满全屏 */
.zf-dust {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.zf-dust i {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.22;
    filter: blur(0.4px);
    animation: zf-dust-float 9s ease-in-out infinite;
}

.zf-dust i:nth-child(1) { left: 12%; top: 28%; width: 4px; height: 4px; animation-duration: 8.5s; animation-delay: -1s; }
.zf-dust i:nth-child(2) { left: 78%; top: 22%; width: 6px; height: 6px; opacity: 0.16; animation-duration: 10s; animation-delay: -3s; }
.zf-dust i:nth-child(3) { left: 22%; top: 62%; width: 3px; height: 3px; animation-duration: 7.5s; animation-delay: -2.2s; }
.zf-dust i:nth-child(4) { left: 86%; top: 58%; width: 5px; height: 5px; opacity: 0.18; animation-duration: 11s; animation-delay: -4.4s; }
.zf-dust i:nth-child(5) { left: 48%; top: 18%; width: 3px; height: 3px; animation-duration: 9.6s; animation-delay: -0.8s; }
.zf-dust i:nth-child(6) { left: 58%; top: 70%; width: 4px; height: 4px; opacity: 0.14; animation-duration: 8.2s; animation-delay: -5s; }

[data-theme="dark"] .zf-dust i {
    background: #5ee0c8;
    opacity: 0.12;
}

[data-theme="dark"] .zf-dust i:nth-child(2),
[data-theme="dark"] .zf-dust i:nth-child(4),
[data-theme="dark"] .zf-dust i:nth-child(6) {
    opacity: 0.08;
}

@keyframes zf-dust-float {
    0%,
    100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -18px); }
}

/* ============================================================
   3. 首页计时：Together Since 风格玻璃卡
   ============================================================ */
div.time.time--hero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: min(720px, calc(100% - 2.4rem));
    margin: clamp(1rem, 2.6vh, 1.7rem) auto 0 !important;
    padding: 1.25rem 1.35rem 1.45rem !important;
    background: var(--glass) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
}

[data-theme="dark"] div.time.time--hero {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-card);
}

div.time.time--hero #span_dt_dt {
    margin-bottom: 0;
}

div.time.time--hero .time__count {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.9rem, 2.4vw, 2rem);
    margin-top: 1rem;
    width: 100%;
}

/* 四个单位不再各占一个小方框：整块玻璃卡就是唯一的背景，数字之间只靠间距分隔 */
div.time.time--hero .time__item,
div.time.time--hero b {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--text) !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

div.time.time--hero .time__item--days {
    min-width: 0;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

div.time.time--hero .time__num {
    display: block;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    /* 天/时/分/秒同一字号：最小 1.55rem 保证 320px 屏也能一行放下四组 */
    font-size: clamp(1.55rem, 4.4vw, 2.35rem) !important;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--text);
}

/* 天数只保留主色，字号不再单独特大 */
div.time.time--hero .time__item--days .time__num {
    font-weight: 700;
    color: var(--accent) !important;
}

div.time.time--hero .time__unit {
    display: block;
    margin-top: 0.22rem;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em;
    line-height: 1;
    color: var(--faint) !important;
}

/* 秒数极轻跳动，避免每秒闪白 */
div.time.time--hero .time__item--sec .time__num {
    animation: zf-sec-tick 1s ease-in-out infinite;
    transform-origin: center;
}

@keyframes zf-sec-tick {
    0%,
    100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.86; }
}

/* ============================================================
   4. 滚动入场（仅在 html.zf-motion-ready 时才隐藏，避免 FOUC）
   ============================================================ */
.zf-reveal {
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--zf-delay, 0ms);
}

.zf-motion-ready .zf-reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(22px);
}

.zf-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* 动效就绪后，停掉旧的 animate.css 一次性入场，改由本层接管 */
.zf-motion-ready .animated {
    animation: none !important;
}

/* 提高入场过渡的优先级，避免被卡片原有 transition 把 opacity 吃掉；
   入场完成后清掉 delay，以免悬停也被延迟 */
.zf-motion-ready .card-wrap .card.zf-reveal,
.zf-motion-ready .central .little_texts.zf-reveal,
.zf-motion-ready .central .list_texts.zf-reveal,
.zf-motion-ready .img_card.zf-reveal,
.zf-motion-ready div.time.zf-reveal,
.zf-motion-ready .leavform.zf-reveal,
.zf-motion-ready .text-ce.zf-reveal,
.zf-motion-ready .central .title.zf-reveal,
.zf-motion-ready .lovelist li.cike.zf-reveal,
.zf-motion-ready .inputbox.zf-reveal,
.zf-motion-ready .MessageButtonCard.zf-reveal,
.zf-motion-ready .load-more.zf-reveal {
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s ease,
        color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    transition-delay: var(--zf-delay, 0ms), var(--zf-delay, 0ms), 0s, 0s, 0s, 0s;
}

.zf-motion-ready .card-wrap .card.zf-reveal.is-in,
.zf-motion-ready .central .little_texts.zf-reveal.is-in,
.zf-motion-ready .central .list_texts.zf-reveal.is-in,
.zf-motion-ready .img_card.zf-reveal.is-in,
.zf-motion-ready div.time.zf-reveal.is-in,
.zf-motion-ready .leavform.zf-reveal.is-in,
.zf-motion-ready .text-ce.zf-reveal.is-in,
.zf-motion-ready .central .title.zf-reveal.is-in,
.zf-motion-ready .lovelist li.cike.zf-reveal.is-in,
.zf-motion-ready .inputbox.zf-reveal.is-in,
.zf-motion-ready .MessageButtonCard.zf-reveal.is-in,
.zf-motion-ready .load-more.zf-reveal.is-in,
.zf-motion-ready .zf-reveal.is-in {
    transition-delay: 0s;
}

/* ============================================================
   5. PJAX 内容区过渡（不带动顶栏、头像区、侧边栏）
   ============================================================ */
.zf-pjax-root {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

/* 只淡，不位移：给 #pjax-container 加 transform 会让内部的 position:fixed
   （悬浮留言按钮、留言弹窗）改以容器为包含块，从而被误判成「在屏幕外」 */
.zf-pjax-root.zf-pjax-leave {
    opacity: 0.28;
    pointer-events: none;
}

.zf-pjax-root.zf-pjax-enter {
    animation: zf-pjax-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zf-pjax-in {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 1;
    }
}

/* 固定层（悬浮按钮、留言弹窗）永远不进滚动入场：它们不随页面滚动，
   一旦被写成 opacity:0 就会「看不见但点得到」 */
.zf-motion-ready .MessageButtonCard.zf-reveal:not(.is-in),
.zf-motion-ready .message-modal .zf-reveal:not(.is-in) {
    opacity: 1;
    transform: none;
}

/* ============================================================
   6. 卡片 / 列表 / 相册悬停
   ============================================================ */
.card-wrap .row .card {
    overflow: visible;
}

/* 光泽走 ::before，避开整卡可点的 a::after，且不可拦截点击 */
.card-wrap .row .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        105deg,
        transparent 34%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 66%
    );
    background-size: 220% 100%;
    background-position: 130% 0;
    opacity: 0;
    transition: background-position 0.7s ease, opacity 0.35s ease;
}

[data-theme="dark"] .card-wrap .row .card::before {
    background: linear-gradient(
        105deg,
        transparent 34%,
        rgba(94, 224, 200, 0.12) 50%,
        transparent 66%
    );
}

.card-wrap .row .card:hover::before {
    background-position: -20% 0;
    opacity: 1;
}

.card-wrap .row .card:hover {
    transform: translateY(-6px);
}

.card-wrap .row .card:hover img {
    transform: translateY(-3px) rotate(-6deg);
}

.card-wrap .row .card {
    padding: 1.65rem 1.75rem !important;
}

.card-wrap {
    padding: clamp(2rem, 4.6vh, 3.1rem) 0 2.2rem;
}

.row .card .list_texts .lovelist li.cike {
    padding: 0.28rem 0.35rem 0.28rem 0.2rem;
    border-radius: var(--radius-sm);
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.row .card .list_texts .lovelist li.cike:hover {
    transform: translateX(4px);
    background: var(--accent-soft);
}

.img_card .love_img {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.img_card .love_img img,
.love_img img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.img_card:hover img {
    transform: scale(1.045);
}

/* ============================================================
   7. 按钮 / 侧栏 / 留言提交微交互
   ============================================================ */
.lg-btn-alt:hover {
    transform: translateY(-2px);
}

.lg-btn-alt:active {
    transform: scale(0.96);
}

.central.bg .row .card .input-sub .tijiao:hover {
    transform: translateY(-2px);
}

.central.bg .row .card .input-sub .tijiao:active {
    transform: scale(0.96);
}

.lg-sidebar-item:hover {
    transform: translateY(-3px);
    background: var(--glass-hover) !important;
    border-color: var(--accent-border) !important;
}

.lg-sidebar-item:active {
    transform: scale(0.96);
}

.MessageButtonCard:active {
    transform: scale(0.96);
}

/* ============================================================
   8. 布局节奏：首页英雄区 + 内容页间距
   ============================================================ */
.central .title {
    margin-bottom: 1.15rem;
}

.central .title h1 {
    padding-bottom: 0.15rem;
}

.text-ce {
    margin-bottom: 1.15rem !important;
}

.gallery {
    margin-top: 1.2rem;
}

.central .little_texts,
.central .list_texts {
    margin-bottom: 1.1rem;
}

.load-more {
    margin-top: 1.4rem;
    margin-bottom: 1.2rem;
    text-align: center;
}

/* ============================================================
   9. 响应式（375 / 768）
   ============================================================ */
@media (max-width: 768px) {
    div.time.time--hero {
        margin-top: 0.9rem !important;
        padding: 1.05rem 0.95rem 1.2rem !important;
        max-width: calc(100% - 1.6rem);
        border-radius: var(--radius-lg);
    }

    div.time.time--hero .time__count {
        gap: 0.7rem;
        margin-top: 0.8rem;
    }

    div.time.time--hero .time__item,
    div.time.time--hero b {
        min-width: 0;
        padding: 0 !important;
    }

    div.time.time--hero .time__item--days {
        min-width: 0;
        padding: 0 !important;
    }

    /* 字号已由 .time__num 的 clamp 统一控制，这里不再单独缩放天数 */
    .card-wrap {
        padding: 1.6rem 0 1.4rem;
    }

    .card-wrap .row .card {
        padding: 1.25rem 1.25rem !important;
    }

    /* 只给主内容容器加底距，避免嵌套 .central 叠加；留言板已有更大底距 */
    #pjax-container:not(:has(.lg-sidebar)):not(:has(.message-board)) {
        padding-bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px));
    }

    .central .little_texts,
    .central .list_texts {
        margin-bottom: 0.95rem;
    }
}

@media (max-width: 480px) {
    div.time.time--hero .time__count {
        gap: 0.5rem;
    }

    div.time.time--hero .time__item,
    div.time.time--hero b {
        min-width: 0;
        padding: 0 !important;
    }

    div.time.time--hero .time__item--days {
        min-width: 0;
    }

    div.time.time--hero .time__unit {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 375px) {
    div.time.time--hero .time__item,
    div.time.time--hero b {
        min-width: 0;
        padding: 0 !important;
    }

    div.time.time--hero .time__item--days {
        min-width: 0;
    }
}

/* ============================================================
   9b. 手机倒计时：排版已整体迁到 zzerfu-home.css（数字在上、单位在下、
   四组一行 + 组间发丝线），这里不再保留旧版「四组平分整行」的 grid 方案。
   历史教训：旧的 div.time b { width: 100% } 会让四组各自撑满容器宽
   （每组都变成 212px），四组总宽近 900px，居中后「天」「时」被挤到屏外，
   手机上只剩「05 分」「42 秒」。凡是给这几组定宽，都要在 home.css 里一并覆盖。
   ============================================================ */

@media (max-width: 560px) {
    /* 手机上再把左右内距收一点，给数字腾空间 */
    div.time.time--hero {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
}

/* ============================================================
   10. 首页入口的场景切换
   ------------------------------------------------------------
   旧的「卡片 3D 翻转 → 撑开成半屏 → 淡出」已整套移除，
   改由 zzerfu-scene.css 承担：卡片左右退场 + 首屏插画缩放 + 内容上滑入场。
   ============================================================ */

/* ============================================================
   11. 降低动效：关入场、循环与粒子，保留布局
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .zf-motion-ready .zf-reveal:not(.is-in),
    .zf-reveal,
    .zf-reveal.is-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .zf-pjax-root,
    .zf-pjax-root.zf-pjax-leave,
    .zf-pjax-root.zf-pjax-enter {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .bg-img .middle .love-icon img,
    .bg-img .middle .love-icon::after,
    div.time.time--hero .time__item--sec .time__num,
    .zf-dust i {
        animation: none !important;
    }

    .zf-dust {
        display: none !important;
    }

    .zf-ambient {
        display: none !important;
    }

    .card-wrap .row .card::before {
        display: none !important;
    }
}