/* Custom styles for Tie Point USA */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&family=Noto+Sans:wght@400;500;700&display=swap');

:root {
    --primary: #11a4d4;
    --background-light: #f6f8f8;
    --background-dark: #101d22;
    --card-dark: #192d33;
    --border-dark: #233f48;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #111e22; 
}
::-webkit-scrollbar-thumb {
    background: #233f48; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #11a3d4; 
}

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

/* Screen reader only - visually hidden but accessible to assistive technologies */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Portfolio Grid */
.portfolio-grid {
    width: 100%;
}

.portfolio-item {
    position: relative;
    cursor: pointer;
    width: 100%;
}

@media (min-width: 768px) {
    .portfolio-item {
        max-width: 500px;
    }
}

@media (max-width: 767px) {
    .portfolio-item {
        max-width: 100%;
    }
}

.portfolio-item.hidden {
    display: none;
}

.portfolio-item.revealing {
    animation: fadeInUp 0.4s ease-out forwards;
}

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

.portfolio-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.portfolio-overlay {
    pointer-events: none;
}

.portfolio-overlay h4 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.025em;
}

/* Lightbox */
#lightbox-modal {
    backdrop-filter: blur(4px);
}

#lightbox-modal img {
    animation: fadeIn 0.3s ease-out;
}