.glass { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

.text-gradient { 
    background: linear-gradient(to right, #b820e6, #da7d20); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* Custom scrollbar for better UX */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #b820e6; border-radius: 10px; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


.group-hover\/edu\:text-accent:hover {
    color: #b820e6;
}

#education-box:hover {
    border-color: rgba(184, 32, 230, 0.3);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

button:not(:disabled) {
    cursor: pointer;
}

#project-pagination button, #blog-pagination button {
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fade-in Animation for Pagination */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#project-grid > div, #blog-list > a {
    animation: fadeIn 0.6s ease forwards;
}

/* Ensure images don't stretch weirdly */
.aspect-video img {
    object-position: center top;
}

/* Hover effect for pagination buttons */
.glass:hover:not(:disabled) {
    border-color: rgba(184, 32, 230, 0.5);
    box-shadow: 0 0 20px rgba(184, 32, 230, 0.1);
}

/* Fix Modal Layout */
#project-modal > div:last-child {
    width: 100%;
    max-width: 900px; /* Limits width so it doesn't feel too stretched */
}

@media (max-width: 768px) {
    #project-modal > div:last-child {
        max-width: 100%;
    }
}

/* Modal Content Animation */
.animate-fadeIn {
    animation: fadeInModal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Line Clamp Helper */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Ensure the modal background covers everything */
#project-modal {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#project-modal::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Modal Content Animation */
.animate-fadeIn {
    animation: modalSlideUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glass effect for the modal store buttons */
.store-button {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.store-button:hover {
    border-color: #b820e6;
    background: rgba(184, 32, 230, 0.05);
    transform: translateY(-2px);
}

/* Modal Animation */
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.animate-modal-pop {
    animation: modal-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Modal Content Scrollbar */
#modal-content::-webkit-scrollbar {
    width: 4px;
}
#modal-content::-webkit-scrollbar-thumb {
    background: rgba(184, 32, 230, 0.3);
    border-radius: 10px;
}
#modal-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Sharp Modal & Larger Scale */
#project-modal > div:last-child {
    max-width: 1200px; /* Increased from 5xl (1024px) to 1200px */
    border-radius: 1rem; /* Reduced corner radius */
}

/* Reduced card radius for project grid too */
.glass.rounded-2xl {
    border-radius: 1rem !important;
}

.animate-modal-pop {
    animation: modal-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Modal Content Scrollbar Padding */
#modal-content {
    padding-left: 10%;
    padding-right: 10%;
}

@media (max-width: 768px) {
    #modal-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}