/* terminal.css — o "conteúdo de terminal" que vive dentro de cada painel */

.terminal-header{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:20px;
    padding-bottom:12px;

    border-bottom:1px solid var(--border);
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
}

.title{
    margin-left:10px;
    opacity:.7;
}

.terminal-content{
    font-size:1.5rem;
    text-align:left;
    line-height:1.4;
}

/* Cada .line entra em cascata. O índice (--i) é escrito pelo JS na hora de
   abrir o painel (js/panels.js), então inserir, mover ou comentar uma linha
   não exige renumerar nada. */
.line{
    opacity:0;
    transform:translateY(5px);

    animation:showLine .15s forwards;
    animation-delay:calc(var(--i, 0) * var(--line-step));
}

@keyframes showLine{
    to{
        opacity:1;
        transform:none;
    }
}

.prompt{
    color:var(--accent);
}

.result{
    opacity:.9;
}

.spacer{
    margin-top:10px;
}

/* Ícone recortado por mask: a cor vem de --icon, não de um filtro calculado.
   A forma vem de --src, definido por data-icon em css/icons.css. */
.icon{
    display:inline-block;
    width:14px;
    height:14px;
    margin-right:8px;
    vertical-align:-1px;

    background:var(--icon);

    -webkit-mask:var(--src) center/contain no-repeat;
    mask:var(--src) center/contain no-repeat;
}

/* alinha o texto de uma linha com o de outra que começa por ícone */
.indent{
    padding-left:22px;
}

.project-link{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px dotted var(--accent);
    transition:.2s;
}

.project-link:hover{
    color:#fff;
    text-shadow:0 0 8px var(--accent);
}

/* a setinha indica que o link sai do site; links internos (idiomas, exit)
   não a recebem */
.project-link[target="_blank"]::after{
    content:" ↗";
    opacity:.6;
}

.languages-list{
    font-size:1.2rem;
}