/* =========================
SOOVIN CHOI
CREATIVE WAVE PORTFOLIO
========================= */


/* GLOBAL */


html{
scroll-behavior:smooth;
}


*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

background:#F8F6F1;
color:#111827;

font-family:
Helvetica Neue,
Helvetica,
Arial,
sans-serif;

overflow-x:hidden;

}



/* FILM TEXTURE */


.grain{

position:fixed;

inset:0;

background:
url("https://grainy-gradients.vercel.app/noise.svg");

opacity:.035;

pointer-events:none;

z-index:100;

}





/* =========================
NAVIGATION
========================= */


nav{

position:fixed;

top:0;

width:100%;

height:85px;

padding:0 6vw;

display:flex;

align-items:center;

justify-content:space-between;

background:
rgba(248,246,241,.85);

backdrop-filter:blur(20px);

z-index:50;

}



.logo{

width:60px;

transition:.4s;

}



.logo:hover{

transform:rotate(-5deg) scale(1.05);

}



.logo-link{

margin:0;

}



nav a{

color:#111827;

text-decoration:none;

margin-left:30px;

font-size:12px;

font-weight:600;

letter-spacing:2px;

transition:.3s;

}



nav a:hover{

color:#6574E8;

}








/* =========================
HERO
========================= */


.hero{

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 8vw 80px;

}



.small{

font-size:12px;

font-weight:600;

letter-spacing:5px;

text-transform:uppercase;

color:#6574E8;

margin-bottom:40px;

}



.hero-logo{

width:150px;

margin-bottom:40px;

animation:float 8s infinite ease-in-out;

}



@keyframes float{


50%{

transform:translateY(-15px);

}


}



h1{

font-size:
clamp(55px,8vw,120px);

font-weight:600;

letter-spacing:-5px;

line-height:.95;

}



.hero-text{

max-width:650px;

margin-top:40px;

font-size:19px;

line-height:1.8;

color:#374151;

}



.wave{

margin-top:45px;

font-size:12px;

font-weight:600;

letter-spacing:4px;

}









/* =========================
GENERAL SECTION
========================= */


section{

padding:120px 8vw;

}








/* =========================
PROJECT CASE STUDIES
========================= */


.case{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

padding:90px 0;

border-top:

1px solid rgba(17,24,39,.15);

}



.case img{

width:100%;

height:480px;

object-fit:contain;

background:white;

padding:25px;

border-radius:22px;

box-shadow:
0 20px 60px rgba(0,0,0,.08);

transition:.5s;

}



.case img:hover{

transform:translateY(-10px);

}



.case span{

font-size:12px;

font-weight:700;

letter-spacing:4px;

color:#6574E8;

}



.case h2{

font-size:
clamp(42px,5vw,80px);

font-weight:600;

letter-spacing:-3px;

margin:25px 0;

}



.case h3{

font-size:22px;

font-weight:500;

margin-bottom:25px;

}



.case p{

font-size:17px;

line-height:1.8;

color:#374151;

}






/* TAGS */


ul{

list-style:none;

margin-top:30px;

}



li{

display:inline-block;

background:white;

padding:10px 16px;

margin:5px;

border-radius:30px;

font-size:11px;

font-weight:600;

letter-spacing:1px;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

}








/* LANDING PALS DOUBLE IMAGE */


.case-images{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.case-images img{

height:380px;

}








/* BUTTON */


.project-button{

display:inline-block;

margin-top:35px;

margin-left:0;

padding:15px 28px;

border-radius:40px;

background:#111827;

color:white;

font-size:12px;

font-weight:600;

letter-spacing:2px;

}



.project-button:hover{

background:#6574E8;

color:white;

}









/* =========================
EXPERIENCE
========================= */


.experience-item{

background:white;

padding:45px;

margin-bottom:25px;

border-radius:22px;

box-shadow:
0 15px 45px rgba(0,0,0,.05);

}



.experience-item h3{

font-size:34px;

font-weight:600;

}



.experience-item span{

display:block;

margin:15px 0;

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:#6574E8;

}



.experience-item p{

font-size:17px;

line-height:1.7;

color:#374151;

}









/* =========================
CAPABILITIES
========================= */


.skills-grid{

display:flex;

flex-direction:column;

margin-top:70px;

border-top:
1px solid rgba(17,24,39,.2);

}



.skills-grid div{

display:grid;

grid-template-columns:
100px 280px 1fr;

align-items:start;

padding:35px 0;

border-bottom:
1px solid rgba(17,24,39,.2);

background:transparent;

box-shadow:none;

border-radius:0;

transition:.3s;

}



.skills-grid div:hover{

transform:translateX(15px);

}



.skills-grid div::before{

content:"0" counter(skill);

counter-increment:skill;

font-size:13px;

font-weight:600;

letter-spacing:3px;

color:#6574E8;

}



.skills-grid{

counter-reset:skill;

}



.skills-grid h3{

font-size:24px;

font-weight:600;

letter-spacing:-1px;

}



.skills-grid p{

font-size:17px;

line-height:1.7;

color:#374151;

max-width:650px;

}


/* =========================
ABOUT
========================= */


#about h2{

font-size:
clamp(45px,7vw,95px);

font-weight:600;

letter-spacing:-4px;

}



.about-text{

max-width:900px;

margin-top:50px;

font-size:21px;

line-height:1.8;

color:#374151;

}








/* FOOTER */


footer{

padding:120px 8vw;

text-align:center;

}


footer h3{

font-size:42px;

font-weight:600;

letter-spacing:-2px;

margin-bottom:35px;

}



.contact-links{

margin-bottom:60px;

}



.contact-links a{

display:inline-block;

margin:10px;

padding:14px 28px;

border-radius:40px;

background:#111827;

color:white;

font-size:12px;

font-weight:600;

letter-spacing:2px;

}



.contact-links a:hover{

background:#6574E8;

}



footer p{

font-size:12px;

font-weight:600;

letter-spacing:4px;

line-height:2;

}







/* CUSTOM CURSOR */


.cursor{

width:15px;

height:15px;

border-radius:50%;

background:#6574E8;

position:fixed;

pointer-events:none;

z-index:200;

}








/* =========================
MOBILE OPTIMIZATION
========================= */


@media(max-width:900px){


/* remove desktop cursor */

.cursor{

display:none;

}



/* NAV */


nav{

height:auto;

padding:20px 6vw;

align-items:flex-start;

}


.logo{

width:45px;

}


nav div{

display:flex;

flex-wrap:wrap;

justify-content:flex-end;

gap:12px;

max-width:250px;

}


nav a{

margin-left:0;

font-size:10px;

letter-spacing:1.5px;

}





/* HERO */


.hero{

padding:

130px 7vw 70px;

min-height:90vh;

}


.hero-logo{

width:110px;

}


h1{

font-size:58px;

letter-spacing:-3px;

}


.hero-text{

font-size:16px;

line-height:1.7;

}


.wave{

font-size:10px;

line-height:2;

}





/* SECTIONS */


section{

padding:

80px 7vw;

}


.small{

font-size:10px;

letter-spacing:3px;

}





/* PROJECTS */


.case{

display:block;

padding:60px 0;

}


.case img{

height:auto;

padding:15px;

border-radius:16px;

margin-bottom:40px;

}


.case h2{

font-size:45px;

letter-spacing:-2px;

}


.case h3{

font-size:19px;

}


.case p{

font-size:15px;

}





/* LANDING PALS */


.case-images{

grid-template-columns:1fr;

gap:20px;

}


.case-images img{

height:auto;

}





/* TAGS */


li{

font-size:10px;

padding:8px 12px;

}





/* EXPERIENCE */


.experience-item{

padding:30px;

border-radius:18px;

}


.experience-item h3{

font-size:26px;

}


.experience-item p{

font-size:15px;

}





/* CAPABILITIES */


.skills-grid{

margin-top:40px;

}


.skills-grid div{

display:block;

padding:30px 0;

}


.skills-grid div:hover{

transform:none;

}


.skills-grid div::before{

margin-bottom:20px;

display:block;

}


.skills-grid h3{

font-size:22px;

margin-bottom:15px;

}


.skills-grid p{

font-size:15px;

}





/* ABOUT */


#about h2{

font-size:42px;

letter-spacing:-2px;

}


.about-text{

font-size:17px;

line-height:1.7;

}





/* FOOTER */


footer{

padding:70px 8vw;

font-size:10px;

line-height:2;

}


}


}