/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #e2e8f0;
    position: relative;
}

/* Glass Effect */
.glass-effect {
    background: rgba(23, 23, 23, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scroll Animations */
.scroll-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-target.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(to right, #38bdf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Timeline Logo Animation */
.timeline-logo-container img {
    transition: transform 0.3s ease;
}

.timeline-logo-container:hover img {
    transform: scale(1.1);
}

/* Animated Grid Background */
.bg-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: pan 60s linear infinite;
}

@keyframes pan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 480px 480px;
    }
}

/* Typing Cursor */
.cursor {
    display: inline-block;
    background-color: #a78bfa;
    margin-left: 0.1rem;
    width: 4px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Project Card Hover Effects */
.project-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(56, 189, 248, 0.15);
}

.project-card .project-image {
    transition: transform 0.3s ease;
}

.project-card:hover .project-image {
    transform: scale(1.05);
}