/* ==========================================================================
   1. 文字排版區
   ========================================================================== */
.region-item {
    text-align: left !important;
}

.mit-subtitle {
    color: #231815;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 10px;

    color: #231815;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    min-height: 73px;
    height: auto;
}

.ss-subtitle {
    color: #231815;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.92px;
    margin-bottom: 20px;
}

.mit-text {
    color: #4a4a4a;
    font-size: 24px;
    line-height: 1.8;
    max-width: 85%;
    width: 100%;
    margin-top: 20px;
}

/* ==========================================================================
   2. 圖片動畫定義
   ========================================================================== */
@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   3. 圖片重疊與定位邏輯
   ========================================================================== */
.image-stack-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 400px;
}

/* 所有圖片共用屬性 */
.image-stack-container img {
    opacity: 0;
    animation: fadeInEffect 1s ease-out forwards;
}

/* 底圖：特販體系 (撐開容器高度) */
.image-stack-container img[alt="特販體系"] {
    position: relative !important;
    z-index: 1;
    width: 100%;
    height: auto;
    animation-delay: 0.5s;
}

/* 疊加圖共用設定：恢復原尺寸、解除定位限制 */
.image-stack-container img[alt="對話框"],
.image-stack-container img[alt="對話框_點點"],
.image-stack-container img[alt="MIT文字_1"] {
    position: absolute;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    display: inline-block !important;
    left: auto;
    /* 解除左側對齊，讓 right 生效 */
}

/* 對話框特定位置 */
.image-stack-container img[alt="對話框"] {
    z-index: 2;
    top: -20px;
    right: 240px;
    animation-delay: 1.5s;
}

/* 點點特定位置 */
.image-stack-container img[alt="對話框_點點"] {
    z-index: 3;
    top: 15px;
    right: 275px;
    animation-delay: 2.5s;
}

/* ==========================================================================
   1. 文字浮現動畫定義
   ========================================================================== */
@keyframes textFloatIn {
    from {
        opacity: 0;
        /* 初始位置：往下 20px */
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        /* 最終位置：回到原位 */
        transform: translateY(0);
    }
}

/* ==========================================================================
   2. 套用動畫至特定文字元件
   ========================================================================== */
.mit-subtitle,
.ss-subtitle,
.mit-text {
    /* 預設透明，避免動畫開始前閃爍 */
    opacity: 0;

    /* 核心動畫設定 */
    animation-name: textFloatIn;
    animation-duration: 1s;
    /* 動畫持續 1 秒 */
    animation-fill-mode: forwards;
    /* 動畫結束後停留在最後一格 (不透明) */
    animation-timing-function: ease-out;
    /* 先快後慢，比較自然 */
}

.mitsection {
    font-family: 'Noto Sans TC';
    background-color: #ffffff;
}

.mission-mittitle {
    color: #231815;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.mission-mitsubtitle {
    color: #595757;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    /* 44.8px */
    letter-spacing: 0.8px;
}

.mission-mitcontentsubtitle {
    color: #231815;
    font-size: 24px;
    letter-spacing: 3.2px;
}

.mission-KAtitle {
    color: #231815;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.mission-KAsubtitle {
    color: #595757;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    /* 44.8px */
    letter-spacing: 0.8px;
}

/* 動畫基礎 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 容器定位 */
.typewriter-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.typewriter-text {
    position: absolute;
    top: 50%;
    left: 12%;
    /* 微調對齊 */
    transform: translateY(-50%);
    width: 80%;
    /* 給予足夠空間 */
    text-align: left;
    pointer-events: none;
}

/* 文字樣式修正 */
.typewriter-text p {
    margin: 0;
    padding: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    /* 打字機必備 */
    font-family: "Noto Sans TC", sans-serif;
    letter-spacing: 1px;
}

.typewriter-text .line-1 {
    font-size: 24px;
    /* 稍微縮小一點避免爆框 */
    font-weight: 900;
    color: #000;
}

.typewriter-text .line-2 {
    font-size: 24px;
    font-weight: 400;
    color: #000;
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: black;
    }
}

/* 專門針對需要文字銜接的對話框 */
.inline-style .typewriter-text p {
    display: inline;
    /* 讓 p 標籤像文字一樣銜接 */
    white-space: normal;
    /* 允許文字在寬度不足時自然折行 */
    overflow: visible;
    /* 讓 inline 內容正常顯示 */
    vertical-align: middle;
    /* 輔助對齊 */
}

/* 修正銜接時的間距，避免文字太擠 */
.inline-style .typewriter-text p::after {
    content: "";
    margin-right: 0px;
}

/* 如果 line-1 和 line-2 大小不同導致對齊奇怪，可以統一基準線 */
.inline-style .typewriter-text {
    /* 原本是 50%，因為圖片視覺重心通常偏下，所以將文字定位點稍微下移 */
    /* 建議在 53% - 55% 之間微調，54% 通常是這類對話框的視覺黃金中心 */
    top: 47% !important;
    /* 保持原本的位移補償，確保它是以「整塊文字」中心點去對齊 54% 的位置 */
    transform: translateY(-50%);
    /* 修正行高，讓多行銜接時垂直分布更平均 */
    line-height: 1.5;
}

.col-md-9 .inline-style .typewriter-text {
    top: 47% !important;
}

/*斷行*/
.break {
    width: 100%;
    height: 0;
    display: block;
}

@media (max-width: 1600px) {
    .region-row {
        width: 87% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
        /* 確保沒有浮動干擾 */
        display: flex !important;
        /* 確保它維持 Flexbox 屬性 */

    }

    .mit-subtitle,
    .ss-subtitle,
    .mission-KAtitle {
        font-size: 28px !important;
    }

    .mit-text,
    .mission-KAsubtitle {
        font-size: 18px !important;
    }

    .image-stack-container img[alt="特販體系"] {
        top: 50px;
    }

    .image-stack-container img[alt="對話框_點點"] {
        top: 50px;
        right: 175px;
    }

    .image-stack-container img[alt="對話框"] {
        top: 10px;
        right: 140px;
    }

    .typewriter-text .line-1,
    .typewriter-text .line-2 {
        font-size: 18px;
    }

}

/* ==========================================================================
   4. 響應式優化 (手機版)
   ========================================================================== */
@media (max-width: 768px) {
    .mit-subtitle {
        font-size: 40px;
    }

    .ss-subtitle {
        font-size: 32px;
    }

    .mit-text {
        max-width: 100%;
    }

    /* 手機版若重疊跑掉，可在此將 position 改回 static 或調整 top/right */
    .image-stack-container img[alt="對話框"],
    .image-stack-container img[alt="對話框_點點"] {
        right: 10px;
        /* 手機版微調 */
    }
}