/* ==========================================================================
   河南职业技术学院 · 首页滚动特效
   ========================================================================== */

/* ---------- 0. 遮罩模式生效时锁死文档滚动 ----------
   pku-pre：由 </head> 前的一小段内联脚本在首帧添加，
            目的是让"首屏整屏 + 面板推到视口外"在第一帧就成立，
            避免页面加载瞬间露出下方内容（闪一下）。
   pku-on ：主脚本初始化成功后接管，两者布局规则完全相同。 */
html.pku-on,
html.pku-pre,
html.pku-on body,
html.pku-pre body {
    height: 100%;
    overflow: hidden;
}

/* ---------- 1. 首屏大图：固定成全屏 ---------- */
html.pku-on .index-top-banner.pc-ban,
html.pku-pre .index-top-banner.pc-ban {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    margin: 0;
    border-bottom: 0;
}

/* 轮播容器撑满首屏。注意：不要改成 .bd a{height:100%}——
   a 的父级 li 高度本来就由 a 自己撑开，改成 100% 会互相依赖塌成 0。
   保留模板里 .bd a 的 height:100vh 即可，和这里的 100vh 首屏正好一致。 */
html.pku-on .index-top-banner.pc-ban .slideBox,
html.pku-on .index-top-banner.pc-ban #slideBox,
html.pku-on .index-top-banner.pc-ban .slideBox .bd,
html.pku-pre .index-top-banner.pc-ban .slideBox,
html.pku-pre .index-top-banner.pc-ban #slideBox,
html.pku-pre .index-top-banner.pc-ban .slideBox .bd {
    height: 100% !important;
}
html.pku-on .index-top-banner.pc-ban .slideBox .bd a img,
html.pku-pre .index-top-banner.pc-ban .slideBox .bd a img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}

/* ---------- 2. 内容面板 = 遮罩层 ----------
   关键：面板始终是 100vh 高（内容提前排好版），
   只用 transform 位移，走 GPU 合成层，不触发重排 → 不卡。
   （原 style.css 里 .main-content 的 top:100% + transition:top
     写法会边升边重排，这里换成 transform）                          */
html.pku-on .main-content,
html.pku-pre .main-content {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 10;
    background: #ebecf2;
    /* 压掉模板上的内联 style="overflow:hidden" */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* 初始：整块停在视口下方 */
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform .7s cubic-bezier(.5, 0, .2, 1);
    transition: transform .7s cubic-bezier(.5, 0, .2, 1);
    will-change: transform;
    pointer-events: none;
    /* 让开固定头部 */
    padding-top: 160px;
}
/* ★面板第一个板块 .hzyw 自带 padding-top:90px，本意是给原站绝对定位的
   头部留位。这里头部已经用面板的 padding-top:130px 让过了，再叠 90px
   就会在导航下方出现一条多余的白带，和白色导航拼成一块，很别扭。
   所以面板模式下把它归零，让板块内容正好贴着导航下沿。
   限定宽度 ≥769px，手机上保持模板原值不动。 */
@media screen and (min-width: 769px) {
    html.pku-on .main-content > .hzyw,
    html.pku-pre .main-content > .hzyw {
        padding-top: 0 !important;
    }
}
html.pku-on .main-content.showdiv {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

/* 面板自己的滚动条（原 html::-webkit-scrollbar 管不到面板） */
html.pku-on .main-content::-webkit-scrollbar { width: 8px; }
html.pku-on .main-content::-webkit-scrollbar-track { background: #ececec; }
html.pku-on .main-content::-webkit-scrollbar-thumb { background: #bbb; border-radius: 5px; }
html.pku-on .main-content::-webkit-scrollbar-thumb:hover { background: #747474; }

/* ---------- 3. 顶部导航：始终固定在最上层 ---------- */
html.pku-on .header,
html.pku-pre .header {
    position: fixed !important;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 30;
}
/* 面板翻起后，导航切成白底实心（首屏时保持透明渐变） */
html.pku-on .header.is-solid {
    background: #fff;
    background-image: none;
    opacity: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
html.pku-on .header.is-solid .logo { display: none; }
html.pku-on .header.is-solid .logo_hov { display: block; margin-top: 11px; }
html.pku-on .header.is-solid .nav ul li a { color: #222; }




/* ---------- 4.5 解除 wow.js 写的内联隐藏（★关键修复★） ----------
   wow.js 初始化时会给 .wow 元素写内联样式：
       style="visibility:hidden; animation-name:none"
   原站靠 window 滚动到位置才让 wow.js 放出来。
   面板一旦变成 position:fixed，window 就不再滚动，wow.js 永远收不到信号，
   「时政要闻 / 河职要闻」那个 .sun-tab-box 就永久隐身 —— 表现为板块只剩
   标签和按钮、内容整片空白。
   内联样式优先级高于普通 CSS 规则，所以必须 !important 才能压住。
   标记类 pku-wow-off 由 JS 添加；JS 失败回滚时整条规则一起失效（安全）。 */
html.pku-js .pku-wow-off {
    visibility: visible !important;
    -webkit-animation: none !important;
    animation: none !important;
}
/* 同理：部分模板元素靠 animate.css 的 bounceInUp/fadeInDown 播完才可见，
   面板模式下这些动画不该再参与显示逻辑，统一停掉、恢复默认可见状态。 */
html.pku-js .animated {
    visibility: visible !important;
    -webkit-animation: none !important;
    animation: none !important;
}

/* ---------- 4.6 面板模式下收掉「巡察公告」漂浮窗 ----------
   模板底部那个 #adu28 是站点自带的漂浮广告：absolute 定位 + 每 88ms
   用 setInterval 改一次 top 来跟随滚动。面板 fixed 之后文档不再滚动，
   它会死钉在面板顶上、还会盖住内容，同时也是持续重排的性能杀手。
   不需要收掉的话，把下面这条删掉即可。 */
/* 站点自带的浮动图（巡察公告）。线上静态页 id 是 adu0，模板预览里是 adu28，
   编号不固定，所以用属性前缀匹配，不能写死 id。
   它的 z-index 是 10、和面板同级，而 DOM 位置又在面板之前 —— 面板一旦 fixed
   铺满视口，就会整块盖住它，表现就是"滚动/翻起之后浮动图不见了"。
   这里把它提到面板之上、导航之下（导航已提到 30）。 */
html.pku-on div[id^="adu"],
html.pku-pre div[id^="adu"] {
    z-index: 12 !important;
}
/* 模板脚本让它自己在 top 0 ~ (视口高-图高) 之间来回弹，弹到顶部就会被
   固定导航压住、连"关闭"都点不到。这里整体下移一个导航高度，让它始终
   在导航下方活动。只作用于 PC 面板模式，手机端不动。 */
@media screen and (min-width: 769px) {
    html.pku-on div[id^="adu"],
    html.pku-pre div[id^="adu"] {
        -webkit-transform: translateY(130px);
        transform: translateY(130px);
    }
}


/* ---------- 5. 板块渐现 ----------
   隐藏规则全部挂在 html.pku-js 下，而 pku-js 由脚本在
   "所有初始化都成功之后"才添加 —— 所以 JS 中途失败时
   这些规则一条都不生效，内容保持正常可见。            */
html.pku-js .pku-reveal {
    opacity: 0;
    -webkit-transform: translate3d(0, 44px, 0);
    transform: translate3d(0, 44px, 0);
    -webkit-transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                        -webkit-transform .9s cubic-bezier(.22, .61, .36, 1);
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
                transform .9s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
html.pku-js .pku-reveal.pku-from-left {
    -webkit-transform: translate3d(-48px, 0, 0);
    transform: translate3d(-48px, 0, 0);
}
html.pku-js .pku-reveal.pku-from-right {
    -webkit-transform: translate3d(48px, 0, 0);
    transform: translate3d(48px, 0, 0);
}
html.pku-js .pku-reveal.pku-from-top {
    -webkit-transform: translate3d(0, -36px, 0);
    transform: translate3d(0, -36px, 0);
}
html.pku-js .pku-reveal.is-in {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* ---------- 6. 移动端：整块降级回普通文档流 ---------- */
@media screen and (max-width: 768px) {
    html.pku-on,
    html.pku-pre,
    html.pku-on body,
    html.pku-pre body {
        height: auto;
        overflow: visible;
        overflow-y: auto;
    }
    html.pku-on .index-top-banner.pc-ban,
    html.pku-pre .index-top-banner.pc-ban {
        position: static;
        height: auto;
    }
    html.pku-on .main-content,
    html.pku-pre .main-content {
        position: static !important;
        height: auto !important;
        padding-top: 0;
        overflow: visible !important;
        -webkit-transform: none !important;
        transform: none !important;
        pointer-events: auto;
    }
    /* 手机上 .hzyw 的 padding-top 保持模板原值（50px），不要覆盖 */
    .pku-tip { display: none !important; }
}

/* ---------- 7. 尊重"减少动态效果"系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
    html.pku-on .main-content,
    html.pku-js .pku-reveal {
        -webkit-transition-duration: .01s !important;
        transition-duration: .01s !important;
    }
    .pku-tip i { -webkit-animation: none; animation: none; }
}