body {
    background: var(--global-primary-500, #151922);
    /* cursor: none; - Will be set by JS when custom cursor is ready */
}

/* Custom Cursor */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--global-secondary-500, #EFEEE5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    opacity: 0; /* Start hidden, will be shown by JS */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth transform for fallback */
}

.cursor-dot.text-hover {
    mix-blend-mode: difference;
    background: var(--global-secondary-500, #EFEEE5);
}

/* Custom cursor active state - applied by JS */
body.custom-cursor-active {
    cursor: none;
}

body.custom-cursor-active * {
    cursor: none;
}

body.custom-cursor-active h1, 
body.custom-cursor-active h2, 
body.custom-cursor-active h3, 
body.custom-cursor-active p, 
body.custom-cursor-active a, 
body.custom-cursor-active span, 
body.custom-cursor-active .tag,
body.custom-cursor-active img {
    cursor: none;
}

/* Make sure clickable elements are still identifiable */
a, button {
    position: relative;
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cursor-dot {
        display: none !important;
    }
    
    body, body.custom-cursor-active {
        cursor: auto !important;
    }
    
    body *, body.custom-cursor-active *, h1, h2, h3, p, a, span, .tag, img {
        cursor: auto !important;
    }
}

/* Fallback if GSAP fails to load */
body:not(.custom-cursor-active) .cursor-dot {
    display: none;
}

/* Scroll Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-delay {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.fade-in-delay.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Initial page load animation for project section */
@keyframes pageLoadFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project {
    display: flex;
    padding: 48px 156px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    animation: pageLoadFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.project-content {
    display: flex;
    padding: 48px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 64px;
    align-self: stretch;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.content h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--global-secondary-500, #EFEEE5);
    font: var(--Display-30-Med);
}

.content p {
    color: var(--global-secondary-800, #787773);

    font: var(--Text-20-Reg);
}

.content a {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    border: 1px solid var(--global-primary-400, #44474E);
    color: var(--global-secondary-800, #787773);
    font: var(--Text-14-Reg);
}
.project-info-tabs{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 96px;
    align-self: stretch;
}
.project-info-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    align-self: stretch;
}

.property-info {
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}

.property-info h1 {
    color: var(--global-secondary-800, #787773);
    font: var(--Text-18-Reg);
}

.property-info p {
    color: var(--global-secondary-500, #EFEEE5);
    font: var(--Text-18-Reg);
}
.project img{height: 675px;
    flex-shrink: 0;
    align-self: stretch;
}

.content-section{
    display: flex;
padding: 0px 156px;
padding-top: 48px;
flex-direction: column;
align-items: flex-start;
gap: 64px;
align-self: stretch;
}
.section-content{display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}
.section-content h1{
    color: var(--global-secondary-800, #787773);

  font: var(--Text-18-Med);

}
.section-content .content {
    display: flex;
    flex-direction: row;
    padding-bottom: 32px;
    align-items: space-between;
    justify-content: space-between;
   
    
}
.section-content .content h1{
    width: 350px;
    color: var(--global-secondary-500, #EFEEE5);
    font: var(--Text-20-Reg);
}
.section-content .content p{
   width: 550px;
    color: var(--global-secondary-600, #C7C6BF);

font: var(--Text-18-Reg);
}
.result-imgsection{
    display: flex;
padding: 0px 156px;
align-items: center;
gap: 24px;
align-self: stretch;
}

.result-imgsection img{
    height: 552px;
flex: 1 0 0;
}
.logo-section{
    display: flex;

flex-direction: column;
align-items: center;
gap: 16px;
padding-top: 64px;
}

.visual-thumb{
    display: flex;
padding: 96px 156px 0px 156px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
}
.visual-thumb h1{
    color: var(--global-secondary-800, #787773);
align-items: flex-start;
  font: var(--Text-18-Med);

}
.visual-thumb .heading{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
}

.sitemap img{
    width: 100%;
}
.Gallery{
    display: flex;
padding: 48px 156px 120px 156px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
align-self: stretch;
}
.Gallery img{
    width: 100%;
}
.thumb4{
    width: 100%;
}

/* CTA Section */
.cta-section {
    display: flex;
    padding: 48px 156px;
    justify-content: center;
    align-items: center;
    background: var(--global-primary-500, #151922);
    border-top: 1px solid var(--global-primary-400, #44474E);
}

.cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.cta-content p {
    color: var(--global-secondary-600, #C7C6BF);
    font: var(--Text-18-Reg);
    line-height: 1.5;
}

.cta-link {
    color: var(--global-secondary-500, #EFEEE5);
    font: var(--Text-18-Med);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cta-link:hover {
    color: var(--global-secondary-800, #787773);
}

/* UP NEXT Section */
.upnext-section {
    display: flex;
    padding: 80px 156px;
    background: var(--global-primary-500, #151922);
}

.upnext-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.upnext-content h2 {
    color: var(--global-secondary-800, #787773);
    font: var(--Text-18-Med);
    letter-spacing: 2px;
}

.upnext-project {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.upnext-project img {
   
}

.project-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.project-tags {
    display: flex;
    gap: 8px;
}

.tag {
    padding: 6px 12px;
    background: var(--global-secondary-500, #EFEEE5);
    color: var(--global-primary-500, #151922);
    font: var(--Text-14-Reg);
    
}

.project-details h3 {
    color: var(--global-secondary-500, #EFEEE5);
    font: var(--Text-20-Med);
}

.project-details p {
    color: var(--global-secondary-600, #C7C6BF);
    font: var(--Text-16-Reg);
    line-height: 1.6;
}

.see-more {
    color: var(--global-secondary-800, #787773);
    font: var(--Text-16-Reg);
    text-decoration: none;
    align-self: flex-start;
}

.see-more:hover {
    color: var(--global-secondary-500, #EFEEE5);
}

/* Footer */
.footer {
    display: flex;
    padding: 24px 156px;
    background: var(--global-primary-500, #151922);
    border-top: 1px solid var(--global-primary-400, #44474E);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-content p {
    color: var(--global-secondary-800, #787773);
    font: var(--Text-14-Reg);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 1024px) {
    .project {
        padding: 32px 80px;
    }
    
    .content-section,
    .upnext-section,
    .cta-section,
    .footer {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .visual-thumb {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .result-imgsection {
        padding-left: 80px;
        padding-right: 80px;
    }
    
    .Gallery {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Disable all animations on mobile for performance */
    .fade-in,
    .fade-in-delay,
    .slide-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    .project {
        animation: none;
        padding: 24px 20px;
        gap: 24px;
    }
    
    .project-content {
        padding: 24px 0;
        gap: 32px;
    }
    
    .project-info-tabs {
        flex-direction: column;
        gap: 24px;
    }
    
    .project-info-tab {
        flex-direction: column;
        gap: 8px;
    }
    
    .project img {
        height: auto;
        max-height: 300px;
        object-fit: cover;
    }
    
    /* Section spacing */
    .content-section {
        padding: 24px 20px !important;
    }
    
    .section-content .content {
        flex-direction: column;
        gap: 16px;
    }
    
    .section-content .content h1 {
        width: 100%;
        font: var(--Text-18-Med);
    }
    
    .section-content .content p {
        width: 100%;
        font: var(--Text-16-Reg);
    }
    
    /* Images */
    .result-imgsection {
        padding: 0 20px !important;
        flex-direction: column;
        gap: 16px;
    }
    
    .result-imgsection img {
        height: auto;
        max-height: 250px;
    }
    
    /* Logo section */
    .logo-section {
        padding-top: 32px;
        gap: 12px;
    }
    
    .logo-section img {
        max-height: 200px;
        object-fit: contain;
    }
    
    /* Visual section */
    .visual-thumb {
        padding: 32px 20px 0 20px !important;
        gap: 16px;
    }
    
    .visual-thumb .typo img {
        max-height: 200px;
        object-fit: contain;
    }
    
    /* Gallery */
    .Gallery {
        padding: 32px 20px 60px 20px !important;
        gap: 16px;
    }
    
    /* CTA */
    .cta-section {
        padding: 32px 20px !important;
    }
    
    .cta-content p {
        font: var(--Text-16-Reg);
        text-align: center;
    }
    
    .cta-link {
        font: var(--Text-16-Med);
    }
    
    /* UP NEXT */
    .upnext-section {
        padding: 32px 20px !important;
    }
    
    .upnext-project {
        flex-direction: column;
        gap: 20px;
    }
    
    .upnext-project img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .project-details h3 {
        font: var(--Text-18-Med);
    }
    
    .project-details p {
        font: var(--Text-14-Reg);
    }
    
    /* Footer */
    .footer {
        padding: 16px 20px !important;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .project {
        padding: 16px 16px;
    }
    
    .content-section {
        padding: 16px 16px !important;
    }
    
    .result-imgsection,
    .visual-thumb,
    .Gallery,
    .cta-section,
    .upnext-section,
    .footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .content h1 {
        font: var(--Text-24-Med);
    }
    
    .section-content .content h1 {
        font: var(--Text-16-Med);
    }
    
    .section-content .content p {
        font: var(--Text-14-Reg);
    }
}