/* =========================================
   1. 主要區塊結構 (Layout & Section)
   ========================================= */


#about {
    /* 這裡只留排版邏輯 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 使用繼承自 wrapper 的變數，保持原本的縮排 */
    padding: var(--pad-v) var(--pad-h);
    
    /* 為了美觀，可以讓下方 padding 小一點，因為接著就是作品集 */
    padding-bottom: 5vh; 
}

.content-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 0;
}

/* =========================================
   2. 文字與排版組件 (Typography & Components)
   ========================================= */

/* 靜態標題 */
.greet {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
}

/* 自我介紹容器 (Flex) */
.introduction {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    
    width: 100%;
    gap: 0em;

    line-height: 1.2;
    margin: 0;
}


/* 流體文字 (Clamp) */
.fluid-text {
    font-size: clamp(1.8rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
}


/* 名字包裝層 */
.identity {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* 給之後的自己看的：
1. clamp(400, ..., 900) -> 限制最細 400，最粗 900。
2. 100vw / 1px -> 這會把 "寬度 px" 轉為 "純數字" (例如 1000)。
3. * 0.6 -> 係數調整。當螢幕寬 1000px 時，粗細就是 600。
*/
/* .typed-cursor {
display: inline-block;
width: 0;
overflow: visible;
white-space: nowrap;

font-size: clamp(1.8rem, 6vw, 4rem);
font-weight: clamp(400, calc(100vw / 1px * 0.3), 500);
vertical-align: baseline;
} */

.typed-cursor {
    display: inline-block;

    width: 0.08em;
    height: 1em;
    
    background-color: #ff00ff;
    font-size: clamp(1.8rem, 6vw, 4rem);

    vertical-align: 0em;
    margin-left: 0em;
    margin-bottom: 0rem;
}

#period {
    margin-left: -0.08em;
}

/* 漸層文字特效 */
.gradient-text {
    display: inline-block;
    background-image: var(--accent-gradient, linear-gradient(45deg, #6500ff, #ff00ff));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


.intro-text p {
    white-space: nowrap;
    
    font-size: clamp(0.1rem, 3vw, 1.5rem);

    margin-top: 2rem;
    color: #afafaf;

    line-height: 1.8;
    width: 100%;
}

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


/* =========================================
   3. 媒體查詢 (RWD Media Queries)
   ========================================= */

/* 平板尺寸 */
@media (max-width: 1068px) {

}

/* 手機尺寸 (主要調整區) */
@media (max-width: 734px) {

    #iam {
        width: 100%;
        font-size: 4rem;
        margin-bottom: 0;
    }
    
.introduction {
        flex-direction: column;
        align-items: flex-start;
        gap: 0rem; /* 子元素間距 */
    }



}

/* 小螢幕微調 */
@media (max-width: 480px) {

}