/* ==========================================================================
   Scroll Control
   ========================================================================== */

body.no-scroll,
html.no-scroll {
	overflow: hidden !important;
	height: 100vh !important;
	position: fixed !important;
	width: 100vw !important;
}

.scroll-wrapper.no-scroll {
	overflow: hidden !important;
	height: 100vh !important;
	position: fixed !important;
	width: 100vw !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 1 !important;
}

#aboutMeContainer.active ~ .scroll-wrapper,
#aboutMeContainer.closing ~ .scroll-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	overflow: hidden !important;
	z-index: 1 !important;
}


/* ==========================================================================
		Base Styles & Resets
   ========================================================================== */

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

:root {
	--page-padding: 2.4rem;
	--color-text-w: #F7F6FC;
	--color-text-b: #1D1E22;
	--color-sub-text: #f7f6fc98;
	--color-bg: #1D1E22;
	--color-link: rgba(255, 255, 255, 1); 
	--color-link-hover: rgba(255, 255, 255, 0.6);;
	--color-bg-1: #366DFE;
	--color-bg-2: #1958ff;
	--color-bg-3: #37C4BE;
	--color-bg-4: #C91145;
	--color-bg-5: #A39079;
	--color-bg-6: #493A35;
	--color-about-bg: #e0e0e0;
	--color-contact-bg: #d85335;;
	--color-about-text: #232323;
	--color-about-text-rgb: 35, 35, 35;
	--color-separator: #d0d0d0;

	/* Font Standardization */
	/* --- 언어별 기본 글꼴 --- */
	--font-en-primary: "area-variable";
	--font-en-display: "rotalic";
	--font-en-accent: "haptik";
	--font-en-mono: 'helv', helvetica, monospace;
	--font-ko: "Pretendard";

	/* --- 역할 기반 글꼴 변수 (영문/한글 조합) --- */
	--font-primary: var(--font-en-primary), var(--font-ko), sans-serif; 
	/* 본문 및 일반 UI용 기본 글꼴 */
	--font-display: var(--font-en-display), var(--font-ko), sans-serif;
	/* 백그라운드 텍스트 등 텍스트 애니메이션용 글꼴 */
	--font-accent: var(--font-en-accent), var(--font-ko), sans-serif; 
	/* 디자인 포인트가 되는 강조 텍스트용 글꼴 */
	--font-mono: var(--font-en-mono), var(--font-ko), sans-serif;
	/* 코드나 숫자 등 고정폭이 필요한 텍스트용 글꼴 */

	/* Typographic Scale */
	--font-size-xs: 1.2rem;      /* 12px */
	--font-size-sm: 1.4rem;     /* 14px */
	--font-size-base: 1.6rem;       /* 16px */
	--font-size-md: 1.8rem;     /* 18px */
	--font-size-lg: 2rem;      /* 20px */
	--font-size-xl: 2.4rem;       /* 24px */
	--font-size-xxl: 3.2rem;        /* 32px */
	--font-size-xxxl: 4rem;     /* 40px */
	--font-size-display-sm: 4.8rem;   /* 48px */
	--font-size-display-md: 8rem;   /* 80px */
	--font-size-display-lg: 14.4rem;   /* 144px */

	--tracking-tighter: -0.07rem;
	--tracking-tight: -0.05rem;
	--tracking-normal: 0rem;
}

html {
	font-size: 62.5%;
	scroll-behavior: auto;
}

body,
html {
	margin: 0;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
	/* scrollbar-width: none;
	-ms-overflow-style: none; */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

body {
	color: var(--color-text-w);
	background-color: var(--color-bg);
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.4s ease-out;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

a:focus {
	outline: none;
}
a:focus:not(:focus-visible) {
	background: transparent;
}
a:focus-visible {
	outline: none;
	background: transparent;
	box-shadow: none !important;
}

i {
	font-style: normal;
	font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400, "INKT" 400;
}

:not(html) [lang="ko"] {
  font-family: var(--font-ko); 
  /* em 단위를 쓰면 '원래 적용되었어야 할 크기'의 92%로 줄어듦 */
  font-size: 0.94em;
  position: relative;
  top: -1px;        
  letter-spacing: var(--tracking-tight);
	line-height: 1.6; 
}

/* ==========================================================================
		Page Loader
   ========================================================================== */

.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 5000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link); /* Needs check - link color might be dark */
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

/* ==========================================================================
		Frame Layout (Header & Footer)
   ========================================================================== */

.frame {
	padding: var(--page-padding);
	position: relative;
	display: grid;
	z-index: 3000;
	width: 100%;
	grid-row-gap: 1.6rem;
	grid-column-gap: 3.2rem;
	justify-items: start;
	text-transform: uppercase;
	font-size: var(--font-size-xs);
}

.frame--header {
	background-size: auto 80%;
	background-position: 120% 50%;
	background-repeat: no-repeat;
	grid-template-areas: 'title' 'back';
	position: relative;
	z-index: 9999;
	align-items: center; /* Ensure vertical alignment for all viewports */
}

.frame--footer {
	position: fixed;
	bottom: 0;
	left: 0;
	padding-top: 2.4rem;
	bottom: 2.4rem;
	grid-template-areas: 'credits' 'author';
	align-content: end;
}

.frame.frame--header a:hover {
    color: var(--color-link-hover);
}
.frame a {
	pointer-events: auto;
}

.frame__title {
	grid-area: title;
	margin: 0;
	font-family: var(--font-en-accent);
	font-size: var(--font-size-lg);
	/* font-weight: 900; */
	letter-spacing: var(--tracking-tighter);
	user-select: none; 
	line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
	color: var(--color-text-w); 
	transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
}
.frame__title a {
	color: inherit;
}

.frame__title.hide {
  opacity: 0;
  pointer-events: none;
}
#aboutMeContainer.active ~ .frame--header .frame__title,
#aboutMeContainer.closing ~ .frame--header .frame__title {
  display: none !important;
}

.about-home-btn span.transparent { font-family: var(--font-accent);
	font-size: var(--font-size-sm);
	opacity: 0.5;
    display: inline-block;
    transform: scale(1.39);
    transform-origin: left center;
    vertical-align: baseline;
    line-height: 0;
    height: 0;
    margin-right: 1rem;
    position: relative;
    top: -0.15rem;
}

.frame__back {
	grid-area: back;
	/* justify-self is defined within the media queries for specificity */
	position: relative;
	font-size: var(--font-size-sm);
	transform-style: preserve-3d;
	perspective: 1000px;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	transform-origin: 100% 50%;
	width: auto;
	height: 20px; /* Explicit height for proper vertical alignment */
}

#aboutMeToggle {
	position: absolute;
	right: 0;
	transform: translateZ(10px); 
	backface-visibility: hidden;
	white-space: nowrap;
}

.about-home-btn {
	position: absolute;
	right: 0;
	transform: rotateX(-90deg) translateZ(10px);
	backface-visibility: hidden;
	white-space: nowrap;
}

body.about-me-open .frame__back {
	transform: rotateX(90deg);
}

.frame__author { /* Footer */
	display: flex;
	gap: 2.4rem;
	grid-area: author;
	align-items: center; /* Vertically center author items */
}

/* ==========================================================================
		Main Content & Card Styles
   ========================================================================== */

.content {
	/* padding: var(--page-padding); */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.scroll-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

.scroll-wrapper.fade-out .content--sticky:not(.bounce-click):not(.bounce-in-home):not(.fan-in-home) {
	opacity: 0 !important;
	transform: translate(-50%, -50%) scale(0.3) !important;
	transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
}

.card-section {
	position: relative;
	font-family: var(--font-primary);
	cursor: pointer;
}

.card-section .content {
	background-size: cover;
}

.card-section .bg-1 {
	background-image: url(../assets/img/cover_1.jpg);
}
.card-section .bg-2 {
	background-image: url(../assets/img/cover_2.jpg);
}
.card-section .bg-3 {
	background-image: url(../assets/img/cover_3.jpg);
}
.card-section .bg-4 {
	background-image: url(../assets/img/cover_4.jpg);
}
.card-section .bg-5 {
	background-image: url(../assets/img/cover_5.jpg);
}
.card-section .bg-6 {
	background-image: url(../assets/img/cover_6.jpg);
}

.content--sticky {
	position: fixed;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	transform: translate(-50%, -50%);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	outline: none !important;
}

.content--sticky.bounce-click {
	animation: bounceClick 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	filter: none !important;
}

@keyframes bounceClick {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	40% {
		transform: translate(-50%, -50%) scale(1.15);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(0.9);
		opacity: 0;
	}
}

/* 배경 텍스트 영역 */
.background-text {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	z-index: 50;
	pointer-events: none;
	overflow: hidden;
}

.background-text-item {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: inline-block;
	font-family: var(--font-display);
	font-size: var(--font-size-display-lg);
	letter-spacing: 1rem;
	font-weight: 600;
	color: rgba(255,255,255,0.2);
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 16rem);
	transform-style: flat;
	animation: _textAnim_1fzwd_1 10s infinite linear;
	line-height: calc(((var(--line-height) * var(--capital-height)) - var(--valign)) * 1px);
}

.content--card {
	height: 65vh;
	aspect-ratio: 0.8;
	margin: 0;
	border-radius: 14px;
	text-align: center;
	overflow: hidden;
	padding: 3vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


/* Card Background Colors */
.bg-1 { background-color: var(--color-bg-1); }
.bg-2 { background-color: var(--color-bg-2); }
.bg-3 { background-color: var(--color-bg-3); }
.bg-4 { background-color: var(--color-bg-4); }
.bg-5 { background-color: var(--color-bg-5); }
.bg-6 { background-color: var(--color-bg-6); }



/* ==========================================================================
		Responsive Styles (Mobile)
   ========================================================================== */

@media screen and (max-width: 63em) {
	:root {
		/* 모바일에서 일부 큰 폰트 크기 재정의 */
		--font-size-xxl: 2.8rem; /* 28px */
		--font-size-display-md: 6.4rem; /* 64px */
	}

	.frame--header {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: 'title . back';
	}

	.frame--header .frame__back {
		justify-self: end;
	}

	.frame--footer {
		display: none;
	}

	/* 배경 텍스트 모바일에서 숨김 */
	.background-text {
		display: none;
	}

	/* 카드 크기 모바일 최적화 */
	.content--card {
		width: calc(100vw - 6.4rem) !important;
		max-width: calc(100vw - 6.4rem);
		height: auto !important;
		max-height: 60vh;
		aspect-ratio: 1;
		margin-right: 1.6rem;
	}

	/* 프로젝트 메뉴 리스트 모바일 최적화 */
	.project-menu-list {
		width: calc(100vw - 6.4rem) !important;
		max-width: calc(100vw - 6.4rem) !important;
		height: 6rem !important;
		bottom: 3.2rem !important;
		padding: 0 1.6rem !important;
		left: 1.6rem;
	}

	.project-center {
		font-size: var(--font-size-sm);
		padding: 0.8rem 0;
	}


	.menu-icon {
		scale: calc(80%);
		width: 2.4rem;
		height: 2.4rem;
	}

	.menu-icon svg {
		width: 1.4rem;
		height: 1.4rem;
	}

	.project-header {
		position: relative !important;
		width: calc(100vw - 3.2rem) !important;
		height: auto !important;
		aspect-ratio: 1 !important;
		display: grid !important;
		place-items: center;
		margin-bottom: 1.6rem !important;
	}
	.project-header .project-title {
		position: absolute !important;
		top: 1.6rem !important;
		left: 0 !important; /* transform: none 제거하여 애니메이션 복원 */
		font-size: var(--font-size-xxl) !important;
		grid-area: 1 / 1;
		align-self: start;
	}
	.project-header .project-image {
		position: absolute !important;
		top: calc(50% - 2.4rem) !important;
		width: 60% !important;
		height: auto !important;
		aspect-ratio: 1;
		grid-area: 1 / 1;
		transition: transform 0.1s linear; 
		will-change: transform;
	}
	.project-header p {
		position: absolute !important;
		bottom: 2.4rem !important;
		font-size: calc(var(--font-size-xs) - 0.2rem) !important; /* 9px */
		grid-area: 1 / 1; /* p 태그도 같은 셀에 배치 */
		align-self: end; /* 셀의 하단에 정렬 */
		margin: 0;
	}
	.project-body {
		padding: 1.6rem !important;
	}

	.project-body.visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* About Me 섹션 모바일 최적화 */
	#aboutMeContainer .about-content {
		--page-padding: 3.2rem 1.6rem 3.2rem 1.6rem;
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		padding: 8rem 2.4rem 4.8rem 2.4rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-intro .logotext {
		font-size: var(--font-size-xxl); left: 2.4rem;
		top: 8rem;
	}

	#aboutMeContainer.active .about-intro .deco,
	#aboutMeContainer.closing .about-intro .deco {
		display: none;
	}

	#aboutMeContainer:is(.active, .closing) .about-intro h2 {
		font-size: var(--font-size-lg);
	}

	#aboutMeContainer:is(.active, .closing) .about-intro p {
		font-size: var(--font-size-sm); 
		line-height: 1.5;
	}

	#aboutMeContainer:is(.active, .closing) .part1 {
		display: flex; 
		flex-flow: row wrap !important;
		align-items: flex-start !important;
	}

	.part1 .list {
		flex: 1;
		min-width: 200px;
		order: 2;
		margin-top: 0 !important;
		margin-left: 0 !important;
		font-size: calc(var(--font-size-xs) - 0.4rem); /* 8px */
		line-height: 1.5;
	}

	.part1 .image1 {
		
		flex: 1;
		min-width: 200px;
		order: 1;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 1.6rem;
		aspect-ratio: 480 / 278;
		height: auto;
		border: 0.8rem solid rgba(var(--color-about-text-rgb), 0.21);
		box-sizing: border-box;
		overflow: hidden;
		margin: 3.2rem 0 1.6rem 0 !important;
	}

	.part1 .image1 > div {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.part1 .about-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	#aboutMeContainer .about-content .spacing {
		height: 3.2rem;
	}
	#aboutMeContainer:is(.active, .closing) .about-text {
		flex-direction: column;
	}

	#aboutMeContainer:is(.active, .closing) .about-text .text1 {
		font-size: var(--font-size-lg); 
		line-height: 3rem;
		margin-bottom: 1.6rem;
		
	}

	#aboutMeContainer:is(.active, .closing) .about-text .text2 {
		width: 100%;
		max-width: 100%;
		font-size: calc(var(--font-size-sm) - 0.1rem); /* 13px */
		line-height: 2.4rem;
	}

	#aboutMeContainer .about-content.about-contact {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		padding: 8rem 2.4rem 3rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .subtitle {
		font-size: calc(var(--font-size-xs) - 0.2rem); /* 10px */
		margin-bottom: 1.6rem;
		margin-top: 2.4rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .title {
		font-size: var(--font-size-xxl); 
		margin-bottom: 1.6rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .email {
		font-size: var(--font-size-md); 
		text-underline-offset: 0.8rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul {
		margin-bottom: 3.2rem;
	}
	
	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li {
		font-size: var(--font-size-md); 
		line-height: 3rem;
		width: 100%;
		margin-bottom: 0.6rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li span {
		font-size: var(--font-size-xs);
		margin-right: 0.8rem;
		min-width: 5.6rem;
	}

	#aboutMeContainer .about-content.about-contact ul li a .download-icon {
		width: 20px;
		height: 20px;
		margin-left: -0.4rem;
		vertical-align: middle;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .footer {
		font-size: calc(var(--font-size-xs) - 0.2rem); /* 10px */
		line-height: 2rem;
		margin: 1.6rem;
	}

	/* 스크롤바 메인에서 세로 중앙 위치 */
	.scrollbar {
		top: 50% !important;
		left: 1.6rem !important;
		transform: translateY(-50%);
		scale: 50%;
	}

	/* About Me 이미지가 모바일에서도 보이도록 */
	.about-img {
		display: block;
	}
}

/* ==========================================================================
		Responsive Styles (Desktop)
   ========================================================================== */

@media screen and (min-width: 63em) {
	body {
		--page-padding: 3.2rem 4.8rem;
	}

	.frame--header {
		position: fixed;
		grid-template-columns: auto 1fr auto;
		/* align-items is inherited from the base .frame--header style */
		grid-template-areas: 'title . back';
		}

	.frame--header .frame__back {
		justify-self: end;
		grid-area: back;
	}


	.frame--footer {
		grid-template-areas: 'credits author';
		grid-template-columns: 1fr auto;
		height: 9.6rem;
		align-items: center;
		padding: 0 4.8rem;
	}
    .frame--footer p, .frame--footer a {
        color: var(--color-sub-text);
    }
	.frame__credits { justify-self: start; }
	.frame__author { justify-self: end; }
	.frame__heading { margin-top: 0; }
	.frame__author { justify-self: end; }

    /* Card size on Desktop */
	.card-section .content--sticky {
        width: 50vw;
    }

	/* About Me 데스크톱 스타일 */
	#aboutMeContainer .about-content {
		width: 90vw;
		max-width: 96rem;
		left: 0;
		right: auto;
		padding: 10rem 16rem 8rem 4rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-intro .logotext {
		left: 4rem; 
		top: 10rem;
		font-size: 4rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-intro .deco {
		width: 46rem;		background-size: contain; background-position: right;
		background-repeat: no-repeat;
	}

	#aboutMeContainer:is(.active, .closing) .part1 {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-end;
	}

	.part1 .image1 {
		position: relative;
		width: 46rem;
		aspect-ratio: 480 / 278;
		margin-left: 4rem;
		overflow: hidden;
		border: 1rem solid rgba(var(--color-about-text-rgb), 0.21);
		box-sizing: border-box;
	}

	.part1 .image1 > div {
		position: relative;
		width: 100%;
		height: 100%;
	}

	#aboutMeContainer:is(.active, .closing) .part1 .list {
		flex: 1;
		font-size: 0.9rem;
		line-height: 1.6rem;
	}
	#aboutMeContainer:is(.active, .closing) .part1 .list span:nth-child(2) {
		margin-left: 0.8rem;
	}

	/* About Me spacing, separator */
	#aboutMeContainer:is(.active, .closing) .about-content .spacing {
		width: 100%;
		height: 8rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#aboutMeContainer .about-content .separator {
		transform-origin: left center;
		transform: scaleX(0);
		transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s;
	}

	#aboutMeContainer.active .about-content .separator {
		transform: scaleX(1);
	}

	#aboutMeContainer:is(.active, .closing) .about-intro p {
		font-size: 1; 
		line-height: 28px;
	}

	/* About Me Contact 데스크톱 스타일 */
	#aboutMeContainer .about-content.about-contact {
		width: 90vw;
		max-width: 96rem;
		padding: 16rem 0 3rem;
	}

	.about-text {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	#aboutMeContainer:is(.active, .closing) .about-text .text1 {
		font-size: 2.4rem; 
		font-weight: 600;
		line-height: 3.6rem;
		letter-spacing: var(--tracking-tighter);
	}

	#aboutMeContainer:is(.active, .closing) .about-text .text2 {
		width: 46rem; 
		max-width: 48rem;
		font-weight: 400;
		font-size: 1.4rem;
		letter-spacing: var(--tracking-tighter);
		line-height: 2.6rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .subtitle {
		font-size: 1.2rem; 
		margin-bottom: 2rem;
		margin-top: 3.2rem;
	}

	#aboutMeContainer.active .about-content.about-contact .title,
	#aboutMeContainer.closing .about-content.about-contact .title {
		font-size: 4rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .email {
		font-size: 2.4rem; 
		text-underline-offset: 1.12rem;
		z-index: 1;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul {
		margin-bottom: 4.8rem; 
		text-align: left;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li {
		width: 24rem; 
		margin-bottom: 1.6rem;
		font-size: 2.4rem;
		line-height: 3.6rem;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li .download {
		color: var(--color-link);
		font-size: 1.2rem;
		font-family: var(--font-accent);
		background-color: var(--color-bg);
		padding: 0rem 1.6rem;
		border-radius: 0.5rem;
		text-transform: uppercase;
	}

	#aboutMeContainer .about-content.about-contact .download .download-icon {
		width: 1.4rem;
		height: 1.4rem;
		margin-left: 0.2rem;
		vertical-align: middle;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li span {
		font-size: 1.4rem; 
		margin-right: 1.2rem;
		min-width: 6.4rem;
		vertical-align: baseline;
	}

	#aboutMeContainer:is(.active, .closing) .about-content.about-contact .footer {
		font-family: var(--font-en-mono);
		font-size: 1.2rem;
		line-height: 2.4rem;
		margin: 0 2rem;
	}
	}



/* ==========================================================================
    Page Transition Overlay
   ========================================================================== */

#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg);
    z-index: 9998; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    pointer-events: none;
}

#transition-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
    Detail View Animations
   ========================================================================== */

/* 상세 페이지 사라지는 효과 */
#projectDetailContainer.fade-out-detail {
    animation: fadeOutDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* 홈 카드 등장시 바운스 효과 - 중앙 카드 */
.content--sticky.bounce-in-home {
    animation: bounceInHome 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    animation-delay: 0.15s;
    outline: none !important;
    filter: none !important;
}

@keyframes bounceInHome {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 홈 카드 등장시 펼쳐지는 효과 - 뒷 카드들 */
.content--sticky.fan-in-home {
    outline: none !important;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease-out,
                filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.content--sticky.fan-in-home.visible {
    opacity: 1;
}

/* 홈으로 돌아올 때 카드들 펼쳐지는 애니메이션 */
.scroll-wrapper.cards-fan-out .content--sticky {
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}

/* ==========================================================================
   About Me Page
   ========================================================================== */

#aboutMeContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 5000;
	pointer-events: none;
	background: transparent;
	transition: background 0.6s cubic-bezier(0.22,0.61,0.36,1);
}

#aboutMeContainer.active,
#aboutMeContainer.closing {
	background: var(--color-bg);
}

#aboutMeContainer.active {
	pointer-events: auto;
}

#aboutMeContainer .aboutWapper {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: default;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

#aboutMeContainer .aboutWapper::-webkit-scrollbar {
	display: none;
}

#aboutMeContainer .aboutWapper::after {
	content: '';
	display: block;
	height: 100vh;
	width: 1px;
}

#aboutMeContainer .about-content {
	position: fixed;
	top: 0;
	left: 0;
	min-height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	font-family: var(--font-mono);
	background: var(--color-about-bg);
	color: var(--color-about-text);
	transform: translateY(100vh);
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	z-index: 4000;
}

#aboutMeContainer .about-content > *:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-image: url(https://www.paffi.it/assets/bg_grain.9d93ee3f.png);
	mix-blend-mode: soft-light;
	z-index: -1;
	opacity: 25%;
}

#aboutMeContainer .about-content .about-intro {
	display: flex;
	justify-content: space-between;
}

#aboutMeContainer .about-content.about-intro * {
	pointer-events: auto;
}

#aboutMeContainer.active .about-content {
	opacity: 1;
	transform: translateY(0);
}

/* About Me 공통 스타일 */
#aboutMeContainer:is(.active, .closing) .about-intro .logotext {
	color: var(--color-text-b);
	font-family: var(--font-accent);
}

#aboutMeContainer:is(.active, .closing) .about-intro h2 {
	letter-spacing: var(--tracking-tight);
}

#aboutMeContainer:is(.active, .closing) .about-intro p {
	letter-spacing: var(--tracking-tight);
	font-weight: 300;
}

.part1 .list {
	font-family: var(--font-mono); font-weight: bold;
	text-transform: uppercase;
}

.part1 .list > *:before {
	content: "•"; margin-right: 0.1875rem;
	margin-left: 0.1875rem;
}

#aboutMeContainer .about-content .separator {
	width: 100%; height: 1px;
	background-color: var(--color-separator);
}

.about-text {
	font-family: var(--font-primary);
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact .subtitle {
	font-family: var(--font-accent);
	text-transform: uppercase;
}

#aboutMeContainer.active .about-content.about-contact .title,
#aboutMeContainer.closing .about-content.about-contact .title {
	font-family: var(--font-accent);
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact .email {
	color: var(--color-text-b); 
	text-decoration: none;
	transition: color 0.3s ease;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact .email:hover,
#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li a:hover {
	color: var(--color-link-hover);
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul {
	list-style: none; padding: 0;
	margin-top: 0;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li span {
	font-family: var(--font-accent); 
	font-weight: 500;
	text-align: left;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact ul li a {
	color: var(--color-text-b); 
	text-decoration: none;
	transition: color 0.3s ease;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact .portfolio-wrapper li {
	justify-content: center;
}

#aboutMeContainer:is(.active, .closing) .about-content.about-contact .footer {
	font-family: var(--font-mono);
	text-align: center;
}

/* About Me 공통 이미지 스타일 */
.about-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
    will-change: transform;
}

.about-img-1 {
  background-image: url(../assets/img/about1_uid.jpg);
}

.about-img-2 {
  background-image: url(../assets/img/about2_uid.jpg);
  transform: translateY(100%);
}

/* About Me Contact 공통 스타일 */
#aboutMeContainer .about-content.about-contact {
	position: sticky;
	top: 100vh;
	left: 0;
	height: 100vh;
	background-color: var(--color-contact-bg);
	color: var(--color-text-b);
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	transform: translateY(0);
	will-change: transform;
	z-index: 5000;
	pointer-events: none;
}

#aboutMeContainer .about-content.about-contact * {
	pointer-events: auto;
}

#aboutMeContainer.active ~ .project-menu-list,
#aboutMeContainer.closing ~ .project-menu-list {
	display: none !important;
}

#aboutMeContainer.active ~ .scroll-wrapper .card-section,
#aboutMeContainer.closing ~ .scroll-wrapper .card-section {
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
	filter: blur(2px);
}

/* ==========================================================================
   Project Detail Container & Content
   ========================================================================== */

#projectDetailContainer {
	background: transparent;
	z-index: 4999 !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	display: none;
}

body.detail-is-open {
	background-color: var(--color-bg) !important;
}

#projectDetailContainer[data-project="sinhan"] {
	--project-bg-color: #2B57CB;
}
#projectDetailContainer[data-project="samsung"] {
	--project-bg-color: #1446CC;
}
#projectDetailContainer[data-project="baemin"] {
	--project-bg-color: #2C9D98;
}
#projectDetailContainer[data-project="muffin"] {
	--project-bg-color: #A10E37;
}
#projectDetailContainer[data-project="chicor"] {
	--project-bg-color: #827361;
}
#projectDetailContainer[data-project="iloom"] {
	--project-bg-color: #5e4b44;
}

.project-detail-content {
	width: 100%;
	max-width: 128rem;
	margin: 0 auto;
	padding: 8rem 0 288px 0;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	font-family: var(--font-primary);
	letter-spacing: var(--tracking-tight);
	line-height: 1.7;
	color: var(--color-text-b);
}

.project-header {
	position: relative;
	width: 100%;
	max-width: 74rem;
	height: 80rem;
	margin: 0 auto 4rem;
	overflow: hidden;
	border-radius: 12px;
}

.project-header .project-mask {
	width: 100%;
	height: 100%;
	background: var(--project-bg-color, #2B57CB);
	-webkit-mask-image: url(../assets/mask_rect.svg);
	mask-image: url(../assets/mask_rect.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 50%;
	mask-size: 50%;
	transition: mask-size 1.5s ease-in-out,
				-webkit-mask-size 1.5s ease-in-out;
}

.project-header .project-mask.active {
	-webkit-mask-size: 300vmax;
	mask-size: 300vmax;
}

.project-header .project-title {
	position: absolute;
	left: 0;
	top: 9rem;
	transform: none;
	font-size: 8rem;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.8;
	width: max-content;
	z-index: 1;
	display: flex;
	animation: marquee 20s linear infinite;
}

.project-header .project-title > div {
	display: inline-block;
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-20%);
	}
}

.project-header .project-image {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32rem;
	height: 34rem;
	object-fit: cover;
	display: block;
}

.project-header p {
	position: absolute;
	left: 50%;
	bottom: 4rem;
	transform: translateX(-50%);
	width: 100%;
	font-family: var(--font-accent);
	font-size: 1.4rem;
	text-align: center;
	text-transform: uppercase;
}

.project-body {
	padding: 120px;
	background-color: #ffffff;
	border-radius: 1.6rem;
	box-shadow: 0 8px 30px rgba(0,0,0,0.08); 
	font-family: var(--font-primary);
	letter-spacing: var(--tracking-tight);
	line-height: 1.7;
	color: var(--color-text-b);
	margin-bottom: 180px;
	opacity: 0;
	transform: translateY(30vh);
	transition: transform 0.75s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.75s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.project-body .info {
	display: flex;
	flex-flow: row nowrap;
	gap: 3.2rem;
	/* margin-bottom: 2rem; */
	flex: 1;
	font-family: var(--font-mono);
	font-size: 1.6rem;
	color: var(--color-main);
	margin: 0 6.4rem 18rem 6.4rem;
}
.project-body .highlights > * {
    display: flex;
    flex-direction: column;
}

.project-body .highlights a {
	display: block;
  cursor: pointer;
}

.project-body .info .title,
.project-body .highlights .label,
.project-body .content .credits .label {
	font-family: var(--font-mono);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--project-bg-color);
	letter-spacing: 0.025rem;
}

.project-body .info .desc {
	width: 100%;
	max-width: 128rem;
	grid-gap: 6.4rem;
	font-family: var(--font-primary);
	font-weight: 400;
	font-size: 2rem;
	letter-spacing: var(--tracking-tighter);
}
.project-body .info .desc P {
	line-height: 3.2rem;
}

.project-body .content p, .project-body .content li {
    margin: 0;
}

.project-body.visible {
    opacity: 1;
    transform: translateY(0);
}

.project-body .highlights,
.project-body .content .credits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: space-between;
	grid-gap: 6.4rem;
}
.project-body .highlights > * .value,
.project-body .content .credits > * .value {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--color-text-b);
	text-transform: uppercase;
	margin-top: 0.6rem;
	letter-spacing: var(--tracking-normal);
}

.project-body .highlights .value[lang="ko"],       
.project-body .content .credits .value[lang="ko"] { 
  font-size: 1.6rem;
	position: relative;
  top: -1px;
	letter-spacing: var(--tracking-t);
}

.project-body .highlights .value .textboing > div {
	transition: transform 0.3s ease;
}

.project-body .highlights .value:hover .textboing > div {
	transform: translateX(5px);
}

.project-body .highlights .value .textboing {
    overflow: hidden;
}


.project-body .separator {
	position: relative;
	width: calc(100% + 12.8rem);
	height: 1px;
	margin: 12rem -6.4rem;
	font-family: var(--font-mono);
	font-weight: bold;
	font-size: 1.6rem;
	text-transform: uppercase;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	color: #000;
}
.project-body .separator span {
	margin-right: 4rem;
	white-space: nowrap;
}
.project-body .separator::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: var(--project-bg-color);
    display: block;
}

.project-body .content {
    max-width: 128rem;
    align-items: flex-start; 
}

.project-body h2 {
	font-size: 1.5em;
	color: var(--color-text-b);
	margin-top: 40px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	letter-spacing: var(--tracking-tighter);
	font-weight: 600;
}

.project-body h2:first-child {
	margin-top: 0;
}

.project-body p {
	margin: 0;
}
.project-body p,
.project-body li {
	font-size: 1em;
	line-height: 3.2rem;
}
.img-frame {
  overflow: hidden;
  margin: 15px 0;
  width: 100%;
}
.project-body .img-frame .project-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  margin: 0;               /* 마진은 부모(.img-frame)가 가져갔으니 0으로 초기화 */
  transition: transform 0.1s linear; /* 부드러운 움직임 */
  will-change: transform;
}

.project-body img {
	width: 100%;
	height: auto;
	translate: none;
	rotate: none;
	scale: none;
	transform: translate3d(0px, 0px, 0px) scale(1.0548, 1.0548);
}

.detail-list {
	list-style: none;
	padding-left: 0;
}

.detail-list li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 12px;
}

.detail-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	font-weight: bold;
}

.tech-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 0;
}

.tech-item {
	background-color: color-mix(in srgb, var(--project-bg-color), white 90%);
	color: color-mix(in srgb, var(--project-bg-color), black 50%);
	padding: 12px 15px 7px 15px;
	border-radius: 22px;
	font-size: 0.95em;
	font-weight: 500;
	vertical-align: baseline;
}

/* ==========================================================================
   Side Menu Styles
   ========================================================================== */

#sideMenuContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sideMenuContainer.open {
	opacity: 1;
	visibility: visible;
}

.side-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 150px);
	column-gap: 30px;
	row-gap: 30px;
	padding: 30px;	
	background-color: var(--color-text-w);
	border-radius: 14px;
}

.menu-item-wrapper {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), z-index 0s linear 0.3s;
	cursor: pointer;
	width: 150px;
	height: 150px;
	transform-origin: center center;
	backface-visibility: hidden;
	will-change: transform;
}

.menu-item-wrapper::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background-color: var(--color-text-w);
	border-radius: 14px;
	opacity: 0;
	transition: all 0.2s ease-in-out;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: -1;
	backface-visibility: hidden;
}

.menu-item-wrapper:hover {
	z-index: 10;
	transform: scale(1.2);
	transition-delay: 0s;
}

.menu-item-wrapper:hover::before {
	opacity: 1;
	bottom: -30px;
}

.menu-item-square {
	width: 150px;
	height: 150px;
	background-size: cover;
	background-position: center;
	border-radius: 12px;
	position: relative;
	transition: border-color 0.3s ease;
}

.menu-item-wrapper:hover .menu-item-square {
	border-color: var(--color-text-w);
}

.menu-item-title {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--color-text-b);
	font-family: var(--font-primary);
	z-index: 1;
	font-weight: bold;
	font-size: 1.2rem;
	opacity: 0;
	text-align: center;
	white-space: nowrap;
	backface-visibility: hidden;
	pointer-events: none;
}

.menu-item-wrapper:hover .menu-item-title {
	opacity: 1;
}

/* ==========================================================================
   Project Menu List (Bottom Center)
   ========================================================================== */

.project-menu-list {
	position: fixed;
	left: 50%;
	bottom: 4.8rem;
	transform: translateX(-50%);
	width: 52rem;
	height: 8rem;
	background-color: rgba(180, 131, 114, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 1rem;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2.4rem;
}

.project-center {
	flex: 1;
	display: flex;     
  justify-content: center;
  align-items: baseline;
  gap: 0.2rem;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: var(--tracking-tighter);
	color: var(--color-text-w);
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 1.6rem 0;
	cursor: pointer;
	transition: color 0.3s ease;
	z-index: 9000;
}

.project-center:hover {
	color: var(--color-link-hover);
}

.project-center span {
	font-size: 1.15em;
	font-family: var(--font-accent);
	font-weight: 400;
	letter-spacing: var(--tracking-normal);
	/* opacity: 0.9; */
	line-height: 1;
}

/* ==========================================================================
   Menu Icons (Common)
   ========================================================================== */

.menu-icon {
	width: 4rem;
	height: 4rem;
	background: none;
	border: none;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0, 0.55, 0.45, 1);
}

.menu-icon {
	position: relative;
}

.menu-icon .icon-close {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.menu-icon.is-active .icon-menu {
	opacity: 0;
	visibility: hidden;
}

.menu-icon.is-active .icon-close {
	opacity: 1;
	visibility: visible;
}

.menu-icon svg {
	width: 1.6rem;
	height: 1.6rem;
	display: block;
	margin: 0 auto;
	color: var(--color-text-w);
	transition: 0.5s cubic-bezier(0, 0.55, 0.45, 1);
}

.menu-icon:hover {
	background-color: var(--color-text-w);
	border-radius: 50%;
}

.menu-icon:hover svg {
	color: var(--color-bg);
}

.menu-icon.is-active {
	background-color: var(--color-text-w);
	border-radius: 50%;
	border: none;
}

.menu-icon.is-active svg {
	color: var(--color-bg);
}

.menu-icon.is-active:hover {
	background-color: var(--color-bg);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.menu-icon.is-active:hover .icon-menu { 
	opacity: 0;
	visibility: hidden;
}

.menu-icon.is-active:hover .icon-close {
	color: var(--color-text-w);
}

.left-icon {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.left-icon.is-active {
	border: none;
}

.left-icon.is-active:hover {
	border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* ==========================================================================
   Project Open Button
   ========================================================================== */

#projectOpen {
	position: relative;
	border-radius: 50%;
	background-color: transparent;
	width: 4rem;
	height: 4rem;
	transform: scale(0.5);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) inset;
	transition: all 0.5s cubic-bezier(0, 0.55, 0.45, 1);
}

#projectOpen::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%) scale(0.2);
	border-radius: 50%;
	background-color: var(--color-text-w);
	transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#projectOpen::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	width: 40%;
	height: 40%;
	opacity: 0;
	background-image: url("../assets/arrow-icon.svg");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#projectOpen:not(.is-active):hover,
#projectOpen:not(.is-active):active,
#projectOpen:not(.is-active).proxy-hover {
	background-color: var(--color-text-w);
	transform: scale(1);
	box-shadow: none;
	border: none;
}

#projectOpen:not(.is-active):hover::after,
#projectOpen:not(.is-active):active::after,
#projectOpen:not(.is-active).proxy-hover::after {
	opacity: 1;
}

#projectOpen.is-active {
	background-color: var(--color-text-w);
	transform: scale(1);
	box-shadow: none !important;
	border: none;
}

#projectOpen.is-active::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.4rem;
	height: 2px;
	border-radius: 0;
	background-color: var(--color-bg);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: all 0.3s ease;
	mask-image: none;
	-webkit-mask-image: none;
}

#projectOpen.is-active::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.4rem;
	height: 2px;
	border-radius: 0;
	opacity: 1;
	background-color: var(--color-bg);
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: all 0.3s ease;
}

#projectOpen.is-active:hover {
	background-color: var(--color-bg);
	transform: scale(1);
}

#projectOpen.is-active:hover::before,
#projectOpen.is-active:hover::after {
	background-color: var(--color-text-w);
}

.content--sticky.is-expanded {
	position: fixed;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	margin: 0 !important;
	z-index: 9999;
	transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
	overflow-y: auto;
	border-radius: 0 !important;
}