/* Estilos do Editor de Código Animado */
.code-editor-container {
    overflow-x: auto;
}

.code-editor {
    font-family: 'Fira Code', monospace;
    padding: 1.5rem;
    color: #E5E7EB; /* gray-200 */
    white-space: pre; /* Garante que o código não quebre a linha */
}

.code-editor .token-comment {
    color: #6B7280;
}

/* gray-500 */
.code-editor .token-keyword {
    color: #F472B6;
}

/* pink-400 */
.code-editor .token-class-name {
    color: #60A5FA;
}

/* blue-400 */
.code-editor .token-function {
    color: #A7F3D0;
}

/* custom green */
.code-editor .token-string {
    color: #FBBF24;
}

/* amber-400 */
.code-editor .token-variable {
    color: #FFFFFF;
}

.blinking-cursor {
    display: inline-block;
    width: 10px;
    height: 1.25rem;
    background-color: #E5E7EB;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Project Card Hover */
.project-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.project-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px 0px #000;
}
.project-card:hover .project-icon {
    transform: rotate(12deg);
    color: #FFD700 !important;
    transition: transform 0.2s, color 0.2s;
}

/* Skill Tag Hover */
.skill-tag {
    transition: all 0.2s;
    display: inline-block;
}
.skill-tag:hover {
    transform: scale(1.05) rotate(-1deg);
    background-color: #FFD700 !important;
}

/* Reveal on Scroll */
@supports (animation-timeline: view()) {
    .reveal-on-scroll {
        animation: fadeSlideUp linear both;
        animation-timeline: view(block);
        animation-range: entry 0% cover 30%;
    }
}
@supports not (animation-timeline: view()) {
    .reveal-on-scroll {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Header Scrolled */
.header-inner {
    transition: padding 0.3s ease;
}
.header-inner.header-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Nav Links Underline */
.nav-link {
    position: relative;
    text-decoration: none;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 4px;
    bottom: -4px;
    left: 0;
    background-color: #fbcfcf; /* Pastel neo-pink to match the theme */
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}