@font-face {
    font-family: "Bitcount";
    src: url("font/BitCount.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    background-color: #FBFFF2;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease;
    opacity: 1;
    pointer-events: all;
    box-sizing: border-box;
  }

  #page-loader img{
    transform: scale(0.6);
  }
  
  #page-loader.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  
  
  
body {
    font-family: 'Limelight';
    background-color: #FBFFF2;
    max-width: 100vw;
    overflow-x: hidden !important;
    transition: all 0.8s ease;
}

p{
    font-family: 'courier', sans-serif;
    font-size: 16px;
    color: #263316;
    line-height: 150%;
}


@keyframes blink {
    0% {background-color: #263316; color:#F9DD3B;}
    50%{background-color: transparent; color: #263316;}
    100% {background-color: #263316; color:#F9DD3B;}
}

/* Typing effect */
.typing {
    background-color: #263316; /* Deep green background */
    color: #F9DD3B; /* Pale yellow text */
    padding: 2px 6px;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    transition: all 0.5s ease-in-out;
}

.cursor {
    display: inline-block;
    font-weight: bold;
    animation: blink 1s infinite;
    color: #FCEC95; /* Pale yellow */
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}


.uiux-blinking-text{
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

.uiux-blinking-text p{
    font-weight: bold;
    font-size: 24px;
} 

.accent1{
    display: inline-block;
    color:#263316;

}

.accent2{
    display: inline-block;
    font-weight: normal;
    color:#263316;
}





h1{
    font-size: 120px;
    color:#263316;
    font-weight: bolder;
}

h2{
    font-size: 48px;
    color:#FBFFF2;
    font-weight: bolder;
    line-height: 150%;
}

h3{
    font-size: 32px;
    color:#263316;
    font-weight: bold;
    line-height: 150%;
}



  



/* Navigation */
header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 0px;
    position: fixed;
    width: 100vw;
    top: 0;
    transition: all 0.5s ease-in-out;
    z-index: 9999;
    font-family: 'Courier New', Courier, monospace;
    height: 96px;
}

header .navigation-image{
    grid-column: 1/span 1;
    grid-row: 1/span 1;
    
    display: flex;
    justify-content: flex-start;
    height: 108px;
    max-height: 700px;

    position: absolute;
    top: 0;
    left: -20vw;

}

.navigation-image img{
    width: 60vw;
}

header .navigation-tab-container{
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    
    display: flex;
    height: 96px;
    background-color: transparent;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2% 0 0;

    transition: all 0.5s ease-in-out;
}

.navigation-tab-container ul{
    display: flex;
    list-style: none;
    padding:0 0 0 0;
    gap: 8px;
}

.navigation-tab{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 72px;
    width: 120px;
    color: #FBFFF2;
    background-color: #263316;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    transform: rotate(5Deg);
}

@keyframes swing {
    0% { transform: rotate(5deg) scale(1); background-color:#F9DD3B; }
    25% { transform: rotate(0deg) scale(1.02); background-color:#F9DD3B;}
    50% { transform: rotate(-5deg) scale(1); background-color:#F9DD3B;}
    75% { transform: rotate(0deg) scale(0.98); background-color:#F9DD3B;}
    100% { transform: rotate(5deg) scale(1); background-color:#F9DD3B; }
}

.navigation-tab:hover{
    transform:rotate(5Deg);
    background-color:#F9DD3B;
    color: #263316;
    animation: swing 1.2s linear infinite;
}

.navigation-tab.active:hover{
    transform: rotate(-5Deg);
    animation: none;
}

.active{
    color: #263316;
    background-color:#F9DD3B;
    transform: rotate(-5Deg);
}





/* Navigation Bar Shrink Effect */
header.scrolled {
    height: 60px; /* Shrinks height */
    grid-template-columns: 1fr; /* Collapse to center */
}

/* 确保 .short 始终采用 .scrolled 的样式 */
header.short {
    width: 100vw;
    height: 60px; /* 始终缩小 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

/* 让 .short 版本始终采用 scrolled 样式 */
header.short .navigation-tab-container {
    grid-column: 1 / span 1;
    width:max-content;
    justify-content: center;
    height: 60px;
    padding: 0;
    z-index: 999;
    border-radius: 0;
    background-color: #263316;

    animation: headerShortMoveIn 2s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@keyframes headerShortMoveIn {
    0%{transform: translateY(-200px); opacity: 0;}
    50%{transform: translateY(-200px); opacity: 0;}
    100%{transform: translateY(0); opacity: 1;}
}


/* 让 .short 版本的 tabs 始终是 scrolled 状态 */
header.short .navigation-tab {
    height: 60px;
    background-color: transparent;
    color: #FBFFF2;
    transform: none;
    animation: none;
}

/* hover 时的交互 */
header.short .navigation-tab:hover {
    animation: none;
    color: #F9DD3B;
}

/* 让 .short 版本的 active tab 也是 scrolled 状态 */
header.short .navigation-tab.active {
    color: #F9DD3B;
    transform: none;
}

/* 让 short 版本的 navigation tab 容器始终居中 */
header.short .navigation-tab-container ul {
    width: max-content;
    border-radius: 0;
    background-color: #263316;
    box-shadow: 0px 18px 0px -12px #F9DD3B; /* 6px的橙色阴影，没有模糊 */
    transition: all 0.3s ease-in-out;
}


header.short .navigation-tab-container ul:hover, header.scrolled .navigation-tab-container ul:hover{
    box-shadow: 0px 0px 0px -12px #F9DD3B;
}

/* 确保 short 版本的 navigation image 始终隐藏 */
header.short .navigation-image {
    display: none;
}


header.scrolled .navigation-tab{
    transform: rotate(0);
    background-color: transparent;
    color: #FBFFF2;
}

header.scrolled .navigation-tab:hover{
    animation: none;
    transform: none;
    color: #F9DD3B;
}


header.scrolled.navigation-tab.active{
    animation: none;
    transform: none;
    color: #F9DD3B !important;
}

header.scrolled .navigation-tab-container {
    grid-column: 1 / span 1;
    justify-content: center; 
    height: 60px; /* Smaller navbar */
    padding: 0;
    z-index: 999;
}

header.scrolled .navigation-tab-container ul{
    width: max-content;
    border-radius: 0;
    background-color: #263316;
    box-shadow: 0px 18px 0px -12px #F9DD3B; /* 6px的橙色阴影，没有模糊 */
    transition: all 0.3s ease-in-out;
}


/* Hide Images Smoothly */
.navigation-image {
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
}

/* Move Left and Shrink on Scroll */
header.scrolled .navigation-image {
    transform: translateX(-200%) scale(0.9); /* Move left & shrink */
    opacity: 0.6;
}





/* Landing */
.uiux-landing-grid{
    display: grid;
    grid-template-columns: 33.3333vw 33.3333vw 33.3333vw;
    grid-template-rows: repeat(4, 20vh);
    column-gap: 0px;

    width: 100vw;
    height: 80vh;

    margin-top: 20vh;
}

.uiux-landing-grid .left-string{
    position: relative;
    top: -20%;
    grid-column: 1/span 1;
    grid-row: 1 / span 3;
    /* background-color: #263316; */
    z-index: -1;

    display: flex;
    justify-content: center;
    align-items: start;

    z-index: 10;
}

.left-strip{
    position: absolute;
    top: 0;
    left: 0;
    width: 66vw;
    max-width: 600px;
    height: 54vh;
    background-image: url("images/leaf-logo.png");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 999;
    
    transform: translateX(-10vw) translateY(-18vh);
    opacity: 100;
    transition: all 0.3s ease-in-out;
}

.left-strip.scrolled{
    transform: translateX(-100vw) translateY(-18vh);
    opacity: 0;
}

.uiux-pdf .about-resume{
    width: 240px;
}
.uiux-pdf{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 96px 0 96px 0;
}




.uiux-landing-grid .right-top{
    grid-column: 2/span 2;
    grid-row: 1 /span 2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 18% 0px 5%;
    
    z-index: 3;
}

.uiux-landing-grid .right-mid{
    grid-column: 2/span 2;
    grid-row: 3 /span 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 18% 0px 5%;

    z-index: 2;
}

.uiux-landing-grid .right-bottom{
    grid-column: 1/span 4;
    grid-row: 2 / span 3;

    padding: 0 5% 0 0;
    overflow: hidden;
    background-color: transparent;
}

.uiux-landing-grid .right-bottom img {
    width: 100vw;
    object-fit: cover; 
    object-position: top;
    height: 100%;
    transform-origin: bottom; 
    background-color: transparent; 

    position: relative;
    z-index: -1;
}









/* Pulling circle interaction */
/* Pull-to-Scroll Section (Positioned in Grid Area) */
.pull-to-scroll {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    display: flex;
    justify-content: center;
    align-items: center;
   
    position: relative;
    top: -8%;
    
    z-index: 2;
}

/* Circle Container (Aligns Circles in Column) */
.circle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Space between circles */
    position: relative;

    transform-origin: top;
}


/* General Circle Style */
.circle {
    background-color: #F9DD3B;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out, opacity 0.5s ease-in-out;
}

.pull-to-scroll.pulled .circle {
    animation: pullUpOscillate 1s ease-in-out forwards;
    animation-fill-mode: forwards !important; /* explicitly keep final state */
  }
  

/* Small Circles */
.small {
    width: 24px;
    height: 24px;
    color:#f9ef3b;
    opacity: 0.5;
}

/* Medium Circles */
.medium {
    width: 36px;
    height: 36px;
    color:#F9DD3B;
    opacity: 0.8;
}

/* Large Circle */
.large {
    width: 48px;
    height: 48px;
    color:#f9dc3b;
    opacity: 0.9;
}

/* Knob (Button) */
.knob {
    width: 96px;
    height: 96px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #f9ba3b;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover Effect: Triggers Wave Effect */
.knob:hover {
    box-shadow: 0 0 15px rgba(249, 221, 59, 0.8);
    animation: waveEffect 1.5s infinite ease-in-out;
}


/* Click Effect: Move Up & Fade */
.pull-to-scroll.scrolled .circle {
    transform: translateY(-100px);
    opacity: 0;
}

/* Wave Effect */
@keyframes waveEffect {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Smooth Shrink Effect */
@keyframes shrink {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(0.93); }
    100% { transform: scaleY(0.8); }
}

/* Pulsing Effect (Starts AFTER Shrink) */
@keyframes pulse {
    0% { transform: scaleY(1); opacity: 100%; }
    50% { transform: scaleY(0.7); opacity: 60%; }
    100% { transform: scaleY(1); opacity: 100%; }
}

/* Apply animations sequentially */
.wave-active {
    animation: pulse 2s infinite ease-in-out;
}

.pulled .wave-active {
    animation: pulse 2s infinite ease-in-out forwards;
}



/* Pull-Up Animation: Move Circles Up & Fade */
@keyframes pullUpOscillate {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; scale: 1; }
    15% { transform: translateY(60px) translateX(0) rotate(0deg); opacity: 1; scale: 0.95;}
    30% { transform: translateY(0px) translateX(-8px) rotate(-1deg); scale: 0.85;}
    30% { transform: translateY(-60px) translateX(6px) rotate(2deg); scale: 0.80;}
    45% { transform: translateY(-140px) translateX(-10px) rotate(-5deg); scale: 0.75;}
    60% { transform: translateY(-230px) translateX(8px) rotate(6deg); opacity: 0.8; scale: 0.65;}
    75% { transform: translateY(-320px) translateX(-6px) rotate(-2deg); opacity: 0.5; scale: 0.55; }
    90% { transform: translateY(-410px) translateX(4px) rotate(1deg); opacity: 0.2; scale: 0.40;}
    100% { transform: translateY(-500px) translateX(0) rotate(0deg); opacity: 0; scale: 0.15;}
}

/* When Clicked: Move Circles Up & Oscillate */
.pull-to-scroll.pulled .circle {
    animation: pullUpOscillate 1s ease-in-out forwards;
}

/* Apply Slightly Different Delays for Each Circle */
.pull-to-scroll.pulled .circle:nth-child(1) { animation-delay: 0.3s; }
.pull-to-scroll.pulled .circle:nth-child(2) { animation-delay: 0.27s; }
.pull-to-scroll.pulled .circle:nth-child(3) { animation-delay: 0.24s; }
.pull-to-scroll.pulled .circle:nth-child(4) { animation-delay: 0.21s; }
.pull-to-scroll.pulled .circle:nth-child(5) { animation-delay: 0.18s; }
.pull-to-scroll.pulled .circle:nth-child(6) { animation-delay: 0.14s; }
.pull-to-scroll.pulled .circle:nth-child(7) { animation-delay: 0.10s; }
.pull-to-scroll.pulled .circle:nth-child(8) { animation-delay: 0.05s; }
.pull-to-scroll.pulled .circle:nth-child(9) { animation-delay: 0s; }
.pull-to-scroll.pulled .knob { animation-delay: 0s !important; }

.uiux-landing-grid .uiux-mobile-button{
    opacity: 0;
    display: flex;
    max-width: 100vw;
    height: 20vh;
    justify-content: center;
    align-items: center;
}

.uiux-mobile-button img{
    width: 24px;
    height: 24px;
}



/* Wave fades after clicked */
.right-bottom img {
    transition: all 0.4s ease;
    animation-play-state: running;
  }
  
  .right-bottom img.frozen {
    animation-play-state: paused;
  }
  



/* Banner Container */
.image-banner {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100vw;
    background-color: transparent;
    margin-top: 5%;
}

/* Banner Container */
.image-banner {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100vw;
    background-color: transparent;
}

/* Banner Track (Holds Images) */
.banner-track {
    display: flex;
    gap: 3%; /* Adjust spacing between images */
    width: calc(200%); /* Ensures enough space for smooth looping */
    margin-left: 100vw;
    margin-right: 100vw;

    padding-bottom: 64px;
}

.rolling{
    animation: scrollBanner 15s linear infinite;
}

/* Image Styling */
.banner-track img {
    object-fit: contain;
    width: auto;
    height: 18vh;
}

/* Keyframes for Infinite Scroll */
@keyframes scrollBanner {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-150%);
    }
}






/* Banner */
.uiux-banner{
    display: grid;
    width: 100vw;
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 10vh 20vh;
    justify-content: center;
}

.uiux-banner .background-texture{
    grid-column: 1 /1 ;
    grid-row: 2 / span 2;
}

.uiux-banner .experience-block{
    grid-column: 1 / 1 ;
    grid-row: 1 / span 2;

    display: flex;
    flex-direction: column;
    background-color: #263316;
    align-items: center;
    row-gap: 8px;
    
    height: fit-content;

    text-align: center;

    padding: 8% 5% 5% 5%;
}

.experience-block h2{
    color:#FBFFF2;
}

.experience-block p{
    color:#FBFFF2;
}

.button-block{
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    z-index: -1;

    display: flex;
    justify-content: center;

    z-index: 2;
}

#eclipse-button{
    width: 128px;
    height: 128px;

    position: relative;

    display: flex;
    align-items: center;
}


.background-texture img {
    width: 100vw;
    object-fit: contain; 
    transform-origin: top; 
    background-color: transparent; 

    position: relative;
    top: -45%;
    z-index: -2;
}








/*  Cards */
.uiux-project-grid{
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 100vw;

    z-index: 1;

    padding: 12% 15% 0% 15%;
}

.uiux-project-image{
    display: grid;
    box-sizing: border-box;
    padding: 24px;
    grid-template-columns: 1fr;

    width: 100%;
    height: 40vw;

    transition: all 0.3s ease-in-out;
}

.uiux-project-grid a{
    width: 100%;
}

.uiux-project-image img{
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

    box-sizing: border-box;
    width: 100%;
    height: calc(40vw - 48px);

    object-fit: cover;

    border-radius: 0px;
    overflow: hidden;
}

.uiux-project-image .uiux-project-image-overlay{
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

    height: calc(40vw - 48px);
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    border-radius: 0px;

    overflow: visible;

    position: relative;
    background-color: #26331690;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    visibility: hidden;

    z-index: 1;
}

.uiux-project-image-overlay .uiux-project-description{
    font-family:'Courier New', Courier, monospace;
    font-size: 24px;
    line-height: 150%;
    color:#FBFFF2;
    height: 32vw;

    padding: 0 24px 0 24px;

    display: flex;
    align-items: center;
}

.uiux-project-card-wrapper {
    position: relative;
    display: inline-block;
}

.uiux-project-card {
    position: relative;
    z-index: 0;

    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    background-color: #263316;
    transition: all 0.3s ease-in-out;
    transform-origin: bottom left;
    
    box-shadow: 0px 32px 0px -18px #f9ba3b;
}

.uiux-project-card .uiux-project-title{
    display: flex;
    width: 100%;
    padding: 0 32px 12px 24px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}



.uiux-project-card h3{
    color: #FBFFF2;
    font-size: 48px;
}








/* Hover card */
.uiux-project-card:hover{
    z-index: 999;
    transform: rotate(-3Deg);
    box-shadow: 0px 0px 0px 0px #f9ba3b;
}
.uiux-project-card:hover .uiux-project-image .uiux-project-image-overlay {
    visibility: visible;
}

.uiux-project-card:hover h3{
    transition: all 0.3s ease-in-out; 
    color:#f9ba3b;
}

.uiux-project-card:hover .uiux-project-tag{
    transition: all 0.3s ease-in-out; 
    background-color: #f9ba3b;
    color: #FBFFF2 !important;
}

.uiux-project-image .uiux-project-image-overlay::before,
.uiux-project-image .uiux-project-image-overlay::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border: 12px solid #f9ba3b;
    border-radius: 16px;
    opacity: 0;
    transition: all 0.3s ease-in-out; 
}

/* 左上角括号 */
.uiux-project-image .uiux-project-image-overlay::before {
    top: -80px;
    left: -80px;
    border-right: none;
    border-bottom: none;
}

/* 右下角括号 */
.uiux-project-image .uiux-project-image-overlay::after {
    bottom: -80px;
    right: -80px;
    border-left: none;
    border-top: none;
}

/* 当 hover 时显示括号 */
.uiux-project-card:hover .uiux-project-image{
    transform: scale(0.9);
}

.uiux-project-card:hover .uiux-project-image .uiux-project-image-overlay::before{
    top: -20px;
    left: -20px;
    opacity: 1;
}
.uiux-project-card:hover .uiux-project-image .uiux-project-image-overlay::after {
    bottom: -20px;
    right: -20px;
    opacity: 1;
}


/* Custom Cursor - Hidden by Default */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 50%;
    background-color: #F9DD3B;
    z-index: 9999;
    transition: mix-blend-mode 0.3s ease;
}

.cursor-large {
    width: 32px;
    height: 32px;
    transition: scale 0.3s ease-in-out;
}
.cursor-medium {
    width: 16px;
    height: 16px;
    transition: opacity 0.3s ease-in-out;
}
.cursor-small {
    width: 6px;
    height: 6px;
    transition: opacity 0.3s ease-in-out;
}

.blend-difference {
    mix-blend-mode: difference;
}



/* Hide default cursor only inside project cards */
.uiux-project-card {
    cursor: none;
}




/* Trail Cursor */
.custom-cursor-dot {
    position: fixed;
    border-radius: 50%;
    background-color: #F9DD3B;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: normal;
  }
  
  .cursor-large {
    width: 48px;
    height: 48px;
  }
  
  .cursor-medium {
    width: 32px;
    height: 32px;
  }
  
  .cursor-small {
    width: 16px;
    height: 16px;
  }
  







/* Interactive card shadow */
.uiux-project-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #F9DD3B; /* Shadow color */
    
    opacity: 0;
    transform: rotate(-3Deg);

    z-index: -2;

    transition: all 0.3s ease-in-out;
    transform-origin: bottom left;
}

.uiux-project-card-wrapper:hover .uiux-project-shadow{
    transform: rotate(0Deg) scaleX(0.95) translateX(-36px);
    opacity: 1;
    z-index: -2;
}





.uiux-project-tag-container{
    display: flex;
    width: max-content;
    justify-content: right;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.uiux-project-tag{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    font-family: 'Courier New', Courier, monospace;

    border-radius: 999px;
    background-color: #FBFFF2;
    color:#263316 !important;
    font-size: 16px !important;

    padding: 8px 16px 8px 16px;
    width: max-content; 
    height: max-content;
}









.visual-container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: max-content;

    overflow: visible;
}

.visual-heading-block{
    display: flex;
    flex-direction: column;
    width: 100vw;
    justify-content: flex-start;
    align-items: center;

    height: 30vh;
}

.visual-heading{
    font-size: 96px;
    font-weight: bold;
    color: #263316;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.shadow1{
    color: #f9ba3b;
    position: relative;
    top: -180px;
    z-index: -1;
}

.shadow2{
    color: #F9DD3B;
    position: relative;
    top: -360px;
    z-index: -2;
}

.visual-container .visual-description{
    display: flex;
    padding: 0 20% 0 20%;
    margin: 0 5% 5% 5%;
    justify-content: center;
    text-align: center;
}


.visual-div-20vh{
    height: 20vh;
}

.visual-gallery-carousel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    transform: translateX(0);
    height: max-content;
    overflow: visible !important;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    background-color: #FBFFF2;
}

.visual-gallery-container {
    display: grid;
    width: 100vw;
    padding: 0 96px 0 96px;
    gap: 10px; /* Space between posters */
    grid-template-columns:  repeat(8, 1fr) ; /* 4 columns for a structured layout */
    grid-template-rows: repeat(8, 2vh / 8); /* 3 rows for a balanced look */
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible !important;
}



/* Base styling for each work item */
.visual-gallery-container img {
    width: 100%;
    height: 100%;
    object-fit:contain;
    object-position: bottom;
    border-radius: 0px;
    transition: all 0.6s ease-in-out;
}

.visual-gallery-container div {
    will-change: transform, filter, box-shadow, z-index;
    box-shadow: 0px 0px 0px 0px #F9DD3B; 
    transition: all 0.6s ease-in-out;
    overflow: visible;

    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* Vertical A4 Posters */
.tilt-left{
    transform: translateX(0) translateY(24px) scale(0.80) rotateZ(-10deg);
}

.tilt-left-small{
    transform: translateX(0) translateY(24px) scale(0.88) rotateZ(-3deg);
}

.tilt-right-small{
    transform: translateX(0) translateY(24px) scale(0.88) rotateZ(3deg);
}

.tilt-right{
    transform: translateX(0) translateY(24px) scale(0.80) rotateZ(10deg);
}

.tilt-none{
    transform: translateX(0) translateY(24px) scale(0.92) rotateZ(0deg);
}

.visual-drawing-container{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 10%;
}

.visual-3d-container{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 10%;
}

.visual-drawing-container img{
    width: 80%;
}

.visual-3d-container img{
    width: 80%;
}
/* Display work caption as hovered */
.visual-caption {
    padding: 12px 16px;
    color: #FBFFF2;
    font-size: 0.9rem;
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none; /* prevent blocking hover */
  }
  
  .visual-caption.show {
    opacity: 1;
  }
  
  .visual-caption.hide {
    opacity: 0;
  }

  

  #visual-overlay, #visual-overlay-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: #26331680;  /* 半透明黑 */
    opacity: 0;
    pointer-events: none;  /* 默认不挡事件 */
    transform: none !important; 
    transition: opacity 0.8s ease;
    isolation: isolate; 
  }

  #visual-overlay.active,   #visual-overlay-global.active {
    opacity: 1;
    pointer-events: auto;
  }


/* Work palette */
.work1 {
    grid-column: 1 / span 4 ;  /* 1 column */
    grid-row: 4 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work2 {
    grid-column: 2 / span 4 ;  /* 1 column */
    grid-row: 4 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work3 {
    grid-column: 4 / span 4 ;  /* 1 column */
    grid-row: 4 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work4 {
    grid-column: 5 / span 4 ;  /* 1 column */
    grid-row: 4 / span 4; /* 2 rows (vertical) */
    overflow:visible;
}

.work5{
    grid-column: 2 / span 7;
    grid-row: 11 / span 3;
    overflow-x: scroll;
    transform: translateX(0) translateY(24px) scale(0.85) rotateZ(10deg);
}

.work8 {
    grid-column: 1 / span 6 ;  /* 1 column */
    grid-row: 11 / span 3; /* 2 rows (vertical) */
    overflow: hidden;
    transform: translateX(0) translateY(24px) scale(0.85) rotateZ(-10deg);
}


.work6 {
    grid-column: 2 / span 4 ;  /* 1 column */
    grid-row: 7 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work9 {
    grid-column: 3 / span 4 ;  /* 1 column */
    grid-row: 7 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work7 {
    grid-column: 4 / span 4 ;  /* 1 column */
    grid-row: 7 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}

.work10{
    grid-column: 2 / span 4 ;  /* 1 column */
    grid-row: 1 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
    
}

.work11{
    grid-column: 3 / span 4 ;  /* 1 column */
    grid-row: 1 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}


.work12{
    grid-column: 4 / span 4 ;  /* 1 column */
    grid-row: 1 / span 4; /* 2 rows (vertical) */
    overflow: hidden;
}



.visual-gallery-container div:hover {
    transform: translateX(0px) translateY(0px) scale(1.00) rotateZ(0deg);
    z-index: 999;
}


.visual-gallery-container div:hover img{
    box-shadow:0px 32px 0px -12px #F9DD3B; 
}



/* About Section Layout */
.about-heading-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 72px;

    align-items: center; /* Align vertically */
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    padding: 0 72px 0 72px;

    position: relative;
}

.about-heading-container .small-title{
    background-color: #F9DD3B;
    color: #263316;
    padding-left: 2px;
    padding-right: 2px;
}

/* Left Portrait Image (35vw) */
.about-background-portraits {
    width: 33vw;
}

.about-background-portraits .about-image {
    width: 33vw;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
}



.about-background-portraits img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: imageCycle 4s infinite alternate ease-in-out;
}




/* Ensure smooth fading between images */
.about-image img:nth-child(1) {
    animation-delay: 0s;
    box-shadow: 24px 24px 0px 0px #f9ba3b; /* 6px的橙色阴影，没有模糊 */
    transition: all 0.3s ease-in-out;
}


.about-image img:nth-child(2) {
    animation-delay: 2s;
    box-shadow: 24px 24px 0px 0px #F9DD3B; /* 6px的橙色阴影，没有模糊 */
}

/* Right Side - Heading and Content */
.about-heading-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.about-leaf-logo{
    position: relative;
    left: 12px;
    top: 12px;
    object-fit: cover;
    width: 96px;
    height: 96px;
}



.about-heading-block {
    display: grid;
    grid-template-columns: 1fr;
    grid-row: 1fr;
    height: 30vh;
}

.about-heading {
    grid-column: 1 / span 1;
    font-size: 96px;
    font-weight: bold;
    color: #263316;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    mix-blend-mode: normal;
}

/* Shadowed Name Effect */
.shadow3 {
    grid-column: 1 / span 1;
    color: #f9ba3b;
    position: relative;
    top: -208px;
    z-index: -1;
    width: max-content;
    mix-blend-mode: normal;
    filter: brightness(1);
}

.shadow4 {
    grid-column: 1 / span 1;
    color: #F9DD3B;
    position: relative;
    top: -416px; 
    z-index: -2;
    width: max-content;
    mix-blend-mode: normal;
    filter: brightness(1);
}

.shadow3 .about-leaf-logo, 
.shadow4 .about-leaf-logo {
    visibility: hidden !important;
}

.chinese {
    font-family: 'Noto Sans SC', sans-serif;
}

/* Description */
.about-description {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
    margin: 24px 0 0 0;
    align-items: flex-start;
    text-align: left;
}

.about-description-text-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
}

.about-resume{
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
    color: #263316;
    font-family:'Courier New', Courier, monospace;
    padding: 12px 18px;
    font-size: 16px;
    background-color: transparent;
    border: solid 0.5px #263316;
    transition: all 0.3s ease-in-out;
}


.about-resume:hover{
    border: solid 0.5px #F9DD3B;
    background-color: #F9DD3B;
}



.about-tag-grid{
    display: grid;
    width: 100vw;
    height: 70vw;
    grid-template-columns: 1fr;
    grid-template-rows: 60vh 5vh;
}

.about-tag-grid-content{
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    background-color: #263316;

    width: 100vw;

    display: flex;
    flex-direction: column;
    row-gap: 8px;
    justify-content: center;
    align-items: center;
}

.about-tag-grid-content h2{
    color: #FBFFF2;
}

.about-tag-grid-content p{
    color: #FBFFF2;
}

.about-personal-tag-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;

    padding: 3vw 24px 0 24px;
}

.about-middle-wave {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    background-color: #263316;

    width: 100vw;
    z-index: -999;
}

.about-middle-wave img{
    width: 100vw;
    position: relative;
    top: -50vh;

    transform-origin: top;
}

/* Tags */
.about-personal-tag {
    border-radius: 999px;
    background-color: #F9DD3B;
    color: #263316;
    padding: 16px 32px;
    font-size: 20px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease-in-out;
}


/* Image Cycle Animation */
@keyframes imageCycle {
    0% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}


.about-sharing{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 10vh;
    gap: 15vh;

    width: 100vw;
    height: 50vh;
}

.about-sharing .knob-container{
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;

    display: flex;
    justify-content: center;
}

.about-sharing .knob{
    aspect-ratio: 1;
    border-radius: 50%;

}

.about-sharing .knob img{
    width: 36px;
    aspect-ratio: 1;
}



.about-sharing-card-container{
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    height: 40vh;
    min-height: 300px;
    width: 60vw;
    
    margin-left: 20vw;
    margin-right: 20vw;

    position: relative;
    overflow: visible;
}

.about-sharing-card{
    display: flex;
    /* grid-template-columns: 2fr 3fr; */
    gap: 3vw;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 50vw;
    height: 36vh;

    background-color: #263316;
    padding: 32px 40px 32px 40px;
    
    transform: translateY(-10vh);
    position: absolute;
    transition: transform 0.6s ease, opacity 0.6s ease;

}


.about-sharing-card:nth-child(1){
    transform: translateY(0px)  scaleX(1);
}

.about-sharing-card:nth-child(2){
    transform: translateY(2vh)  scaleX(0.9);
    z-index: -1;
}

.about-sharing-card:nth-child(3){
    transform: translateY(4vh)  scaleX(0.8);
    z-index: -2;
}

.about-sharing-card:nth-child(4){
    transform: translateY(6vh)  scaleX(0.7);
    z-index: -3;
}

.about-sharing-card:nth-child(1).viewed{
    transform: translateY(0px)  scaleX(1);
    z-index: 10;
}

.about-sharing-card:nth-child(2).viewed{
    transform: translateY(2vh)  scaleX(1);
    z-index: 10;
}

.about-sharing-card:nth-child(3).viewed{
    transform: translateY(4vh)  scaleX(1);
    z-index: 10;
}

.about-sharing-card:nth-child(4).viewed{
    transform: translateY(6vh)  scaleX(1);
    z-index: 10;
}








.about-sharing-card-image{
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: auto;

    width: 20vw;
    max-width: 360px;
    aspect-ratio: 1;
    overflow: hidden;
}

.about-sharing-card-image img{
    width: 100%;
    aspect-ratio: 1;
}

.about-sharing-card-text{
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;

    width: 30vw;
}

.album-name{
    display: flex;
    font-size: 32px;
    color: #FBFFF2;
    font-weight: bold;

    width: 100%;
    
}

.album-musician{
    display: flex;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    color:#F9DD3B;

    width: 100%;
}

.album-description{
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    color:#FBFFF2;
    line-height: 150%;
    width: 100%;
}

.about-album-button-wrapper{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.about-album-button{
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    gap: 4px;
    justify-content: flex-start;
    align-items: center;
    color: #edf0e4;
    font-family:'Courier New', Courier, monospace;
    padding: 12px 18px;
    font-size: 16px;
    background-color: transparent;
    border: solid 0.5px #edf0e4;
    transition: all 0.3s ease-in-out;
}


.about-album-button:hover{
    border: solid 0.5px #F9DD3B;
    color:#263316;
    background-color: #F9DD3B;
}

.about-album-button.clicked{
    border: solid 1px #F9DD3B;
    font-weight: bold;
    color:#edf0e4;
    background: linear-gradient(135deg, #f9ba3b, #ff6a00);
    background-size: 150% 150%;
    transition: all 0.3s ease-in-out;
    animation: glow 2s ease infinite;
    box-shadow:
    0 0 5px #f9ba3b30,
    0 0 10px #ff6a0030,
    0 0 15px #ff6a0030;
}

@keyframes glow {
    0%{background-position: 0 50%;}
    50%{background-position: 100% 50%;}
    100%{background-position: 0 50%;}
}


/* Scrolling Cards Interaction */
.about-sharing-card .about-sharing-card-text {
    display: none; /* Default hidden */
    transition: opacity 0.6s ease;
}

.about-sharing-card .about-sharing-card-image {
    visibility: hidden; /* Default hidden */
    transition: opacity 0.6s ease;
}

/* Visible Content for the Active Card */
.about-sharing-card.viewed .about-sharing-card-text {
    display: flex;
}

.about-sharing-card.viewed .about-sharing-card-image {
    visibility: visible;
}

/* Hidden */
.hidden:nth-child(odd){
    background-color: #f9ba3b;
}

.hidden:nth-child(even){
    background-color: #F9DD3B;
}

/* Fixed positioning for about-sharing-card-container */
.about-sharing-fixed {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




/* Project page */
.project-landing-page{
    position: fixed;
    top: 0; /* Stick it to the top of the viewport */
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.project-cover-image-container {
    display: flex;
    justify-content: center;
    align-items: start;

    width: 100vw;
    height: 80vh;

    z-index: -1000; /* Ensure it stays above other content */

    overflow: hidden;
}


.project-cover-image-container img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
} 

.fade{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}


.project-info-container {
    max-width: 100vw;
    height: 20vh;
    min-height: 200px;
    background-color: #FBFFF2;
    
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: flex-start;

    padding: 2rem 5vw; /* Adds space inside */
    box-sizing: border-box; /* Ensures padding is included within the width */
}

.project-info-container .uiux-project-tag{
    background-color: #F9DD3B;
    color: #263316;
}


.project-info-container h2{
    color:#263316;
    padding: 0;
}

.project-info-container p{
    color:#263316;
}


.project-info-container-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70vw;
}

.project-info-container-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    gap: 8px;
    width: 60vw;

    font-family: 'courier', sans-serif;
    font-size: 16px;
    color: #263316;
    line-height: 150%;
}

.small-title{
    color:#F9DD3B;
    background-color:#263316;
    font-weight: bold;
    border-radius: 4px;
    padding: 4px 8px 4px 8px;
}

.project-navigation-container{
    position: fixed;
    top: 25vh;
    left: 24px;

    transform: translateX(-300px);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;

    width: 180px;
    height: 50vh;

    border-radius: 16px;
    background-color: #edf0e4;

    padding: 24px;

    opacity: 0;

    transition: all 0.3s ease-in-out;
    z-index: 1;
}



/* Interactive hide button */
.project-navigation-hide-button{
    width: 48px;
    height: 48px;

    position: fixed;
    top: calc(50vh);
    left: 12px;

    transform: translateX(-600px);
    opacity: 0.5;

    transition: all 0.2s ease-in-out;
    z-index: 2;
}

.project-navigation-hide-button img{
    width: 24px;
    aspect-ratio: 1;
    transition: all 0.2s ease-in-out;
}

#hide-button-left{
    display: block;
}

#hide-button-right{
    display: none;
}


.white-background{
    background-color: #fbfbfb;
}

.project-navigation-tab{
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    color: #263316;
    padding: 12px 0 12px 0;
    text-align: right;

    transition: all 0.3s ease-in-out;
}

.project-navigation-tab:hover, .current{
    background-color: #263316;
    padding-left: 4px;
    padding-right: 4px;
    color:#F9DD3B;
}

.current::before {
    content: ">> "; /* Correct way to add >> before the text */
}

.project-section-container{
    /* Leave nav bar portion */
    margin-top: 120vh;
    margin-left: 252px; 

    padding: 48px;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    height: max-content;
    background-color: #fbfbfb;

    /* Section Gap */
    gap: 16vh; 

    transition: all 0.3s ease-in-out;
}

.placeholder-4px{
    height: 4px;
}

.placeholder-32px{
    height: 32px;
}

.project-section-container div{
    max-width: 900px;
}

.project-section-container.ariat div{
    max-width: none;
}



/* Cosmospeaker */
.project-section-container.cosmo  h1{
    font-size: 36px;
    color: #FF852C;
    font-family: lato;
    font-weight: bold;
}

.project-section-container.cosmo h2{
    font-size: 24px;
    color: #FF852C;
    text-decoration: underline;
    font-weight: bold;
    font-family: lato;
}

.project-section-container.cosmo h3{
    font-size: 24px;
    color: #a0a0a0;
    text-decoration: none;
    font-weight: bold;
    font-family: lato;
}

.project-section-container.cosmo p{
    font-size: 16px;
    color: #a0a0a0;
    font-family: lato;
}

.orange{
    color: #FF852C;
}


/* Stagy */
.project-section-container.stagy  h1{
    font-size: 36px;
    color: #2F007A;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.project-section-container.stagy h2{
    font-size: 24px;
    color: #2F007A;
    font-weight: bold;
    font-family: 'Droid Sans', sans-serif;
}

.project-section-container.stagy p{
    font-size: 16px;
    color: #a0a0a0;
    font-family: 'Droid Sans', sans-serif;
}


.impact{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
}


.pink{
    color: #E01477 !important;
}

.blue{
    color: #2F007A !important;
}




.project-section-container > div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;

    width: 100%;
}

.project-section-container img{
    object-position: cen;
    object-fit: cover;
    width: 100%;
}

/* Odorable */
.odorable-background{
    background-color: #220D3A;
}

.project-section-container.odorable{
    background-color: #220D3A;
}

.project-section-container.odorable  h1{
    font-size: 36px;
    color: #FFDB00;
    font-family: "Bitcount";
    font-weight: regular;
}

.project-section-container.odorable h2{
    font-size: 24px;
    color: #FFDB00;
    text-decoration: none;
    font-weight: regular;
    font-family: "Bitcount";
}


.project-section-container.odorable p{
    font-size: 16px;
    color: #a0a0a0;
    font-weight: light;
    font-family: "Bitcount"!important;
}

.project-section-container.odorable p.title{
    font-size: 20px;
    color: #d9d9d9;
    font-weight: regular;
    font-family: "Bitcount"!important;
}

.odorable-background .project-info-container{
    background-color: #f6f1d0;
}

.odorable-white{
    color: #ffffff;
}

.odorable-yellow{
    color: #FFDB00;
}





/* Harman */

.harman-background{
    background-color: #100A21;
}

.harman-background .project-info-container{
    background-color: #263316;
}

.harman-background .project-info-container h2, .harman-background .project-info-container p, .harman-background .project-info-container-right{
    color: #FBFFF2;
}


.harman-background .project-info-container .uiux-project-tag,
.harman-background .project-info-container .small-title{
    background-color: #F9DD3B;
    color: #263316;
}

.project-section-container.harman{
    gap: 0;
    background-color: #100A21;
}

.project-section-container.harman div{
    gap: 32;
}

.project-section-container.harman img{
    width: 100%;
}

.project-section-container.harman  h1{
    font-size: 36px;
    color: #8862FF;
    font-family: lato;
    font-weight: bold;
}

.project-section-container.harman h2{
    font-size: 24px;
    color: #EAE8FC;
    text-decoration: none;
    font-weight: bold;
    font-family: lato;
}

.project-section-container.harman p{
    font-size: 16px;
    color: #a0a0a0;
    font-family: lato;
}

.harman-pink{
    color: #DD006B !important;
}

.harman-blue{
    color: #8862FF !important;
}


/* Ariat */
.ariat-background{
    background-color: #FFF8F2;
}

.project-section-container.ariat{
    background-color: #FFF8F2;
    gap: 0;
}

.project-section-container.ariat div{
    gap: 0;
}

.ariat-background .project-info-container{
    background-color: #FFF8F2;
}




/* Project switch tab */

.project-section-container .project-switch-tab{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px !important;

    padding: 48px 0 48px 0;
}

.project-switch-tab .light{
    color:#FBFFF2 !important;
}

.project-switch-tab .bg-light{
    background-color:#FBFFF2 !important;
}

.project-switch-tab .dark{
    color:#263316 !important;
}

.project-switch-tab .bg-dark{
    background-color:#263316 !important;
}

.project-switch-tab .bg-yellow{
    background-color:#F9DD3B !important;
}


.project-switch-tab h3{
    font-size: 20px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 200 !important;
    padding: 0 8px 0 8px !important;
}

.project-switch-tab .circle.knob img{
    width: 16px;
    height: 16px;
}

.project-switch-tab .circle.knob{
    width: 32px;
    height: 32px;
    background-color: #263316;
    border-radius: 0px !important;
}








/* Footer */
.uiux-bottom-background{
    height: 300px;
    overflow: hidden;
}
.uiux-bottom-background img{
    width: 100vw;
    object-fit: cover; 
    object-position: top;
    height: 300px;
    transform-origin: bottom; 
    background-color: transparent; 
}

footer{
    max-width: 100vw;
    position: relative;
    height: 60vh;
    background-color: #263316;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

footer .uiux-footer-text{
    display: flex;
    padding: 5%;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}

footer .uiux-footer-icon-frame{
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
}

footer .uiux-footer-background img{
    position: relative;
    width: 20vw;
    top: -20%;
    transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
}

.scrolled-footer .uiux-footer-background img {
    transform: translateX(80%) scale(0.5); /* Move down & shrink slightly */
    opacity: 0.6;
}


.placeholder{
    height: 400vh;
}

.uiux-footer-icon-frame img{
    transition: all 0.3s ease-in-out;
}
.uiux-footer-icon-frame img:hover{
    opacity: 0.5;
}







/* Responsive Design: Tablet */
@media screen and (max-width: 1024px) {
    h1 {
        font-size: 120px; /* Reduce from 144px */
    }
    h2 {
        font-size: 40px; /* Reduce from 48px */
    }
    h3 {
        font-size: 28px; /* Reduce from 32px */
    }

    .uiux-blinking-text p{
        font-weight: bold;
        font-size: 20px;
    } 

    .uiux-blinking-text{
        flex-direction: column;
        gap: 0;
        width: max-content;
    }


    /* Project Card */
    .uiux-project-card .uiux-project-title{
        flex-direction: column;
        gap: 4px;
        box-sizing: content-box;
        margin-bottom: 8px;
        align-items: flex-start;
    }

    .uiux-project-image-overlay .uiux-project-description{
        font-size: 16px;
    }

    .uiux-project-image-overlay {
        visibility: hidden;
        transition: visibility 0.3s ease-in-out;
    }
    
    .uiux-project-card.active .uiux-project-image .uiux-project-image-overlay {
        visibility: visible;
    }    


    /* About */
    .about-heading-block-wrapper{
        transform-origin: bottom left;
        transform: scale(0.8);
    }

    .about-sharing-card{
        align-items: center;
        justify-content: center;
    }

    .about-heading-container{
        padding-left: 32px;
        padding-right: 32px;
    }


    .project-switch-tab h3{
        font-size: 16px !important;
    }

    .project-switch-tab .knob{
        width: 20px;
        height: 20px;
    }


}



/* Mobile */
@media screen and (max-width: 720px) {
    h1 {
        font-size: 96px; /* Reduce from 144px */
    }
    h2 {
        font-size: 40px; /* Reduce from 48px */
    }
    h3 {
        font-size: 28px !important; /* Reduce from 32px */
    }

    p{
        font-size: 14px;
    }

    .left-strip{
       height: 24vh;
       transform: translateX(-10vw) translateY(-8vh);
    }

    .left-strip .scrolled{
        height: 24vh;
        transform: translateX(-100vw) translateY(-8vh);
     }


    .visual-heading{
        transform: scale(0.5);
    }

    .about-middle-wave{
        display: none;
    }

    .visual-description{
        box-sizing: border-box;
        width: 100%;
        margin: 0 !important;
        padding: 0 24px 48px 24px !important;
    }

    .uiux-blinking-text{
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .uiux-blinking-text p{
        font-weight: bold;
        font-size: 20px;
    } 

    header .navigation-image{
        height: 40vh;
    }


    /* Card */
    .uiux-project-grid{
        padding: 12% 16px 0% 16px;
    }

    .uiux-project-image{
        display: grid;
        grid-template-columns: 1fr;
        height: max-content;

    
        transition: all 0.3s ease-in-out;
    }
    
    .uiux-project-image img{
        width: 100%;
        height: 64vw;
        object-fit: cover;
    }
    
    .uiux-project-image .uiux-project-image-overlay{
        width: 100%;
        height: 64vw;

        display: flex;
        justify-content: center;
    }
    
    .uiux-project-image-overlay .uiux-project-description{
        font-size: 20px;
    }
    
    .uiux-project-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: max-content;
    }

    .project-switch-tab {
        display: none !important;
    }


    /* Fun */
    .visual-container{
        height: max-content;
        gap: 24px;
    }
    .visual-gallery-container{
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: max-content;
        width: 100%;
    }

    .tilt-right, .tilt-right-small, .tilt-left, .tilt-left-small, .work5, .work8, .tilt-none{
        transform: scale(1) rotateZ(0deg) !important;
    }

    .visual-gallery-container div img{
        width: 100%;
    }

    .visual-caption{
        display: none;
    }

    #visual-overlay, #visual-overlay-global{
        display: none;
    }
    

    /* Project */
    .project-navigation-container{
        position: fixed;
        top: 25vh;
        left: 24px;
    
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    
        width: 180px;
        height: 50vh;
    
        border-radius: 16px;
        background-color: #edf0e4;
    
        padding: 24px;
    
        opacity: 0;
    
        transition: all 0.3s ease-in-out;

        z-index: 1;
    }

    .project-section-container{
         /* Leave nav bar portion */
        margin: 120vh 0 0 0;

        padding: 0 24px 0 24px;

        display: flex;

        width: calc(100vw - 48px);
        max-width: none;
    }

    .project-cover-image-container img{
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: cover;
    } 
    
    .fade{
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    
    
    .project-info-container {
        width: 100vw;
        max-width: 100vw;
        height: max-content;
        min-height: 200px;
        background-color: #FBFFF2;
        
        z-index: 1;
    
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 24px;

        padding: 5vh 48px 10vh 48px; /* Adds space inside */
        box-sizing: border-box; /* Ensures padding is included within the width */
    }


    .project-info-container-left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        max-width: none;
        height: max-content;
    }

    .project-info-container-left p{
        display: none;
    }
    
    .project-info-container-right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    
        gap: 8px;
        width: 100%;
        max-width: none;
        height: max-content;
    
        font-size: 12px;
    }

    .circle{
        transform: scale(0.8);
    }

    @keyframes waveEffect {
        0% { transform: scale(0.8); opacity: 1; }
        50% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(0.8); opacity: 1; }
    }

    .uiux-landing-grid{
        grid-template-columns: 0vw 50vw 50vw;
        grid-template-rows: 15vh 20vh 35vh 30vh;
    }

    .navigation-tab{
        width: 80px;
    }

    .uiux-landing-grid .left-string{
        opacity: 0;
    }

    .uiux-landing-grid .right-top, .uiux-landing-grid .right-mid{
        padding: 0 24px 0 24px;
    }

    .uiux-landing-grid .uiux-mobile-button{
        opacity: 1;
    }


    /* About */
    .about-heading-container{
        flex-direction: column;
        margin-top: 96px;
        justify-content: center;
        gap: 8px;
        width: 100vw;
        height: 120vh;
        box-sizing: border-box;

        padding-left: 16px;
        padding-right: 16px;
    }

    .about-background-portraits {
        width: 60vw;
    }
    
    .about-background-portraits .about-image {
        width: 60vw;
        aspect-ratio: 1;
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
    }

    .about-heading-text{
        justify-content: flex-start;
        align-items: center;
        width: 100vw;
        height: max-content;
        padding: 0 48px 0 48px;
        box-sizing: border-box;
    }

    .about-heading-block .about-heading{
        justify-content: center;
        align-items: center;
    }

    .about-heading-block-wrapper{
        transform-origin: center;
        transform: scale(0.5);
    }


    .about-description{
        width: 100%;
        box-sizing: border-box;
        text-align: center;

        position: relative;
        top: -5vh;
    }

    .about-tag-grid{
        width: 100%;
        height: max-content;
    }

    .about-personal-tag{
        font-size: 12px;
        width: max-content;
        height: max-content;
    }


    .about-sharing{
        display: flex;
        flex-direction: column;
        height: 100vh;
        align-items: center;
        justify-content: center;
    }

    .about-description{
        align-items: center;
    }


    .about-sharing-card-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 72vw;
        height: 64vh;
        gap: 24px; /* Ensures uniform spacing between all cards */
    }

    .about-sharing-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;
        gap: 16px;
        transition: transform 0.6s ease, opacity 0.6s ease, height 0.3s ease-in-out; /* Smooth transition */
        height: 60vh;
        width: 72vw;
    }

    .about-sharing-card:nth-child(1) {
        transform: translateY(0px) scale(1);
        z-index: 10;
    }

    .about-sharing-card:nth-child(2) {
        transform: translateY(32px) scale(0.95);
        z-index: 9;
    }

    .about-sharing-card:nth-child(3) {
        transform: translateY(64px) scale(0.9);
        z-index: 8;
    }

    .about-sharing-card:nth-child(4) {
        transform: translateY(96px) scale(0.85);
        z-index: 7;
    }

    /* Ensure viewed state maintains uniform spacing */
    .about-sharing-card.viewed {
        transform: translateY(0px) scale(1);
        z-index: 10;
    }

    .about-sharing-card.viewed:nth-child(2) {
        transform: translateY(32px) scale(1);
    }

    .about-sharing-card.viewed:nth-child(3) {
        transform: translateY(64px) scale(1);
    }

    .about-sharing-card.viewed:nth-child(4) {
        transform: translateY(96px) scale(1);
    }

    /* Fix text resizing & ensure consistency */
    .about-sharing-card-text {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .album-name, .album-musician{
        justify-content: center;
        align-items: center;
    }


    .about-sharing-card-image {
        width: 70%;
        aspect-ratio: 1/1;
    }

    .about-sharing-card-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .about-album-button-wrapper{
        align-self: center;
    }

    /* project nav hidden */
    .project-navigation-container,
    .project-navigation-hide-button {
        display: none !important;
    }
    
    .project-section-container{
        box-sizing: border-box;
        margin: 80vh 0 0 0  !important;
        width: 100vw !important;
    }

    .project-section-container div{
        max-width: none !important;
    }

    .project-section-container.cosmo,  .project-section-container.stagy{
        padding: 0 24px 0 24px !important;
    }
    .project-section-container.harman{
        padding: 0 !important;
    }

}



@media (hover: none) {
    .uiux-project-card.active {
        transform: rotate(-3Deg);
        z-index: 999;
    }
    
    .uiux-project-card.active .uiux-project-image .uiux-project-image-overlay {
        visibility: visible;
    }

    .custom-cursor{
        display: none;
    }

    .uiux-project-card.active h3 {
        color: #f9ba3b;
    }

    .uiux-project-card.active .uiux-project-tag {
        background-color: #f9ba3b;
        color: #FBFFF2 !important;
    }
}