@charset "utf-8";
/* CSS Document */

/* nav.css overwrite -------------------------------*/
.title h1 a{
	color:var(--colormid);
}
/*--------------------------------------------------*/

*{
	margin:0;
	padding:0;
}

/* When a filter is active, hide the welcome section to prevent the flash */
body.is-filtered #welcome {
	display: block;
}

#welcome {
	height: 100vh;
	overflow:hidden;
}

#contents {
	display: block; 
	width: 100%;
	min-height: 100vh;
}

#contents.active {
	display: block;
}

.hidden {
	display: none;
}

html {
	scrollbar-gutter: stable;
}

body{
	font-family:var(--mainfont);
	margin: 0;
	box-sizing: border-box;
	background: var(--colordark);

}
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*--------------------------------------------------*/
/* WELCOME PAGE */

.fronttitle{
	position:absolute;
	max-width:50vw; 
	left:clamp(10px,12vw,200px);
	top:clamp(40px,5vh, 60vh);
	z-index:1000;
	animation-name: ant;
	animation-duration: 8s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}


@keyframes ant{
	from { opacity: 0; }
	to { opacity: 1; }
}


.fronttitle h1{
	font-size:4.5em;
	color:var(--colorcontrastbright);
	text-decoration:none;
	line-height: 1em;
	font-family: var(--titlefont);
	font-weight: 250;
	font-style: normal;
}

.fronttitle h2{
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color:var(--whitetheme);
	text-decoration:none;
	font-family: var(--titlefont);
	font-weight: 200;
	font-style: normal;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);*/
}

/* mix-blend-mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity */

.bk-pic {
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100vh + 85px + 5vh);
    overflow: hidden;
    transform: translateY(-85px);
}

.bk-pic::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--colormid);
    mix-blend-mode: overlay;
    opacity: 0.8;
    pointer-events: none;
    z-index: 10;
}

.bk-pic a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 5;
	pointer-events: none;
}

.bk-pic img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-bottom: 5vh;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.bk-pic img.active {
    opacity: 1;
}

.bk-pic a:has(img.active) {
    pointer-events: auto;
}

.project-callout {
    position: fixed;
    z-index: 10001;
    color: var(--whitetheme);
    font-family: var(--mainfont);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1px);
    transition: opacity 0.25s ease;
}

.project-callout.is-visible {
    opacity: 1;
}

.project-callout.is-reversed {
    transform: translate(-100%, -1px);
}

.project-callout-line {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
}

.project-callout-name {
    position: relative;
    display: block;
    margin-left: 34px;
    padding-bottom: 2px;
    transform: translateY(-70%);
    white-space: nowrap;
}

.project-callout.is-reversed .project-callout-name {
    margin-right: 34px;
    margin-left: 0;
    text-align: right;
}

/* Enter button*/
:root {
	--border-weight: 1.5px
}

.enter-button-section {
	display: flex;
	width: 100%;
	justify-content: center;
	z-index: 10000;
	position: absolute;
	bottom: 10vh;
	align-items: center;
}

.enter-button {
	position: absolute;
	text-decoration: none;
	box-sizing: border-box;
	pointer-events: auto;
	background: var(--colorcontrast);

	color: var(--whitetheme);
	padding: 10px 30px;
	border: var(--border-weight) solid transparent;
	border-radius: 10px;

	font-family: var(--titlefont);
	font-weight: 300;
	font-size: 1.5em;
	letter-spacing: 2px;

	opacity: 0;
	animation:
		fadeInUp 1s 1s forwards,
		jump 4s 3s infinite;
	will-change: transform, opacity;
}


@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes jump {
	0%, 83.33%, 100% {
		transform: translateY(0);
		animation-timing-function: ease-in-out;
	}
	8.33% {
		transform: translateY(-5px);
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	}
	16.66% {
		transform: translateY(0);
	}
}

.enter-button:hover {
	background: var(--whitetheme);
	font-weight: 350;
	color: var(--colorcontrast);
	border: var(--border-weight) solid var(--colorcontrast);
	border-radius: 10px;
}


/*--------------------------------------------------*/


/* PROJECT LIST */




#filter-nav{
	width:100%;
	justify-content: flex-start; /* left-align items */
	position: sticky;
	top: 50px; /* below header */
	width: 100%;
	height: auto;
	background: var(--whitetheme);
	z-index: 8000;
	margin: 0;			/* just in case */
	box-sizing: border-box;
	border-bottom:1.2px solid var(--whitetheme);
}

body.lang-zh #filter-nav {
	font-size: 0.85em; /* Scales down body paragraphs slightly for Chinese */
	line-height: 1.715;
}

.filter-nav ul {
	display: flex;
	width: 100%;
	list-style: none;
	margin:0;
	background: var(--colormid);
	justify-content: center;
}

.filter-nav li{
	text-align: center;
	padding: 0px 15px;
	font-size: 0.9em;
}

.filter-nav li a{
	padding: 10px 30px 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--colorcontrast2);
	text-decoration: none;
	border: var(--border-weight) solid var(--colormid);
}

/* Default state: Show English, hide Chinese */
.filter-nav .zh-text {
	display: none;
}
.filter-nav .en-text {
	display: inline;
}

/* When Chinese language mode is active on the body */
body.lang-zh .filter-nav .en-text {
	display: none;
}
body.lang-zh .filter-nav .zh-text {
	display: inline;
}

.filter-nav li a:hover{
	color: var(--whitetheme);
	border: var(--border-weight) solid var(--colorcontrast);
	background: var(--colorcontrast);
}

.filter-nav li.ch_bg a{
	color: var(--whitetheme);
	background: var(--colorcontrast);
	border: var(--border-weight) solid var(--colorcontrast);
}

/*--------------------------------------------------*/

/* section */
#project-list{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap:10px;
	width:100%;
	background: var(--colordark);
	padding:10px;
}

.box{
	display: block;
	width:100%;
	aspect-ratio: 1 / 1;
	box-sizing:border-box;
	color: var(--white80);
	cursor: pointer;
	text-decoration: none;
}

/* PROJECT LIST FADE-IN ANIMATION */
.box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, color 0.2s ease;
    will-change: opacity, transform;
}

.box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.box.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.box:hover{
	color: var(--colorcontrast);
}

.imgbox {
	width: 100%;
	overflow: hidden;
	position: relative; /* REQUIRED for the ::after to stay inside */
	border: 1.2px solid transparent;
}

.box:hover .imgbox{
	border-color: var(--colorcontrast);
}

.imgbox img,
.imgbox video {
	width: 100%;
	aspect-ratio: 1 / 1; 
	object-fit: cover;
	display: block;
	filter: grayscale(100%);
	transition: filter 1s ease, transform 1s ease;
}

.imgbox:hover img,
.imgbox:hover video {
	filter: grayscale(0%);
	transform: scale(1.03);
}

/* COLOR OVERLAY */

.imgbox::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--colordark);
	mix-blend-mode: screen; 
	backdrop-filter: contrast(0.5) brightness(1.0);
	opacity: 0.2;
	pointer-events: none;
	transition: opacity 1s ease;
} 
/* overlay | multiply | screen | color | soft-light */


.imgbox:hover::after {
	opacity: 0; /* Tint fades away */
}


.box h3{
	box-sizing:border-box;
	padding:10px 20px 5px;
	font-size:24px;
	font-weight:400;
	font-family:var(--titlefont);
}

.box p{
	box-sizing:border-box;
	padding:0px 20px;
	color: var(--white50);
}

body.lang-zh .box p{
	font-size: 0.85em;
}

.box:hover p {
	color: var(--whitetheme);
}

.tag {
	font-size: 0.8em;
}

body.lang-zh p.tag{
	font-size: 0.75em;
}

/* iPads / Tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#project-list{
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		padding:0;
		gap:2px;
	}
}

@media only screen and (max-width: 768px) {


/*-----nav.css overwrite-----*/
	.title{
		padding-top: 6px;
	}
/*---------------------------*/

article{
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow-x: hidden;
	}

/* WELCOME PAGE */
	#welcome {
		overflow: hidden;
		position: relative;
		height: 100dvh; 
		width: 100%;
	}

	.bk-pic {
		position: absolute;
		height: 100dvh; 
		transform: translateY(0); /* IMPORTANT: This cancels the -130px desktop shift */
	}


	.bk-pic img {
		padding: 0; /* Remove padding that might push the image */
	}

	.enter-button-section{
		left: 0;
		bottom: 10dvh;
	}





	.fronttitle{
		left:20px;
		top:30px;
	}

	.fronttitle h1{
		font-size:3.1em;
		line-height:1em;
	}

/* PROJECT LIST */
	/* nav bar */
	#filter-nav{
		justify-content: center; /* left-align items */
		top: 40px; /* below header */
		margin: auto;	
	}

	.filter-nav ul {
		margin:auto;
	}


	.filter-nav li{
		padding: 0px 2px;
		font-size: clamp(0.75em, 2vw, 1.5em);
	}

	.filter-nav li a{
		padding: 6px 6px 3px;
	}

	/* project grid */

	#project-list{
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		padding:0;
		gap:2px;
	}

	.imgbox img,
	.imgbox video {
		filter: none;
	}

	.imgbox{
		width:100%;
		overflow:hidden;
		filter: grayscale(0%);
		transition: filter 1s ease;
	}

	.imgbox:hover {
		filter: grayscale(0%);
	}

	.box{
		padding-bottom: 10px;
	}

	.box img{
		width:100%;
		aspect-ratio: 1 / 1; 
		object-fit: cover;
	}

	.box h3{
	padding:10px 10px 5px;
	}

	.box p{
	padding:0px 10px;
	}

	#contents {
		display: block; 
		width: 100%;
	}



	/* section */
	section{
		width:100%;
		margin: auto;
	}


}