/* =================================================== */
/* 1. 基本重置與字體 (Base & Typography) */
/* =================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
body { font-family: 'Inter', sans-serif; background: #000; color: #222; line-height: 1.7; overflow-x: hidden; animation: holdBodyOverflow 2.5s forwards; }
@keyframes holdBodyOverflow { 0%, 99% { overflow-y: hidden; } 100% { overflow-y: visible; } }

@font-face { font-family: "BLK"; src: url('BLKCHCRY.TTF'); font-display: swap; }
@font-face { font-family: "LUX"; src: url('lux.otf'); font-display: swap; }
@font-face { font-family: "GEN"; src: url('GenSenRounded2R.ttc'); font-display: swap; }
@font-face { font-family: "NEW"; src: url('BebasNeue-Regular.ttf'); font-display: swap; }
@font-face { font-family: "TEST"; src: url('Creak\ DEMO.otf'); font-display: swap; }

/* =================================================== */
/* 2. 開場動畫 & 全域進場 (Intro & Fade In) */
/* =================================================== */
.intro-lines-container { position: fixed; top: 50%; left: 0; width: 100%; height: 0; z-index: 9999; pointer-events: none; }
.intro-line { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; transform: scaleX(0); }
.line-top { top: 0; animation: splitTop 2.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }
.line-bottom { bottom: 0; animation: splitBottom 2.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; }

@keyframes splitTop { 0%, 35% { transform: scaleX(0) translateY(0); transform-origin: left; opacity: 1;} 45% { transform: scaleX(1) translateY(0); opacity: 1;} 100% { transform: scaleX(1) translateY(-50vh); opacity: 0;} }
@keyframes splitBottom { 0%, 35% { transform: scaleX(0) translateY(0); transform-origin: left; opacity: 1;} 45% { transform: scaleX(1) translateY(0); opacity: 1;} 100% { transform: scaleX(1) translateY(50vh); opacity: 0;} }

#page-content { opacity: 0; transform: translateY(30px) scale(0.98); animation: siteFadeIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1.2s forwards; }
@keyframes siteFadeIn { to { opacity: 1; transform: none; } }
.text-reveal { opacity: 0; animation: textFadeIn 1.2s ease-out forwards; }
@keyframes textFadeIn { to { opacity: 1; } }
.delay-text-1 { animation-delay: 1.8s; }
.delay-text-2 { animation-delay: 2.1s; }

/* =================================================== */
/* 3. 頂部導覽列 (Header & Nav) */
/* =================================================== */
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1000; font-family: "GenSenRounded", sans-serif; letter-spacing: 0.09em; opacity: 0; animation: headerFadeIn 1s ease-out 1.5s forwards; }
@keyframes headerFadeIn { to { opacity: 1; } }
.headers { max-width: 1200px; margin: 0 auto; padding: 15px 50px; display: flex; justify-content: space-between; align-items: center; }
.left { display: flex; align-items: center; gap: 20px; }
.logo { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.myname { display: flex; flex-direction: column; text-decoration: none; color: #fff; font-weight: 100; transform: scaleX(1.12); }
nav ul { display: flex; list-style: none; gap: 40px; transform: scaleX(1.12); }
nav a { text-decoration: none; color: #fff; font-weight: 100; transition: color 0.3s; }
nav a:hover { color: #06f; }

/* =================================================== */
/* 4. 互動鼠標與變形魔法 (Cursor & Morphing) */
/* =================================================== */
.cursor-wrapper { position: fixed; top: 0; left: 0; width: 36px; height: 36px; pointer-events: none; z-index: 999999 !important; opacity: 0; mix-blend-mode: difference; transition: opacity 0.3s ease; }
body:not(.loading) .cursor-wrapper { opacity: 1; }
.cursor-blink { width: 100%; height: 100%; transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cursor-eye { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 80% 0; transform: rotate(45deg); display: flex; align-items: center; justify-content: center; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cursor-pupil { width: 10px; height: 10px; background: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.cursor-wrapper.clicking .cursor-blink { transform: scaleY(0.1); }
.cursor-wrapper.hovering .cursor-eye { transform: rotate(45deg) scale(1.3); }
.cursor-wrapper.hovering .cursor-pupil { transform: scale(1.6); }

/* 鼠標展開箭頭 (Expand Arrow) */
.cursor-pupil-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.3s ease; }
.cursor-wrapper.magnify { mix-blend-mode: normal !important; }
.cursor-wrapper.magnify .cursor-eye { border-radius: 50% !important; transform: rotate(0deg) scale(1.8) !important; background: #fff; border: 3.5px solid #000; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
.cursor-wrapper.magnify .cursor-pupil, .cursor-wrapper.magnify .cursor-eye::after, .cursor-wrapper.magnify .cursor-pupil-arrow::before { display: none; opacity: 0; }
.cursor-wrapper.magnify .cursor-pupil-arrow { opacity: 1; transform: translate(-50%, -50%) scale(1); width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='18' x2='18' y2='6'%3E%3C/line%3E%3Cpolyline points='8 6 18 6 18 16'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain; }

/* =================================================== */
/* 5. 黏性主視覺區塊 (Hero Section) */
/* =================================================== */
.Main { height: 100vh; position: sticky; top: 0; z-index: 1; overflow: hidden; }
.Main-bg-container { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; z-index: 0; transition: transform 0.1s linear; will-change: transform; }
.Main-bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('BGG.JPG') center / cover; filter: blur(5px); }
.main-pic { opacity: 0.6; z-index: 1; }
.ghost-1 { opacity: 0.4; z-index: 2; filter: blur(8px); mix-blend-mode: screen; }
.ghost-2 { opacity: 0.2; z-index: 3; filter: blur(12px); mix-blend-mode: screen; }
.Main-Title, .Main-Design { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; text-align: center; }
.Main-Title { 
    /* 保持你原本的設定 */
    bottom: 50%; 
    font: 36px "TEST", sans-serif; 
    white-space: nowrap; 
    letter-spacing: 0em;  
    line-height: 1; 
    font-weight: 500; 
    margin-bottom: -30px;
    display: inline-block;

    /* 確保置中的基礎定位還在 */
    position: absolute;
    left: 50%;

    /* ========================================== */
    /* ⚠️ 核心修復：把「置中退回一半」和「垂直拉長」寫在同一行！ */
    /* ========================================== */
    transform: translateX(-50%) scaleY(1); 
    
    /* ⚠️ 變形中心點也要改回底部中間，不然字體放大時會往右偏 */
    transform-origin: bottom center; 
}
.Main-Design { bottom: 42%; max-width: 820px; width: 100%; font: 10px "GEN", sans-serif; }
.Main-Design h2, .Main-Design h3 { letter-spacing: 1px; margin-bottom: 0; }

/* =================================================== */
/* 6. 覆蓋層與基礎段落 (Overlay & Sections) */
/* =================================================== */
.overlap-content { position: relative; background: #000; z-index: 10; }
.about { padding: 200px 40px; position: relative; z-index: 10; }
.about-text { text-align: center; max-width: 820px; margin: 0 auto; font-size: 0.8rem; line-height: 1.85; color: #fff; }
footer { background: transparent; color: #555; text-align: center; padding: 80px 20px; }

/* =================================================== */
/* 7. 作品專案區塊 (Works Section) */
/* =================================================== */
.present-layout { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding: 120px 100px; 
  background: #000; 
  position: relative; 
  z-index: 10; 
}

.section-title { 
  font: 100px "NEW", sans-serif; 
  font-weight: 500;
  color: #ffffff !important; 
  margin-bottom: 60px; 
  letter-spacing: 0.09em; 
  
  /* ==================================== */
  /* ⚠️ 終極強制靠左魔法 */
  /* ==================================== */
  text-align: left !important; /* 強制文字在框內靠左 */
  width: 100%;                 /* 強制框框撐滿 100% 寬度，不被外層擠小 */
  display: block;              /* 確保它是獨立的區塊 */
  margin-left: 0 !important;   /* 取消任何可能導致置中的左邊距 */
  align-self: flex-start;      /* 如果外層是 Flex 網格，強制這個標題貼齊最左側！ */
}
.feature-card { 
  position: relative; 
  width: 100%; 
  max-width: 100vw; 
  border-radius: 0; 
  cursor: none !important; 
  z-index: 10; 
  opacity: 0; 
  transform: translateY(40px); 
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); 
}

.feature-card.visible { 
  opacity: 1; 
  transform: translateY(0); 
} 

.feature-card > img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: 0px; 
  object-fit: cover; 
  transition: box-shadow 0.6s ease; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

.feature-card.visible:hover { 
  transform: translateY(0) scale(1.02); 
}

/* =================================================== */
/* 8. 隨動浮窗 (Popup Follower) */
/* =================================================== */
.project-fullscreen-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.3s ease-out; }
.project-fullscreen-popup.active { display: block; opacity: 1; }

.popup-follow-box { position: absolute; background: #111; border: 1px solid #333; width: 620px; height: 350px; border-radius: 15px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.9); }
.popup-img-fullbleed { width: 100%; height: 100%; display: block; object-fit: cover; }

.popup-info-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; }
.popup-info-overlay h3 { font: 1.5rem "GEN", sans-serif; margin-bottom: 3px; letter-spacing: 1px; font-weight: bold;}
.popup-info-overlay p { color: #ccc; font-size: 0.8rem; }


/* =================================================== */
/* 9. Showreel 影片區塊 (Video Section) */
/* =================================================== */

.showreel-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    z-index: 10;
    /* 進場動畫預設狀態：透明且往下掉 40px */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 當 JS 偵測到滑動至畫面時，加上此 class 觸發浮現 */
.showreel-wrapper.visible {
    opacity: 1;
    transform: translateY(0);
}

.showreel-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    background-color: #111; /* 影片載入前的底色 */
    
    /* ⚠️ 極度重要：在影片上方強制喚回原生的系統鼠標，讓使用者可以點擊控制列 */
    cursor: auto !important; 
}

/* =================================================== */
/* 頂級過場：由下往上覆蓋 (Slide-Up) + 景深變暗特效 */
/* =================================================== */

/* 1. 過場黑幕：改由下方準備 */
.transition-curtain {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: #000000; /* 使用純黑，模擬新網頁蓋上來的感覺 */
  z-index: 99999;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 躲在畫面正下方 */
  transform: translateY(100%); 
  /* 絲滑的貝茲曲線，還原影片的物理手感 */
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

/* [離場中]：黑幕從下方滑上來蓋住畫面 */
.transition-curtain.leave-active {
  transform: translateY(0);
}

/* [進場中]：新頁面載入時，黑幕預設蓋住畫面 */
.transition-curtain.enter {
  transform: translateY(0);
  transition: none; 
}

/* [進場完成]：黑幕繼續往上滑走 */
.transition-curtain.exit-to-top {
  transform: translateY(-100%);
}

/* 2. 背景景深變暗特效 (套用在主要內容與 Header 上) */
#page-content, header {
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease;
  transform-origin: top center;
}

/* ⚠️ 魔法在這裡：當觸發跳轉時，將舊畫面微微縮小並變暗 */
body.leaving #page-content,
body.leaving header {
  transform: scale(0.95);
  opacity: 0.3;
}

/* 3. 過場文字特效 */
.curtain-text {
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.transition-curtain.leave-active .curtain-text,
.transition-curtain.enter .curtain-text {
  opacity: 1;
  transition-delay: 0.3s; /* 等黑幕上來一點後再浮現字 */
}

@keyframes curtainUp {
  to { transform: translateY(-100%); } /* 往上飛出畫面 */
}

/* =================================================== */
/* 手機版 Header 導覽列修復 (RWD) */
/* =================================================== */
@media (max-width: 768px) {
    /* 1. 讓原本左右排的容器，變成上下垂直排列 */
    header .headers {
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        padding: 15px 20px; /* 縮小手機版的外距 */
        gap: 15px; /* Logo 和選單之間的距離 */
    }
    
    /* 2. 確保 Logo 和名字置中 */
    header .left {
        justify-content: center;
        width: 100%;
    }

    /* 3. 選單文字置中，並允許太擠時自動換行 */
    header nav ul {
        justify-content: center;
        flex-wrap: wrap; 
        gap: 20px; /* 每個選項之間的距離 */
        padding: 0;
    }
    
    /* 4. 手機版的字體稍微縮小，看起來更精緻 */
    header nav ul li a {
        font-size: 0.9rem; 
    }
    /* ========================================== */
    /* ⚠️ 新增：2. 縮小首頁大標題字體 */
    /* ========================================== */
    .Main-Title, 
    .Main-Title h1 {
        font-size: 16px !important; /* 縮小字體，數字可以視情況調整 (例如 16px 或 18px) */
        white-space: normal; /* 取消強制單行，如果手機太窄允許自動換行 */
        width: 90vw; /* 限制最大寬度，兩側留白 */
        text-align: center; /* 讓多行文字保持置中 */
        line-height: 1.4; /* 換行時字不要全部黏在一起 */
    }
}

/* =================================================== */
/* 點擊切換清晰特效 (Click to Toggle Clear) */
/* =================================================== */

/* 1. 確保所有圖層都有極致平滑的漸變過渡動畫 (0.8秒的優雅過渡) */
.Main-bg-layer {
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease !important; 
}

/* 2. 當加入 is-clear 類別時，殘影優雅淡出 */
.Main-bg-container.is-clear .ghost-1,
.Main-bg-container.is-clear .ghost-2 {
    opacity: 0 !important; 
}

/* 3. 當加入 is-clear 類別時，主圖強制變清晰 */
.Main-bg-container.is-clear .main-pic {
    filter: blur(0px) drop-shadow(0 0 0 rgba(0,0,0,0)) !important; 
    opacity: 1 !important;
}