/* Hero Text Parallax Effect Styles */

/* ======================================
   Hero 文字视差滚动效果
   - 图片保持静止
   - 文字随滚动产生视差效果
   ====================================== */

/* 覆盖各 hero 的 overflow: hidden，允许文字溢出 */
/* 同时添加高 z-index 使 hero 及其文字显示在正文内容之上 */
.housing-hero,
.nursing-hero,
.recruit-hero,
.realestate-hero,
.caregiving-hero {
    overflow: visible !important;
    position: relative;
    z-index: 50;
}

/* 给 hero 的容器也添加高 z-index */
.housing-hero .container,
.nursing-hero .container,
.recruit-hero .container,
.realestate-hero .container,
.caregiving-hero .container {
    z-index: 100 !important;
}

/* 为各页面的 hero 文字元素添加 will-change 以优化性能 */
/* 同时添加高 z-index 使文字显示在正文内容之上 */
.housing-hero-title,
.nursing-hero-title,
.recruit-hero-title,
.realestate-hero-title,
.caregiving-hero-title {
    will-change: transform, opacity;
    transition: opacity 0.08s linear;
    position: relative;
    z-index: 100;
}

.housing-hero-eyebrow,
.housing-hero-lead,
.nursing-hero-eyebrow,
.nursing-hero-lead,
.recruit-hero-eyebrow,
.recruit-hero-lead,
.realestate-hero-eyebrow,
.realestate-hero-lead,
.caregiving-hero-eyebrow,
.caregiving-hero-lead {
    will-change: transform, opacity;
    transition: opacity 0.08s linear;
    position: relative;
    z-index: 100;
}

/* 确保后续正文内容区域的 z-index 低于 hero */
.housing-intro,
.housing-section,
.nursing-intro,
.nursing-section,
.recruit-intro,
.recruit-section,
.realestate-intro,
.realestate-section,
.caregiving-intro,
.caregiving-section {
    position: relative;
    z-index: 1 !important;
}

/* Hero容器需要额外的滚动空间来触发视差效果 */
.sub-hero.has-text-parallax {
    height: 180vh;
    /* 增加高度以提供滚动空间 */
    position: relative;
}

/* Sticky 内部容器 */
.sub-hero.has-text-parallax .hero-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 可选：添加一个过渡层，让文字淡出更自然 */
.sub-hero.has-text-parallax::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20vh;
    background: linear-gradient(to bottom, transparent, var(--background-color, #f9f9f7));
    pointer-events: none;
    z-index: 3;
}

/* ======================================
   响应式调整
   ====================================== */
@media (max-width: 900px) {

    /* 移动端减少视差效果的滚动空间 */
    .sub-hero.has-text-parallax {
        height: 140vh;
    }
}

@media (max-width: 600px) {

    /* 小屏幕可能不需要那么多滚动空间 */
    .sub-hero.has-text-parallax {
        height: 120vh;
    }
}

/* ======================================
   Business Subpage Performance Overrides
   - reduce expensive blur layers on the five business pages
   ====================================== */
.housing-page .header,
.nursing-page .header,
.caregiving-page .header,
.recruit-page .header,
.realestate-page .header,
.housing-page .header.compact,
.nursing-page .header.compact,
.caregiving-page .header.compact,
.recruit-page .header.compact,
.realestate-page .header.compact {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.housing-hero,
.nursing-hero,
.caregiving-hero,
.recruit-hero,
.realestate-hero {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 900px) {
    .housing-mobile-quickbar,
    .nursing-mobile-quickbar,
    .caregiving-mobile-quickbar,
    .recruit-mobile-quickbar,
    .realestate-mobile-quickbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
}