/* 基础规则 */
.head_box_mx.article-title,.head_box_mx.breadcrumb{display:none;}

/* 容器样式 */
.head_box_mx{
    color:var(--text_color);
    position:relative;
    text-align:center;
    box-sizing:border-box;
    margin-top:-20px;
    margin-bottom:20px;
    overflow:hidden;
}

/* 标题与属性同行容器 */
.head_box_mx .title-with-property{
    display:inline-flex;
    align-items:flex-start;
    justify-content:center;
    max-width:95%;
    flex-wrap:wrap;
}

/* 文章属性标签（标题前方） */
.head_box_mx .article-property-tag{
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    font-size:14px;
    font-weight:bold;
    margin-right:8px;
    vertical-align:middle;
    transition:all 0.3s ease;
    flex-shrink:0;
}
.head_box_mx .article-property-tag:hover{
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* 标题样式 */
.head_box_mx .moxing_head_info_post_title{
    color:var(--text_color);
    font-weight:700;
    line-height:1.2;
    text-align:left;
    margin:1rem 0 1rem 0 !important;
    -webkit-line-clamp:2;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    flex-grow:1;
    min-width:0;
}

/* 分类/标签按钮组 */
.head_box_mx .taxonomy-container{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin:15px auto;
    padding:0 10px;
    max-width:90%;
}
.head_box_mx .taxonomy-container span, 
.head_box_mx .taxonomy-container a {
    display:inline-flex;
    align-items:center;
    background-color:rgba(255,255,250,0.2);
    color:var(--text_color);
    padding:6px 12px;
    border-radius:10px;
    font-weight:bold;
    font-size:14px;
    cursor:pointer;
    text-decoration:none;
    transition:all 0.3s ease;
    white-space:nowrap;
}
.head_box_mx .taxonomy-container span:hover, 
.head_box_mx .taxonomy-container a:hover{
    background-color:#fff;
    color:var(--focus_color) !important;
    transform: translateY(-2px);
}
.head_box_mx .tag-button i, 
.head_box_mx .category i {
    margin-right:5px;
    font-size:12px;
}

/* 底部元信息 */
.head_box_mx .mx_footer_meta{
    display:flex;
    align-items:center;
    color:var(--text_color);
    font-size:14px;
    flex-wrap:wrap;
    margin-top:15px;
    justify-content:center;
    gap:10px;
    padding:0 10px;
}
.head_box_mx .post-meta-separator{
    color:rgba(255,255,255,0.5);
}

/* 波浪装饰 */
.head_box_mx .mx_waves{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:8vh;
    margin-bottom:0;
    min-height:30px;
    max-height:80px;
    z-index:100;
    overflow:hidden;
}
.head_box_mx .parallax>use{
    animation:mx_move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.head_box_mx .parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s;}
.head_box_mx .parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s;}
.head_box_mx .parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s;}
.head_box_mx .parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s;}
@keyframes mx_move-forever{
    0%{transform:translate3d(-90px,0,0);}
    100%{transform:translate3d(85px,0,0);}
}

/* 响应式适配 - 手机端 */
@media screen and (max-width:767px){
    .head_box_mx{padding:20px 0;}
    
    .head_box_mx .title-with-property{
        width:90%;
    }
    .head_box_mx .article-property-tag{
        padding:2px 8px;
        font-size:12px;
        margin-right:6px;
    }
    .head_box_mx .moxing_head_info_post_title{
        font-size:1.5rem;
        text-align:center;
        margin:0.5rem 0 !important;
    }
    
    .head_box_mx .mx_footer_meta{
        margin-top:10px;
        font-size:13px;
        gap:8px;
    }
    .head_box_mx .taxonomy-container{
        gap:6px;
    }
    .head_box_mx .taxonomy-container span, 
    .head_box_mx .taxonomy-container a {
        padding:5px 10px;
        font-size:13px;
    }
    .head_box_mx .moxing_background,.head_box_mx{height:25vh;}

    /* 隐藏指定元素 */
    .head_box_mx .taxonomy-container .category,
    .head_box_mx .mx_footer_meta .word-count,
    .head_box_mx .mx_footer_meta .word-count + .post-meta-separator,
    .head_box_mx .mx_footer_meta .read-time,
    .head_box_mx .mx_footer_meta .read-time + .post-meta-separator,
    .head_box_mx .mx_footer_meta .post-date,
    .head_box_mx .mx_footer_meta .post-date + .post-meta-separator,
    .head_box_mx .mx_footer_meta i.fa-file-text-o,
    .head_box_mx .mx_footer_meta i.fa-clock-o,
    .head_box_mx .mx_footer_meta i.fa-calendar,
    .head_box_mx .taxonomy-container .tag-button:nth-child(4)
    {
        display: none !important;
    }
}

/* 平板端 */
@media screen and (min-width:768px) and (max-width:1024px){
    .head_box_mx{padding:50px 20px;}
    .head_box_mx .moxing_background,.head_box_mx{height:40vh;}
    .head_box_mx .moxing_head_info_post_title{font-size:2.2rem;}
}

/* 电脑端 */
@media screen and (min-width:1025px){
    .head_box_mx{
        padding:100px 20px;
        height:50vh;
    }
    .head_box_mx .moxing_background,.head_box_mx{height:50vh;}
    .head_box_mx .moxing_head_info_post_title{font-size:2.8rem;}
}

/* 渐入动画 */
@keyframes mx_fade-in-up{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:translateY(0);}
}
.head_box_mx .animate-fade-in-up{
    animation:mx_fade-in-up 0.5s ease-out forwards;
    animation-delay:0.3s;
    opacity:0;
}
.head_box_mx .animate-fade-in-up.delay-1{animation-delay:0.5s;}

/* 背景图样式 */
.head_box_mx .marrig{margin-right:5px}
.head_box_mx .moxing_background{
    position:absolute;
    left:0;
    right:0;
    top:0;
    background-color:var(--bg_color);
}
.head_box_mx .moxing_background .b-wrap{
    position:absolute;
    left:50%;
    right:0;
    top:0;
    bottom:0;
    overflow:hidden;
}
.head_box_mx .moxing_background .img{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    transform:rotate(20deg) scale(1.1);
    filter:blur(4px);
}
.head_box_mx .moxing_background img{
    position:absolute;
    right:0;
    top:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transform:scale(0.9);
    transition:transform 1s ease;
}
.head_box_mx .moxing_background:hover img{
    transform:scale(1);
}

/* 背景渐变遮罩 */
.head_box_mx .moxing_background .b-wrap::after{
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:linear-gradient(257.4deg,
        rgba(250,250,250,0.2) 2%,
        var(--bg_color) 80%);
}