/* ============================================================
静态版补丁样式（配合 js/main.js）
原 Vue 版用 JS 逐帧驱动翻屏/导航位移，静态版改用 CSS transition
============================================================ */
/* 整屏翻屏动画 */
.screens__flow-container { transition: transform 1s ease-in-out; will-change: transform; }
/* 左侧竖排导航居中滑动动画 */
.navigation-bar__flow-container { transition: transform .8s ease; }
/* ============================================================
手机端：200vh 屏翻页错位会导致 .active 加错屏，元素停在 opacity:0
这里补回被裁切/被隐藏的内容，并让第三屏文案能完整露出。
============================================================ */
@media screen and (max-width:576px) {
/* 首屏说明文案：宽屏比例下不再隐藏 */
.project-twelve .message { display: flex !important; }
/* 第二屏能力卡片：保证可横向滑出 */
.organic-sustainable__magazine { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 第三屏背景字标：原样式 display:none */
.blockchain-veterans:before { display: block !important; left: 50%; top: 50%; width: min(70vw, 14rem); height: min(90vh, 22rem); transform: translate(-50%, -50%); background-position: center; z-index: -1; pointer-events: none; }
/* 第三屏标题过长会被 overflow:hidden 裁掉 */
.blockchain-veterans h2, .blockchain-veterans .screen-title { width: 100%; font-size: 2.0rem; line-height: 1.4; word-break: break-word; }
.blockchain-veterans .blockchain-description { margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; padding: 0 0.5rem; box-sizing: border-box; }
.blockchain-veterans__description .learn-button { margin-top: 1.75rem; flex-wrap: wrap; justify-content: center; letter-spacing: .12em; font-size: 0.8125rem; text-align: center; }
}