@charset "utf-8";
/* ============================================================
 * 一站式解决方案热点交互组件（首页 sya_p1 区块重构版）
 * 自包含样式：不依赖 main.css 中的 spbu_*/t_syk* 旧热点规则。
 * 结构分层：.osh_stage（底图/视频） > .osh_layer（热点层）
 *   > .osh_item（百分比定位锚点，坐标由 --hs-top/--hs-left 提供）
 *   > .osh_dot（脉冲"+"按钮） + .osh_card（桌面卡片） + .osh_pill（移动端胶囊）
 * 交互状态：统一 .open 状态类，桌面/移动的展示形态由断点决定。
 * ============================================================ */

.osh_stage {
    position: relative;
    width: 100%;
    margin-bottom: 60px; /* 对齐旧版 .sya_p1_btm_ul 的区块下间距 */
    overflow: hidden;
    border-radius: 20px;
    background: #0b1b30; /* 视频起播前的底色，避免闪白 */
}
.osh_img {
    display: block;
    width: 100%;
}
.osh_img_ph { display: none; }
.osh_video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 海报图与视频间平滑过渡（wlh_pages.js 在 canplay 后加 .is-ready） */
    opacity: 0;
    transition: opacity 0.9s ease;
}
.osh_video.is-ready {
    opacity: 1;
}

/* ---- 热点层与锚点 ---- */
.osh_layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.osh_item {
    position: absolute;
    top: var(--hs-top, 50%);
    left: var(--hs-left, 50%);
    transform: translate(-50%, -50%); /* 锚点中心对准百分比坐标 */
    z-index: 10;
}
.osh_item.open { z-index: 20; }
/* 桌面端热点坐标：2.18:1 等轴测园区图建筑带五个厂区锚点（像素聚类实测，
 * 建筑带 top 30%-84%，舞台为宽条幅、下方空间不足，卡片向上弹出）。
 * 间距≥17%且首尾锚点内收，保证中心展开的卡片（±135px）不遮相邻热点、不裁切。 */
.osh_item:nth-child(1) { --hs-top: 57%; --hs-left: 15%; }
.osh_item:nth-child(2) { --hs-top: 55%; --hs-left: 32%; }
.osh_item:nth-child(3) { --hs-top: 48%; --hs-left: 50%; }
.osh_item:nth-child(4) { --hs-top: 55%; --hs-left: 68%; }
.osh_item:nth-child(5) { --hs-top: 57%; --hs-left: 85%; }

/* ---- "+"号脉冲按钮（button 实现，键盘可达） ---- */
.osh_dot {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.osh_dot img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(135deg); /* 与原站一致的基础姿态，展开时旋转为 × */
    transition: transform .3s ease;
}
/* 双伪元素错峰脉冲涟漪 */
.osh_dot::before,
.osh_dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    background: #0066F5;
    transform: translate(-50%, -50%) scale(.1);
    opacity: .7;
    animation: oshPulse 2s linear infinite;
}
.osh_dot::after { animation-delay: .6s; }
@keyframes oshPulse {
    0%   { transform: translate(-50%, -50%) scale(.1); opacity: .7; }
    70%  { opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
.osh_item.open .osh_dot img { transform: rotate(-135deg); }
.osh_dot:focus-visible {
    outline: 2px solid #0066F5;
    outline-offset: 4px;
    border-radius: 50%;
}

/* ---- 桌面端方案卡片：scale/opacity 弹出，四个热点对角对称展开 ---- */
.osh_card {
    position: absolute;
    width: 270px;
    /* 以热点为中心向上弹出：水平仅伸出 ±135px，不会盖住相邻热点，
       避免展开卡片时误触其他热点 */
    bottom: 26px;
    left: 50%;
    margin-left: -135px;
    transform-origin: 50% 100%;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(73, 126, 218, .03), 0 8px 18px rgba(73, 126, 218, .04), 0 36px 80px rgba(73, 126, 218, .08);
    transform: scale(0);
    opacity: 0;
    visibility: hidden; /* 关闭时移出 Tab 焦点序列 */
    transition: transform .28s cubic-bezier(.34, .44, .41, 1.12), opacity .2s ease-out, visibility 0s linear .28s;
}
.osh_item.open .osh_card {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* 展开立即可见；收起等动画结束后再隐藏 */
}
/* 卡片展开方向已统一为热点正上方居中（见 .osh_card 基础规则） */

.osh_card_link {
    display: block;
    color: #333;
}
.osh_card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
}
.osh_card_tit {
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
}
.osh_card_more {
    font-size: 12px;
    color: #0066F5;
    white-space: nowrap;
}
.osh_card_img {
    display: block;
    width: 100%;
}
a.osh_card_link:hover .osh_card_tit { color: #0066F5; }
a.osh_card_link:focus-visible {
    outline: 2px solid #0066F5;
    outline-offset: -2px;
}

/* ---- 移动端胶囊（≤768px 断点启用） ---- */
.osh_pill {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 62vw;
    line-height: 40px;
    padding: 0 18px;
    overflow: hidden;
    border-radius: 22px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility 0s linear .3s;
}
.osh_pill::before {
    /* 蓝底宽度扫入 */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    border-radius: 22px;
    background: #0066F5;
    transition: width .4s cubic-bezier(.34, .44, .41, 1.12);
}
.osh_pill span {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .3s ease .18s;
}
.osh_item.open .osh_pill {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
.osh_item.open .osh_pill::before { width: 100%; }
.osh_item.open .osh_pill span { opacity: 1; }
.osh_pill:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 屏幕阅读器专用文本 */
.osh_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- 响应式：≤768px 切竖版底图、隐藏视频与卡片、启用胶囊 ---- */
@media screen and (max-width: 1099px) and (min-width: 769px) {
    /* 窄舞台下居中卡片收窄，保证首尾热点（15%/85%）的卡片不被舞台裁切 */
    .osh_card {
        width: 200px;
        margin-left: -100px;
    }
}

@media screen and (max-width: 768px) {
    .osh_img_pc { display: none; }
    .osh_img_ph { display: block; }
    .osh_video { display: none; } /* 移动端不加载视频，节省流量 */
    .osh_card { display: none; }
    /* 5:4 竖构图分区（10%网格视觉实测）：五点依次落在顶部塔楼、中央穹顶主厂房、
       右侧后排高楼、左侧湖边建筑群、中下部办公楼群，纵向错开≥12%或水平远离，
       胶囊展开（最长62vw）不遮相邻热点；底部道路带不放点 */
    .osh_item:nth-child(1) { --hs-top: 18%; --hs-left: 48%; }
    .osh_item:nth-child(2) { --hs-top: 29%; --hs-left: 50%; }
    .osh_item:nth-child(3) { --hs-top: 50%; --hs-left: 86%; }
    .osh_item:nth-child(4) { --hs-top: 40%; --hs-left: 26%; }
    .osh_item:nth-child(5) { --hs-top: 62%; --hs-left: 48%; }
    /* 靠右的热点（第 3 个）胶囊改向左展开避免溢出屏幕 */
    .osh_item:nth-child(3) .osh_pill {
        left: auto;
        right: 26px;
    }
}

/* 说明：与原版一致，脉冲与弹出动画不做 prefers-reduced-motion 降级
 * （用户要求园区小车与热点动效保持常开；视频淡入除外，见下）。 */
@media (prefers-reduced-motion: reduce) {
    .osh_video {
        transition: none;
    }
}