@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS for Glassmorphism and Animations */

/* Background Gradient Animation */
body {
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* Glass Card Style */
.glass-card {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    backdrop-filter: blur(20px); /* Apply blur */
    border-radius: 2rem; /* More rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Subtle shadow */
}

/* Active navigation link in sidebar */
.sidebar a.active-link {
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Sidebar Text visibility */
.sidebar-text {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    white-space: nowrap; /* Prevent wrapping */
    position: absolute;
    left: 100%; /* Initially hidden to the right */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Adjust positioning */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    pointer-events: none; /* Do not block clicks */
    z-index: 10;
}

.sidebar a:hover .sidebar-text {
    opacity: 1;
}

/* Expanded sidebar state */
.sidebar.w-48 .sidebar-text {
    opacity: 1;
    position: static; /* Reset position */
    transform: none; /* Reset transform */
    margin-left: 0.5rem; /* Space between icon and text */
}

.sidebar.w-48 {
    width: 12rem; /* Tailwind w-48 is 12rem */
}

.content-area.ml-48 {
    margin-left: 12rem; /* Tailwind ml-48 is 12rem */
}


/* Animations */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Project Card Hover Effect */
.project-card:hover {
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5); /* Stronger shadow on hover */
    transform: translateY(-5px) scale(1.02); /* Slight lift and scale */
}

/* Project Modal Animations */
#project-modal.visible {
    opacity: 1;
    visibility: visible;
}

#project-modal.visible .modal-content {
    transform: scale(1);
}

#project-modal .modal-content {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}


/* Custom Scrollbar for Modal (Optional, for better aesthetic) */
#project-modal ::-webkit-scrollbar {
    width: 8px;
}

#project-modal ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

#project-modal ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}

#project-modal ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Tailwind CSS directives will go above this section in a real setup */
/* For this example, it's assumed Tailwind is processed first or included via CDN */

/* Basic reset/base styles */
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    line-height: 1.6;
    color: #333; /* Default text color, overridden by white in glassmorphism cards */
}
a {
    text-decoration: none;
}
button {
    cursor: pointer;
}