body {
    background-color: #FAF8FF;    
    /* Very subtle purple tint */
}

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 1rem;
    /* background: linear-gradient(to bottom, #FAF8FF 0%, rgba(250, 248, 255, 0.2) 95%); */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 95%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 72px;
    z-index: 50;  
}

.nav-container {
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
}

:root {
    --nav-bg: rgba(255, 255, 255, 0.98);
    --nav-border: rgba(255, 255, 255, 0.3);
    --nav-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08),
                 0 0 0 1px rgba(255, 255, 255, 0.2);
}

:root[class~="dark"] {
    --nav-bg: rgba(17, 24, 39, 0.98);  /* gray-900 */
    --nav-border: rgba(31, 41, 55, 0.3); /* gray-800 */
    --nav-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2),
                 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.nav-blur {
    background: var(--nav-bg);    
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--nav-shadow);
    border: 1px solid var(--nav-border);       
}

.menu-item {
    transition: all 0.3s ease;    
}

.menu-item:hover {
    background-color: rgba(241, 245, 249, 0.9);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);    
}        

.btn-grey:hover{
    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.1);
}

.btn-blue:hover{
    box-shadow: inset 0 3px 5px rgba(15, 23, 42, 0.2);
}

.logo-text {
    display: inline-block;
}

.logo-circle:hover .logo-text {
    animation: rotate360 0.8s ease-in-out;
}

.glow-button-wrapper {
    position: relative;
    padding: 2px;
    border-radius: 9999px;
    overflow: hidden;
    background: radial-gradient(0% 0% at 50% 50%,
            rgba(0, 0, 0, 0) 100%,
            rgba(0, 0, 0, 0) 100%);
    transition: all 0.5s ease-in-out;   
}

/* Moving glow effect */
.glow-button-wrapper::before {
    content: '';
    position: absolute;
    inset: -150%;
    background: conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            /* rgb(255, 255, 255) 60deg, */
            /* #4444E3 60deg, */
            #1e293b 60deg,
            transparent 120deg);
    animation: rotate 4s linear infinite;
    filter: blur(15px);
    opacity: 0.8;    
}

/* Subtle border effect */
.glow-button-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(65% 75% at 50% 50%,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0) 100%);
    opacity: 0.3;
}

/* The actual button */
.glow-button {
    position: relative;    
    border-radius: 9999px;
    z-index: 100;
    transition: all 0.3s ease;    
}

/* Enhanced hover effects */
.glow-button-wrapper:hover::before {
    opacity: 0.7;
    inset: -100%;
    /* Bring glow closer on hover */
}

.glow-button-wrapper:hover {
    box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.3);
    background: radial-gradient(50% 100% at 50% 50%,
            rgba(0, 0, 0, 1) 100%,
            rgba(0, 0, 0, 1) 100%);
}

.glow-button-wrapper:hover .glow-button {
    /* transform: scale(1.02); */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.glow-button-wrapper:hover {
    animation: expandGradient 0.5s ease-in-out forwards;
}                

/* Add subtle blur for more ethereal effect */
.absolute img {
    /* filter: blur(1px); */
    mix-blend-mode: screen;
    /* This will help blend the overlapping images */
}

.group:hover .group-hover\:opacity-100 {
    transition-delay: 50ms;
    /* Slight delay for smoother appearance */
}     

/* Wave emoji */
.wave-emoji {
    display: inline-block;
    transform-origin: 70% 70%; /* Adjust this to change wave pivot point */
}

.wave-animation {
    animation: wave 0.7s ease-in-out;
}

/* Heading words animation style */
.word {
    display: inline-block;
    position: relative;
}

/* Optional underline effect for interactive words */
.word[data-has-popup="true"] {
    cursor: pointer;
    border-bottom: 1px dotted currentColor;
}

:root {
    --bg-start: #FAF8FF;
    --bg-end: #fcfafa;
}

:root[class~="dark"] {
    --bg-start: rgb(17, 24, 39, 1); /* gray-900 */
    --bg-end: rgb(31, 41, 55, 0.5);   /* gray-800 */
}

.main-section{
    background: linear-gradient(180deg, var(--bg-start) 50%, var(--bg-end) 100%);    
    /* background: linear-gradient(180deg, rgba(250,248,255,1) 50%, rgba(252,250,250,1) 100%); */
}

/* Top gradient */
.animate-gradient-enter {
    animation: gradientEnter 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}

/* Optional: Dark mode handling */
:root[class~="dark"] .animate-gradient-enter img {
    opacity: 0.6;
    mix-blend-mode: multiply;
}


.work-section{
    /* background: #fcfafa; */
    background: var(--work-section-gradient);
}

:root {
    --work-section-gradient: linear-gradient(
        180deg, 
        rgba(252, 250, 250, 1) 50%, 
        rgba(250, 248, 255, 1) 100%
    );
}

:root[class~="dark"] {
    --work-section-gradient: linear-gradient(
        180deg, 
        rgba(31, 41, 55, 0.5) 50%, 
        rgba(17, 24, 39, 1) 100% 
        /* rgba(17, 24, 39, 1) 50%, gray-900 */
        /* rgba(31, 41, 55, 1) 100% gray-800 */
    );
}

.experience-section {
    background: var(--experience-section-gradient);
 }
 
 :root {
    --experience-section-gradient: linear-gradient(
        180deg,
        rgba(250, 248, 255, 1) 50%,
        rgba(255, 255, 255, 1) 100%
    );
 }
 
 :root[class~="dark"] {
    --experience-section-gradient: linear-gradient(
        180deg,
        rgba(17, 24, 39, 1) 50%, /* gray-900 */
        rgba(17, 24, 39, 1) 100%
        /* rgba(31, 41, 55, 0.6) 100% gray-800 */
    );
 }

.perspective-1000 {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* blur background effect as cursor moves on the work card  */
.blur-effect {    
    z-index: 0;
    transition: opacity 0.3s ease;
    isolation: isolate; /* Create stacking context */
}

.blur-effect::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08; /* Adjust noise opacity */
    z-index: -1;
    /* Base64 encoded noise SVG - you can adjust colors in the SVG */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* Tramés gradient */
.blur-effect-trames {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(99, 102, 241, 0.1),
        rgba(244, 114, 182, 0.1) 40%,
        transparent 80%
    );
}

/* Freshturf gradient */
.blur-effect-freshturf {
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(126, 242, 157, 0.1),        
        rgba(15, 104, 169, 0.1) 40%,
        transparent 80%
    );
}

.work-card {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    border: 1px solid #faf8ff; 
    /* border: 2px solid #f8f7fd;  */
}

/* Dark mode styles */
:root[class~="dark"] .work-card {
    border: 1px solid #1f2937; /* gray-800 for dark mode */
}

.work-card > * {
    transform-style: preserve-3d;
}

/* Ensure content stays above the blur effect */
.work-card > *:not(.blur-effect) {
    position: relative;
    z-index: 1;
}

/* For the app scrolling */
.app-icon {
    /* width: 72px;
    height: 72px; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
    pointer-events: auto;    
    /* z-index: 1;
    transition: transform 0.3s ease; */
}

.app-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* Scroll container styles */
.app-scroll-container {    
    overflow-x: hidden;  
    position: relative;
    width: 100%;
    /* Add padding to container instead */
    padding-top: 0.5rem;
    padding-bottom: 2.5rem;    
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.app-scroll {
    display: flex;
    gap: 4rem;
    animation: infiniteScroll linear infinite;   
    will-change: transform;  /* Add these properties for smoother animation */
    width: max-content; /* Ensure container fits all items */      
}

.app-scroll:hover {
    animation-play-state: paused;
}

/* Add these new styles */
.app-icon-wrapper {
    position: relative;
    pointer-events: none; 
    /* transform-style: preserve-3d; Ensure tooltip stays with parent */
    /* padding-top: 0.5rem;
    padding-bottom: 2.5rem; Space for tooltip */
}

.tooltip {
    position: absolute;
    bottom: -2.5rem; /* Adjust this value as needed */
    left: 50%;    
    transform: translateX(-50%);    
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;    
    visibility: hidden; /* Make sure tooltip space is reserved */
    transition: opacity 0.3s ease;
    z-index: 50;
    pointer-events: none; 
     /* Make tooltip move with its parent */
     /* transform-origin: center;
     will-change: transform; */
    /* Prevent tooltip from interfering with hover */
    /* Optional: add drop shadow to tooltip */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

:root[class~="dark"] .tooltip {
    background: rgba(31, 41, 55, 0.95); /* gray-800 with high opacity */
    color: rgb(229, 231, 235); /* gray-200 */
}

/* Show tooltip on icon hover */
.app-icon:hover .tooltip {
    opacity: 1;    
    visibility: visible;
}


/* Explore section */
.explore-card {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Mobile card styles */
.explore-card-mobile {
    transform-origin: center;
    /* transition: all 0.3s ease; */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Faster transition */
    padding: 0 1rem;     
    width: 97%; /* Slightly less than full width to allow for off-screen positioning */
    margin-left: auto;
    margin-right: auto;   
    cursor: pointer;
    opacity: 0; /* Start hidden */
    will-change: transform, opacity; /* For better performance */
}

.shadow-inner-custom {
    box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.3);
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.2); */
}

/* Dark mode variant if needed */
:root[class~="dark"] .shadow-inner-custom {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.explore-card-mobile.left-offset {
    /* transform: translateX(-15%) rotate(-2deg); */
    transform: translateX(-15%);
}

.explore-card-mobile.right-offset {
    /* transform: translateX(15%) rotate(2deg); */
    transform: translateX(15%);
}

.explore-card-mobile.card-centered {
    transform: scale(1.02) rotate(0deg) translateX(0) !important;
    z-index: 20;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* Even faster for centering */
}


/* Optional: Add some perspective for better 3D feel */
.explore-mobile {
    perspective: 1000px;
    overflow-x: clip; /* Prevent horizontal scroll */
}

/* Individual card z-index for proper stacking */
.explore-card-mobile:nth-child(1) { z-index: 4; }
.explore-card-mobile:nth-child(2) { z-index: 3; }
.explore-card-mobile:nth-child(3) { z-index: 2; }
.explore-card-mobile:nth-child(4) { z-index: 1; }

/* When centered, override z-index */
.explore-card-mobile.card-centered {
    z-index: 20;
}

/* Adjust spacing between cards */
/* .explore-mobile .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
} */

/* Footer css */
.footer-gradient {
    position: relative;
    isolation: isolate; /* Create stacking context */
}

.footer-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: var(--footer-noise); /* Adjust noise opacity */
    z-index: -1;
    /* Base64 encoded noise SVG - you can adjust colors in the SVG */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

:root {
    --footer-noise: 0.40;
}

:root[class~="dark"] {
    --footer-noise: 0.10;
}

.footer-gradient {
    background: var(--footer-gradient);
    background-size: 250% 250%;
    animation: gradientShift 15s ease infinite;
}

:root {
    --footer-gradient: linear-gradient(
        120deg,
        rgb(255, 240, 255) 0%,
        rgb(245, 208, 254) 25%,
        rgb(255, 235, 235) 50%,
        rgb(255, 245, 210) 75%,
        rgb(240, 245, 255) 100%
    );
}

:root[class~="dark"] {
    --footer-gradient: linear-gradient(
        120deg,
        rgba(17, 24, 39, 1) 0%,     /* gray-900 */
        rgba(31, 41, 55, 1) 25%,     /* gray-800 */
        rgba(17, 24, 39, 1) 50%,     /* gray-900 */
        rgba(31, 41, 55, 1) 75%,     /* gray-800 */
        rgba(17, 24, 39, 1) 100%     /* gray-900 */
    );
}

/* .footer-gradient {
    background: linear-gradient(
        120deg,
        rgb(255, 255, 255) 0%,
        rgb(253, 240, 255) 10%,
        rgb(250, 223, 255) 20%,
        rgb(245, 208, 254) 30%,
        rgb(255, 220, 255) 40%,
        rgb(255, 235, 235) 50%,
        rgb(255, 245, 210) 60%,
        rgb(255, 250, 220) 70%,
        rgb(240, 245, 255) 80%,
        rgb(255, 255, 255) 100%
    );
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
} */

.status-dot {
    position: relative;
}

.status-dot::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: rgb(74, 222, 128);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse-ring 2s linear infinite;
}



/* Tooltip for the explore cards */
.custom-tooltip {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity 0.30s ease;
    will-change: transform;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: max-content;
}

/* Dark mode adjustments */
:root[class~="dark"] .custom-tooltip {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* Tag animations */
.custom-tooltip .flex gap-2 span {
    transition: all 0.2s ease;
}

.custom-tooltip .flex gap-2 span:hover {
    background-color: rgba(148, 163, 184, 0.2);
    transform: translateY(-1px);
}

/* Remove the bounce animation for smoother positioning */
.custom-tooltip.show {
    opacity: 1;
}