@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    cursor: none; 
    overflow-x: hidden;
    transition: overflow-y 0.3s;
    background-color: #F2F0EF;
    color:#F2F0EF ;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000000;
}


::-webkit-scrollbar-thumb {
    background: #626679;
    border-radius: 10px;
}


#projects ::-webkit-scrollbar-thumb {
    background: #939292;
}
::-webkit-scrollbar-thumb:hover {
    background: #939292;
}

.text-white {
    color: #F2F0EF  ;
}

.border-white {
    border-color: #F2F0EF  ;
}

#mobile-menu-close {
    color: #F2F0EF  ;
}

#custom-cursor {
    border-color: #F2F0EF  ;
    mix-blend-mode: difference; 
}



/* Project Detail */
.detail-content h3 {
    font-weight: 700;
    margin-top: 1rem;
    color: #ccc;
}

.detail-content p a {
    font-weight: 700;
    text-decoration: underline;
    color: #F2F0EF;
}


.detail-content img,
.detail-content video,
.detail-content iframe {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-top: 24px;
    border-radius: 6px;
}


.video-responsive-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
    height: 0;
    overflow: hidden;
    margin-top: 24px;
}

.video-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    border-radius: 6px; 
}

.project-item.active .project-title {
    color: #F2F0EF ;
}

h4.project-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #c1c0c0;
    transition: color 0.3s;
}

#about{
    background-color: #F2F0EF;

}

@media (max-width: 768px) {
    .md\:sticky {
        position: relative  ;
        height: auto  ;
        overflow-y: visible  ;
    }
    .project-title {
        font-size: 1rem;
    }
    .project-item p {
        font-size: 1rem;
    }
    .detail-content {
        font-size: 1rem;
    }

    #custom-cursor {
        display: none;
    }
    #hero h2{
        font-size: 34px;
    }
    #projects h3{
        font-size:30px;
        margin-bottom: 0px;
        margin-top: 0px;
        padding-bottom: 0px;
    }
    #about h3,h4{
        font-size:30px;
    }
    #contact h3{
        font-size:28px;
    }
    #projects h4{
        font-size:26px;
    }
    #about p{
        font-size:18px;
    }
    #contact a{
        font-size:16px;
    }
    nav{
        width: 95%;
    }
    #projects .project-item{
        margin-top: 6px;
    }
    #project-preview-container{
        display: none;
    }
    #university-projects-list,#personal-projects-list{
        margin-top: 2px;
    }

}

/* Background animation and project hover animation */
.tf-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1; 
  background: linear-gradient(180deg, #0b0b0b 0%, #111111 40%, #0d0d0d 100%);
}

#tf-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;              
  mix-blend-mode: soft-light;  
  pointer-events: none;
}


.tf-gradient {
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 900px at 80% 20%, rgba(160,160,180,0.08), transparent 65%),
    radial-gradient(700px 700px at 50% 80%, rgba(151, 145, 171, 0.055), transparent 70%);
  filter: blur(24px);
  transform: translateZ(0);
}

.tf-blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.tf-blob-1 { background: radial-gradient(circle, rgba(180, 188, 200, 0.125), rgba(180, 190, 200, 0)); }
.tf-blob-2 { background: radial-gradient(circle, #788aa055, rgba(120, 140, 160, 0)); }
.tf-blob-3 { background: radial-gradient(circle, rgba(14, 29, 106, 0.237), rgba(90, 107, 130, 0)); }

.tf-blob-1 { top: -10vmax; left: -10vmax; animation: drift1 6s ease-in-out infinite alternate; }
.tf-blob-2 { bottom: -15vmax; right: -20vmax; animation: drift2 4s ease-in-out infinite alternate; }
.tf-blob-3 { top: 30%; left: 60%; animation: drift3 2s ease-in-out infinite alternate; }

@keyframes drift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.16; }
  50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); opacity: 2.22; }
  100% { transform: translate3d(12vmax, -4vmax, 0) scale(0.98); opacity: 4.18; }
}
@keyframes drift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.14; }
  50%  { transform: translate3d(-6vmax, -4vmax, 0) scale(1.03); opacity: 1.19; }
  100% { transform: translate3d(4vmax, 6vmax, 0) scale(0.95); opacity: 2.17; }
}
@keyframes drift3 {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0.15; }
  50%  { transform: translate3d(-5vmax, 5vmax, 0) scale(1.05); opacity: 1.21; }
  100% { transform: translate3d(10vmax, -6vmax, 0) scale(1.0);  opacity: 3.18; }
}

.content {
  position: relative;
  z-index: 1;
  color: #eaeaea;
}

.project-item {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.project-item:hover {
    opacity: 1;
    transform: translateX(35px);
}