.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(199 89% 48%) 100%);
}

.glow-primary {
    box-shadow: 0 0 40px hsl(217 91% 60% / 0.3);
}

.glow-subtle {
    box-shadow: 0 0 60px hsl(217 91% 60% / 0.15);
}

.card-gradient {
    background: linear-gradient(145deg, hsl(222 47% 14%) 0%, hsl(222 47% 11%) 100%);
}

.hero-gradient {
    background: linear-gradient(135deg, hsl(222 47% 11%) 0%, hsl(222 47% 8%) 100%);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeUp 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-600 {
    animation-delay: 600ms;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(217 33% 17% / 0.3);
}

::-webkit-scrollbar-thumb {
    background: hsl(217 91% 60% / 0.4);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(217 91% 60% / 0.6);
}

/* Code Editor Styles */
.code-container {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.code-line {
    display: flex;
    align-items: baseline;
    min-height: 1.5rem;
}

.code-line-number {
    display: inline-block;
    width: 2rem;
    text-align: right;
    padding-right: 1rem;
    color: #4b5563;
    user-select: none;
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* Syntax Highlighting (One Dark Pro inspired) */
.sh-k {
    color: #c678dd;
}

/* keyword: purple/pink */
.sh-f {
    color: #61afef;
}

/* function: blue */
.sh-c {
    color: #e5c07b;
}

/* class: yellow/gold */
.sh-s {
    color: #98c379;
}

/* string: green */
.sh-v {
    color: #e06c75;
}

/* variable: red/pink */
.sh-cm {
    color: #7f848e;
    font-style: italic;
}

/* comment: gray */
.sh-n {
    color: #d19a66;
}

/* number: orange */
.sh-p {
    color: #abb2bf;
}

/* punctuation: white-ish */
.sh-t {
    color: #56b6c2;
}

/* type-hint: cyan */