@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
:root {--bg-color: #1D1C1A; --text-color: #FAF8F6; --highlight-color: #FFFFFF; --secondary-text: #808080; --blue-color: #8093F1; --red-color: #FF6347;}
body {background-color: var(--bg-color); text-align: center; font-family: "Silkscreen", sans-serif; color: var(--text-color); margin: 0; padding: 20px; overflow-x: hidden;}
.transition-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); transform: translateX(100%); z-index: 1000; pointer-events: none;}
.more-link {display: inline-block; color: var(--blue-color); text-decoration: none; font-size: 1.2rem; margin: 2rem 0; transition: transform 0.3s ease;}
.more-link:hover {transform: scale(1.1);}
.lazy-load {opacity: 0; transform: translateY(-20px); animation: slide-in 0.3s forwards;}
.lazy-load-2 {animation-delay: 0.7s;}
.lazy-load-3 {animation-delay: 1s;}
.lazy-load-4 {animation-delay: 1.2s;}
@keyframes slide-in {to {opacity: 1; transform: translateY(0);}}
.underline-animate span {position: relative; display: inline-block;}
.underline-animate span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--highlight-color); animation: underline 2s forwards;}
@keyframes underline {from {width: 0;} to {width: 100%;}}
.pro {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0 5%; max-width: 1600px; margin: 0 auto;}
.project {transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: #252422; position: relative; overflow: hidden; cursor: pointer;}
.project:hover {transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);}
.project-glitch-wrapper {position: relative; overflow: hidden; aspect-ratio: 16/9;}
.project-glitch-layer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
.project-image {position: relative; height: 100%;}
.project img {width: 100%; height: 100%; object-fit: cover; display: block;}
.glitch-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.glitch-effect {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; display: none;}
.project-glitch-layer:hover + .project-image .glitch-effect {display: block; animation: glitch-anim-2 2s infinite linear alternate;}
.date {display: flex; justify-content: space-between; margin: 20px; font-size: 0.9em;}
.info {margin: 15px 0; font-size: 1.1em; color: var(--highlight-color);}
@keyframes glitch-anim-2 {0% {clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(0);} 2% {clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%); transform: translate(-5px);} 6% {clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%); transform: translate(5px);} 8% {clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%); transform: translate(-5px);} 9% {clip-path: polygon(0 78%, 100% 78%, 100% 100%, 0 100%); transform: translate(0);} 10% {clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%); transform: translate3d(5px, 0, 0);} 13% {clip-path: polygon(0 54%, 100% 54%, 100% 44%, 0 44%); transform: translateZ(0);} 13.1% {clip-path: polygon(0 0, 0 0, 0 0, 0 0); transform: translate3d(5px, 0, 0);} 15% {clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%); transform: translate3d(5px, 0, 0);} 20% {clip-path: polygon(0 60%, 100% 60%, 100% 40%, 0 40%); transform: translate3d(-5px, 0, 0);} 20.1% {clip-path: polygon(0 0, 0 0, 0 0, 0 0); transform: translate3d(5px, 0, 0);} 25% {clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%); transform: translate3d(5px, 0, 0);} 30% {clip-path: polygon(0 85%, 100% 85%, 100% 40%, 0 40%); transform: translate3d(-5px, 0, 0);} 30.1% {clip-path: polygon(0 0, 0 0, 0 0, 0 0);} 35% {clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%); transform: translate(-5px);} 40% {clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%); transform: translate(5px);} 45% {clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%); transform: translate(-5px);} 50% {clip-path: polygon(0 63%, 100% 63%, 100% 80%, 0 80%); transform: translate(0);} 55% {clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0); transform: translate3d(5px, 0, 0);} 60% {clip-path: polygon(0 10%, 100% 10%, 100% 0, 0 0); transform: translateZ(0);} 60.1% {clip-path: polygon(0 0, 0 0, 0 0, 0 0);} to {clip-path: polygon(0 0, 0 0, 0 0, 0 0);}}
@media screen and (max-width: 1200px) {.pro {grid-template-columns: repeat(2, 1fr);} .projects-title {font-size: 2em;}}
@media screen and (max-width: 768px) {.pro {grid-template-columns: 1fr; padding: 0 20px;} h1 {font-size: 1.5em; padding: 0 20px;} .projects-title {font-size: 1.8em;} .project:hover {transform: translateY(-5px);}}