/* ==========================================================
   1. 強制清除所有底色與裁切 (從外到內)
========================================================== */
.tp-wrapper,
.tp-container,
.tp-side,
.tp-content,
.tp-content * {
    background-color: transparent !important;
    background: transparent !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* ==========================================================
   2. 版面與透視結構設定
========================================================== */
.tp-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%; 
    padding: 250px 0 !important; 
    display: flex;
    align-items: center; 
    justify-content: center;
    box-sizing: border-box; 
    z-index: 1; /* 建立層疊上下文 */
}

.tp-container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    perspective-origin: 50% 50%;
    align-items: center; 
    transform-style: preserve-3d;
    z-index: 2; /* 確保內容在動態背景之上 */
}

.tp-side {
    flex: 1;
    display: flex;
    align-items: center; 
    position: relative;
    transform-style: preserve-3d;
}

.tp-left { justify-content: flex-end; }
.tp-right { justify-content: flex-start; }

.tp-content {
    width: 130%;
    padding: 0 40px; 
    font-family: "Noto Sans TC", sans-serif;
    transition: transform 0.1s ease-out;
}

.tp-content p { margin: 0; }

/* ==========================================================
   3. 傾斜角度設定
========================================================== */
.tp-left .tp-content {
    text-align: right;
    transform: rotateY(45deg);
    transform-origin: right center;
}
.tp-right .tp-content {
    text-align: left;
    transform: rotateY(-45deg);
    transform-origin: left center;
}

/* ==========================================================
   4. 黑科技：強制突破 Elementor 外層裁切限制
========================================================== */
.elementor-section:has(.tp-wrapper),
.elementor-column:has(.tp-wrapper),
.elementor-widget:has(.tp-wrapper),
.e-con:has(.tp-wrapper),
.e-con-inner:has(.tp-wrapper) {
    overflow: visible !important;
    clip-path: none !important;
}

/* ==========================================================
   5. 動態炫彩背景設定 (Mesh/Blob Gradient)
========================================================== */
.tp-animated-bg {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0; 
    background-color: var(--bg-c1) !important;
    overflow: hidden !important; /* 確保漸變色塊不會超出區塊邊界 */
    clip-path: inset(0) !important;
    pointer-events: none; /* 防止干擾滑鼠事件 */
}

/* 利用偽元素製作不規則漸變色塊 */
.tp-animated-bg::before,
.tp-animated-bg::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, var(--bg-c2) 0%, transparent 50%),
                radial-gradient(circle, var(--bg-c3) 0%, transparent 50%);
    background-size: 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 100%;
    background-repeat: no-repeat;
    animation: tpBlobMove var(--bg-spd) infinite alternate ease-in-out;
    opacity: 0.85;
    filter: blur(40px); /* 讓邊緣更柔和，創造流體感 */
}

.tp-animated-bg::after {
    background: radial-gradient(circle, var(--bg-c4) 0%, transparent 60%);
    animation-duration: calc(var(--bg-spd) * 1.3);
    animation-direction: alternate-reverse;
    animation-delay: -5s;
}

/* 不規則的移動與旋轉動畫 */
@keyframes tpBlobMove {
    0% { transform: translate(0%, 0%) rotate(0deg) scale(1); }
    33% { transform: translate(10%, 15%) rotate(15deg) scale(1.1); }
    66% { transform: translate(-15%, 10%) rotate(-10deg) scale(0.9); }
    100% { transform: translate(5%, -10%) rotate(5deg) scale(1); }
}