/**
 * Home Main Slider Widget（IT科技Hero横幅）
 * 借鉴IT企业模板首屏 main-slider：深色网格背景图(hms-bg.jpg自带金色光晕+白色波浪)
 * 搭配立体插画与3D漂浮物件；主题金 #f5c12e
 */

.hms-hero {
    --hms-gold: #f5c12e;
    --hms-gold-soft: rgba(245, 193, 46, 0.14);
    --hms-text: #ffffff;
    --hms-text-muted: rgba(255, 255, 255, 0.75);
    --hms-line: rgba(255, 255, 255, 0.45);

    position: relative;
    padding: 96px 0 150px;
    overflow: hidden;
    isolation: isolate;
    color: var(--hms-text);
    background-color: #161d36;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* 自定义背景图时的深色遮罩，保证文字可读 */
.hms-hero.hms-has-bg .hms-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(16, 20, 38, 0.92) 0%, rgba(16, 20, 38, 0.72) 45%, rgba(16, 20, 38, 0.4) 100%);
}

.hms-hero .container {
    position: relative;
    z-index: 3;
}

.hms-row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

/* ============ 左侧文案 ============ */
.hms-content {
    max-width: 560px;
}

/* 顶部小标签：金色描边胶囊 + 呼吸光点 */
.hms-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 20px;
    margin-bottom: 24px;
    border-radius: 30px;
    border: 1px solid rgba(245, 193, 46, 0.55);
    background: var(--hms-gold-soft);
    color: var(--hms-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.hms-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hms-gold);
    box-shadow: 0 0 10px rgba(245, 193, 46, 0.9);
    animation: hms-pulse 2s ease-in-out infinite;
}

@keyframes hms-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* 主标题：白色大字，高亮词金色 */
.hms-title {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0 0 24px;
    color: var(--hms-text);
}

.hms-highlight {
    color: var(--hms-gold);
    white-space: nowrap;
    text-shadow: 0 0 30px rgba(245, 193, 46, 0.35);
}

/* 描述文字 */
.hms-desc {
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
    color: var(--hms-text-muted);
    margin: 0 0 36px;
}

/* ============ 按钮 ============ */
.hms-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---------- 客户头像条（借鉴 prber hhb-clients-avatar）----------- */
.hms-clients-avatar {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.hms-client-img {
    display: inline-flex;
    align-items: center;
}

.hms-client-img img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    margin-left: -12px;
}

.hms-client-img img:first-child {
    margin-left: 0;
}

/* 计数徽章：金色底 + 深字 + 白边 */
.hms-avatar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hms-gold);
    color: #2b271b;
    font-size: 13px;
    font-weight: 700;
    border: 3px solid #ffffff;
    margin-left: -12px;
    box-shadow: 0 4px 12px rgba(245, 193, 46, 0.35);
}

.hms-avatar-text {
    color: var(--hms-text-muted);
    font-size: 14px;
    font-weight: 500;
}

/* -------- END 客户头像条 ----------------------------------------- */

.hms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hms-btn i {
    font-size: 17px;
    transition: transform 0.25s ease;
}

.hms-btn:hover i {
    transform: translateX(5px);
}

/* 主按钮：金色底 + 深字 + 金色投影 */
.hms-btn-primary {
    background: var(--hms-gold);
    color: #2b271b;
    box-shadow: 0 10px 28px rgba(245, 193, 46, 0.35);
}

.hms-btn-primary:hover {
    background: #ffffff;
    color: #2b271b;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(245, 193, 46, 0.45);
}

/* 次按钮：透明底 + 白色描边 */
.hms-btn-ghost {
    background: transparent;
    color: var(--hms-text);
    border: 1.5px solid var(--hms-line);
}

.hms-btn-ghost:hover {
    background: var(--hms-gold-soft);
    border-color: var(--hms-gold);
    color: var(--hms-gold);
    transform: translateY(-3px);
}

/* ============ 右侧主图 ============ */
.hms-main-image {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hms-main-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
    animation: hms-float 5s ease-in-out infinite;
}

@keyframes hms-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* ============ 3D 漂浮物件 ============ */
.hms-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hms-object {
    position: absolute;
    display: block;
}

/* 粉色圆环：左上，部分出界 */
.hms-object-1 {
    width: 190px;
    top: 10%;
    left: -40px;
    opacity: 0.9;
    animation: hms-float 7s ease-in-out infinite, hms-spin 26s linear infinite;
}

/* 紫色球：右上 */
.hms-object-2 {
    width: 110px;
    top: 8%;
    right: 3%;
    animation: hms-bounce 6s ease-in-out infinite;
}

/* 粉色光球：左下 */
.hms-object-3 {
    width: 95px;
    bottom: 18%;
    left: 4%;
    animation: hms-bounce 7s ease-in-out infinite 0.6s;
}

/* 金色灯泡：右中偏上 */
.hms-object-4 {
    width: 105px;
    top: 4%;
    right: 30%;
    animation: hms-bounce 5.5s ease-in-out infinite 0.3s;
}

@keyframes hms-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes hms-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

/* ============ 自定义背景模式的底部白色波浪 ============ */
.hms-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 2;
    height: 72px;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: 1440px 72px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,48 C240,92 480,4 720,34 C960,64 1200,84 1440,42 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}

/* 布局方向 */
.hms-hero .flex-row-reverse {
    flex-direction: row-reverse;
}

.hms-layout-left .hms-content {
    margin-left: auto;
}

/* ============ 响应式适配 ============ */
@media (max-width: 991.98px) {
    .hms-hero {
        padding: 64px 0 110px;
    }

    .hms-content {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 36px;
        text-align: center;
    }

    .hms-title {
        font-size: 38px;
    }

    .hms-desc {
        font-size: 16px;
        margin-bottom: 28px;
    }

    .hms-btns {
        justify-content: center;
    }

    .hms-main-image {
        margin-top: 10px;
    }

    .hms-main-image img {
        max-width: 78%;
    }

    .hms-object-1 { width: 130px; left: -30px; }
    .hms-object-2 { width: 80px; }
    .hms-object-4 { width: 80px; right: 12%; }
}

@media (max-width: 575.98px) {
    .hms-hero {
        padding: 48px 0 92px;
    }

    .hms-badge {
        font-size: 11px;
        letter-spacing: 1.8px;
        padding: 6px 16px;
        margin-bottom: 18px;
    }

    .hms-title {
        font-size: 30px;
        margin-bottom: 18px;
    }

    .hms-desc {
        font-size: 14px;
        line-height: 1.75;
        margin-bottom: 24px;
    }

    .hms-btn {
        height: 48px;
        padding: 0 24px;
        font-size: 14px;
    }

    .hms-main-image img {
        max-width: 92%;
    }

    /* 移动端隐藏部分物件，避免遮挡文案并提升性能 */
    .hms-object-3,
    .hms-object-4 {
        display: none;
    }

    .hms-object-1 { width: 96px; top: 4%; }
    .hms-object-2 { width: 62px; top: 2%; right: 2%; }

    .hms-wave {
        height: 48px;
        background-size: 960px 48px;
    }
}

/* 动画偏好适配：尊重用户 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hms-main-image img,
    .hms-object,
    .hms-badge::before {
        animation: none;
    }
}

/* ===================== 顶部透明导航（当首页首屏为深色背景时） =====================
 * 当 usk1_is_home_dark_hero() 返回 true 时：
 *   - PHP 输出 <header class="... site-header--transparent is-transparent-active">
 *   - body 带 .has-transparent-header
 *
 * 【核心约束（按用户 2026-09-03 要求）】：
 *   透明模式专属的"白字 / 透明背景 / 暗色 LOGO / 浅灰分隔线 / 金色 hover 强显"
 *   **只在 header 同时带 .is-transparent-active 时生效**。
 *   .is-transparent-active 的加/删由 home-main-slider.js 的 computeMode() 控制：
 *       ✓ 还在 Hero 上方（scroll <= THRESHOLD 且 未进入 navbar-sticky） → 保留
 *       ✕ 只要命中 navbar-sticky / scrolled / navbar-now 任一项（已变成吸顶条） → 移除
 *       ✕ 或用户手动切到全局暗色主题（html[data-bs-theme=dark]） → 移除（交由默认吸顶条暗色变体 + data-bs-theme=dark 的 LOGO 分支处理）
 *
 * 移除 .is-transparent-active 后，颜色全部回落到 main.min.css + usk1-navbar.css 定义的
 * 「默认吸顶条」：
 *   - 亮色主题：浅色玻璃底 + 黑色字 + 亮色 LOGO（data-light） + 金色 1px 底边
 *   - 暗色主题：深色玻璃底 + 灰字 + 暗色 LOGO（data-dark） + 金色 1px 底边
 *
 * 不再用 CSS 的 :not(.navbar-now):not(.navbar-sticky):not(.scrolled) 来判断，
 * 因为 main.min.js 在刷新/锚点后会立刻给 header 残留 navbar-now / navbar-sticky，
 * 导致 :not 永远不命中，透明首帧失效。
 */

body.has-transparent-header {
    /* 为了绝对定位的 header 正确对齐 document flow 里的 <main>
       直接取消 header-gap：下方 Hero 自己撑顶 */
}

/* Header 脱离文档流，叠在 Hero 上，不占任何空间。
   position:absolute 和背景透明，只在「.is-transparent-active 激活」时才设置，
   避免 main.min.js 残留 navbar-now 时被我们 CSS 强制 absolute 错位。
*/
.site-header--transparent.is-transparent-active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

/* 透明模式下取消 header-gap 占位 */
body.has-transparent-header .header-gap {
    display: none;
}

/* ============== 仅「.is-transparent-active」激活时：白字 + 柔和分隔线 ============== */

body.has-transparent-header .site-header--transparent.is-transparent-active,
body.has-transparent-header .site-header--transparent.is-transparent-active a,
body.has-transparent-header .site-header--transparent.is-transparent-active .nav-list > li > a,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions > a,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions > button,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions .balance,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions .nickname,
body.has-transparent-header .site-header--transparent.is-transparent-active .burger,
body.has-transparent-header .site-header--transparent.is-transparent-active .navbar-search .search-submit i {
    color: #ffffff;
}

body.has-transparent-header .site-header--transparent.is-transparent-active .sep {
    background: rgba(255, 255, 255, 0.18);
}

body.has-transparent-header .site-header--transparent.is-transparent-active .nav-list > li::after {
    background: rgba(255, 255, 255, 0.16);
}

/* 菜单项 hover/激活：金色 */
body.has-transparent-header .site-header--transparent.is-transparent-active .nav-list > li:hover > a,
body.has-transparent-header .site-header--transparent.is-transparent-active .nav-list > li.current-menu-item > a,
body.has-transparent-header .site-header--transparent.is-transparent-active .nav-list > li.current-menu-ancestor > a,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions > a:hover,
body.has-transparent-header .site-header--transparent.is-transparent-active .actions > button:hover {
    color: var(--hms-gold, #f5c12e);
}

/* 搜索框透明边框 + 占位文字浅色 */
body.has-transparent-header .site-header--transparent.is-transparent-active .navbar-search {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

body.has-transparent-header .site-header--transparent.is-transparent-active .navbar-search input,
body.has-transparent-header .site-header--transparent.is-transparent-active .navbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

body.has-transparent-header .site-header--transparent.is-transparent-active .navbar-search input {
    color: #ffffff;
}

/* Hero 首屏：当 header 透明叠加时，顶部 padding 往上加（因为不再有 header-gap），
   避免内容/主图被 顶部导航 遮挡。桌面端 header 高约 88px，加 10px 安全间距 → 96~110；
   原 Hero 默认已有 padding 96px 150px，这里向上把 top padding 调到 140px 让文字垂直居中。 */
body.has-transparent-header .hms-hero {
    padding-top: 150px;
}

@media (max-width: 991.98px) {
    /* 平板端顶部 nav 更紧凑 */
    body.has-transparent-header .hms-hero {
        padding-top: 112px;
    }
}

@media (max-width: 575.98px) {
    /* 移动端：logo/burger 缩小，对应再调 */
    body.has-transparent-header .hms-hero {
        padding-top: 88px;
    }
}

/* 2026-09-03 废弃：原先 .scrolled 会再加深色底。现在由 JS 移除 .is-transparent-active 就回落到默认吸顶条，不再需要单独覆盖。*/