/* styles.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #1a1a1a;
    --secondary-color: #666666;
    --background-color: #ffffff;
    --accent-color: #f0f0f0;
}

html.dark {
    --primary-color: #ffffff;
    --secondary-color: #a0a0a0;
    --background-color: #121212;
    --accent-color: #1e1e1e;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--primary-color);
    background-color: var(--background-color);
    transition: background-color 0.3s ease;
}

.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }

.nav-link {
    position: relative;
    transition: opacity 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.case-study-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.case-study-card:hover {
    transform: translateY(-10px);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.slide-in {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in.visible {
    opacity: 1;
    transform: translateX(0);
}

.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal.visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: translateY(50px);
    transition: transform 0.5s ease;
}

.modal.visible .modal-content {
    transform: translateY(0);
}