/* =========================================
   theme.css - 专门负责头部艺术字和特效
   ========================================= */

/* --- 头部容器 (手机适配：底部对齐 + 淡化遮罩) --- */
.header-wrapper {
    position: relative;
    width: 100%;
    min-height: 280px; 
    background-size: cover;
    background-position: center top;
    border-radius: 0; 
    display: flex;
    justify-content: center;
    
    /* 底部对齐，让文字沉底 */
    align-items: flex-end; 
    /* 底部留出距离 */
    padding-bottom: 50px; 
    
    /* 底部淡化遮罩 */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    z-index: 0;
    animation: fadeInDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- 标题基础样式 --- */
.header-title {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 10px;
}

/* 风格 1: 普通清晰 */
.style-simple {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-shadow: 0 2px 10px rgba(255,255,255,0.9);
    letter-spacing: 2px;
}

/* 风格 2: 科技金属 */
.style-tech {
    font-family: "Helvetica Neue", "Arial Black", sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 2px;
    font-style: italic;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 45%, #8a8a8a 50%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.6));
    transform: scaleX(1.1);
}

/* 风格 3: 书法红标 (手机版 - 裂痕保留版) */
.style-calligraphy {
    font-family: "Songti SC", "Noto Serif SC", "SimSun", "Times New Roman", serif;
    font-weight: 900;
    
    /* 手机适配 */
    font-size: 26px; 
    letter-spacing: 0; 
    white-space: nowrap;
    
    color: #0a0a0a;
    
    /* 裂痕效果 */
    -webkit-mask-image: 
        repeating-linear-gradient(45deg, black 0, black 3px, transparent 3.5px, black 4px),
        linear-gradient(115deg, black 42%, transparent 42%, transparent 46%, black 46%),
        linear-gradient(70deg, black 60%, transparent 60%, transparent 62%, black 62%);
    mask-image: 
        repeating-linear-gradient(45deg, black 0, black 3px, transparent 3.5px, black 4px),
        linear-gradient(115deg, black 42%, transparent 42%, transparent 46%, black 46%),
        linear-gradient(70deg, black 60%, transparent 60%, transparent 62%, black 62%);
    
    transform: rotate(-1deg) scale(1.1);
    
    /* 描边 */
    text-shadow: 
        2px 2px 0 #fff, -1px -1px 0 #fff, 0 0 4px rgba(255,255,255,0.9);
}

/* 红三角装饰 */
.style-calligraphy::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(1deg);
    
    width: 0; height: 0;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-top: 75px solid #d90000;
    
    z-index: -1;
    opacity: 0.9;
    mix-blend-mode: multiply; 
}

/* 顶部英文 */
.style-calligraphy::before {
    content: attr(data-subtitle);
    display: block;
    font-family: sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: -10px;
    color: #d90000;
    font-weight: 900;
    -webkit-mask-image: none;
    mask-image: none;
}