.title, .description {
    margin-top: 5vh; /* 讓整體往下移 5% 的視窗高度 */
}


.title {
    font-family: "Gloock", "Mincho";
    font-size: 6vw;
    position: absolute;
    transform: translate(-50%, -50%); 	
    text-align: center;
    width: 100vw;
    height: 100vh;
    left: 50%;
    top: 120%;
    color: rgba(40, 200, 160, .8);		
    opacity: 0;
	z-index:10;
    mix-blend-mode: darken;		
    transition: all 1.5s ease-in-out .5s;	
}


.title.show {
    opacity: 1;
}

.title.lang-en::before {
    content: "Vision of Decade";	
    text-transform: uppercase;
    letter-spacing: .7vw;	
	
}

.title.lang-zh::before {
    font-size: 6vw;	
	font-weight: 900;
    content: "跡軌存影";	
    letter-spacing: 5vw;	
}

.title.lang-zh {
    padding-left: 7%; /* 調整以適應中文的字符寬度 */
    padding-bottom: 2%; 	
}
	
.description {
    font-family: "M PLUS 2";
    font-size: 1vw;	
    position: absolute;
	text-transform: lowercase;		
    color: rgba(100, 100, 100, .7);		
	mix-blend-mode:darken;
	transform: translate(0%, 82%);	
    text-align: center;
    width: 100vw;
    height: 100vh;
	z-index:11;	
    opacity: 0;	
	display: inline-block;
    transition: all 1.5s ease-in-out .5s;		
}

.description.show {
    opacity: 1;
}

.description.lang-en::before{
    content: "Curated selection of photoshoots / graphics design works";	
    letter-spacing: 40%;
}

.description.lang-zh::before{
    content: "細選的攝影、平面印象集";	
    letter-spacing: 120%;
}

.description.lang-zh {
    padding-left: 3%; /* 調整以適應中文的字符寬度 */
	margin-top:3%;
}

.ph-entrance{
    width: 25vw;
    height: 80vh;
	background: rgba(200,200,200,0.2);
	background-size: 1% 1%, cover;
    background-position: 50% 50%;
    display: inline-block;
    position: absolute;
    margin: 0% 20%;
    z-index: 15;
    opacity: 0;
    display: block;	
    transform: translateY(-50px); /* 上移 50px，之後動畫讓它移回原位 */
    transition: all 1.5s ease-in-out .5s;	
}


.thumb.ph{
    width: 54vw;
    height: 50vh;
    margin: 20% -90%;
	border: 1.5vh solid rgba(250,250,250,1);
	background: url(../img/overlays/05g.png), url(../img/showcase-title-1.jpg);
	background-size: auto 1%, cover;
	background-blend-mode: multiply;
	background-position: 10% 30%;
	filter: contrast(0.70) brightness(1.2) grayscale(100%) sepia(0%);
	transition: all .5s ease-in-out .5s;	
}

/* 加入 active 類時觸發動畫 */
.ph-entrance.show, .gd-entrance.show {
    opacity: 1;
    transform: translateY(0);
	display: block;	
}

.gd-entrance{
	width: 30vw;
	height: 50vh;
	background: rgba(200,200,200,0.2);
	background-size: 1% 1%, cover;
	background-position: 50% 50%;			
	display: inline-block;
	position: absolute;	
	margin: 10% 52%;
	z-index:10;
    opacity: 0;	
    display: block;	
    transform: translateY(50px); /* 上移 50px，之後動畫讓它移回原位 */
    transition: all 1.5s ease-in-out .5s;		
}


.thumb.gd{
    width: 45vw;
    height: 30vh;
    margin: 10% 40%;
	border: 1.5vh solid rgba(250,250,250,1);
	background: url(../img/overlays/05g.png), url(../img/showcase-title-2.jpg);
	background-size: auto 2%, cover;
	background-blend-mode: multiply;
	background-position: 30% 50%;
	filter: contrast(0.70) brightness(1.3) grayscale(100%) sepia(0%);
	transition: all .5s ease-in-out .5s;	
}


body:has(.thumb.ph:hover) .ph-entrance, body:has(.thumb.gd:hover) .gd-entrance:hover, body:has(.arrow.show.left:hover) .ph-entrance, body:has(.arrow.show.right:hover) .gd-entrance{
	background: rgba(40,200,160,.15);
    transition: all 1s ease-in-out .5s;			
}

.photography{
	width:100vw;
	left:-100vw;
    transition: all 1.5s ease-in-out .5s;	
}

.graphics-design{
	width:100vw;
	right:-100vw;
	background: rgba(20,40,60,1);	
    transition: all 1.5s ease-in-out .5s;		
	display:none;
}

.home{
    position: relative;
    width: 100vw;
    height: 100vh;	
	overflow:hidden;
}

html, body {
    height: 100vh;
    overflow: hidden; /* 預設隱藏滾動 */
    transition: height 0.5s ease-in-out; /* 平滑過渡 */
}

#sections {
    height: auto;
    width: 300vw;  /* 調整為三倍寬度，因為有三個 section 並排 */
    display: flex;  /* 使用 Flexbox 來排列子元素 */
    align-items: flex-start; /* 加入這一行 */	
    transition: all 0.5s ease-in-out;
    margin-left: -100vw; /* 預設從左側開始顯示 */
}

.section {
    width: 100vw;
    height: 100vh; /* 固定高度為視窗高度 */
    overflow-y: auto; /* 內容過長時內部滾動 */
}

.section.home {	
	overflow:hidden;
}

.section.design {		
	overflow-x:hidden;
}

.section.photography {		
	overflow-x:hidden;
}

.arrow{
	font-family: "M PLUS 2" !important; 	
	cursor:pointer;
    opacity: 0;  /* 初始隱藏 */
    transition: opacity 1s ease-in-out 1s; /* 淡入動畫 */	
}

.arrow.show {
	font-family: "M PLUS 2" !important; 
    opacity: 1; /* 顯示 */
}

.arrow.show.left {
    font-family: "M PLUS 2" !important; 	
    transform: translateX(0vw);	
}

.arrow.show.right {
    font-family: "M PLUS 2" !important; 
    transform: translateX(0vw);	
}

.arrow.left{
    font-family: "M PLUS 2" !important; 
	font-size: 20vw;
	color:rgba(100,100,100,.5);	
    position: absolute;
    top: 0%; 
    left: 5%;
	z-index:80;
    transform: translateX(2vw);	
    transition: all .5s ease-in-out;	
	position:fixed;
}

.arrow.left:hover{
    font-family: "M PLUS 2" !important; 
	color:rgba(40,200,160,.8);
    opacity: 1 !important; 		
    transform: translateX(-25%);
	mix-blend-mode:darken;	
    transition: all .5s ease-in-out;	
}

.arrow.right{
    font-family: "M PLUS 2" !important; 
	font-size: 20vw;
	color:rgba(200,200,200,.5);
    position: absolute;
    top: 30%; 
    right: 5%;
	z-index:80;	
    transform: translateX(-2vw);		
    transition: all .5s ease-in-out;
	position:fixed;	
}

.arrow.right:hover{
    font-family: "M PLUS 2" !important; 
	color:rgba(40,200,160,.8);
    opacity: 1 !important; 		
    transform: translateX(25%);	
	mix-blend-mode:darken;		
    transition: all .5s ease-in-out;		
}

.subtitle.photography {
	position: relative;
	color: rgba(40,200,160,.8);
	font-family: "Gloock", "Mincho";
	font-size: 7vw;
	text-transform: uppercase;
	left: -1vw;
	top: 55vh;
	text-align:left;	
	letter-spacing: 1.5vw;
}

.subtitle.photography.lang-zh {
	position: relative;	
	font-size: 12vw;
	font-weight: 700;
	left: -2vw;
	top: 52vh;	
	letter-spacing: 15vw;
	padding-bottom: 2.35vh;	
}


.subtitle.design {
	position: relative;
	color: rgba(40,200,160,.8);
	font-family: "Gloock", "Mincho";
	font-size: 7vw;
	text-transform: uppercase;
	left: 2.5vw;
	top: 55vh;
	text-align:right;	
	letter-spacing: 1.5vw;
}

.subtitle.design.lang-zh {
	position: relative;	
	font-size: 12vw;
	font-weight: 700;
	left: 52vw;
	top: 52vh;	
	letter-spacing: 1vw;
	padding-bottom: 2.35vh;
}

.album{
	width:100vw;
	height:100vh;
	top:100vh;
	background:rgba(100,100,100,.1);
    position: relative;
    display: flex;
    justify-content: center;	
    align-items: center;
    flex-direction: column;	
}

.design.name{
    font-family: "Mincho";
    font-size: 1vw;
	text-transform:uppercase;
	letter-spacing:.3vw;
	margin-top:66vh;
	font-weight:900;
	color:rgba(100,100,100,.9);
}	

#design-name-1-en::before{
	content:"The Year of Tiger: Glorious Reappearance";
}	

#design-name-1-zh::before{
	font-size: 1.5vw;
	font-weight:500;
	content:"壬寅虎‧輝煌再現";
}	

#design-name-2-en::before{
	content:"ICBC Macau, Fortune+";
}	

#design-name-2-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"工銀澳門—臻享+";
}

#design-name-3-en::before{
	content:"ICBC Macau, Payroll Service";
}	

#design-name-3-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"工銀澳門—薪管家";
}

#design-name-4-en::before{
	content:"ICBC Macau, Payroll Card Series";
}	

#design-name-4-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"工銀澳門—薪金卡系列";
}

#design-name-5-en::before{
	content:"ICBC Macau, GBA Credit Card Envelope (20th Anniversary of Macau SAR)";
}	

#design-name-5-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"工銀澳門—大灣區信用卡封套（回歸二十周年紀念版）";
}

#design-name-6-en::before{
	content:"Macau International Airport, MacauPass (20th Anniversary of Macau SAR)";
}	

#design-name-6-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"澳門國際機場—澳門通卡（回歸二十周年紀念版）";
}

#design-name-7-en::before{
	content:"Macau International Airport, Parking Privilege Series";
}	

#design-name-7-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"澳門國際機場—泊車優惠系列";
}

#design-name-8-en::before{
	content:"BCM, Investment Services Rewards Program";
}	

#design-name-8-zh::before{
	font-size: 1.5vw;
	font-weight:500;	
	content:"澳門商業銀行—投資交易推廣";
}

.album-design {
	margin-top: -35vh;
    display: flex;
    flex-direction: column;
}

.album-photography {
	margin-top: 66vh;
	height:220vh;
    display: flex;
    flex-direction: column;
}

.awards {
	font-family: "M PLUS 2";
	font-size: .8vw;
	font-weight: 400;
	transform: translateY(35%);
	color:rgba(100,100,100,.9);
	text-transform: uppercase;
	letter-spacing: 50%;
	opacity:0;
	transition: all 1s ease-in-out .5s;		
	text-align: center;
}

.awards span{
	font-size: .7vw;
	color: rgba(100,100,100,.6);
	letter-spacing: 10%;		
	display: block;
}
	
#design-name-1-en{
	padding-top: 6vh;
    transition: all 1s ease-in-out .5s;		
}	

#design-name-1-zh{
	padding-top: 9vh;
    transition: all 1s ease-in-out .5s;		
}	
	
.detail .rank{
	font-size: .4vw;
	display: inline;
	outline: .1vw solid rgba(40,200,160,.6);
	border-radius: .3vw;
	padding: .2vw;
	font-weight:700;
	color: rgba(255,255,255,1);
	background: rgba(40,200,160,.6);
	margin: 2vw;
}

.detail {
	margin-top: -5%;
	margin-left:-8%;
	opacity:0;
    transition: all 1s ease-in-out .5s;		
}


.rank .winning{
	font-size: .8vw;
}

body:has(.awards ~ img:hover) .detail, body:has(.awards ~ img:hover) .awards{
	opacity:100;	
	transform:scale(120%);
	margin-top: -8%;	
    transition: all 1s ease-in-out .5s;		
}

body:has(.awards ~ img:hover) #design-name-1-en, body:has(.awards ~ img:hover) #design-name-1-zh{
	opacity:0;
    transition: all 1s ease-in-out .5s;			
}

body:has(.awards ~ img:hover) .awards span{
	margin-top: 1.5%;
}

body:has(.awards ~ img:hover) .awards.lang-en {
	margin-top: -6%;
}

.detail .winning{
	display:inline;	
	font-size: .5vw;	
}

.awards.lang-en::before {
	content:"2023 USDA 'American New Concept Design Art' Winners";
	font-size: .7vw;
	display: block;	
	margin-top:5%;	
}

.awards.lang-zh::before {
	content:"2023 USDA《美國新概念設計藝術獎》獲獎作品";
	display: block;	
	margin-top:5%;		
}

.awards ~ img {
  transform: translateX(440%);
  cursor:help;
  height: 7vh;
  position: absolute;
  top: 80%;
  filter: contrast(0.70) brightness(1.2) grayscale(100%);
  transition: all 1s ease-in-out .5s;
}

.awards ~ img:hover{
	filter: contrast(1.0) brightness(1.0) grayscale(0%);	
    transition: all 1s ease-in-out .5s;		
}

/* 確保 video 滿版顯示 */
.video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例 */
    display: block;
    transition: all 1s ease-in-out .5s;			
}

/* 當 item 8 被 hover 時，隱藏 overlay */
.album:has(.video-item:hover video) .video-item::after {
    background: none !important; /* 移除 overlay */
    pointer-events: none; !important;	
    transition: all 1s ease-in-out .5s;			
}


.item{
    position: absolute;
    width: 80vw;
    height: 60vh;
    background-size: cover;
    background-position: center;
	margin-top: -15vh;
    opacity: 0;
    transition: all 1s ease-in-out .5s;
	filter: contrast(0.80) brightness(1.2);		
    transition: all 1s ease-in-out .5s;		
}

.album:has(.item:hover) .item{
    width: 100vw;
    height: 100vh;	
	margin-top: 0vh;	
    transition: all 1s ease-in-out .5s;	
	filter: contrast(1.00) brightness(1.1);	
    transition: all .5s ease-in-out .5s;		
}
	
.album:has(.item:hover) .dots, .album:has(.item:hover) .dot {
	right: 3vw; 
    transition: all .5s ease-in-out .5s;		
}

body:has(.item:hover) #nav-footer {
	height: 0vh;
	transition: all 1s ease-in-out .5s;		
}

body:has(.item:hover) .awards, body:has(.item:hover) .awards ~ img {
	opacity: 0;
	transition: all .5s ease-in-out .5s;		
}


/* 當前顯示的 Item */
.item.active {
    opacity: 1;
}

/* Overlay 層 */
.item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/overlays/05g.png");
    background-size: auto 0.2%;
}

/* 導航點 (Dots) */
.dots {
    position: absolute;
    right: 8vw; /* 設定在右側 */
    top: 50%;
    transform: translateY(-50%);	
    display: flex;
    gap: 1vh;
    flex-direction: column; /* 改為垂直排列 */
    gap: 10px;	
    transition: all 1s ease-in-out .5s;			
}

/* 每個導覽點 */
.dot {
    width: .7vw;
    height: .7vw;
    background: rgba(180,180,180,.2);
    border-radius: 42%;
    cursor: pointer;	
    transition: all .3s ease-in-out .3s;
}

.dot.active {
    opacity: 1;
	background: rgba(40,200,160,.6);
}

.dot:hover {
    background: rgba(250, 250, 250, 1);
    transition: all .3s ease-in-out .3s;
}


.masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
  grid-auto-flow: dense;
  gap: 1.5vw;
  margin: 10vw;
  margin-top: 20vh;
}

/* 預設圖片大小 */
.masonry-item {
  position: relative;
  overflow: hidden;
  transition: all 1s ease-in-out .5s;
}

.hidden {
  opacity: 0;
  transform: translateY(10vh) rotate(-10deg) scale(0.6);
  transition: all 1s ease-in-out .5s;
}

.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.8s ease-in-out;
}

.masonry-item {
  filter: contrast(1.2) brightness(1.1) grayscale(95%) sepia(10%);
  transition: all 1s ease-in-out;
}

.masonry-item:hover {
  filter: contrast(1.2) brightness(1.2) grayscale(0%) sepia(0%);
  cursor: zoom-in;
}

.masonry-item:hover img {
  transform: scale(1.05);
}

.masonry-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/overlays/05g.png");
  background-size: .1% auto;
}

/* 顯示時的動畫效果 */
.masonry-item:not(.hidden) {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition: all 1s ease-in-out .5s;
}


/* HOVER 時顯示 overlay */
.masonry-item .overlay {
  position: absolute;
  bottom: -100%;
  width: 100%;
  height: 100%;
  padding: .5vw;
  flex-direction: column;
  background: rgba(40, 200, 160, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all .7s ease-in-out;
  opacity: 0;
}

.masonry-item:hover .overlay {
  bottom: 0;
  opacity: 1;
  transition: all .7s ease-in-out; 
}

.overlay-title {
  font-size: 1.2vw;
  font-weight: bold;
  font-family: "Gloock";
  letter-spacing: .2vw;
  margin-bottom: 0vh; /* 标题与描述之间的间距 */
  line-height: 1.2;
  max-width: 80%; /* 防止溢出 */
  text-align:center;
  text-transform:uppercase;
  align-items: center;
  justify-content: center; 
  margin-left:  -1vw;   
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}


/* 标题样式 */
.overlay-title .lang-zh {
  font-size: 2.5vw;
  font-weight: bold;
  text-align:center;
  font-weight: bold;
  font-family: "Mincho";
  letter-spacing: .5vw;
  margin-bottom: 0vh; /* 标题与描述之间的间距 */
  line-height: 1.2;
  white-space: pre-line; 
  text-align:center;
  text-transform:uppercase;
  align-items: center;
  justify-content: center;  
}

/* 新增样式 */
.desc-container {
  font-family:"M PLUS 2";
  display: flex;
  align-items: center;
  justify-content: center;  
  gap: .5vw; /* 图标与文字间距 */
  margin-top: 2vh; /* 与标题的间距 */
  margin-left:  -1.5vw; 
  max-width: 50%;  
  opacity: 0; /* 初始隱藏 */
  transform: translateY(10vh); /* 初始位置 */
  transition: opacity 0.5s ease-in-out 0.3s, transform 0.5s ease-in-out 0.3s;  
}

.fa-location-dot {
  font-size: 1vw; /* 图标大小 */
  transition: all .7s ease-in-out; 
  bottom: -100%;  
  opacity: 1;  
  cursor: pointer; 
}

.fa-location-dot:hover + .overlay-description {
    opacity: 1;
    transform: translateX(0);
}

.overlay-description {
  opacity: 0;
  transform: translateX(5px);  
  font-size: .8vw;
  line-height: 1.5;
  letter-spacing:.1vw;
  bottom: -100%;    
  opacity: 1;
  white-space: pre-wrap; /* 防止換行 */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

}

.overlay {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.masonry-item:hover .overlay {
    opacity: 1;
}

.masonry-item:hover .overlay-title {
    opacity: 1;
    transform: translateY(0);
}

.masonry-item:hover .desc-container {
    opacity: 1;
    transform: translateY(0);
}