@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Space+Grotesk:wght@300..700&display=swap');
@import "tailwindcss";

:root {
    --background: #05070a;
    --accent-color: #1a56ff;
    --text-color: #f1f5f9;
    --text-three: #94a3b8;
    --text-label: #64748B;
    --text-placeholder: #334155;
    --bg-header: #0A0A0F;
    --header-border: #135bec1c;
    --nav-height: 4.5rem;
    --max-width: 1280px;
    --hero-gradient: radial-gradient(circle at 50% 40%, #135bec25 0%, #05070a 65%);
    --cards: #135bec0d;
    --cards-border: #135bec1a;
}


html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #1a56ff #135bec25;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

#home,
#about,
#projects,
#contact {
    scroll-margin-top: 110px;
}

/* loading */
#loader{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    background:#05070a;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    transition:opacity .7s ease;
}

/* animação sumir */
#loader.hide{
    opacity:0;
    pointer-events:none;
}

/* wrapper */
.wrapper{
    display:flex;
    align-items:center;
    gap:16px;
    animation:fadeIn .6s ease forwards;
}

/* logo */
.wrapper img{
    width:70px;
    height:70px;
    object-fit:contain;
    /* filter:invert(1); */
}

/* texto */
.name{
    font-size:20px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;

    background:linear-gradient(
        90deg,
        #333 30%,
        #ffffff 50%,
        #333 70%
    );
    background-size:400px 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:shimmer 2.2s linear infinite;
}

/* animações */
@keyframes shimmer{
    0%{
        background-position:-400px 0;
    }
    100%{
        background-position:400px 0;
    }
}

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


.timeline-item.active .dot {
    background-color: #1a56ff;
    box-shadow: 0 0 20px 5px rgba(37, 99, 235, 0.4);
    transform: scale(1.1);
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #1a56ff #135bec25;
    max-width: 100%;
    overflow-x: hidden;
}

section {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 3px solid #f1f1f1;
}

.nav-link.active,
.nav-link:hover {
    color: #1a56ff;
    transition: all 0.3s ease;
}

#home,
#about,
#timeline,
#projects,
#contact {
    scroll-margin-top: 6rem;
}

.lang-btn:not(.active) img {
    opacity: 0.4;
}

.lang-btn.active img {
    opacity: 1;
    transform: scale(1.1);
}