/* #region -----動畫區塊通用樣式----- */
.section_animation{
    padding: 0px 5rem 7.5rem;
}

.info_title{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-align: center;
    padding: 0 10rem 0 10rem;
    margin-top: -4rem;
}

/*  標題/說明區  */
.main-heading {
    color: #fff;
    text-align: center;
    font-family: "Funnel Display";
    font-size: clamp(2.25rem, 4vw, 3.125rem);     /* 36px~50px，自動適配 */
    font-weight: 700;
    margin: 0;
    width: 54rem;
}

.main-description {
    color: #fff;
    text-align: center;
    font-family: "Funnel Sans";
    font-size: clamp(18px, 1.125rem, 1.999px);   
    font-weight: 300;
    /* line-height: 1.4; */
    margin: 2.2vw 0 0 0; /* 30px → 2.2vw：對應視窗約1400px時為30px */
    width: 54rem;
}

/*  容器&區塊  */
.content-container {
    position: relative;
    border-radius: 0.313rem;           /* 5px → rem */
    margin-top: 4.29vw;                /* 60px → 4.29vw＠1400px*/
    width: 100%;
    max-width: 100%;
    padding: 1.86vw 2.86vw 2vw;     /* 26px,40px,44px → vw */
    background: linear-gradient(165deg, #e5edfa 20.61%, #ccdcf6 81.91%);
}

/* - 版面間距 - */
.content-wrapper {
    /* gap: 1.43vw;        */
    display: flex;
}

.animation_content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
    width: 100%;
    margin-left: 0;
}

.content-grid {
    flex-grow: 1;
    /* gap: 1.43vw;       */
    display: flex;
}

/* - 左文字欄 - */
.text-content-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
    margin-left: 0;
}

.left-text-content {
    position: relative; /* 讓裡面 .floating-feature-block absolute 定位 */
    display: flex;
    margin-top: 1.93vw;         /* 27px */
    margin-right: -4.36vw;      /* -61px */
    width: 100%;
    flex-direction: column;
    align-items: start;
    font-family: Funnel Sans, -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 1.5rem;          /* 24px→rem，看全站主字級可改用clamp */
    color: #000;
    font-weight: 500;
}

.section-title {
    color: #000;
    align-self: stretch;
    margin: 0; 
    font-size: clamp(24px, 1.25rem, 999px);
    font-weight: 500;
}

.section-description {
    color: #000;
    font-size: clamp(16px, 1.125rem, 999px);
    font-weight: 300;
    align-self: stretch;
    margin: 1.43vw 1.5vw 0 0;  /* 20px 21px 0 0 */
}

/*  產品區/按鈕  */
.floating-feature-block {
    position: absolute;
    left: 0;
    top: 0;
    width: max-content;
    z-index: 2;
    transition: top 0.3s ease-in-out;
    opacity: 0; /* 初始隱藏 */
    transition: left 0.4s cubic-bezier(.4,0,.2,1), top 0.4s cubic-bezier(.4,0,.2,1);
}

.floating-feature-block.visible {
    opacity: 1;
}

.feature-title {
    color: #000;
    margin: 16vw 0 0 0;          /* 225px→約16vw */ 
    font-size: clamp(24px, 1.5rem, 999px);          /* 24px */
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.feature-title.hidden {
    opacity: 0;
}

.feature-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: min(7.25rem, 8.3vw);  /* 116px */
    filter: drop-shadow(0px 0px 2.14vw rgba(0,0,0,0.1));   /* 30px */
    margin-top: 1.79vw;          /* 25px */
    max-width: 100%;
    display: block;
}

.discover-button {
    width: min(7.25rem, 8.5vw);      /* 116px */
    align-self: stretch;
    border-radius: 2px;
    margin-top: 1.79vw;              /* 25px */
    padding: 0.7vw 1.3vw;          /* 10px 23px */
    font-size: 1.125rem;             /* 18px */
    font-weight: 400;
    white-space: nowrap;
    text-transform: capitalize;
    border: none;
}

/*  中間圖片區塊  */
.visual-content-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
    width: 33%;
}

.visual-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: stretch;
}

/*  車圖展示區  */
.image-showcase {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: unset;
    width: 100%;
    align-items: center;
    font-family: Funnel Display, -apple-system, Roboto, Helvetica, sans-serif;
    font-size: 1.3125rem;      /* 21px，建議：可用clamp(1.2rem, 1.5vw, 1.5rem) */
    color: #0042ff;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    justify-content: center;
    height: auto;
    max-width: 100%;
    margin: 0 auto 0 auto;
    aspect-ratio: 346/624;
}

.background-image {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; 
    z-index: 1;
}

/*  視覺遮罩  */
.integration-points-visual {
    position: relative;
    display: flex;
    margin-bottom: -2.43vw;       /* -34px */
    width: min(20.3rem, 23vw);    /* 325px */
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
}

.point-item {
    position: absolute;
    z-index: 2;
}

.point-item:not(.active):hover {
    cursor: pointer;
}

.point-background {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.span_num{
    position: absolute;
    z-index: 2;
    object-position: center;
}

.span_num img{
    width: 100%;
    height: 100%;
    min-width: 25px;
    min-height: 25px;
    object-fit: contain;  /* 保持數字圖比例 */
    display: block;
}

.point-number {
    position: relative;
    border-radius: 2px;
    background-color: #fff;
    min-height: 30px;
    width: 30px;
    padding: 0 8px 0 9px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0042ff;
}

.point-number-blue {
    background-color: #0042ff;
    color: #fff;
}

/*  進度條  */
.progress-indicator {
    border-radius: 0.071vw;       /* 1px */
    align-self: center;
    display: flex;
    margin-top: 1.14vw;           /* 16px */
    margin-bottom: 3rem;
    padding: 0 4.29vw;            /* 60px */
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.progress-bar {
    border-radius: 0.071vw;       /* 1px */
    display: flex;
    width: min(7.14rem, 100px);   
    flex-shrink: 0;
    height: 0.71vw;               /* 10px */
    background-color: #0042ff;
    transition: transform 0.5s ease;
}

/*  右側列表  */
.integration-points-sidebar {
    margin-top: 1.93vw;
    padding-left: 10rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    line-height: normal;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    font-family: Funnel Sans, -apple-system, Roboto, Helvetica, sans-serif;
    font-size: clamp(18px, 1.125rem, 999px);          /* 18px */
    color: #000;
    font-weight: 400;
}

.sidebar-title {
    font-family: "Funnel Sans";
    color: #000;
    font-weight: 700;
    text-transform: capitalize;
    margin: 0;
    font-size: 1.125rem;           /* 18px */
}

.integration-item {
    margin-top: 1.43vw;           /* 20px */
}

.integration-item:first-of-type {
    margin-top: 1.43vw;           /* 20px */
}

.integration-item:not(:first-of-type) {
    margin-top: 2.14vw;           /* 30px */
}

.integration-name {
    width: 13.25rem;
    color: #000;
    font-size: clamp(24px, 1.5rem, 999px);    /* 24px */
    margin: 0 0 0.71vw 0;         /* 0 0 10px 0 */
    font-weight: 400;
}

.integration-description {
    width: 13.125rem;
    color: #000;
    font-weight: 300;
    margin: 0;
    font-size: clamp(18px, 1.125rem, 999px);
}

.integration-points-sidebar .integration-description:last-child {
    margin-right: 10px;
}

.connection-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
    border: none;
    margin: 0;
    z-index: 12;
    pointer-events: none;
    transition: top 0.3s cubic-bezier(.4,0,.2,1);
    opacity: 0; /* 初始隱藏 */
}

.connection-line.visible {
    opacity: 1;
}

.hide_on_desktop{
    display: none !important;
}