/* ============================================================================
 * zzerfu-liquid.css — 液态玻璃材质层（最后加载）
 * ----------------------------------------------------------------------------
 * 材质语言取自同目录 ../start/assets/liquid-glass.css，按 Lovey 的令牌重写：
 *   1. 半透明渐变填充：顶部略亮、底部更薄，能透出页面底色与光晕
 *   2. 强模糊 + 提饱和：中心是磨砂平面，不是一块发灰的实心板
 *   3. 光从上方来：顶边一条亮线，底边一层细反光，外圈一层极淡的投影
 *   4. 指针靠近时，边缘亮起一段柔光（JS 只写 --lq-mx / --lq-my）
 *   5. 按压回弹：scale(0.975) 果冻感
 *
 * 覆盖范围：首页倒计时卡、五个入口卡、留言卡片、留言表单弹窗面板。
 * 所有颜色走变量，深色主题单独一套；降低动效 / 不支持模糊时自动降级。
 * ========================================================================== */

/* ============================================================
   1. 材质令牌
   ============================================================ */
:root {
    --lq-fill-1: rgba(255, 255, 255, 0.50);
    --lq-fill-2: rgba(255, 255, 255, 0.22);
    --lq-sheen: rgba(255, 255, 255, 0.30);
    --lq-edge: rgba(255, 255, 255, 0.68);
    --lq-edge-hover: rgba(15, 155, 134, 0.30);
    --lq-rim-top: rgba(255, 255, 255, 0.98);
    --lq-rim-bot: rgba(255, 255, 255, 0.52);
    --lq-tint: rgba(255, 255, 255, 0.10);
    --lq-shadow: rgba(13, 92, 78, 0.16);
    --lq-blur: 22px;
    --lq-sat: 1.8;
    --lq-bright: 1.04;
}

[data-theme="dark"] {
    --lq-fill-1: rgba(255, 255, 255, 0.105);
    --lq-fill-2: rgba(255, 255, 255, 0.032);
    --lq-sheen: rgba(255, 255, 255, 0.075);
    --lq-edge: rgba(255, 255, 255, 0.13);
    --lq-edge-hover: rgba(94, 224, 200, 0.34);
    --lq-rim-top: rgba(255, 255, 255, 0.32);
    --lq-rim-bot: rgba(255, 255, 255, 0.13);
    --lq-tint: rgba(255, 255, 255, 0.045);
    --lq-shadow: rgba(0, 0, 0, 0.52);
    --lq-blur: 26px;
    --lq-sat: 1.75;
    --lq-bright: 1.08;
}

/* ============================================================
   2. 玻璃表面：顶部透光 + 薄填充
   ============================================================ */
.card-wrap .row .card,
div.time.time--hero,
.message-modal__surface.central.bg {
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, var(--lq-fill-1) 0%, var(--lq-fill-2) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 1px solid var(--lq-edge) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 16px 38px -24px var(--lq-shadow),
        0 2px 8px -6px var(--lq-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
    backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
}

/* 悬停：只加一层很淡的白色，材质不变，避免整块「变实」 */
.card-wrap .row .card:hover {
    background-color: var(--lq-tint) !important;
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, var(--lq-fill-1) 0%, var(--lq-fill-2) 100%) !important;
    border-color: var(--lq-edge-hover) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 24px 48px -26px var(--lq-shadow),
        0 4px 14px -8px var(--lq-shadow) !important;
}

/* 弹窗是「阅读 + 输入」表面，玻璃要比卡片更实，避免表单文字压在模糊的背景上 */
.message-modal__surface.central.bg {
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.74) 100%) !important;
}

[data-theme="dark"] .message-modal__surface.central.bg {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, rgba(17, 26, 28, 0.90) 0%, rgba(11, 17, 19, 0.84) 100%) !important;
}

/* ============================================================
   3. 指针跟随的边缘柔光（1px 内描边，不遮挡内容）
   ============================================================ */
.card-wrap .row .card::after,
div.time.time--hero::after,
.central .little_texts::after,
.central .list_texts::after,
.central.bg.message-board > .row > .card .leavform .textinfo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    background: radial-gradient(
        160px circle at var(--lq-mx, 50%) var(--lq-my, 0%),
        rgba(255, 255, 255, 0.85),
        rgba(255, 255, 255, 0.18) 45%,
        transparent 74%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box exclude,
        linear-gradient(#000 0 0);
}

[data-theme="dark"] .card-wrap .row .card::after,
[data-theme="dark"] div.time.time--hero::after,
[data-theme="dark"] .central .little_texts::after,
[data-theme="dark"] .central .list_texts::after,
[data-theme="dark"] .central.bg.message-board > .row > .card .leavform .textinfo::after {
    background: radial-gradient(
        160px circle at var(--lq-mx, 50%) var(--lq-my, 0%),
        rgba(94, 224, 200, 0.55),
        rgba(94, 224, 200, 0.12) 46%,
        transparent 74%
    );
}

.lq-lit::after {
    opacity: 1;
}

/* ============================================================
   4. 按压回弹
   ============================================================ */
.card-wrap .row .card {
    transition:
        transform 0.45s cubic-bezier(0.32, 1.4, 0.5, 1),
        box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.4s ease,
        background-color 0.4s ease;
}

.card-wrap .row .card:active {
    transform: scale(0.975) translateY(0);
    transition-duration: 120ms, 500ms, 400ms, 400ms;
}

/* ============================================================
   5. 倒计时：单位与数字同行，贴右下角、底部对齐
   ============================================================ */
div.time.time--hero .time__item,
div.time.time--hero b {
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.24rem;
    line-height: 1.1;
}

/* 边缘柔光需要一个定位上下文 */
div.time.time--hero {
    position: relative;
    isolation: isolate;
    /* 四个小方框去掉后整卡会缩窄，横向多留一点内距，仍是一块像样的面板 */
    padding-left: clamp(1.4rem, 2.6vw, 2.6rem) !important;
    padding-right: clamp(1.4rem, 2.6vw, 2.6rem) !important;
}

div.time.time--hero .time__num {
    line-height: 1.1;
}

div.time.time--hero .time__unit {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: baseline;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    color: var(--faint) !important;
    transform: none;
}

/* 天数的数字更大，单位跟着它自己的字号走，不缩放 */
div.time.time--hero .time__item--days .time__unit {
    color: var(--accent) !important;
    opacity: 0.85;
}

/* ============================================================
   6. 头像区与倒计时之间：持续翻滚的波浪
   ============================================================ */
:root {
    --zf-wave-1: rgba(255, 255, 255, 0.96);
    --zf-wave-2: rgba(186, 238, 226, 0.90);
    --zf-wave-3: rgba(122, 210, 192, 0.58);
    --zf-wave-4: var(--bg);
}

[data-theme="dark"] {
    --zf-wave-1: rgba(140, 248, 224, 0.50);
    --zf-wave-2: rgba(96, 228, 204, 0.32);
    --zf-wave-3: rgba(64, 186, 167, 0.16);
    --zf-wave-4: var(--bg);
}

.bg-img .waves {
    /* zzerfu.css 早先把这条波浪关掉了，这里重新启用（同一层最后加载，需要 !important 才盖得住） */
    display: block !important;
    position: relative;
    width: 100%;
    height: clamp(5rem, 8vh, 6.4rem);
    margin-top: clamp(1.6rem, 3.4vh, 2.8rem);
    margin-bottom: -1px;
    overflow: hidden;
    pointer-events: none;
}

/* 波浪底部融进页面底色，避免出现一条硬边 */
.bg-img .waves::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, rgba(247, 251, 250, 0) 0%, var(--bg) 82%);
    pointer-events: none;
}

[data-theme="dark"] .bg-img .waves::after {
    background: linear-gradient(180deg, rgba(11, 20, 23, 0) 0%, var(--bg) 82%);
}

.bg-img .parallax > use {
    transform-origin: 50% 100%;
    animation-name: zf-wave-roll;
    animation-timing-function: cubic-bezier(0.55, 0.5, 0.45, 0.5);
    animation-iteration-count: infinite;
    will-change: transform;
}

.bg-img .parallax > use:nth-child(1) {
    fill: var(--zf-wave-1);
    animation-delay: -2s;
    animation-duration: 7s;
}

.bg-img .parallax > use:nth-child(2) {
    fill: var(--zf-wave-2);
    animation-delay: -3s;
    animation-duration: 10s;
}

.bg-img .parallax > use:nth-child(3) {
    fill: var(--zf-wave-3);
    animation-delay: -4s;
    animation-duration: 13s;
    /* 第三层反向推进：与前后两层对冲，浪面才有「翻滚」而不是整块平移 */
    animation-direction: reverse;
}

.bg-img .parallax > use:nth-child(4) {
    fill: var(--zf-wave-4);
    animation-delay: -5s;
    animation-duration: 20s;
}

/* 水平推进 + 纵向起伏：四层速度不同，叠起来就是持续翻滚的浪面 */
@keyframes zf-wave-roll {
    0% {
        transform: translate3d(-90px, 0, 0) scaleY(1);
    }
    25% {
        transform: translate3d(-44px, -4px, 0) scaleY(1.07);
    }
    50% {
        transform: translate3d(-2px, 2px, 0) scaleY(0.93);
    }
    75% {
        transform: translate3d(46px, -3px, 0) scaleY(1.05);
    }
    100% {
        transform: translate3d(85px, 0, 0) scaleY(1);
    }
}

/* ============================================================
   7. 留言板：≥560px（含手机横屏）两栏，左右轴对称
   ============================================================ */
@media (min-width: 560px) {
    .central.bg.message-board > .row > .card {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.85rem 1rem;
        width: 100%;
        padding: 0 !important;
        overflow: visible;
    }

    /* 同一行的两张卡等高，轴对称才不会一边长一边短 */
    .central.bg.message-board > .row > .card .leavform {
        display: flex;
        min-width: 0;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo {
        flex: 1 1 auto;
        width: 100%;
    }

    .central.bg.message-board > .row > .card .leavform {
        margin: 0 !important;
        min-width: 0;
    }

    /* 两栏时卡片更窄：收紧内距与字号，横屏手机也不至于被撑高 */
    .central.bg.message-board > .row > .card .leavform .textinfo {
        padding: 0.85rem 0.95rem 0.75rem !important;
        border-radius: 18px !important;
    }

    .central.bg.message-board > .row > .card .leavform .user_info {
        gap: 0.55rem;
    }

    .central.bg.message-board > .row > .card .leavform .user_info > img {
        flex: 0 0 2.2rem !important;
        width: 2.2rem !important;
        min-width: 2.2rem !important;
        max-width: 2.2rem !important;
        height: 2.2rem !important;
        max-height: 2.2rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .name,
    .central.bg.message-board > .row > .card .leavform .textinfo span.name {
        font-size: 0.94rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .level {
        font-size: 0.66rem !important;
        padding: 0.16rem 0.42rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .text {
        margin-top: 0.7rem !important;
        padding-top: 0.65rem !important;
        font-size: 0.84rem !important;
        line-height: 1.72 !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-meta-foot {
        margin-top: 0.7rem;
        padding-top: 0.6rem;
        gap: 0.32rem;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-chip {
        font-size: 0.7rem;
        padding: 0.18rem 0.55rem;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-time-badge {
        font-size: 0.7rem !important;
        padding: 0.22rem 0.58rem !important;
    }

    /* 右列（偶数条）关于中线镜像：头像贴到卡片最右侧，时间靠左、底部标签靠左 */
    .central.bg.message-board > .row > .card .leavform:nth-child(even) .leav-head {
        flex-direction: row-reverse;
    }

    /* 头像原本排在 user_info 最前面，镜像后要反过来，才会落到卡片右边缘而不是中间 */
    .central.bg.message-board > .row > .card .leavform:nth-child(even) .user_info {
        flex-direction: row-reverse;
    }

    .central.bg.message-board > .row > .card .leavform:nth-child(even) .leav-head .MsgTopInfo {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .central.bg.message-board > .row > .card .leavform:nth-child(even) .head_content {
        justify-content: flex-end !important;
        text-align: right;
    }

    .central.bg.message-board > .row > .card .leavform:nth-child(even) .head_content .level {
        margin-left: 0 !important;
        margin-right: 0.2rem !important;
    }

    .central.bg.message-board > .row > .card .leavform:nth-child(even) .leav-meta-foot {
        justify-content: flex-start !important;
    }
}

/* 手机横屏这类「宽但很矮」的两栏：再压一档，保证一屏能看到两行 */
@media (min-width: 560px) and (max-height: 480px) {
    .central.bg.message-board > .row > .card .leavform .textinfo {
        padding: 0.7rem 0.8rem 0.62rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .user_info > img {
        flex: 0 0 2rem !important;
        width: 2rem !important;
        min-width: 2rem !important;
        max-width: 2rem !important;
        height: 2rem !important;
        max-height: 2rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .name,
    .central.bg.message-board > .row > .card .leavform .textinfo span.name {
        font-size: 0.88rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .text {
        font-size: 0.8rem !important;
        line-height: 1.62 !important;
        margin-top: 0.55rem !important;
        padding-top: 0.55rem !important;
    }
}

/* ============================================================
   8. 留言卡片：实色面板换成液态玻璃
   ============================================================ */
.central.bg.message-board > .row > .card .leavform .textinfo {
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 54%),
        linear-gradient(180deg, var(--lq-fill-1) 0%, var(--lq-fill-2) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 1px solid var(--lq-edge) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 14px 30px -22px var(--lq-shadow) !important;
    -webkit-backdrop-filter: blur(calc(var(--lq-blur) * 0.72)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
    backdrop-filter: blur(calc(var(--lq-blur) * 0.72)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
}

.central.bg.message-board > .row > .card .leavform .textinfo:hover {
    background-color: var(--lq-tint) !important;
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 54%),
        linear-gradient(180deg, var(--lq-fill-1) 0%, var(--lq-fill-2) 100%) !important;
    border-color: var(--lq-edge-hover) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 20px 38px -24px var(--lq-shadow) !important;
}

/* 玻璃上的头像描边用半透明白，不用实色 */
.central.bg.message-board > .row > .card .leavform .user_info > img {
    border-color: var(--lq-rim-top) !important;
}

/* ============================================================
   9. 文章 / 列表页：去掉「白卡套白卡」，只留卡片本身一层玻璃
   ============================================================ */
/* zzerfu.css 后台段里有一条全局 `.card` 规则（给 Bootstrap 卡片刷白底），
   前台的文章页 / 相册页也被它命中，于是变成「外层白卡 + 内层玻璃卡」。
   这里把外层 .card 还原成透明，材质只留在内层的 .little_texts / .list_texts 上。 */
.central .row > .card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.central .little_texts,
.central .list_texts {
    position: relative;
    isolation: isolate;
    background-color: transparent !important;
    background-image:
        linear-gradient(180deg, var(--lq-sheen) 0%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, var(--lq-fill-1) 0%, var(--lq-fill-2) 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: 1px solid var(--lq-edge) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 16px 38px -26px var(--lq-shadow) !important;
    -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
    backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-sat)) brightness(var(--lq-bright));
    transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.5s ease;
}

.central .little_texts:hover,
.central .list_texts:hover {
    background-color: var(--lq-tint) !important;
    border-color: var(--lq-edge-hover) !important;
    box-shadow:
        inset 0 1px 0 var(--lq-rim-top),
        inset 0 -1px 0 var(--lq-rim-bot),
        0 22px 46px -28px var(--lq-shadow) !important;
}

/* ============================================================
   10. PC 大屏：留言板放宽，卡片跟着放大（平板 / 手机维持原尺寸）
   ============================================================ */
@media (min-width: 1200px) {
    .central.bg.message-board {
        width: min(1280px, calc(100% - 5rem)) !important;
        max-width: none !important;
        padding-left: clamp(1.5rem, 2.4vw, 2.6rem) !important;
        padding-right: clamp(1.5rem, 2.4vw, 2.6rem) !important;
    }

    .central.bg.message-board > .row > .card {
        gap: 1.25rem 1.6rem;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo {
        padding: 1.2rem 1.4rem 1.05rem !important;
        border-radius: 20px !important;
    }

    .central.bg.message-board > .row > .card .leavform .user_info {
        gap: 0.75rem;
    }

    .central.bg.message-board > .row > .card .leavform .user_info > img {
        flex: 0 0 2.9rem !important;
        width: 2.9rem !important;
        min-width: 2.9rem !important;
        max-width: 2.9rem !important;
        height: 2.9rem !important;
        max-height: 2.9rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .name,
    .central.bg.message-board > .row > .card .leavform .textinfo span.name {
        font-size: 1.06rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .level {
        font-size: 0.72rem !important;
        padding: 0.18rem 0.5rem !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .text {
        margin-top: 0.85rem !important;
        padding-top: 0.75rem !important;
        font-size: 0.95rem !important;
        line-height: 1.9 !important;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-meta-foot {
        margin-top: 0.85rem;
        padding-top: 0.7rem;
        gap: 0.4rem;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-chip {
        font-size: 0.76rem;
        padding: 0.22rem 0.62rem;
    }

    .central.bg.message-board > .row > .card .leavform .textinfo .leav-time-badge {
        font-size: 0.76rem !important;
        padding: 0.26rem 0.64rem !important;
    }
}

/* ============================================================
   11. 降级：不支持的浏览器 / 降低动效
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .card-wrap .row .card,
    div.time.time--hero,
    .central .little_texts,
    .central .list_texts,
    .message-modal__surface.central.bg {
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.74)) !important;
    }

    [data-theme="dark"] .card-wrap .row .card,
    [data-theme="dark"] div.time.time--hero,
    [data-theme="dark"] .central .little_texts,
    [data-theme="dark"] .central .list_texts,
    [data-theme="dark"] .message-modal__surface.central.bg {
        background-image: linear-gradient(180deg, rgba(20, 34, 37, 0.94), rgba(14, 25, 28, 0.88)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-img .parallax > use {
        animation: none !important;
    }

    .card-wrap .row .card::after,
    div.time.time--hero::after,
    .central .little_texts::after,
    .central .list_texts::after,
    .central.bg.message-board > .row > .card .leavform .textinfo::after {
        display: none !important;
    }

    .card-wrap .row .card:active {
        transform: none;
    }
}