*{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',system-ui,-apple-system,sans-serif;overflow-x:hidden}

/* Scroll animations - spec: translateY(30px→0), 400-500ms content transition */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate-up{opacity:0;transform:translateY(30px);transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1)}
.animate-up.visible{opacity:1;transform:translateY(0)}

/* Stagger delays - spec: 80ms per item */
.stagger-1{transition-delay:80ms}
.stagger-2{transition-delay:160ms}
.stagger-3{transition-delay:240ms}
.stagger-4{transition-delay:320ms}
.stagger-5{transition-delay:400ms}

/* Nav - permanent white background, shadow on scroll */
.nav-wrap{background:#fff;transition:box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)}
.nav-wrap.scrolled{box-shadow:0 2px 12px rgba(0,0,0,0.06)}

/* Mobile menu */
.mobile-panel{transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.mobile-panel.open{transform:translateX(0)}

/* Timeline */
.timeline-container{position:relative}
.timeline-container::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#8B1E3F,#C9A961,#F4B942);transform:translateX(-1px)}
@media(max-width:768px){.timeline-container::before{left:24px}}

/* Card hover - spec: translateY 2-4px, 200-300ms */
.card-hover{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1)}

/* Field item - spec: 2-4px displacement */
.field-item{transition:all 0.25s cubic-bezier(0.4,0,0.2,1);border:1px solid transparent}
.field-item:hover{border-color:#8B1E3F;box-shadow:0 4px 16px rgba(139,30,63,0.1);transform:translateY(-2px)}

/* News list item */
.news-row{transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
.news-row:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06);transform:translateX(4px)}

/* Filter buttons */
.filter-btn{transition:all 0.25s cubic-bezier(0.4,0,0.2,1)}
.filter-btn.active{background-color:#8B1E3F;color:white;border-color:#8B1E3F}

/* Back to top */
#backToTop{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}

/* Scroll indicator */
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.scroll-bounce{animation:bounceY 2s ease-in-out infinite}

/* Page enter animation */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-content{animation:pageIn 0.4s cubic-bezier(0.4,0,0.2,1)}

/* Button hover - spec: scale 1.02-1.05 + color deepen */
.btn-hover{transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.btn-hover:hover{transform:scale(1.03)}

/* CTA buttons - spec: gold #C9A961 */
.btn-cta{background-color:#C9A961;color:#fff;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.btn-cta:hover{background-color:#b8953e;transform:scale(1.03);box-shadow:0 4px 16px rgba(201,169,97,0.3)}

/* Brand important buttons */
.btn-brand{background-color:#8B1E3F;color:#fff;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.btn-brand:hover{background-color:#6B1530;transform:scale(1.03);box-shadow:0 4px 16px rgba(139,30,63,0.2)}

/* Sub-heading highlight - spec: 暖黄#F4B942 for 次级标题 */
.text-sub-accent{color:#F4B942}

/* Banner image focal point - ensures heads are always visible */
#bannerImg{
  object-position:center 15%;
}

/* Footer - slightly larger text */
footer{font-size:15px}
footer h4{font-size:15px}
footer .border-t{font-size:13px}