/* ============================================================
   Hero 轮播图 - 右→左滑动切换
   设计：
   - 每张 slide 默认停留在屏幕右侧 (translateX(100%))，等待入场
   - 激活态：translateX(0)，置于最上层
   - 离场（左滑出）：translateX(-100%)
   - 离场（右滑出，反向导航时）：translateX(100%)
   - 切换曲线：cubic-bezier(.4, 0, .2, 1)，800ms，与多数现代轮播一致
   - 标题随 slide 同步：略微延迟淡入，避免与图片同时抢眼
   - 禁用 prefers-reduced-motion 以照顾无障碍
   ============================================================ */

#heroBanner {
    /* 抑制滑动期间外层抖动 */
    contain: layout paint;
    /* 防止 slide 滑出时被外层圆角裁掉，但右侧仍要能滑出可视区 */
    overflow: hidden;
}

/* slide 基础：默认在屏幕右侧外（等待入场） */
#heroBanner .hero-slide {
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition:
        transform 800ms cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 800ms;
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}
/* 激活态：位于视口中央 */
#heroBanner .hero-slide.is-active {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform 800ms cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 0s;
    z-index: 2;
    pointer-events: auto;
}
/* 离场左滑（正向切换：当前图 → 左侧滑出，下一张从右侧滑入） */
#heroBanner .hero-slide.is-leaving {
    transform: translateX(-100%);
    visibility: visible;
    transition: transform 800ms cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
    pointer-events: none;
}
/* 离场右滑（反向切换：当前图 → 右侧滑出，上一张从左侧滑入） */
#heroBanner .hero-slide.is-leaving-back {
    transform: translateX(100%);
    visibility: visible;
    transition: transform 800ms cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
    pointer-events: none;
}

/* 标题：随 slide 同步淡入，略延迟以让图片先入眼 */
#heroBanner .hero-slide .hero-caption {
    opacity: 0;
    transition: opacity 500ms cubic-bezier(.4, 0, .2, 1);
    transition-delay: 250ms;
}
#heroBanner .hero-slide.is-active .hero-caption {
    opacity: 1;
}

/* 圆点指示器 */
#heroDots {
    pointer-events: auto;
}
#heroDots .hero-dot {
    padding: 6px 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
#heroDots .hero-dot-bar {
    display: block;
    height: 6px;
    width: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(2px);
    transition:
        width 500ms cubic-bezier(.4, 0, .2, 1),
        background-color 500ms cubic-bezier(.4, 0, .2, 1),
        transform 500ms cubic-bezier(.4, 0, .2, 1);
}
#heroDots .hero-dot.is-active .hero-dot-bar {
    width: 26px;
    background: #ffffff;
    transform: scaleX(1);
}
#heroDots .hero-dot:hover .hero-dot-bar {
    background: rgba(255, 255, 255, 0.85);
}
#heroDots .hero-dot:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 箭头：默认半透明，hover 时显形 */
#heroBanner .hero-arrow {
    transition: opacity 250ms ease, background-color 200ms ease, transform 200ms ease;
}
#heroBanner .hero-arrow:hover {
    transform: translateY(-50%) scale(1.08);
}
#heroBanner .hero-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* 移动端：隐藏箭头、缩短切换时长 */
@media (max-width: 640px) {
    #heroBanner .hero-arrow { display: none; }
    #heroBanner .hero-slide,
    #heroBanner .hero-slide.is-active,
    #heroBanner .hero-slide.is-leaving,
    #heroBanner .hero-slide.is-leaving-back {
        transition-duration: 600ms;
    }
    #heroDots .hero-dot.is-active .hero-dot-bar { width: 18px; }
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
    #heroBanner .hero-slide,
    #heroBanner .hero-slide.is-active,
    #heroBanner .hero-slide.is-leaving,
    #heroBanner .hero-slide.is-leaving-back,
    #heroBanner .hero-slide .hero-caption,
    #heroDots .hero-dot-bar {
        transition-duration: 0.01ms !important;
    }
}