/* =====================================
叁生影像 SANSHENG FILM
V5.4 Cinematic Documentary Website (全站优化版)
style.css
===================================== */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:#f6f3ed;
color:#222;
font-family:"Noto Serif SC","Songti SC","Microsoft YaHei",serif;
overflow-x:hidden;
}
img{display:block;max-width:100%;}

/* =====================================
电影开场
===================================== */
.intro{
position:fixed;inset:0;background:#f6f3ed;z-index:99999;
overflow:hidden;animation: introHide .5s ease 3.4s forwards;
}
.intro-top{
position:absolute;top:0;left:0;width:100%;height:50%;
background:#f6f3ed;display:flex;justify-content:center;
align-items:flex-end;padding-bottom:80px;
animation: openTop 1s cubic-bezier(0.8, 0, 0.2, 1) 2.4s forwards;z-index:2;
}
.intro-bottom{
position:absolute;bottom:0;left:0;width:100%;height:50%;
background:#f6f3ed;display:flex;justify-content:center;
align-items:flex-start;padding-top:15px;
animation: openBottom 1s cubic-bezier(0.8, 0, 0.2, 1) 2.4s forwards;z-index:2;
}
.intro::after{
content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
background:rgba(80,70,60,.35);transform:scaleX(0);
animation: lineShow .5s ease 1.8s forwards, lineHide .4s ease 2.3s forwards;z-index:3;
}
.welcome{
font-size:36px;line-height:1;letter-spacing:16px;opacity:0;
animation: welcomeShow 1s ease .5s forwards;
}
.intro-logo{
width:420px;opacity:0;animation: logoShow 1s ease 1.0s forwards;
}

@keyframes welcomeShow{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes logoShow{ from{opacity:0;transform:scale(.94);} to{opacity:1;transform:scale(1);} }
@keyframes lineShow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes lineHide{ to{opacity:0;} }
@keyframes openTop{ from{transform:translateY(0);} to{transform:translateY(-100%);} }
@keyframes openBottom{ from{transform:translateY(0);} to{transform:translateY(100%);} }
@keyframes introHide{ to{opacity:0;visibility:hidden;pointer-events:none;} }

/* =====================================
首页 HERO
===================================== */
.hero{
height:100vh;min-height:720px;position:relative;display:flex;
align-items:center;justify-content:center;overflow:hidden;color:white;
}
.hero-image{
position:absolute;inset:-5%;background-image:url("images/hero.jpg");
background-size:cover;background-position:center;animation: heroMove 18s infinite alternate;
}
@keyframes heroMove{ from{transform:scale(1);} to{transform:scale(1.08);} }
.hero-mask{
position:absolute;inset:0;background: linear-gradient( rgba(0,0,0,.25), rgba(0,0,0,.65) );
}
.hero-content{position:relative;z-index:2;text-align:center;}
.hero-logo{width:330px;margin:auto;margin-bottom:60px;}
.slogan{font-size:20px;letter-spacing:10px;line-height:2;}
.english{font-family:Arial,sans-serif;font-size:14px;letter-spacing:8px;line-height:2;margin-top:25px;}
.scroll{position:absolute;bottom:40px;font-size:10px;letter-spacing:8px;z-index:3;}

/* =====================================
作品区域
===================================== */
.works{padding:140px 8%;}
.section-title{text-align:center;margin-bottom:80px;}
.section-title h2{font-size:38px;font-weight:400;letter-spacing:14px;}
.section-title span{display:block;margin-top:20px;font-family:Arial;font-size:12px;letter-spacing:8px;color:#888;}
.tier-desc{margin-top:25px;font-size:13px;letter-spacing:4px;color:#666;line-height:1.8;font-family:"Noto Serif SC","Songti SC",serif;}

.creative-section{padding-top:160px;}
.film-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 45px;}
.film-card{cursor:pointer;}
.cover{aspect-ratio:16/9;overflow:hidden;}
.cover img{width:100%;height:100%;object-fit:cover;transition:.8s;}
.film-card:hover img{transform:scale(1.05);}
.film-title{margin-top:25px;font-size:16px;letter-spacing:5px;}

/* =====================================
关于我们 (重构)
===================================== */
.about{
padding:160px 10%;background:#ffffff;text-align:center;
}
.about-quote{
font-size:26px;font-weight:400;letter-spacing:6px;line-height:2.2;color:#222;
}
.about-divider{
width:40px;height:1px;background:#dcdcdc;margin:45px auto;
}
.about-desc{
font-size:13px;letter-spacing:5px;color:#888;line-height:2.2;
}

/* =====================================
选择我们的理由 (新增)
===================================== */
.features{
padding:150px 8%;background:#f6f3ed;
}
.feature-grid{
display:grid;grid-template-columns:repeat(3, 1fr);gap:60px;margin-top:90px;
}
.feature-item{
text-align:left;padding-top:35px;border-top:1px solid rgba(0,0,0,0.08);
}
.feature-num{
font-family:Arial, sans-serif;font-size:24px;color:#ccc;margin-bottom:25px;letter-spacing:2px;
}
.feature-title{
font-size:20px;letter-spacing:4px;margin-bottom:25px;color:#222;
}
.feature-desc{
font-size:14px;line-height:2.2;color:#666;letter-spacing:2px;text-align:justify;
}

/* =====================================
电影级页脚 Footer (重构)
===================================== */
.footer{
background:#161616;color:#e0e0e0;padding:120px 10% 40px;
}
.footer-container{
display:flex;justify-content:space-between;align-items:flex-end;
border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:60px;margin-bottom:40px;
}
.footer-left h2{
font-family:Arial, sans-serif;font-size:28px;letter-spacing:8px;color:#fff;font-weight:normal;
}
.footer-tagline{
font-family:Arial, sans-serif;font-size:11px;letter-spacing:6px;color:#777;margin-top:15px;margin-bottom:45px;
}
.footer-info p{
font-size:14px;letter-spacing:3px;margin-bottom:18px;color:#aaa;
}
.footer-info a{
color:#aaa;text-decoration:none;transition:color 0.3s;
}
.footer-info a:hover{
color:#fff;
}
.footer-right{
display:flex;align-items:center;gap:25px;
}
.qr-box{
width:110px;height:110px;background:#fff;padding:6px;border-radius:2px;
}
.qr-box img{
width:100%;height:100%;object-fit:cover;
}
.qr-text{
font-size:13px;letter-spacing:4px;line-height:2.2;color:#888;
}
.footer-bottom{
text-align:center;font-size:11px;font-family:Arial, sans-serif;letter-spacing:3px;color:#555;
}

/* =====================================
视频弹窗
===================================== */
.video-modal{
position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;
display:none;align-items:center;justify-content:center;
}
.video-modal.active{display:flex;}
.video-box{width:90%;max-width:1100px;aspect-ratio:16/9;}
.video-box iframe{width:100%;height:100%;border:none;}
.close{position:absolute;right:40px;top:25px;font-size:45px;color:white;cursor:pointer;}

/* =====================================
滚动细节
===================================== */
.works, .about, .features, .footer{ animation: fadeUp .8s ease both; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }

/* =====================================
手机端适配
===================================== */
@media(max-width:768px){
.intro-logo{width:230px;}
.welcome{font-size:22px;line-height:1;letter-spacing:10px;}
.hero{min-height:620px;}
.hero-logo{width:200px;margin-bottom:40px;}
.slogan{font-size:15px;letter-spacing:6px;}
.english{font-size:11px;letter-spacing:5px;}

.works{padding:90px 20px;}
.section-title h2{font-size:28px;letter-spacing:9px;}
.tier-desc{font-size:12px;letter-spacing:2px;padding:0 15px;}
.film-grid{grid-template-columns:1fr;gap:55px;}

.about{padding:100px 8%;}
.about-quote{font-size:20px;letter-spacing:4px;}

.features{padding:100px 8%;}
.feature-grid{grid-template-columns:1fr;gap:50px;margin-top:60px;}

.footer{padding:80px 8% 30px;}
.footer-container{flex-direction:column;align-items:flex-start;gap:60px;}
.footer-left h2{font-size:24px;}
}