/* style.css */

/* Preserve scroll position on reload */
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    height: 100%;
}

html.scrolling {
    scroll-behavior: auto;
}

h1 {
    color: tomato; /* 將 h1 標題變成番茄色 */
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #ffffff; /* 將背景變成淺灰色 */
    color: #333;
    height: 100%;

    padding-top: 50px; 
    
}

section {
    padding: 0px 0;
    margin: 0 auto;
    scroll-margin-top: 50px;
    
}

h1, h2, h3 {
    margin-bottom: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Header Styles */
header {
    /* 1. 喺 sticky 同 fixed 之間揀一個，我哋揀 fixed */
    position: fixed; 
    top: 0;
    left: 0; /* 用 fixed positioning 時，最好加埋 left: 0 */
    
    /* 2. 將 100vw 改成 100% */
    width: 100%; 

    z-index: 100;
    height: 50px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    margin-bottom: 0;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    
    margin: 0 auto;
    flex: 1;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
    font-size: 16px;
}

.nav-links a:hover {
    color: tomato;
}

.hero {
    position: relative; /* 必須！令子元素可以用 absolute 相對於佢定位 */
    overflow: hidden;   /* 建議！防止圖片邊緣溢出 */

    /* background 相關嘅屬性全部移除 */
    
    /* 其他樣式保持不變 */
    color: white;
    text-align: center;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}

/* 2. 新增 hero-background-image 的樣式 */
.hero-background-image {
    position: absolute;   /* 絕對定位，脫離文檔流 */
    top: 0;
    left: 0;
    width: 100%;          /* 闊度同高度都係 100%，填滿 .hero 容器 */
    height: 100%;
    object-fit: cover;    /* 呢個就係 img 版本的 background-size: cover */
    object-position: center; /* 呢個係 img 版本的 background-position: center */
    z-index: -2;          /* 將佢層級壓到最低，喺所有內容嘅後面 */
}

/* 3. 用「偽元素」加返個漸層顏色遮罩 */
.hero::before {
    content: '';          /* 偽元素必須有 content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    z-index: -1;          /* 確保遮罩喺圖片之上，但喺文字內容之下 */
}

.hero-pointBG{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填滿整個區域 */
    opacity: 0; /* 預設唔顯示 */
    pointer-events: none; /* 唔會影響滑鼠事件 */
}

.hero-pointBG.show {
    opacity: 50%;
}

.hero-pointBG.mouse-follow {
    mask: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);
    -webkit-mask: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);
}

.hero-content{
    position: absolute;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    width: 800px;
    height: 200px; 
}

.hero-arrow{
    
    position: absolute;
    bottom: 10%;
    height: 5%; 
}

.hero-htmlText{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    

    position: absolute;
    right: 0px;
    bottom: 10px;
}

.hero-htmlText p{
    background: #383838;
    color: #fff;
    font-family: 'Lexend Exa', Arial, sans-serif;
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    z-index: 1;
    margin-bottom: 10%;
    padding: 8px 16px;
    height: 75px;
    display: flex;
    align-items: center;
    width: fit-content;
    align-self: self-end;
    
}

.full-width-text {
    display: flex;
    justify-content: space-between;
    width: 100%;
   
  }

.hero-upText{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: -30px;
}

.hero-mainText{
    font-size: 140px;
    font-weight: 900;
}

.hero-buttomText{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5em;
    margin-top: -30px;
}



/* Graphic Design */
.graphic-design {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 11px 0;
    width: 1200px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.vContainer {
    display: flex;
    flex-direction: column;
    
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 11px 0;
    width: 1200px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* GD Card 1 */
.GD-card-1-color {
    display: flex;
    gap: 10px;
}

.color-square {
    height: 293px;
    width:293px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}

/* GD Card 2 */
.GD-card-2-Banner {
    position: relative;
    width: 1200px;
    height: 393px;
    
    overflow: hidden;
  }

  .GD-card-2-labels {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 2;
  }

  .GD-card-2-label {
    background: #383838;
    color: #fff;
    font-family: 'Lexend Exa', Arial, sans-serif;
    font-weight: 900;
    font-size: 48px;
    line-height: 1;
    z-index: 1;
    margin-bottom: 11px;
    padding: 8px 16px;
    height: 93px;
    display: flex;
    align-items: center;
    width: fit-content;
    align-self: flex-start;
  }

  
  .GD-card-2-image {
    position: absolute;
    top: 0;
    right: 0px;
    width: 999px;
    height: 393px;
    
    z-index: 1;
    object-fit: cover;
}

/* GD Card 3 */
.GD-card-3-logo{
    position: relative;
    width: 1200px;
    height: 395px;
    display: flex;
    gap: 11px;
    overflow: hidden;
}

/* GD Card 4 */
.GD-card-4-CardDesign{
    position: relative;
    background: #00AFB9;
    width: 1200px;
    height: 599px;
    overflow: hidden;
    perspective: 800px; /* Add perspective for 3D tilt */
}

.GD-card-4-cardDesignText{
    position: absolute;
    top: 38px;
    left: 63px;
}

.GD-card-4-cardImageGroup{
    position: absolute;
    top: 95px;
    left: 245px;

    width: 712px;
    height: 436px;

    display: flex;
    flex-direction: row;
    justify-content:space-between;

    perspective: 2000px;
}
.GD-card-4-cardImage{
    width: 312px;
    height: 436px;
}

.GD-card-4-HoverToTilt{
    position: absolute;
    bottom: 30px;
    right: 15px;

 
    transform-style: preserve-3d;
    animation: hoverToTiltRotateSmooth 4s ease-in-out infinite alternate;  
    transform-origin: 50% 50%;
   
}

.GD-card-4-labelFront,.GD-card-4-labelBack{
    background-color: #383838;
    color:#fff;
    font-family:'Lexend Exa',Arial, sans-serif;
    font-size:36PX ;
    font-weight: 800;
    padding:0px 16px
 }

.GD-card-4-labelFront{
    position: absolute;
    top: 230px;
    left: 980px;
}

.GD-card-4-labelBack{
    position: absolute;
    top: 230px;
    left: 80px;
}

.GD-card-4-tilt {
    transition: transform 0.2s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
}

.GD-card-4-tilt:hover {
    /* Define transition only when hovered, for smoother exit if JS stops controlling it */
    transition: transform 0.2s cubic-bezier(.25,.8,.25,1);
}

/* GD Card 5 */
.GD-card-5-Mockup{
    position: relative;
    width: 1200px;
    height: 494px;
    display: flex;
    flex-direction: row;
    gap: 11px;
    overflow: hidden;
}

.GD-card-5-video{
    width: 700px;
    height: 494px;
}

.fillFrame
{
    flex: 1 1 0%;
    min-width: 0px;
    min-height: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* GD poster  */
.GD-poster{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 1200px;
    gap: 11px;
    margin: 0 auto;

    overflow: hidden;
}

/* GD poster card */
.GD-poster-card{
    background-color: #737373;
    position: relative;
    width: 1200px;
    height: 1296px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.GD-poster-card-image0{
    position: relative;
    width: 608px;
    height: 193px;
    margin-bottom: 25px;
}

.GD-poster-card-image1{
    position: relative;
    width: 826px;
    height: 480px;
    margin-bottom: 25px;
}

.GD-poster-card-image2{
    position: relative;
    width: 483px;
    height: 483px;
    margin-right: 40px;
}

.GD-poster-card-image3{
    position: relative;
    width: 302px;
    height: 483px;
}

.GD-poster-card-image0,
.GD-poster-card-image1,
.GD-poster-card-image2,
.GD-poster-card-image3,
.GD-poster-burger1,
.GD-poster-burger2,
.GD-poster-goods1,
.GD-poster-goods2{
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
   
}

.GD-poster-card-images-row {
    display: flex;
    justify-content: center;
    width: 100%;
}

.GD-poster-madeinFigma {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    transform: translateX(-355px);
}

.GD-poster-card-PosterText {
    position: absolute;
    left: 0;
    top: 950px;
}

/* GD poster Burger */
.GD-poster-burger{
    background-color: #FFA159;
    position: relative;
    width: 1200px;
    height: 494px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px;
    border-radius: 30px;
    overflow: hidden;
}

.GD-poster-burger1{
    position: relative;
    width: 602px;
    height: 339px;
    margin-right: 50px;
    z-index: 2;
    
}

.GD-poster-burger2{
    position: relative;
    width: 339px;
    height: 339px;
    z-index: 2;
}

.GD-poster-burger-PosterText{
    position: absolute;
    left: 0;
    top: -340px;
}

.GD-poster-burger-madeinFigma{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    transform: translate(435px,-30px);
}

.GD-poster-burger-PhotoFromInternet{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    margin-top: 10px;
    transform: translateX(45px);
    align-self: flex-start;
    letter-spacing: 0.30em;
}

/* GD poster Goods */
.GD-poster-goods{
    background-color: #E15675;
    position: relative;
    width: 1200px;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px;
    border-radius: 30px;
    overflow: hidden;
}

.GD-poster-goods1{
    position: relative;
    width: 520px;
    height: 370px;
    margin-right: 75px;
    z-index: 2;
    align-self: flex-end;
}

.GD-poster-goods2{
    position: relative;
    width: 340px;
    height: 480px;
    z-index: 2;
}

.GD-poster-goods-PosterText{
    position: absolute;
    left: 0;
    top: -20px;

    opacity: 0.5;
}

.GD-poster-goods-madeinFigma{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    transform: translate(-72px,-30px);
    align-self: flex-end;
}

.GD-poster-goods-PhotoFromInternet{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    margin-top: 10px;
    transform: translateX(72px);
    align-self: flex-start;
    letter-spacing: 0.30em;
}
/* GD icons */
.GD-icons{
    position: relative;
    height: fit-content ;
    
    min-width: 1200px;
    display: flex;
    flex-direction: row;
    gap: 11px;
    margin-bottom: 11px;
}



.GD-icon-frame{
   
    height: 292px;
    width: 292px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.GD-iconsBG{
    border-radius: 30px;
    
    position: absolute;

}

.GD-icon-image-IceCream{
    position: relative;
    z-index: 2;
    margin-top:-10px;
}

.GD-icon-image-iconDrick{
    position: relative;
    z-index: 2;
    margin-top:10px;
}
.GD-icon-image-iconFries{
    position: relative;
    z-index: 2;
    margin-top:10px;
}
.GD-icon-image-iconBurger{
    position: relative;
    z-index: 2;
    margin-top:22px;
}

.GD-ican-title-BG{
    position: relative;
    background-image: url('../images/graphic_design/iconTitleBG.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 1200px;
    height: 292px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.GD-ican-title-iconText{
    margin-top: 20px;
    transform: translate(0, +5px);
}

.GD-ican-title-DrawnInFigma{
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size:22px;
    color: #828282;
    margin-top: 12px;
    transform: translate(-4px , 0);
    letter-spacing: 0.1em;
    display: block;
}

/* GD Gradents */
.GD-gradents{
    background-color: #3f3f3f;
    width: 1200px;
    height: 292px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -10px; 
}

.GD-gradents-title{
    font-family: 'Lexend Deca', sans-serif;
    font-size: 96px;
    font-weight: 600;
    background-image: linear-gradient(to right, #79ED30, #30BBED);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.GD-gradents-subtitle{
    font-family: 'Lexend Deca', sans-serif;
    font-size: 36px;
    font-weight: 600;
    color: #A0A0A0;
    margin-top: -30px;
}

/* GD Gradent Layout */
.GD-gradent-layout{
    background-color: #3f3f3f;
    width: 1200px;
    height: 493px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content:center ;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.GD-layout-text-image{
    position: absolute;
    left: -10px;
    height: 382px;
    width: auto;

}

.GD-layout-cards-image-container{
    display: flex;
    gap: 60px;
}

.GD-layout-card-image{
    width: 382px;
    height: 382px;
    object-fit: cover;
}

.GD-layout-madeinFigma{
    position: absolute;
    bottom: 15px;
    right: 30px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #A0A0A0;
}

/* GD Gradent color */
.GD-gradent-color{
    display: flex;
    flex-direction: row;
    gap: 11px;
}

.GD-gradent-color-image{
    width: 595px;
    height: 595px;
    object-fit: cover;
    border-radius: 30px;

}

.GD-gradent-ownGradent{
    background-image: url('../images/graphic_design/ownGradentBG.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 1200px;
    height: 600px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    margin-top: 11px;
}

.GD-ownGradent-rectangle{
    position: absolute;
    background-color: white; 
    width: 5px; 
    top: 0px; 
    bottom: 435px; 
    left: 50px; 
}

.GD-ownGradent-text-make-your-own{
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #ffffff;
    line-height: 1;
    position: absolute;
    top: 50px;
    left: 72px;
    text-align: left;
}

.GD-ownGradent-text-gradient{
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 700;
    font-size: 96px;
    color: #ffffff;
    position: absolute;
    bottom: 100px;
    left: 50px;
}

.GD-ownGradent-text-colors{
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    bottom: 80px;
    left: 50px;
    white-space: pre;
}

.GD-ownGradent-madein{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #828282;
    position: absolute;
    bottom: 15px;
    right: 30px;
}

/*Illustration*/
.Illustration{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 11px;
    
    
    width: 1200px;
}

.Illu-title{
    width: 1200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Illu-title-text{
    font-family: 'Inter', sans-serif;
    font-size: 157px;
    color :#A1F3F5;
    font-weight: 900;
}

.illu{
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 1200px;
    max-width: 1200px;
}

.illu-1-16fr{
    flex: 16 1 0%; /* flex-grow, flex-shrink, flex-basis */
    height: 414px;
    object-fit: cover;
}

.illu-1-9fr{
    flex: 9 1 0%; /* flex-grow, flex-shrink, flex-basis */
    height: 414px;
    object-fit: cover;
}

.Background{
    background-color: #333;
    border-radius: 30px;
}

.Background_title{
    font-size: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #ABABAB;
}

.Background_subtitle{
    font-size: 22px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: #8A8A8A;
    margin-top: -30px;
    margin-bottom: 20px; 
}

.illuBG{
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 1120px;
    max-width: 1120px;
}

.illu-1-BGfill{
    
    width: 1120px;
    height: 504px;
    object-fit: cover;
}

.illu-1-BGHalf{
    flex: 1 1 0%; /* flex-grow, flex-shrink, flex-basis */
    height: 250px;
    object-fit: cover;
}

.space{
    height: 50px;
}

/*3D*/
._3DArt{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 11px 0;

    width: 1200px;
}

._3DArt_title{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 100px;
    color: #696969;
}

._3DArt_subtitle{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #696969;
    margin-top: -20px;
    margin-bottom: 30px;
}

._3D-3girl{
    flex: 7 1 0%;
    background-color: #30BBED;
    height: 620px;
    object-fit: cover;
    border-radius: 30px;
}

._3D-catGirl{
    flex: 3 1 0%;
    background-color: #30BBED;
    height: 620px;
    object-fit: cover;
    border-radius: 30px;
}

._3D-square{
    flex: 1 1 0%;
    background-color: #30BBED;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 30px;
    min-width: 0; /* Allow the image to shrink */
}

._3D_3DEffect{
    display: flex;
    flex-direction: row;
    height: 575px;
    gap: 11px;


    width: 1200px;
    max-width: 1200px;
}

._3D-3DEffectLeftTop{
    flex: 1 1 0%;
    object-fit: cover;
    border-radius: 30px;
    max-width: 100%; /* Add this to ensure it shrinks */ 
    min-height: 0px;
}

._3D-3DEffectLeftBottomSquare{
    flex: 1 1 0%;
    background-color: #30BBED;
    object-fit: cover;
    border-radius: 30px;
    min-width: 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.media-fit-container{
    flex: 1 1 0%;
    min-width: 0px;
    min-height: 0px;
    border-radius: 30px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
    height: auto; /* Override height to let aspect-ratio take control */
}

._3D-3DEffectLeftBottom{
    flex: 1 1 0%;
    object-fit: cover;

    display: flex;
    flex-direction: row;
    gap: 11px;
}

._3D-3DEffectLeft{
    flex: 1 1 0%;
    height: 575px;
    object-fit: cover;
    border-radius: 30px;

    display: flex;
    flex-direction: column;
    gap: 11px;
}

._3D_Character{
    display: flex;
    flex-direction: row;
    width: 1200px;
    height: 440px; 
    gap: 11px;
}

._3D_CharacterUV{
    flex: 1 1 0%;
    height: 440px;
    
}

._3D_CharacterModel{
    width: 330px;
    height: 440px;  
}

._3D_Building{
    width:1200px;
    height:575px;  
}

/* Effect */

/* 定義初始狀態：向上移動 50px 且完全透明 */
.scrollAppearEffect {
    opacity: 0; /* 完全透明 */
    transform: translateY(50px); /* 向上移動 50px */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out; /* 定義過渡動畫 */
    will-change: opacity, transform; /* 最佳化動畫效能 */
}

/* 定義觸發後狀態：回到原位且完全顯示 */
.scrollAppearEffect.is-visible {
    opacity: 1; /* 完全顯示 */
    transform: translateY(0); /* 回到原位 */
}


@keyframes hoverToTiltRotateSmooth {
    0% {
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    20% {
      transform: perspective(1000px) rotateX(10deg) rotateY(5deg) rotateZ(3deg); /* 微傾斜向下右並帶一點Z軸旋轉 */
    }
    40% {
      transform: perspective(1000px) rotateX(-10deg) rotateY(-5deg) rotateZ(-3deg); /* 微傾斜向上左並帶一點Z軸旋轉 */
    }
    60% {
      transform: perspective(1000px) rotateX(5deg) rotateY(10deg) rotateZ(2deg); /* 微傾斜向下右並帶一點Z軸旋轉 */
    }
    80% {
      transform: perspective(1000px) rotateX(-5deg) rotateY(-10deg) rotateZ(-2deg); /* 微傾斜向上左並帶一點Z軸旋轉 */
    }
    100% {
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
  }





/*Game*/

.GameHero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
}



.GameHero-title {
    font-size: 72px;
    font-weight: 700;
    margin-top: 150px;
    margin-bottom: 0px;
    color: #333333;
    font-family: 'Inter', sans-serif;
}

.GameHero-content {
    width: 1200px;
    display: flex;
    align-items: center;
    position: relative; /* For the background shape */
}

.GameHero-text {
    position: absolute;
    left: 120px;
    margin-bottom: 60px;

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 400px;
    z-index: 2; /* Ensure text is above background shape */
}

.GameHero-logo {
    max-width: 500px;
    align-self: flex-start;
}

.GameHero-about h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

.GameHero-about p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    font-family: 'Lexend Deca', sans-serif;
}

.GameHero-image {
    width: 1200px;  
    z-index: 1; /* Ensure image is above background shape */
}
 


.game_section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    width: 1200px;
    
    height: 720px;
    margin-bottom: 10px;
}

.gameTrailerText{   
   font-family: 'Inter', sans-serif;
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 10px;
}

.gameTrailerVideo{
    width: 1000px;
}


.tech-item {
    display: flex; /* This enables Flexbox */
    align-items: center; /* Vertically aligns content to the center */
    gap: 50px; /* Creates space between the image and text */
    margin-bottom: 30px; /* Space between each row */
    padding: 12px;
    border-radius: 30px;
    max-width: 1200px;
    background-color: #fafafa;
}

.tech-item:nth-child(even) {
    flex-direction: row-reverse; /* Flips the order of image and text */
}

.tech-showcase {
    position: relative; /* Establish a positioning context */
}

.tech-showcase__title{
    position: absolute; /* This is now a positioning context for its ::before */
    top: 20px;
    left: 50px;

    /* Styling for the text */
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #6e6e6e;
    
    padding-left: 24px; /* Space for the pseudo-element bar */
    margin-bottom: 30px; /* Space between title and the items below */
}

.tech-showcase__title::before{
    content: '';
    position: absolute;
    
    /* The new vertical bar */
    width: 8px;
    background-color: #6e6e6e;

    /* Positioning the bar */
    left: 0;
    bottom: 10px; /* Align to the bottom of the text */
    top: -20px; /* Extend 10px above the text */
}

.tech-item__content
{
    display: flex;
    flex-direction: column;

    flex: 1;
    padding: 40px;
    justify-content: center;
    align-items: start;
}

.tech-item_video_area{
    display: flex;
    flex-direction: row;
    gap: 10px; /* Add space between videos */
    width: 100%;
    height: 100%;
}

.tech-item_video_area video {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

.tech-item__image {
    display: flex;
    flex: 1; /* Each child will take up equal space */
    min-width: 60%;
    justify-content: center;
    align-items: center;
}

.portfolio-end-marker {
    text-align: center;
    font-family: 'Inter', sans-serif;
    margin-top: 150px;
    margin-bottom: 100px;
    color: #888;
    font-weight: 500;
}






/* ================================================= */
/* AI Carousel - 最終修正版 CSS             */
/* ================================================= */

.AIGen{
    margin-top: 150px;
}

/* 外層總容器：負責置中和放置箭頭 */
.animal-carousel-container {
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    max-width: 1230px; 
    margin: 30px auto;
}

/* 1. 觀景窗 (Viewport)：固定的窗口，負責「剪裁」 */
.carousel-viewport {
    width: 1100px;
    max-width: 1100px;
    height: auto; /* 高度自動 */
    overflow: hidden; /* 關鍵：只顯示這個窗口內的內容 */
}

/* 2. 移動軌道 (Wrapper)：會被 JS 移動的長帶，負責「排列」 */
.slides-wrapper {
    display: flex; 
    /* ▼▼▼ 修改這兩行 ▼▼▼ */
    transition-property: transform;
    transition-duration: 0.6s; /* 把動畫時間稍微拉長一點 */
    transition-timing-function: ease-out; /* 使用 ease-out 曲線，模擬減速效果 */
}

/* 3. 投影片 (Slide)：單張卡片，負責「內容」 */
.ai-carousel-slide {
    width: 1000px;     /* 明確設定每張投影片的寬度 */
    flex-shrink: 0;   /* 防止投影片被壓縮 */
    
    /* 解決渲染問題的技巧 */
    transform: translateZ(0); 
    
    /* 其他樣式 */
    display: flex;
    flex-direction: column;
    align-items: center;

    
}

/* 投影片內的網格：保持正方形並放置圖片 */
.animal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 800px;
    background-color: #ffffff;
    border-radius: 8px;
    
}

.animal-grid img {
    width: 100%;
    max-height:260px;        /* <<< 關鍵：將固定的高度 (例如 250px) 改回 auto */
    object-fit: contain; /* object-fit 在此作用不大，但可以保留 */
    border-radius: 4px;
}

/* 左右箭頭的樣式 */
.carousel-arrow {
    position: absolute;   /* <<< 關鍵改動：從普通元素變為絕對定位 */
    top: 50%;             /* <<< 新增：讓箭頭的頂部從容器中間開始 */
    
    /* 其他樣式 */
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 10;
    /* margin: 0 15px; */ /* 絕對定位後，margin 不再需要，可以移除 */
}
.carousel-arrow.left-arrow {
    left: 0; /* <<< 新增：將箭頭定位在容器的最左邊 */
    
    /* 結合垂直置中和水平翻轉 */
    transform: translateY(-50%) scaleX(-1); 
}

/* 右箭頭樣式 */
.carousel-arrow.right-arrow {
    right: 0; /* <<< 新增：將箭頭定位在容器的最右邊 */
    
    /* 只有垂直置中 */
    transform: translateY(-50%);
}

/* (以下是你原有的標題和字幕樣式，它們是正確的，保持不變) */
.ai-gen-caption {
    display: flex;
    align-items: flex-start; 
    margin-top: 25px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}
.caption-bar {
    width: 6px;
    min-height: 62px; 
    background-color: #D8D8D8;
    margin-right: 12px;
    margin-top: 3px; 
}
.caption-title {
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    margin-bottom: 4px;
}
.caption-subtitle {
    font-size: 18px;
    color: #555555;
}

.AIGen_title {
  text-align: center;
  font-size: 96px;
  font-weight: 900;
  font-family: 'Lexend Deca', 'Inter', Arial, sans-serif;
  color: #6c757d;
  margin-bottom: 72px;
  letter-spacing: 0.04em;
  width: 1200px;
}

@media (max-width: 1200px) {
    header {
        height: 120px;
    }

    section {
        scroll-margin-top: 120px;
    }

    body {
        padding-top: 0px; 
    }

    .hero {     
        height: calc(100vh - 120px);      
    } 
    
    .hero-arrow{   
        bottom: 20%;
        height: 4%; 
    }

    .hero-htmlText p{
     
        margin-bottom: 10%;
        
        
    }

    nav {
        min-height: 70px;
        font-size: 24px;
    }

    .logo h1 {
        font-size: 1.7em;
    }
    .nav-links a {
        font-size: 24px;
    }

    .nav-links li {
        margin-left: 40px;
    }

    h3{
        font-size: 30px;
    }

    p{
        font-size: 24px;
    }

    .GameHero-about{
        margin-bottom: 120px;
    }

    .GameHero-about h3{
        font-size: 30px;
    }

    .GameHero-about p{
        font-size: 24px;
    }
}

