/* static/css/style.css */

/* 自訂樣式 */
body {
    font-family: 'Inter', sans-serif; /* 設定預設字體 */
    overflow-x: hidden; /* 防止水平滾動 */
    /* Tailwind 已經處理了 bg-gray-900 和 text-white，所以這裡不需要重複設定 */
}

.hero-bg {
    /* 動態漸層背景 */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 打字動畫效果的容器 span (hero-title) 在 HTML 中已經有 Tailwind class 控制顏色，
   這裡的 .typing-effect 是針對打字動畫本身的樣式。
   如果 hero-title 同時也是打字動畫的目標，確保樣式不衝突。
   目前的 HTML 結構中，id="hero-title" 的 span 是打字效果的目標。
*/
#hero-title { /* 或者如果您在 JS 中將 .typing-effect class 加到 #hero-title 上 */
    display: inline-block; /* 確保寬度動畫有效 */
    overflow: hidden; /* 確保文字在動畫過程中被正確裁剪 */
    border-right: .15em solid orange; /* 打字游標 */
    white-space: nowrap; /* 防止文字換行 */
    /* margin: 0 auto; /* 如果需要水平居中，但通常父元素 text-center 更合適 */
    letter-spacing: .10em; /* 字元間距 */
    /* 動畫由 JavaScript 控制添加和移除，或者直接在元素上定義 */
    /* animation: typing 3.5s steps(30, end) forwards, blink-caret .75s step-end infinite; */
    /* 由於 JS 控制打字，這裡可以只保留游標閃爍，或者也由 JS 控制 */
}

/* 如果游標閃爍也由 JS 控制，則此 keyframe 可以保留 */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

/* 區塊進入動畫 */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* 卡片懸停效果 */
.feature-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Tailwind 也有 shadow class，可以考慮統一 */
}

/* 您可以在此處添加更多自訂 CSS 樣式 */