/* ============================================================
   Signal Brands Hero Video Widget — signal-hero.css
   Author: 大郁 <sandy@wpdu.me>

   效果：sticky stack — 每張 slide sticky top:0，
         後一張滾上來時把前一張蓋住，形成堆疊換頁感。
   ============================================================ */

/* ── 移除外層 Elementor 所有層的 padding/margin ── */
.elementor-section:has(.sh-hero-wrap),
.elementor-container:has(.sh-hero-wrap),
.elementor-row:has(.sh-hero-wrap),
.elementor-column:has(.sh-hero-wrap),
.elementor-column-wrap:has(.sh-hero-wrap),
.elementor-widget-container:has(.sh-hero-wrap),
.e-con:has(.sh-hero-wrap),
.e-con-inner:has(.sh-hero-wrap) {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Wrapper：總高度 = slide 數 × 100vh ── */
.sh-hero-wrap {
    position: relative;
    width: 100%;
    /* height 由 slide 數量撐開，JS 不需設定 */
}


/* ── Slide 佔位容器：JS 會動態設定 height，此為初始 fallback ── */
.sh-slide-wrap {
    position: relative;
    height: 200vh;
}
.sh-slide-wrap:last-of-type {
    height: 100vh;
}

/* ── 每一個 Slide：全部 sticky top:0，JS 會設定精確高度 ── */
.sh-slide {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    will-change: transform;
}

/* 第二張起預設從底部開始，translateY 由 JS 即時更新 */
.sh-slide-wrap:not(:first-child) .sh-slide {
    transform: translateY(100%);
}

/* ── 影片背景 ── */
.sh-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.sh-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 100%;
    min-width: 100%;
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/* ── 半透明遮罩 ── */
.sh-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(0,0,0,0.52) 0%,
        rgba(0,0,0,0.22) 55%,
        rgba(0,0,0,0.06) 100%
    );
    z-index: 1;
}

/* ── 左上：英文小標 + 中文標題 + 編號 ── */
.sh-content-top {
    position: absolute;
    top: 8%;
    left: 6%;
    z-index: 2;
    max-width: 520px;
}

/* 英文小標 */
.sh-eyebrow {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

/* 標題 + 編號 同一排 */
.sh-heading-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.sh-heading {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* 幻燈片編號 */
.sh-counter {
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* 編號後面的橫線 */
.sh-counter::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: rgba(255,255,255,0.45);
    vertical-align: middle;
}

/* ── 左下：品牌名 + 描述 + 按鈕 ── */
.sh-content {
    position: absolute;
    bottom: 12%;
    left: 6%;
    z-index: 2;
    max-width: 520px;
}

/* 左下品牌名 */
.sh-brand-name {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

.sh-description {
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: rgba(255,255,255,0.85);
    line-height: 1.7;
    margin: 0 0 1.75rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* ── 按鈕 ── */
.sh-btn {
    display: inline-block;
    padding: 0.6rem 1.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    border: 1.5px solid rgba(255,255,255,0.8);
    background: transparent;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.sh-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    text-decoration: none;
}

/* ── 導航指示點：fixed ── */
.sh-dots {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 0.5rem;
    z-index: 99999;
}

.sh-dots.sh-active {
    display: flex;
}

.sh-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}

.sh-dot.active,
.sh-dot:hover {
    background: #ffffff;
    transform: scale(1.35);
}

/* ── 向下箭頭：fixed ── */
.sh-arrow-down {
    position: fixed;
    bottom: 1.8rem;
    right: 2.5rem;
    display: none;
    z-index: 99999;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255,255,255,0.55);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s, transform 0.25s;
    padding: 0;
}

.sh-arrow-down.sh-active {
    display: flex;
}

.sh-arrow-down:hover {
    border-color: #ffffff;
    transform: translateY(3px);
}

.sh-arrow-down svg {
    width: 18px;
    height: 18px;
}

/* ── 進入動畫（文字淡入，不用 translateY 以免和 slide 的 translateY 衝突）── */
.sh-slide .sh-content,
.sh-slide .sh-content-top {
    opacity: 0;
    transition: opacity 0.6s ease 0.2s;
}

.sh-slide.in-view .sh-content,
.sh-slide.in-view .sh-content-top {
    opacity: 1;
}

/* ── RWD：手機/平板直排，不做 sticky scroll ── */
@media (max-width: 1024px) {
    /* 取消佔位高度，讓 slide 自然撐開 */
    .sh-slide-wrap {
        height: auto !important;
    }
    .sh-slide-wrap:last-of-type {
        height: auto !important;
    }

    /* 取消 sticky，改回正常排版 */
    .sh-slide {
        position: relative !important;
        height: 100vw !important; /* 手機用寬度當高度，接近方形 */
        min-height: 320px;
        transform: none !important;
    }

    /* 第二張起不需要從底部進場 */
    .sh-slide-wrap:not(:first-child) .sh-slide {
        transform: none !important;
    }

    /* 文字直接顯示，不需要淡入動畫 */
    .sh-slide .sh-content,
    .sh-slide .sh-content-top {
        opacity: 1 !important;
    }

    .sh-content-top {
        left: 5%;
        right: 5%;
        max-width: 100%;
        top: 6%;
    }

    .sh-content {
        left: 5%;
        right: 5%;
        max-width: 100%;
        bottom: 10%;
    }

    .sh-heading-row {
        flex-wrap: wrap;
    }

    .sh-counter::after {
        width: 24px;
    }

    /* 隱藏 fixed UI */
    .sh-dots,
    .sh-arrow-down {
        display: none !important;
    }
}