@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
    --mono: 'Share Tech Mono', monospace;
}

#bg-canvas{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-2;

    background:var(--bg);

    pointer-events:none;

}

body::before{

    content:"";

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-1;

    pointer-events:none;

    background:repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.015) 0px,
        rgba(255,255,255,.015) 1px,
        transparent 1px,
        transparent 3px
    );

    mix-blend-mode:overlay;

}

/* leve vinheta nos cantos pra dar profundidade */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:radial-gradient(
        circle at 50% 0%,
        rgba(255,0,60,.08),
        transparent 55%
    );

}

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(14px);

    background:rgba(8,8,8,.55);

    border-bottom:1px solid rgba(255,0,60,.15);

}

.nav-container{

    max-width:1000px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 25px;

    gap:20px;

}

.nav-logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-family:var(--mono);

    font-weight:700;

    color:var(--text);

    text-decoration:none;

    font-size:1rem;

    white-space:nowrap;

}

.nav-logo .dot-pulse{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--red);

    box-shadow:0 0 8px var(--red);

    animation:dotPulse 1.6s infinite;

    flex-shrink:0;

}

.nav-links{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

    justify-content:flex-end;

}

.nav-links a{

    color:var(--gray);

    text-decoration:none;

    font-size:.92rem;

    font-weight:500;

    position:relative;

    transition:.25s;

    padding-bottom:4px;

}

.nav-links a:hover,
.nav-links a.active{

    color:var(--text);

}

.nav-links a.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    height:2px;

    background:var(--red);

    box-shadow:0 0 8px var(--red);

    border-radius:5px;

}

.nav-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    width:34px;
    height:34px;

    background:transparent;

    border:none;

    cursor:pointer;

    padding:0;

    flex-shrink:0;

}

.nav-toggle span{

    display:block;

    width:100%;

    height:2px;

    border-radius:2px;

    background:var(--text);

    transition:.3s;

}

.nav-toggle.open span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.nav-toggle.open span:nth-child(2){

    opacity:0;

}

.nav-toggle.open span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}

/* empurra o conteúdo pra baixo da navbar fixa */

.container,
.page-container{

    margin-top:70px;

}

section[id]{

    scroll-margin-top:90px;

    padding-top:20px;

    padding-bottom:60px;

    border-bottom:1px solid rgba(255,255,255,.05);

    margin-bottom:20px;

}

section[id]:last-of-type{

    border-bottom:none;

}

@media (max-width:768px){

    .nav-toggle{

        display:flex;

    }

    .nav-links{

        position:fixed;

        top:64px;

        left:0;
        right:0;

        flex-direction:column;

        align-items:flex-start;

        gap:4px;

        max-height:0;

        overflow:hidden;

        background:#0a0a0a;

        backdrop-filter:blur(14px);

        border-bottom:1px solid rgba(255,0,60,.15);

        transition:max-height .35s ease;

        padding:0 25px;

        justify-content:flex-start;

        z-index:1000;

        width:100%;

        box-sizing:border-box;

    }

    .nav-links.open{

        max-height:420px;

        padding:14px 25px 22px;

    }

    .nav-links a{

        width:100%;

        padding:10px 0;

        font-size:1rem;

    }

    .nav-links a.active::after{

        display:none;

    }

    .nav-links a.active{

        color:var(--red-light);

    }

}

@media (max-width:600px){

    .nav-links a{

        font-size:.95rem;

    }

}

@keyframes dotPulse{

    0%{
        box-shadow:0 0 4px var(--red);
    }

    50%{
        box-shadow:0 0 14px var(--red),0 0 24px rgba(255,0,60,.5);
    }

    100%{
        box-shadow:0 0 4px var(--red);
    }

}

/* ---------- BADGE DE STATUS ---------- */

.status-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    padding:8px 18px;

    border:1px solid rgba(255,0,60,.35);

    border-radius:30px;

    background:rgba(255,0,60,.06);

    font-family:var(--mono);

    font-size:.8rem;

    letter-spacing:.05em;

    color:var(--red-light);

}

.gradient-text{

    background:linear-gradient(90deg,var(--red),#ff8a3d);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.avatar-wrap{

    position:relative;

    display:inline-block;

}

.binary-float{

    position:absolute;

    font-family:var(--mono);

    font-size:.85rem;

    color:rgba(255,0,60,.55);

    text-shadow:0 0 8px rgba(255,0,60,.4);

    animation:floatBinary 4s ease-in-out infinite;

    pointer-events:none;

    user-select:none;

}

.binary-float:nth-child(odd){

    animation-delay:1.2s;

}

.b1{ top:-10px; left:-15px; }
.b2{ top:5%; right:-25px; }
.b3{ bottom:10%; left:-30px; }
.b4{ bottom:-15px; right:0; }
.b5{ top:35%; left:-40px; }
.b6{ top:60%; right:-35px; }

@keyframes floatBinary{

    0%,100%{
        transform:translateY(0);
        opacity:.5;
    }

    50%{
        transform:translateY(-10px);
        opacity:1;
    }

}

.cta-group{

    display:flex;

    gap:16px;

    justify-content:center;

    margin-top:30px;

    flex-wrap:wrap;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 26px;

    border-radius:14px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    font-size:.95rem;

}

.cta-primary{

    background:var(--red);

    color:white;

    box-shadow:0 0 18px rgba(255,0,60,.3);

}

.cta-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 0 25px rgba(255,0,60,.5);

}

.cta-secondary{

    background:transparent;

    border:1px solid rgba(255,0,60,.4);

    color:var(--text);

}

.cta-secondary:hover{

    transform:translateY(-3px);

    border-color:var(--red);

    background:rgba(255,0,60,.08);

}

#backToTop{

    position:fixed;

    bottom:25px;

    right:25px;

    width:48px;
    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,0,60,.4);

    background:rgba(8,8,8,.7);

    backdrop-filter:blur(8px);

    color:var(--red);

    font-size:1.2rem;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transform:translateY(15px);

    transition:.3s;

    z-index:998;

}

#backToTop.visible{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}

#backToTop:hover{

    background:rgba(255,0,60,.15);

    box-shadow:0 0 18px rgba(255,0,60,.3);

}

.alice-terminal{

    margin-top:80px;

    margin-bottom:40px;

}

.terminal-window{

    background:#0a0a0a;

    border:1px solid rgba(255,0,60,.25);

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 0 30px rgba(255,0,60,.08);

}

.terminal-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 18px;

    background:#111;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.terminal-dots{

    display:flex;

    gap:8px;

}

.terminal-dots span{

    width:11px;
    height:11px;

    border-radius:50%;

    display:inline-block;

    background:#444;

}

.terminal-dots span:nth-child(1){ background:#ff5f56; }
.terminal-dots span:nth-child(2){ background:#ffbd2e; }
.terminal-dots span:nth-child(3){ background:#27c93f; }

.terminal-title{

    color:var(--gray);

    font-size:.85rem;

}

.terminal-body{

    padding:20px;

    height:320px;

    overflow-y:auto;

    font-family:var(--mono);

    font-size:.88rem;

    line-height:1.7;

    color:#d6d6d6;

}

.terminal-body::-webkit-scrollbar{

    width:8px;

}

.terminal-body::-webkit-scrollbar-thumb{

    background:rgba(255,0,60,.3);

    border-radius:10px;

}

.terminal-line{

    white-space:pre-wrap;

    word-break:break-word;

    margin-bottom:4px;

}

.terminal-line.cmd{

    color:var(--red-light);

}

.terminal-line.cmd::before{

    content:"alice@portfolio:~$ ";

    color:var(--red);

}

.terminal-line.error{

    color:#ff8080;

}

.terminal-line.highlight{

    color:#7CFC9C;

}

.terminal-input-row{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 20px;

    border-top:1px solid rgba(255,255,255,.06);

    background:#0d0d0d;

}

.terminal-prompt{

    color:var(--red);

    font-size:.88rem;

    flex-shrink:0;

}

.terminal-input{

    flex:1;

    background:transparent;

    border:none;

    outline:none;

    color:var(--text);

    font-family:var(--mono);

    font-size:.88rem;

}

.terminal-hint{

    text-align:center;

    color:var(--gray);

    font-size:.85rem;

    margin-bottom:18px;

}


.github-section{

    margin-top:60px;

    margin-bottom:50px;

}

.github-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:20px;

    margin-top:30px;

}

.github-card{

    display:flex;

    flex-direction:column;

    gap:12px;

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:22px;

    color:var(--text);

    transition:.3s;

}

.github-card:hover{

    transform:translateY(-5px);

    border-color:var(--red);

    box-shadow:0 0 20px rgba(255,0,60,.15);

}

.github-card-actions{

    display:flex;

    gap:10px;

    margin-top:6px;

    flex-wrap:wrap;

}

.github-code-btn,
.github-demo-btn{

    flex:1;

    text-align:center;

    padding:10px 14px;

    border-radius:12px;

    font-size:.85rem;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    min-width:110px;

}

.github-code-btn{

    background:transparent;

    border:1px solid rgba(255,0,60,.4);

    color:var(--text);

}

.github-code-btn:hover{

    border-color:var(--red);

    background:rgba(255,0,60,.08);

}

.github-demo-btn{

    background:var(--red);

    color:white;

}

.github-demo-btn:hover{

    box-shadow:0 0 16px rgba(255,0,60,.4);

    transform:translateY(-2px);

}

.github-demo-empty{

    flex:1;

    text-align:center;

    padding:10px 14px;

    border-radius:12px;

    font-size:.78rem;

    color:var(--gray);

    border:1px dashed rgba(255,255,255,.12);

    min-width:110px;

}

.github-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

}

.github-card-top h3{

    font-size:1.1rem;

    word-break:break-word;

}

.github-star{

    color:var(--red-light);

    font-size:.85rem;

    flex-shrink:0;

}

.github-card p{

    color:var(--gray);

    font-size:.9rem;

    line-height:1.6;

    flex:1;

}

.github-card-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    font-size:.78rem;

    color:var(--gray);

}

.github-lang{

    display:flex;

    align-items:center;

    gap:6px;

}

.lang-dot{

    width:9px;
    height:9px;

    border-radius:50%;

    display:inline-block;

}

.github-loading{

    color:var(--gray);

    text-align:center;

    grid-column:1 / -1;

}

.github-loading a{

    color:var(--red);

    text-decoration:none;

}


.mono{

    font-family:var(--mono);

}

.typing-cursor::after{

    content:"_";

    margin-left:3px;

    animation:blink 1s steps(2) infinite;

    color:var(--red);

}

@keyframes blink{

    50%{
        opacity:0;
    }

}

@media (max-width:768px){

    body{

        padding:20px 12px;

    }

    .container,
    .page-container{

        padding:20px;

        border-radius:24px;

    }

    .profile h1{

        font-size:2.4rem;

    }

    .profile img,
    .avatar-wrap img{

        width:120px;
        height:120px;

    }

    .subtitle{

        font-size:1.1rem;

    }

    .about-header h1,
    .contact-header h1{

        font-size:2rem;

    }

    .title{

        font-size:2.2rem;

    }

    .about-photo{

        width:140px;
        height:140px;

    }

    .cta-group{

        flex-direction:column;

        width:100%;

    }

    .cta-btn{

        justify-content:center;

        width:100%;

    }

    .projects-grid,
    .github-grid,
    .certificates-grid,
    .interest-grid{

        grid-template-columns:1fr;

    }

    .terminal-body{

        height:260px;

        font-size:.8rem;

    }

    .contact-card{

        padding:14px 16px;

    }

    .contact-icon{

        width:48px;
        height:48px;

    }

    .quote-box{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}

@media (max-width:420px){

    .profile h1{

        font-size:1.9rem;

    }

    .nav-logo{

        font-size:.9rem;

    }

    .status-badge{

        font-size:.7rem;

        padding:6px 14px;

    }

    .cyber-node-wide{

        flex-direction:column;

        text-align:center;

    }

    .hacker-timeline{

        padding-left:20px;

    }

    .hacker-node{

        padding-left:20px;

    }

    .hacker-node-dot{

        left:-22px;

    }

    .about-mini-terminal .terminal-body{

        min-height:180px;

        font-size:.78rem;

    }

}

.reveal{

    opacity:0;

    transform:translateY(24px);

    transition:opacity .7s ease, transform .7s ease;

    will-change:opacity, transform;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

@media (prefers-reduced-motion: reduce){

    .reveal{

        opacity:1;

        transform:none;

        transition:none;

    }

}

.section-title{

    text-align:center;

}

.subtitle{

    text-align:center;

}

.title,
.about-header h1,
.contact-header h1{

    text-align:center;

}

.quote-log{

    display:flex;

    align-items:flex-start;

    gap:12px;

    max-width:600px;

    margin:0 auto 50px;

    padding:18px 22px;

    border:1px solid rgba(255,0,60,.25);

    border-radius:14px;

    background:rgba(255,0,60,.04);

    color:var(--gray);

    font-style:italic;

}

.quote-log-prompt{

    color:var(--red);

    font-style:normal;

    flex-shrink:0;

}

.quote-log p{

    margin:0;

}

.about-grid{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:30px;

    align-items:stretch;

    margin-bottom:40px;

}

.about-text{

    margin-bottom:0;

}

.about-mini-terminal .terminal-body{

    height:auto;

    min-height:220px;

}

@media (max-width:900px){

    .about-grid{

        grid-template-columns:1fr;

    }

}

.curiosity-terminal .terminal-body{

    height:auto;

    min-height:auto;

    padding:22px;

}

.hacker-timeline{

    display:flex;

    flex-direction:column;

    gap:0;

    position:relative;

    padding-left:30px;

    margin-bottom:40px;

}

.hacker-timeline::before{

    content:"";

    position:absolute;

    left:8px;

    top:6px;

    bottom:6px;

    width:2px;

    background:linear-gradient(
        180deg,
        var(--red),
        rgba(255,0,60,.1)
    );

}

.hacker-node{

    position:relative;

    padding:0 0 35px 28px;

}

.hacker-node:last-child{

    padding-bottom:0;

}

.hacker-node-dot{

    position:absolute;

    left:-30px;

    top:4px;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#0a0a0a;

    border:2px solid var(--red);

    box-shadow:0 0 10px rgba(255,0,60,.5);

}

.hacker-node-dot.active{

    background:var(--red);

    animation:dotPulse 1.6s infinite;

}

.hacker-node-content{

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:18px 22px;

    transition:.3s;

}

.hacker-node-content:hover{

    border-color:var(--red);

    transform:translateX(4px);

    box-shadow:0 0 18px rgba(255,0,60,.12);

}

.hacker-node-tag{

    display:inline-block;

    color:var(--red-light);

    font-size:.78rem;

    margin-bottom:8px;

}

.hacker-node-content h3{

    font-size:1.05rem;

    margin-bottom:4px;

}

.hacker-node-content p{

    color:var(--gray);

    font-size:.9rem;

}

.hacker-skills{

    margin-top:30px;

    margin-bottom:50px;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.hacker-skill-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:8px;

    font-size:.9rem;

}

.hacker-skill-info span:first-child{

    color:var(--text);

}

.hacker-skill-pct{

    color:var(--red-light);

}

.hacker-bar{

    position:relative;

    overflow:hidden;

}

.hacker-bar .progress{

    width:0%;

    position:relative;

    transition:width 1.4s cubic-bezier(.2,.8,.2,1);

    overflow:hidden;

}

.hacker-bar .progress::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    animation:scanShine 2.2s infinite;

}

@keyframes scanShine{

    0%{ transform:translateX(-100%); }

    100%{ transform:translateX(100%); }

}

.tool-hex-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(110px,1fr));

    gap:18px;

    margin-bottom:40px;

}

.tool-hex{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    padding:22px 10px;

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    transition:.3s;

    cursor:default;

}

.tool-hex i{

    font-size:1.8rem;

    color:var(--red);

    transition:.3s;

}

.tool-hex span{

    font-size:.78rem;

    color:var(--gray);

}

.tool-hex:hover{

    transform:translateY(-6px);

    border-color:var(--red);

    box-shadow:0 0 18px rgba(255,0,60,.2);

}

.tool-hex:hover i{

    transform:scale(1.15);

    text-shadow:0 0 14px rgba(255,0,60,.6);

}

.contact-status{

    margin-bottom:18px;

}

.cyber-contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:40px;

}

.cyber-node{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:32px 16px;

    background:rgba(255,255,255,.02);

    border:1px solid rgba(255,0,60,.18);

    border-radius:14px;

    text-decoration:none;

    color:var(--text);

    transition:.3s;

    text-align:center;

}

.cyber-node-wide{

    grid-column:1 / -1;

    flex-direction:row;

    gap:18px;

    padding:24px;

}

.cyber-node i{

    font-size:2rem;

    color:var(--red);

    transition:.3s;

}

.cyber-node h3{

    font-size:1rem;

}

.cyber-node-tag{

    color:var(--gray);

    font-size:.75rem;

    word-break:break-word;

}

.cyber-node:hover{

    border-color:var(--red);

    background:rgba(255,0,60,.06);

    box-shadow:0 0 22px rgba(255,0,60,.18);

    transform:translateY(-4px);

}

.cyber-node:hover i{

    transform:scale(1.15);

    text-shadow:0 0 14px rgba(255,0,60,.6);

}

.cyber-corner{

    position:absolute;

    width:14px;
    height:14px;

    border:2px solid var(--red);

    opacity:.6;

    transition:.3s;

}

.cyber-node:hover .cyber-corner{

    opacity:1;

}

.cyber-corner.tl{ top:6px; left:6px; border-right:none; border-bottom:none; }
.cyber-corner.tr{ top:6px; right:6px; border-left:none; border-bottom:none; }
.cyber-corner.bl{ bottom:6px; left:6px; border-right:none; border-top:none; }
.cyber-corner.br{ bottom:6px; right:6px; border-left:none; border-top:none; }

.title:hover,
.profile h1:hover{

    animation:glitchShake .25s linear;

}

@keyframes glitchShake{

    0%{ transform:translate(0,0); }
    20%{ transform:translate(-2px,1px); }
    40%{ transform:translate(2px,-1px); }
    60%{ transform:translate(-1px,1px); }
    80%{ transform:translate(1px,-1px); }
    100%{ transform:translate(0,0); }

}

#home .avatar-wrap{

    margin-top:55px;

}

.hacker-mascot{

    position:absolute;

    top:-58px;

    right:-18px;

    width:64px;

    height:64px;

    z-index:5;

    animation:mascotFloat 3.6s ease-in-out infinite;

    filter:drop-shadow(0 0 10px rgba(255,0,60,.35));

}

.hacker-mascot svg{

    width:100%;

    height:100%;

}

@keyframes mascotFloat{

    0%,100%{

        transform:translateY(0) rotate(-4deg);

    }

    50%{

        transform:translateY(-14px) rotate(4deg);

    }

}

@media (max-width:480px){

    .hacker-mascot{

        width:48px;
        height:48px;

        top:-44px;

        right:-8px;

    }

}