/* --- 1. 定義品牌變數 --- */
:root {
    --primary-color: rgb(254 205 211);
    /* 品牌主色：科技藍 */
    --secondary-color: #0f172a;
    /* 深色文字：午夜藍 */
    --accent-color: #ffb8b8;
    /* 強調色：質感金 */
    --body-text: #475569;
    /* 內文顏色：冷灰 */
    --bg-light: #f8fafc;
    /* 淺色背景 */
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. 基礎重設與字體 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 這裡的名稱必須跟 Google Fonts 提供的一模一樣 */
    font-family: "Noto Sans TC", sans-serif;
    color: var(--secondary-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* 針對 iOS 的優化：防止 iPhone 自動調整文字大小 */
html {
    -webkit-text-size-adjust: 100%;
}

/* --- 3. 導覽列動畫 --- */
.nav-link {
    position: relative;
    transition: var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 100%;
}

/* --- 4. 按鈕組件 (參考 Edenred 的圓潤與質感) --- */
.btn-primary {
    background-color: var(--secondary-color);
    color: white;
    padding: 12px 32px;
    border-radius: 99px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-block;
    border: 2px solid var(--secondary-color);
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

.btn-outline {
    border: 2px solid var(--secondary-color);
    padding: 12px 32px;
    border-radius: 99px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    color: white;
}

/* --- 5. 作品集卡片 (參考 Choice Design 的乾淨排版) --- */
.portfolio-card {
    border-radius: 16px;
    overflow: hidden;
    background: white;
    transition: var(--transition);
    border: 1px solid #e2e8f0;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.card-img-wrapper {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.portfolio-card:hover img {
    transform: scale(1.1);
}

/* --- 6. 標題層級與點綴 --- */
.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    position: relative;
}

.section-subtitle {
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    font-size: 0.875rem;
}

/***********************
 首頁　banner 背景
***********************/

/* --- 顏料洗色效果 (Clip-path 版) --- */

.paint-wash-overlay {
    /* 這裡放你想塗上去的背景色 */
    background-color: rgb(255 241 242);
    ;

    /* 初始狀態：在左上角 (0% 0%) 裁剪出一個半徑為 0% 的圓（完全看不見） */
    clip-path: circle(0% at 0% 0%);

    /* 應用動畫：從左上角開始擴散 */
    animation: paintFlow 1.8s ease-out forwards;

    /* 確保文字可以被選取點擊 */
    pointer-events: none;
    position: absolute;
    inset: 0;
}

@keyframes paintFlow {
    0% {
        /* 起點：左上角的一個點 */
        clip-path: circle(0% at 0% 0%);
    }

    100% {
        /* 終點：擴散到 150% 半徑，確保蓋住整個長方形 Banner */
        clip-path: circle(150% at 0% 0%);
    }
}

/***********************
portfolio 樣式
***********************/

/* 針對粉色背景優化的篩選按鈕樣式 */
.filter-btn {
    padding: 0.5rem 2rem;
    border-radius: 9999px;
    /* 改為純白底，在粉色背景上會更乾淨 */
    background-color: #ffffff;
    /* 邊框改為淡粉色，呼應背景 */
    border: 1px solid #ffe4e6;
    /* rose-100 */
    color: #64748b;
    /* slate-500 */
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滑過時：背景變淺粉，文字變深粉 */
.filter-btn:hover {
    background-color: #fff1f2;
    /* rose-50 */
    border-color: #fb7185;
    /* rose-400 */
    color: #fb7185;
    /* rose-400 */
    transform: translateY(-2px);
    /* 增加一個微小的上浮動效 */
}

/* 啟動狀態：維持鮮明的玫瑰粉 */
.filter-btn.active {
    background-color: #fb7185;
    /* rose-400 */
    border-color: #fb7185;
    /* rose-400 */
    color: white;
    box-shadow: 0 10px 20px -5px rgba(251, 113, 133, 0.4);
    /* 增加陰影飽和度 */
}

/* 作品項目的隱藏/顯示動畫 */
.portfolio-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.portfolio-item.hidden {
    /* 不要用 display: none，改用這幾行 */
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    /* 讓使用者點不到隱藏的東西 */
    position: absolute;
    /* 讓它不佔據空間，其他作品才會補位 */
    z-index: -1;
}

/* 強制修正回到頂端按鈕的位置 */
#backToTop {
    right: 20px !important;
    /* 數值越大，越靠左 */
    bottom: 25px !important;
    /* 離底部距離 */
}