* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================================
   SISTEMA TIPOGRÁFICO — DIGITAL PUNK
   ---------------------------------------------------------
   Display  → Brutalista  (só o "PORTFOLIO")
   Títulos  → Relidux     (nome, títulos de secção, projetos, números)
   Detalhes → Snasm       (profissão, passos, skills, certificado)
   Sistema  → Space Mono  (texto corrido, menu, etiquetas, listas)
   ========================================================= */

@font-face {
    font-family: 'brutalista';
    src: url('../Fonts/Y2K BRUTALISM TYPEFACE.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Relidux';
    src: url('../Fonts/RELIDUX.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Snasm';
    src: url('../Fonts/SNASM LT.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('../Fonts/SpaceMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('../Fonts/SpaceMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* cores base */
    --ink: #000000;
    --paper: #F0EDE5;
    --paper-2: #e4e1db;

    /* cores de glitch — as mesmas do magenta/ciano que já existem na tua foto */
    --magenta: #FF1FCE;
    --cyan: #00E5FF;

    /* famílias */
    --font-display: 'brutalista', 'Arial Black', sans-serif;
    --font-heading: 'Relidux', 'Arial Black', sans-serif;
    --font-accent: 'Snasm', 'Trebuchet MS', sans-serif;
    --font-mono: 'Space Mono', 'Courier New', monospace;

    /* escala (fluida) */
    --fs-display: min(calc((100vw - 48px) / 14), 240px);
    --fs-xl: clamp(40px, 4.4vw, 68px);
    --fs-h2: clamp(30px, 2.9vw, 44px);
    --fs-h3: clamp(22px, 1.95vw, 30px);
    --fs-lead: clamp(15px, 1.15vw, 18px);
    --fs-body: clamp(14px, 1.05vw, 16px);
    --fs-small: clamp(12px, 0.9vw, 14px);

    /* movimento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    cursor: crosshair;
}

a {
    cursor: pointer;
}

h1, h2, h3, h4, li, p {
    font-weight: normal;
    font-synthesis: none;
}

::selection {
    background: var(--magenta);
    color: var(--ink);
}

/* =========================================================
   ESTRUTURA — MENU
   ========================================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--paper-2);
    border-bottom: 3px solid var(--ink);
}

.navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
}

.nav-logo {
    justify-self: start;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.nav-logo span {
    color: var(--magenta);
    animation: pisca 1s steps(1) infinite;
}

.nav-logo:hover {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

.navbar-ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style-type: none;
}

.navbar-li a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 14px;
}

.nav-relogio {
    justify-self: end;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-relogio b {
    color: var(--magenta);
    font-weight: 700;
    margin-right: 6px;
}

/* barra de progresso do scroll, por baixo do menu */
.scroll-progresso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, var(--magenta), var(--cyan));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* =========================================================
   ESTRUTURA — GERAL
   ========================================================= */
.conteudo-site {
    padding: 0 20px;
}

.botao {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 3px solid var(--ink);
    padding: 14px 20px;
    transition: transform 0.2s steps(2), box-shadow 0.2s steps(2);
}

.botao-cheio {
    background: var(--ink);
    color: var(--paper);
}

.botao:hover,
.botao:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--cyan);
    outline: none;
}

.botao:not(.botao-cheio):hover {
    background: var(--ink);
    color: var(--paper);
}

/* secções em caixas coladas umas às outras */
.seccao {
    border: 3px solid var(--ink);
}

.seccao + .seccao,
.proj-faixa + .seccao,
.hero + .seccao {
    border-top: none;
}

.seccao-topo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 22px 20px;
    border-bottom: 3px solid var(--ink);
}

.seccao-num {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--magenta);
}

.titulo-seccao {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.seccao-link {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.seccao-link:hover {
    color: var(--magenta);
    text-shadow: 2px 0 var(--cyan);
}

/* duas colunas lado a lado (processo/skills, formação/sobre mim) */
.seccao-dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.seccao-dupla > * + * {
    border-left: 3px solid var(--ink);
}

.coluna-corpo {
    padding: 8px 20px 36px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 62px);
    min-height: calc(100svh - 62px);
}

.portfolio-titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 26px 0 6px;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    cursor: default;
}

.portfolio-titulo h1 {
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
    font-kerning: none;
}

.portfolio-conteudo-flex {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 1.35fr;
    align-items: end;
    gap: 40px;
    margin-top: 10px;
}

.bloco-texto {
    align-self: center;
    padding: 20px 0 40px;
}

.hero-label {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 14px;
}

.portfolio-subtitulo {
    display: flex;
    flex-direction: column;
}

.nome {
    margin-left: 50px;
}

.nome h2,
.sobrenome h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    line-height: 1.02;
    letter-spacing: -0.015em;
}

.profissao {
    margin-top: 20px;
}

.profissao h3,
.profissao2 h3 {
    font-family: var(--font-accent);
    font-size: var(--fs-h3);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.linha-inicio {
    border: none;
    height: 3px;
    width: 60px;
    background-color: var(--ink);
    margin: 20px 0;
}

.portfolio-descricao p {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    line-height: 1.7;
    max-width: 520px;
}

.hero-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.portfolio-imagem {
    position: relative;
    align-self: end;
}

.portfolio-imagem img {
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.hero-status {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    border: 3px solid var(--ink);
    padding: 12px 20px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-status .ponto {
    color: var(--cyan);
    animation: pisca 1.4s steps(1) infinite;
}

.hero-scroll {
    display: inline-block;
    animation: desce 1.6s steps(3) infinite;
}

@keyframes desce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* a faixa na Home fica colada à barra de estado */
.hero + .proj-faixa {
    border-top: none;
}

/* =========================================================
   PROJETOS (Home)
   ========================================================= */
.projetos-grelha {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.coluna-projeto {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 26px 20px 20px;
    color: var(--ink);
    text-decoration: none;
}

.coluna-projeto + .coluna-projeto {
    border-left: 3px solid var(--ink);
}

.coluna-topo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.caixa-contadora {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: var(--ink);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 38px;
    line-height: 80px;
    text-align: center;
}

.div-titulos {
    flex: 1;
    min-width: 0;
}

.nome-projetos {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1.1;
}

.descricao-projetos {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 8px;
}

.descricao-projetos::before {
    content: "// ";
    color: var(--magenta);
}

.mockup img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 3px solid var(--ink);
}

.coluna-rodape {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px dashed rgba(0, 0, 0, 0.35);
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.coluna-rodape span:last-child {
    transition: transform 0.25s steps(3);
}

.coluna-projeto:hover .coluna-rodape span:last-child {
    transform: translate(4px, -4px);
    color: var(--magenta);
}

/* =========================================================
   PROCESSO + SKILLS
   ========================================================= */
.processo {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 26px;
}

.conteudo-processo {
    flex: 1;
}

.caixa-numeracao {
    background-color: var(--ink);
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.caixa-numeracao h3 {
    color: #FFFFFF;
    font-size: 34px;
    text-align: center;
    line-height: 70px;
    font-family: var(--font-heading);
}

.titulo-descritivo h4 {
    font-family: var(--font-accent);
    font-size: var(--fs-h3);
    line-height: 1.15;
    font-weight: normal;
}

.texto-descritivo {
    font-family: var(--font-mono);
    margin-top: 6px;
    max-width: 420px;
}

.texto-descritivo p {
    font-size: var(--fs-body);
    line-height: 1.5;
}

.boxes-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 26px;
}

.box-litlle {
    border: 3px solid var(--ink);
    height: 90px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
}

.imagem-litlle-box {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.imagem-litlle-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.titulo-litlle-box {
    font-family: var(--font-accent);
    font-size: var(--fs-h3);
}

/* =========================================================
   FORMAÇÃO + SOBRE MIM
   ========================================================= */
.subtitulo-caixa-pes-direita {
    margin-top: 26px;
}

.subtitulo-caixa-pes-direita h3 {
    font-family: var(--font-accent);
    font-size: var(--fs-h3);
    line-height: 1.2;
}

.desc-titulo-caixa-pes-direita {
    margin-top: 10px;
}

.desc-titulo-caixa-pes-direita p {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 3px 8px;
}

.lista-ul-skils {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    list-style: none;
    margin-top: 28px;
}

.lista-li-skils {
    margin-bottom: 22px;
    line-height: 1.2;
}

.lista-li-skils::before {
    content: "> ";
    color: var(--magenta);
}

.descricao-caixa-esquerda {
    margin-top: 26px;
}

.descricao-caixa-esquerda p {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    line-height: 1.8;
    max-width: 620px;
}

.sobre-dados {
    margin-top: 34px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    max-width: 620px;
}

.sobre-dados > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.35);
}

.sobre-dados > div:last-child {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.35);
}

.sobre-dados dt {
    color: #6b675f;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1000px) {
    .projetos-grelha {
        grid-template-columns: 1fr 1fr;
    }

    .coluna-projeto:nth-child(3) {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 3px solid var(--ink);
    }

    .coluna-projeto:nth-child(3) .mockup img {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 800px) {
    .navbar {
        grid-template-columns: auto 1fr;
        padding: 12px 16px;
    }

    .navbar-ul {
        justify-content: flex-end;
        gap: 0;
    }

    .navbar-li a {
        padding: 4px 10px;
        letter-spacing: 0.06em;
    }

    .nav-relogio {
        display: none;
    }

    .conteudo-site {
        padding: 0 12px;
    }

    .portfolio-conteudo-flex {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .bloco-texto {
        padding-bottom: 10px;
    }

    .nome {
        margin-left: 28px;
    }

    .portfolio-imagem img {
        max-height: 60vh;
    }

    .projetos-grelha,
    .seccao-dupla {
        grid-template-columns: 1fr;
    }

    .coluna-projeto + .coluna-projeto,
    .coluna-projeto:nth-child(3) {
        border-left: none;
        border-top: 3px solid var(--ink);
    }

    .coluna-projeto:nth-child(3) .mockup img {
        aspect-ratio: 4 / 3;
    }

    .seccao-dupla > * + * {
        border-left: none;
        border-top: 3px solid var(--ink);
    }

    .boxes-skills {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .box-litlle {
        height: 72px;
    }

    .imagem-litlle-box {
        width: 44px;
        height: 44px;
    }

    .hero-status span:nth-child(2) {
        display: none;
    }
}


/* =========================================================
   CAMADA DIGITAL PUNK
   ========================================================= */

/* ---------- Scanlines + grão por cima de tudo ---------- */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
}

body::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.045) 0,
        rgba(0, 0, 0, 0.045) 1px,
        transparent 1px,
        transparent 3px
    );
}

body::after {
    inset: -50%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grao 0.6s steps(4) infinite;
}

@keyframes grao {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -1%); }
    100% { transform: translate(0, 0); }
}

/* ---------- Arranque tipo Linux (criado pelo js/main.js) ---------- */
.boot {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: #050505;
    overflow: hidden;
    cursor: default;
}

.boot-ecra {
    position: absolute;
    inset: 0;
    padding: clamp(16px, 3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: #d9d6ce;
    font-family: var(--font-mono);
    font-size: clamp(11px, 0.95vw, 15px);
    line-height: 1.55;
    letter-spacing: 0.02em;
    white-space: pre-wrap;
    word-break: break-word;
    /* aberração cromática de monitor antigo */
    text-shadow: 1px 0 rgba(255, 31, 206, 0.55), -1px 0 rgba(0, 229, 255, 0.55);
    animation: crt-tremor 0.12s steps(2) infinite;
}

.boot-ecra.topo {
    justify-content: flex-start;
}

@keyframes crt-tremor {
    0%   { opacity: 0.96; }
    50%  { opacity: 1; }
}

/* scanlines + vinheta próprias do ecrã de arranque */
.boot::before,
.boot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.boot::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 3px
    );
}

.boot::after {
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
}

.boot .dim   { color: #77736b; }
.boot .ok    { color: var(--cyan); }
.boot .falha { color: var(--magenta); }
.boot .forte { color: #ffffff; }
.boot .user  { color: var(--magenta); }
.boot .path  { color: var(--cyan); }

.boot .inv {
    background: #d9d6ce;
    color: #050505;
    text-shadow: none;
    padding: 0 6px;
}

.boot-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: #d9d6ce;
    animation: pisca 0.9s steps(1) infinite;
}

.boot-saltar {
    position: absolute;
    right: clamp(16px, 3vw, 44px);
    top: clamp(16px, 3vw, 44px);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #77736b;
    animation: pisca 1.6s steps(1) infinite;
}

/* 1. ligar: linha branca que abre o ecrã */
.boot-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 2px;
    background: #ffffff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.8), 0 0 60px 10px rgba(0, 229, 255, 0.4);
    z-index: 4;
    animation: crt-liga 0.7s var(--ease-out) forwards;
}

@keyframes crt-liga {
    0%   { width: 0;    height: 2px;   opacity: 1; }
    40%  { width: 100%; height: 2px;   opacity: 1; }
    70%  { width: 100%; height: 100%;  opacity: 0.6; }
    100% { width: 100%; height: 100%;  opacity: 0; }
}

/* rasgos de glitch que atravessam o ecrã */
.boot-rasgo {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.boot.glitchando .boot-ecra {
    transform: translateX(var(--gx, 6px)) skewX(var(--gs, -3deg));
    text-shadow: 4px 0 var(--magenta), -4px 0 var(--cyan);
    filter: contrast(1.4);
}

/* 2. desligar: o ecrã colapsa numa linha e apaga */
.boot.desliga {
    background: transparent;
    transition: background 0.2s linear 0.35s;
}

.boot.desliga .boot-ecra {
    animation: crt-desliga 0.55s cubic-bezier(0.7, 0, 0.84, 0) forwards;
    background: #050505;
}

.boot.desliga::before,
.boot.desliga::after,
.boot.desliga .boot-saltar {
    opacity: 0;
    transition: opacity 0.2s;
}

@keyframes crt-desliga {
    0%   { transform: none; filter: brightness(1); }
    45%  { transform: scale(1, 0.004); filter: brightness(5); }
    75%  { transform: scale(0.002, 0.004); filter: brightness(8); opacity: 1; }
    100% { transform: scale(0, 0); opacity: 0; }
}

/* ---------- Entrada da página (só depois do arranque: .pronto) ---------- */
.js:not(.pronto) .conteudo-site,
.js:not(.pronto) .header {
    visibility: hidden;
}

.pronto .header {
    animation: header-in 0.6s steps(5) both;
}

@keyframes header-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* PORTFOLIO letra a letra */
.portfolio-titulo h1 .letra {
    display: inline-block;
}

.pronto .portfolio-titulo h1 .letra {
    animation: letra-liga 0.5s steps(2) both;
    animation-delay: calc(0.15s + var(--i) * 0.07s);
}

@keyframes letra-liga {
    0%   { opacity: 0; transform: translateY(-20%) skewX(-20deg); }
    40%  { opacity: 1; transform: translateY(8%) skewX(10deg); }
    60%  { opacity: 0.3; }
    100% { opacity: 1; transform: none; }
}

/* Linha, profissão, texto e foto "ligam-se" a piscar */
.pronto .profissao,
.pronto .profissao2,
.pronto .portfolio-descricao,
.pronto .linha-inicio {
    animation: liga 0.7s linear both;
}

.pronto .profissao           { animation-delay: 0.9s; }
.pronto .profissao2          { animation-delay: 1.0s; }
.pronto .linha-inicio        { animation-delay: 1.1s; }
.pronto .portfolio-descricao { animation-delay: 1.2s; }

@keyframes liga {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    20%  { opacity: 0; }
    35%  { opacity: 1; }
    45%  { opacity: 0.2; }
    60%  { opacity: 1; }
    100% { opacity: 1; }
}

.pronto .portfolio-imagem {
    animation: foto-scan 1.1s steps(12) 0.4s both;
}

@keyframes foto-scan {
    from { clip-path: inset(0 0 100% 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* ---------- GLITCH (texto) ---------- */
/* camadas ciano/magenta desalinhadas — o js/main.js põe data-text nos elementos */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
}

.glitch::before {
    color: var(--cyan);
    mix-blend-mode: multiply;
}

.glitch::after {
    color: var(--magenta);
    mix-blend-mode: multiply;
}

.pronto .glitch::before {
    animation: glitch-a 4.5s steps(1) infinite 1.8s; /* só depois das letras entrarem */
}

.pronto .glitch::after {
    animation: glitch-b 4.5s steps(1) infinite 1.8s;
}

/* hover: glitch contínuo e mais forte */
.glitch:hover::before {
    animation: glitch-a 0.9s steps(1) infinite;
}

.glitch:hover::after {
    animation: glitch-b 0.9s steps(1) infinite;
}

@keyframes glitch-a {
    0%   { opacity: 1; transform: translate(-4px, 0);  clip-path: inset(10% 0 60% 0); }
    3%   { opacity: 1; transform: translate(5px, 0);   clip-path: inset(55% 0 20% 0); }
    6%   { opacity: 1; transform: translate(-2px, 0);  clip-path: inset(30% 0 40% 0); }
    9%   { opacity: 0; }
    52%  { opacity: 1; transform: translate(3px, 0);   clip-path: inset(70% 0 5% 0); }
    55%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes glitch-b {
    0%   { opacity: 1; transform: translate(4px, 0);   clip-path: inset(65% 0 10% 0); }
    3%   { opacity: 1; transform: translate(-5px, 0);  clip-path: inset(15% 0 60% 0); }
    6%   { opacity: 1; transform: translate(3px, 0);   clip-path: inset(40% 0 35% 0); }
    9%   { opacity: 0; }
    52%  { opacity: 1; transform: translate(-3px, 0);  clip-path: inset(5% 0 75% 0); }
    55%  { opacity: 0; }
    100% { opacity: 0; }
}

/* O próprio texto dá um "salto" ao mesmo tempo que as camadas */
.pronto .portfolio-titulo h1 {
    animation: treme 4.5s steps(1) infinite 1.8s;
}

@keyframes treme {
    0%   { transform: translate(2px, 0) skewX(-4deg); }
    3%   { transform: translate(-3px, 0); }
    6%   { transform: none; }
    52%  { transform: translate(-2px, 0); }
    55%  { transform: none; }
    100% { transform: none; }
}

/* ---------- GLITCH (foto) ---------- */
/* o js/main.js cria duas cópias da foto por cima, que aparecem às fatias */
.foto-glitch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: multiply;
}

.foto-glitch.a { filter: drop-shadow(-6px 0 0 var(--cyan)); }
.foto-glitch.b { filter: drop-shadow(6px 0 0 var(--magenta)); }

.pronto .foto-glitch.a { animation: glitch-a 6s steps(1) infinite 2s; }
.pronto .foto-glitch.b { animation: glitch-b 6s steps(1) infinite 2s; }

.portfolio-imagem:hover .foto-glitch.a { animation: glitch-a 0.8s steps(1) infinite; }
.portfolio-imagem:hover .foto-glitch.b { animation: glitch-b 0.8s steps(1) infinite; }

.pronto .portfolio-imagem > img:not(.foto-glitch) {
    animation: foto-rgb 6s steps(1) infinite 2s;
}

@keyframes foto-rgb {
    0%   { filter: drop-shadow(3px 0 0 var(--magenta)) drop-shadow(-3px 0 0 var(--cyan)); }
    9%   { filter: none; }
    52%  { filter: drop-shadow(-2px 0 0 var(--magenta)) drop-shadow(2px 0 0 var(--cyan)); }
    55%  { filter: none; }
    100% { filter: none; }
}

/* ---------- Cursor a piscar nos títulos de secção ---------- */
.cursor-punk::after {
    content: "_";
    display: inline-block;
    margin-left: 0.08em;
    color: var(--magenta);
    animation: pisca 1s steps(1) infinite;
}

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

/* ---------- Revelar ao fazer scroll ---------- */
.js .reveal,
.js .reveal-texto {
    opacity: 0;
}

.js .reveal.is-in {
    animation: liga 0.6s linear both;
    animation-delay: calc(var(--d, 0) * 80ms);
}

.js .reveal-texto.is-in {
    opacity: 1;
}

/* ---------- Hovers ---------- */

/* Menu: aparecem [ ] à volta e o texto separa-se em RGB */
.navbar-li a::before,
.navbar-li a::after {
    position: absolute;
    top: 4px;
    opacity: 0;
    transition: opacity 0.1s steps(1), transform 0.25s steps(3);
}

.navbar-li a::before { content: "["; left: 0;  transform: translateX(6px); }
.navbar-li a::after  { content: "]"; right: 0; transform: translateX(-6px); }

.navbar-li a:hover::before,
.navbar-li a:hover::after,
.navbar-li a:focus-visible::before,
.navbar-li a:focus-visible::after {
    opacity: 1;
    transform: none;
}

.navbar-li a:hover,
.navbar-li a:focus-visible {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

/* Projetos */
.caixa-contadora,
.caixa-numeracao,
.mockup img {
    transition: transform 0.3s steps(3), box-shadow 0.3s steps(3), filter 0.3s steps(3);
}

.coluna-projeto:hover .caixa-contadora {
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--cyan);
}

.coluna-projeto:hover .caixa-contadora,
.processo:hover .caixa-numeracao h3 {
    animation: rgb-treme 0.4s steps(2) infinite;
}

@keyframes rgb-treme {
    0%   { text-shadow: 3px 0 var(--magenta), -3px 0 var(--cyan); }
    50%  { text-shadow: -3px 0 var(--magenta), 3px 0 var(--cyan); }
    100% { text-shadow: 2px 1px var(--magenta), -2px -1px var(--cyan); }
}

.coluna-projeto:hover .mockup img {
    transform: translate(-6px, -8px);
    box-shadow: 8px 8px 0 var(--magenta), 14px 14px 0 var(--cyan);
    filter: contrast(1.2);
}

.coluna-projeto:hover .nome-projetos {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

/* Processo */
.processo:hover .caixa-numeracao {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 var(--cyan);
}

.processo:hover .titulo-descritivo h4 {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

/* Skills: invertem para preto com texto em RGB */
.box-litlle {
    transition: background-color 0.2s steps(2), color 0.2s steps(2);
}

.box-litlle:hover {
    background-color: var(--ink);
    color: var(--paper);
}

.box-litlle:hover .titulo-litlle-box {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

.box-litlle:hover .imagem-litlle-box img {
    filter: invert(1) drop-shadow(2px 0 var(--magenta)) drop-shadow(-2px 0 var(--cyan));
}

/* Lista: linha selecionada como num terminal */
.lista-li-skils {
    width: fit-content;
    padding: 0 6px;
    margin-left: -6px;
}

.lista-li-skils:hover {
    background: var(--ink);
    color: var(--paper);
}

.lista-li-skils:hover::before {
    color: var(--cyan);
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js .reveal,
    .js .reveal-texto {
        opacity: 1;
    }

    .cursor-punk::after {
        opacity: 1;
    }
}


/* =========================================================
   PÁGINA PROJECTS
   ========================================================= */

/* link da página atual fica sempre com [ ] */
.navbar-li a[aria-current="page"]::before,
.navbar-li a[aria-current="page"]::after {
    opacity: 1;
    transform: none;
}

.pagina-projetos .conteudo-site {
    padding-bottom: 60px;
}

.pagina-projetos .portfolio-titulo {
    height: auto;
    padding: 28px 0 8px;
}

/* cores usadas nos pedaços de terminal */
.pagina-projetos .user  { color: var(--magenta); }
.pagina-projetos .path  { color: #008ea0; }
.pagina-projetos .ok    { color: #008ea0; }
.pagina-projetos .dim   { color: #6b675f; }

/* ---------- Terminal por baixo do título ---------- */
.proj-terminal {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    padding: 18px 0 26px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 30px;
}

.proj-resultado {
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.proj-comando .boot-cursor,
.proj-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    margin-left: 4px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: pisca 0.9s steps(1) infinite;
}

/* ---------- Faixa a correr ---------- */
.proj-faixa {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    border: 3px solid var(--ink);
    padding: 14px 0;
}

.proj-faixa-trilho {
    display: flex;
    width: max-content;
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.8vw, 28px);
    letter-spacing: 0.02em;
    animation: faixa 28s linear infinite;
}

.proj-faixa-trilho span {
    padding: 0 18px;
    white-space: nowrap;
}

.proj-faixa-trilho span:nth-child(even) {
    color: var(--magenta);
}

/* com JavaScript, o movimento é feito pelo js/main.js (acelera e abranda sem saltos) */
.js .proj-faixa-trilho {
    animation: none;
    will-change: transform;
}

.proj-faixa:hover .proj-faixa-trilho {
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

@keyframes faixa {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Filtros ---------- */
.proj-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 30px 0;
}

.proj-filtro {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 3px solid var(--ink);
    padding: 10px 16px;
    cursor: pointer;
    transition: transform 0.2s steps(2), box-shadow 0.2s steps(2);
}

.proj-filtro span {
    color: var(--magenta);
    margin-left: 6px;
}

.proj-filtro:hover {
    transform: translate(-3px, -3px);
    box-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 var(--cyan);
}

.proj-filtro.ativo {
    background: var(--ink);
    color: var(--paper);
}

.proj-filtro.ativo span {
    color: var(--cyan);
}

.proj-filtro:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 3px;
}

/* ---------- Cada projeto ---------- */
.proj {
    border: 3px solid var(--ink);
}

.proj + .proj {
    border-top: none;
}

.proj.escondido {
    display: none;
}

.proj.aparece {
    animation: liga 0.5s linear both;
}

.proj-topo {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 24px 20px;
    border-bottom: 3px solid var(--ink);
}

.proj-numero {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: var(--ink);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 48px;
    line-height: 100px;
    text-align: center;
    transition: transform 0.3s steps(3), box-shadow 0.3s steps(3);
}

.proj-nome {
    flex: 1;
    font-family: var(--font-heading);
    font-size: clamp(44px, 7vw, 124px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.proj-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
}

.proj-tag::before {
    content: "// ";
    color: var(--magenta);
}

.proj-corpo {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

.proj-imagem {
    position: relative;
    border-right: 3px solid var(--ink);
    padding: 44px 40px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* grelha técnica no fundo */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
}

.proj-invertido .proj-imagem {
    order: 2;
    border-right: none;
    border-left: 3px solid var(--ink);
}

.proj-moldura {
    position: relative;
    width: 100%;
    max-width: 620px;
    border: 3px solid var(--ink);
    transition: transform 0.3s steps(3), box-shadow 0.3s steps(3);
}

.proj-moldura img {
    display: block;
    width: 100%;
    height: auto;
}

.proj-moldura .foto-glitch {
    height: 100%;
    object-fit: cover;
}

/* linha de scan que passa por cima da imagem no hover */
.proj-moldura::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18%;
    background: linear-gradient(to bottom, transparent, rgba(0, 229, 255, 0.35), transparent);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

.proj:hover .proj-moldura::after {
    opacity: 1;
    animation: scan 1.4s linear infinite;
}

@keyframes scan {
    from { transform: translateY(-100%); }
    to   { transform: translateY(560%); }
}

.proj-imagem-legenda {
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b675f;
}

.proj-info {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
}

.proj-desc {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    line-height: 1.8;
    max-width: 520px;
}

.proj-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

.proj-meta > div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.35);
}

.proj-meta > div:last-child {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.35);
}

.proj-meta dt {
    color: #6b675f;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.proj-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border: 3px solid var(--ink);
    padding: 14px 20px;
    transition: transform 0.2s steps(2), box-shadow 0.2s steps(2);
}

.proj-link::after {
    content: "→";
    transition: transform 0.3s steps(3);
}

.proj-link:hover,
.proj-link:focus-visible {
    background: var(--ink);
    color: var(--paper);
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--cyan);
    outline: none;
}

.proj-link:hover::after {
    transform: translateX(6px);
}

/* hover no projeto inteiro */
.proj:hover .proj-numero {
    transform: translate(-4px, -4px);
    box-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--cyan);
    animation: rgb-treme 0.4s steps(2) infinite;
}

.proj:hover .proj-moldura {
    transform: translate(-6px, -6px);
    box-shadow: 8px 8px 0 var(--magenta), 14px 14px 0 var(--cyan);
}

.proj:hover .foto-glitch.a { animation: glitch-a 1.2s steps(1) infinite; }
.proj:hover .foto-glitch.b { animation: glitch-b 1.2s steps(1) infinite; }

/* ---------- Fim da lista ---------- */
.proj-fim {
    border: 3px solid var(--ink);
    border-top: none;
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
}

.proj-voltar {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s steps(2);
}

.proj-voltar span {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6b675f;
}

.proj-voltar:hover {
    transform: translateX(-8px);
    text-shadow: 3px 0 var(--magenta), -3px 0 var(--cyan);
}

/* ---------- Projects em ecrãs pequenos ---------- */
@media (max-width: 900px) {
    .proj-corpo {
        grid-template-columns: 1fr;
    }

    .proj-imagem,
    .proj-invertido .proj-imagem {
        order: 0;
        border-right: none;
        border-left: none;
        border-bottom: 3px solid var(--ink);
        padding: 28px 20px 44px;
    }

    .proj-topo {
        flex-wrap: wrap;
        gap: 16px 20px;
    }

    .proj-numero {
        width: 64px;
        height: 64px;
        line-height: 64px;
        font-size: 30px;
    }

    .proj-tag {
        width: 100%;
        text-align: left;
    }

    .proj-nome {
        font-size: clamp(30px, 10vw, 64px);
    }

    .proj-info {
        padding: 28px 20px;
    }
}


/* =========================================================
   EASTER EGG — terminal secreto (js/easteregg.js)
   ========================================================= */
.ovo {
    position: fixed;
    inset: 0;
    z-index: 9400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 5, 5, 0.55);
    backdrop-filter: blur(2px);
}

.ovo.aberto {
    display: flex;
    animation: ovo-fundo 0.25s steps(3) both;
}

.ovo.fecha {
    animation: ovo-fundo 0.25s steps(3) reverse both;
}

@keyframes ovo-fundo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ovo-janela {
    width: min(760px, 100%);
    height: min(520px, 80vh);
    display: flex;
    flex-direction: column;
    background: #050505;
    color: #d9d6ce;
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--magenta), 16px 16px 0 var(--cyan);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    text-shadow: 1px 0 rgba(255, 31, 206, 0.45), -1px 0 rgba(0, 229, 255, 0.45);
    cursor: text;
    position: relative;
    overflow: hidden;
}

/* scanlines dentro da janela */
.ovo-janela::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px);
}

.ovo.aberto .ovo-janela {
    animation: ovo-liga 0.45s var(--ease-out) both;
}

.ovo.fecha .ovo-janela {
    animation: ovo-desliga 0.3s cubic-bezier(0.7, 0, 0.84, 0) both;
}

@keyframes ovo-liga {
    0%   { transform: scale(1, 0.01); filter: brightness(4); }
    50%  { transform: scale(1, 0.01); filter: brightness(4); }
    100% { transform: none; filter: none; }
}

@keyframes ovo-desliga {
    0%   { transform: none; filter: none; }
    60%  { transform: scale(1, 0.01); filter: brightness(4); }
    100% { transform: scale(0, 0.01); opacity: 0; }
}

.ovo-janela.abana {
    animation: ovo-abana 0.4s steps(6);
}

@keyframes ovo-abana {
    0%, 100% { transform: none; }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

.ovo-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: #d9d6ce;
    color: #050505;
    text-shadow: none;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: default;
}

.ovo-pontos {
    display: flex;
    gap: 6px;
}

.ovo-pontos i {
    width: 10px;
    height: 10px;
    background: #050505;
}

.ovo-pontos i:nth-child(2) { background: var(--magenta); }
.ovo-pontos i:nth-child(3) { background: var(--cyan); }

.ovo-titulo {
    flex: 1;
    text-align: center;
}

.ovo-fechar {
    font: inherit;
    font-weight: 700;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
}

.ovo-fechar:hover {
    color: var(--magenta);
}

.ovo-saida {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 4px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ovo-linha {
    display: flex;
    align-items: baseline;
    padding: 0 18px 16px;
}

.ovo-prompt {
    white-space: pre;
}

.ovo-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font: inherit;
    font-size: 16px; /* evita o zoom automático no iPhone */
    caret-color: var(--magenta);
    text-shadow: inherit;
}

.ovo-user  { color: var(--magenta); }
.ovo-path  { color: var(--cyan); }
.ovo-cmd   { color: var(--cyan); }
.ovo-ok    { color: var(--cyan); }
.ovo-erro  { color: var(--magenta); }
.ovo .dim  { color: #77736b; }
.ovo-logo  { color: var(--magenta); font-weight: 700; }
.ovo-barra-skill { color: var(--cyan); letter-spacing: 0.05em; }

.ovo-inv {
    background: #d9d6ce;
    color: #050505;
    text-shadow: none;
}

.ovo-blocos {
    display: inline-flex;
    gap: 0;
    margin-left: 17ch;
}

.ovo-blocos i {
    width: 22px;
    height: 12px;
}

.ovo-blocos i:nth-child(1) { background: #050505; outline: 1px solid #333; }
.ovo-blocos i:nth-child(2) { background: var(--magenta); }
.ovo-blocos i:nth-child(3) { background: var(--cyan); }
.ovo-blocos i:nth-child(4) { background: #d9d6ce; }
.ovo-blocos i:nth-child(5) { background: #77736b; }
.ovo-blocos i:nth-child(6) { background: #ffffff; }

/* notificação "easter egg unlocked" */
.ovo-conquista {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 9450;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 22px;
    background: var(--ink);
    color: var(--paper);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--magenta), 10px 10px 0 var(--cyan);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    animation: ovo-conquista 0.5s steps(4) both;
}

.ovo-conquista small {
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #9b978f;
}

.ovo-conquista.sai {
    animation: ovo-conquista 0.4s steps(4) reverse both;
}

@keyframes ovo-conquista {
    from { transform: translate(-50%, 140%); }
    to   { transform: translate(-50%, 0); }
}

/* comando "glitch": a página toda treme em RGB */
.ovo-glitch .conteudo-site,
.ovo-glitch .header {
    animation: ovo-mega 0.18s steps(2) infinite;
}

@keyframes ovo-mega {
    0%   { transform: translate(-6px, 2px) skewX(3deg); text-shadow: 5px 0 var(--magenta), -5px 0 var(--cyan); clip-path: inset(0 0 0 0); }
    33%  { transform: translate(8px, -3px); clip-path: inset(10% 0 30% 0); }
    66%  { transform: translate(-3px, 0) skewX(-4deg); text-shadow: -6px 0 var(--magenta), 6px 0 var(--cyan); clip-path: inset(40% 0 5% 0); }
    100% { transform: none; clip-path: inset(0 0 0 0); }
}

/* comando "theme": modo escuro */
html.ovo-escuro body {
    background: #0e0e0e;
}

html.ovo-escuro .header,
html.ovo-escuro .conteudo-site {
    filter: invert(1) hue-rotate(180deg);
}

/* comando "matrix" */
.ovo-matrix {
    position: fixed;
    inset: 0;
    z-index: 9300;
    background: #050505;
    cursor: pointer;
    animation: ovo-fundo 0.3s steps(3) both;
}

.ovo-matrix.sai {
    animation: ovo-fundo 0.4s steps(3) reverse both;
}

@media (max-width: 600px) {
    .ovo {
        padding: 10px 14px 14px 10px;
        align-items: stretch;
        background: #050505;
    }

    /* no telemóvel o terminal ocupa toda a área visível (acima do teclado) */
    .ovo-janela {
        font-size: 12px;
        height: auto;
        flex: 1;
        box-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--cyan);
    }

    .ovo-saida {
        padding: 12px 12px 4px;
    }

    .ovo-linha {
        padding: 0 12px 12px;
    }

    .ovo-logo {
        display: none;
    }
}


/* =========================================================
   CONTACTO (Home e Projects)
   ========================================================= */
html {
    scroll-behavior: smooth;
}

.contacto {
    border: 3px solid var(--ink);
    margin-bottom: 40px;
    scroll-margin-top: 20px;
}

.proj-fim + .contacto,
.seccao + .contacto {
    border-top: none;
}

.pagina-projetos .contacto {
    margin-bottom: 0;
}

.contacto-topo {
    padding: 50px 20px 34px;
    border-bottom: 3px solid var(--ink);
}

.contacto-label {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--magenta);
    margin-bottom: 14px;
}

.contacto-titulo {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6.5vw, 108px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.contacto-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    line-height: 1.7;
    margin-top: 20px;
    max-width: 560px;
}

.contacto-lista {
    list-style: none;
}

.contacto-item {
    position: relative;
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 24px 20px;
    border-bottom: 3px solid var(--ink);
    isolation: isolate;
    transition: color 0.25s steps(2);
}

/* fundo preto que entra da esquerda no hover */
.contacto-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s steps(5);
    z-index: -1;
}

.contacto-item:hover {
    color: var(--paper);
}

.contacto-item:hover::before {
    transform: scaleX(1);
}

.contacto-tipo {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6b675f;
}

.contacto-item:hover .contacto-tipo {
    color: var(--cyan);
}

.contacto-valor {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3.2vw, 48px);
    line-height: 1.1;
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
    transition: transform 0.25s steps(3);
}

.contacto-item:hover .contacto-valor {
    transform: translateX(10px);
    text-shadow: 3px 0 var(--magenta), -3px 0 var(--cyan);
}

.contacto-valor:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 4px;
}

.contacto-copiar {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
    background: none;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
}

.contacto-copiar:hover {
    color: var(--magenta);
}

.contacto-copiar.copiado {
    color: var(--cyan);
}

.contacto-seta {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 44px);
    padding-right: 4px;
    transition: transform 0.3s steps(3);
}

.contacto-item:hover .contacto-seta {
    transform: translate(6px, -6px);
    color: var(--magenta);
}

.contacto-rodape {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 18px 20px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b675f;
}

@media (max-width: 700px) {
    .contacto-item {
        grid-template-columns: 1fr auto;
        gap: 6px 16px;
    }

    .contacto-tipo {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.ovo-link {
    color: var(--cyan);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}

.ovo-link:hover {
    color: var(--magenta);
}

/* =========================================================
   POP-UP DE CONTACTO (email / telefone, no computador)
   ========================================================= */
.pop {
    position: fixed;
    inset: 0;
    z-index: 9460;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 5, 5, 0.55);
    backdrop-filter: blur(2px);
}

.pop.aberto {
    display: flex;
    animation: ovo-fundo 0.2s steps(3) both;
}

.pop.fecha {
    animation: ovo-fundo 0.25s steps(3) reverse both;
}

.pop-janela {
    position: relative;
    width: min(560px, 100%);
    background: var(--paper);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--magenta), 16px 16px 0 var(--cyan);
    font-family: var(--font-mono);
    overflow: hidden;
}

.pop.aberto .pop-janela {
    animation: ovo-liga 0.4s var(--ease-out) both;
}

.pop.fecha .pop-janela {
    animation: ovo-desliga 0.28s cubic-bezier(0.7, 0, 0.84, 0) both;
}

.pop-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    background: var(--ink);
    color: var(--paper);
    font-size: 12px;
    letter-spacing: 0.08em;
}

.pop-barra > span:nth-child(2) {
    flex: 1;
    text-align: center;
}

.pop-pontos {
    display: flex;
    gap: 6px;
}

.pop-pontos i {
    width: 10px;
    height: 10px;
    background: var(--paper);
}

.pop-pontos i:nth-child(2) { background: var(--magenta); }
.pop-pontos i:nth-child(3) { background: var(--cyan); }

.pop-fechar {
    font: inherit;
    font-weight: 700;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.pop-fechar:hover {
    color: var(--magenta);
}

.pop-corpo {
    padding: 26px 24px 24px;
}

.pop-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--magenta);
}

.pop-valor {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.15;
    margin-top: 8px;
    overflow-wrap: anywhere;
    text-shadow: 2px 0 var(--magenta), -2px 0 var(--cyan);
}

.pop-valor-email {
    font-size: clamp(18px, 2.1vw, 26px);
    overflow-wrap: normal;
}

.pop-pergunta {
    font-size: 14px;
    margin: 18px 0 14px;
    color: #6b675f;
}

.pop-acoes {
    display: flex;
    flex-direction: column;
    border: 3px solid var(--ink);
}

.pop-acao {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ink);
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    isolation: isolate;
    transition: color 0.2s steps(2);
}

.pop-acao + .pop-acao {
    border-top: 3px solid var(--ink);
}

.pop-acao::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s steps(4);
    z-index: -1;
}

.pop-acao:hover,
.pop-acao:focus-visible {
    color: var(--paper);
    outline: none;
}

.pop-acao:hover::before,
.pop-acao:focus-visible::before {
    transform: scaleX(1);
}

.pop-acao b {
    color: var(--magenta);
}

.pop-acao span {
    flex: 1;
}

.pop-acao i {
    margin-left: auto;
    font-style: normal;
    transition: transform 0.2s steps(2);
}

.pop-acao:hover i {
    transform: translateX(4px);
    color: var(--cyan);
}

.pop-acao.copiado,
.pop-acao.copiado b {
    color: var(--cyan);
}


/* =========================================================
   EXTRAS: cursor seguidor + entrada do hero
   ========================================================= */
.cursor-seguidor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9200;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid #ffffff;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 0;
    transition: width 0.2s steps(3), height 0.2s steps(3), margin 0.2s steps(3), opacity 0.2s;
}

.cursor-seguidor.visivel {
    opacity: 1;
}

.cursor-seguidor.grande {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    background: #ffffff;
}

.ovo-ativo .cursor-seguidor,
.boot ~ .cursor-seguidor {
    opacity: 0;
}

.pronto .hero-label,
.pronto .hero-botoes,
.pronto .hero-status {
    animation: liga 0.7s linear both;
}

.pronto .hero-label  { animation-delay: 0.7s; }
.pronto .hero-botoes { animation-delay: 1.45s; }
.pronto .hero-status { animation-delay: 1.6s; }

/* secções: âncoras não ficam escondidas por baixo do menu fixo */
#work,
#contact,
.proj {
    scroll-margin-top: 80px;
}


/* =========================================================
   EASTER EGG — colapso da página + kernel panic
   ========================================================= */
.ovo-panico {
    position: fixed;
    inset: 0;
    z-index: 9350;
    display: flex;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 56px);
    background: #050505;
    color: #d9d6ce;
    font-family: var(--font-mono);
    font-size: clamp(11px, 1vw, 14px);
    line-height: 1.8;
    text-shadow: 1px 0 rgba(255, 31, 206, 0.55), -1px 0 rgba(0, 229, 255, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s steps(4), visibility 0s linear 0.35s;
}

.ovo-panico.aberto {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s steps(3);
}

.ovo-panico .ovo-erro { color: var(--magenta); font-weight: 700; }
.ovo-panico .dim { color: #77736b; }

.ovo-panico::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
    pointer-events: none;
}

/* o terminal abre por cima do panic, sem escurecer outra vez */
.ovo {
    z-index: 9400;
}

/* comando "badapple": ecrã ASCII dentro do terminal */
.ovo-ascii {
    margin: 6px 0;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #ffffff;
    white-space: pre;
    overflow: hidden;
}


/* =========================================================
   PÁGINA 404
   ========================================================= */
.erro-404 {
    min-height: calc(100vh - 62px);
    min-height: calc(100svh - 62px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 60px;
}

/* "404" tem só 3 letras: pode ser bem maior */
.pagina-404 .portfolio-titulo {
    font-size: min(calc((100vw - 48px) / 5.2), 360px);
}

.erro-terminal {
    border: 3px solid var(--ink);
    background: #050505;
    color: #d9d6ce;
    padding: 22px 24px;
    margin: 30px 0 28px;
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    line-height: 1.8;
    text-shadow: 1px 0 rgba(255, 31, 206, 0.5), -1px 0 rgba(0, 229, 255, 0.5);
    box-shadow: 8px 8px 0 var(--magenta), 16px 16px 0 var(--cyan);
    word-break: break-word;
}

.erro-terminal .user  { color: var(--magenta); }
.erro-terminal .path  { color: var(--cyan); }
.erro-terminal .falha { color: var(--magenta); }
.erro-terminal .dim   { color: #77736b; }

.erro-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: #d9d6ce;
    animation: pisca 0.9s steps(1) infinite;
}


/* terminal e kernel panic seguem a área visível do ecrã
   (no telemóvel, quando o teclado abre, essa área encolhe) */
.ovo,
.ovo-panico {
    inset: auto 0 auto 0;
    top: var(--vv-top, 0px);
    height: var(--vv-h, 100%);
}

html.ovo-ativo,
html.ovo-ativo body {
    overscroll-behavior: none;
}

/* enquanto o terminal está aberto a página fica presa
   (as peças que caem não alargam a página nem a deixam fazer scroll) */
html {
    scrollbar-gutter: stable;
}

html.ovo-ativo,
html.ovo-ativo body {
    overflow: hidden;
}

.conteudo-site,
.header {
    overflow-x: clip;
}

/* telemóvel: o aviso "easter egg unlocked" vai para o topo, para não tapar onde se escreve */
@media (max-width: 600px) {
    .ovo-conquista {
        top: calc(var(--vv-top, 0px) + 54px);
        bottom: auto;
        width: max-content;
        max-width: calc(100% - 40px);
        animation-name: ovo-conquista-topo;
    }

    .ovo-conquista.sai {
        animation: ovo-conquista-topo 0.4s steps(4) reverse both;
    }

    @keyframes ovo-conquista-topo {
        from { transform: translate(-50%, -140%); opacity: 0; }
        to   { transform: translate(-50%, 0); opacity: 1; }
    }
}


/* =========================================================
   BOTÃO DE IDIOMA (EN / PT) — criado pelo js/i18n.js
   ========================================================= */
.nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink);
    background: transparent;
    border: 2px solid var(--ink);
    padding: 3px 8px;
    margin-left: 6px;
    cursor: pointer;
    transition: background-color 0.15s steps(2), color 0.15s steps(2);
}

.nav-lang span {
    opacity: 0.4;
}

.nav-lang span.ativo {
    opacity: 1;
    color: var(--magenta);
}

.nav-lang i {
    font-style: normal;
    opacity: 0.4;
}

.nav-lang:hover {
    background: var(--ink);
    color: var(--paper);
}

.nav-lang:hover span.ativo {
    color: var(--cyan);
}

/* no telemóvel o logótipo já leva ao início, por isso o link "Home" sai para dar espaço */
@media (max-width: 800px) {
    .navbar-li:first-child {
        display: none;
    }

    .nav-lang {
        margin-left: 4px;
        padding: 2px 6px;
    }
}