:root {
    --cor-primaria: #39ffea;
    --cor-texto: #cdefff;
    --cor-texto-escuro: #e6f9ff;
    --cor-fundo: #0b0f12;
    --cor-fundo-container: rgba(8, 10, 12, 0.95);
    --cor-fundo-hover: #39ffea;
    --cor-fundo-link: rgba(57, 255, 234, 0.06);
    --sombra-cor: rgba(57, 255, 234, 0.12);
    --raio-borda: 18px;
    --raio-borda-pequeno: 10px;

    --fonte-grande: clamp(1.25rem, 1.07rem + 0.89vw, 1.75rem); 
    --fonte-normal: clamp(0.9rem, 0.83rem + 0.36vw, 1.1rem);  
    --fonte-pequena: clamp(0.8rem, 0.75rem + 0.22vw, 0.9rem);  
}

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


body {
    min-height: 100vh;
    background-color: var(--cor-fundo);
    font-family: 'Fira Mono', monospace;
    color: var(--cor-texto);
    display: flex;
}

/* animated subtle background */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 10% 10%, rgba(0,224,255,0.06), transparent 15%), radial-gradient(ellipse at 90% 90%, rgba(124,77,255,0.04), transparent 18%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.9s ease, transform 1s ease;
}
body.ready::before { opacity: 1; transform: scale(1); }

.conteudo-principal {
    width: 100%;
    min-height: 100vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 2.5rem) 1rem;
    gap: 1rem;
}

@media (max-width: 600px) {
    /* binary strip fixed to the viewport top, ponta a ponta */
    /* aumentar espaçamento superior para não cobrir a foto/perfil */
    .conteudo-principal { padding-top: calc(1.6rem + 34px); }

    .binary-strip {
        position: fixed;
        top: 6px;
        left: 0;
        width: 100vw;
        height: 26px; /* um pouco mais alto para evitar corte */
        z-index: 999;
        pointer-events: none;
        overflow: hidden;
        display: block;
        font-family: 'Fira Mono', monospace;
        font-size: 11px; /* ligeiramente menor para caber */
        color: rgba(57,255,234,0.95);
        letter-spacing: 4px; /* diminuir espaçamento para evitar empilhamento visual */
        padding: 0;
        line-height: 1;
    }

    .binary-strip::before, .binary-strip::after {
        /* repetir a palavra binária mais vezes para cobrir larguras maiores sem sobreposição */
        content: "01101101 01100001 11000011 10100111 01101111 01101110 01100001 01110010 01101001 01100001  01101101 01100001 11000011 10100111 01101111 01101110 01100001 01110010 01101001 01100001  ";
        position: absolute;
        white-space: nowrap;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.95;
    }

    .binary-strip::before { left: 0; animation: binScroll 20s linear infinite; }
    .binary-strip::after { left: 100%; animation: binScroll 20s linear infinite; opacity: 0.6; }

    @keyframes binScroll { 0%{ transform: translateX(0) translateY(-50%); } 100%{ transform: translateX(-100%) translateY(-50%); } }
}

.perfil-coluna, .links-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem; 
}

/* triangular backlight behind profile image (maçonaria style) */
.perfil-coluna {
    position: relative;
}

/* triangle aligned to the circular photo wrapper for precise centering */
.perfil-foto {
    position: relative;
    display: inline-block;
}
.perfil-foto::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) translateY(40%);
    width: 0;
    height: 0;
    border-left: 72px solid transparent;
    border-right: 72px solid transparent;
    border-bottom: 102px solid rgba(57,255,234,0.05);
    filter: blur(6px);
    z-index: 0;
    transition: transform 0.6s ease, opacity 0.4s;
}
.perfil-foto::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) translateY(33%);
    width: 0;
    height: 0;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 90px solid rgba(57,255,234,0.10);
    filter: blur(2px);
    z-index: 0;
}
.perfil-foto .imagem-perfil { position: relative; z-index: 2; display: block; }

/* pulse on ready */
body.ready .perfil-foto::before { transform: translateX(-50%) translateY(32%) scale(1.02); }

.links-coluna {
    max-width: 400px;
}

.imagem-perfil {
    width: clamp(80px, 20vw, 110px);
    height: clamp(80px, 20vw, 110px);
    border-radius: 50%;
    border: 2px solid var(--cor-primaria);
    box-shadow: 0 0 24px var(--sombra-cor), 0 2px 8px #0005;
    object-fit: cover;
    background: var(--cor-fundo);
    transition: box-shadow 0.4s, transform 0.4s;
}

.imagem-perfil:hover {
    box-shadow: 0 0 44px var(--cor-primaria), 0 6px 20px #0008;
    transform: scale(1.08) rotate(-2deg);
}

/* subtle pulse animation on ready */
.imagem-perfil { will-change: transform, box-shadow; }
body.ready .imagem-perfil { animation: pulse 6s ease-in-out infinite; }
@keyframes pulse {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

.info-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.nome {
    font-size: clamp(0.95rem, 0.95rem + 0.6vw, 1.15rem);
    color: color-mix(in srgb, var(--cor-primaria) 80%, #ffffff 20%);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 8px var(--sombra-cor);
}

.bloco-formacao {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.4;
}

.formacao {
    font-size: clamp(1rem, 0.95rem + 0.9vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: center;
    color: var(--cor-texto-escuro);
}

.icones-sociais {
    display: flex;
    gap: 1rem;
    margin-block: 0.5rem;
}

.icones-sociais a {
    color: var(--cor-primaria);
    font-size: var(--fonte-grande);
    text-decoration: none;
    border-radius: 50%;
    padding: 0.4em;
    background: var(--cor-fundo-link);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 2px 8px var(--sombra-cor);
    display: grid;
    place-items: center;
    transition: all 0.2s ease-in-out;
}

/* icon bounce on ready for mobile */
.icones-sociais a { will-change: transform, box-shadow; }
@media (max-width: 700px) {
    .icones-sociais a { animation: iconFloat 4s ease-in-out infinite; }
    @keyframes iconFloat { 0%{ transform: translateY(0);}50%{transform: translateY(-6px);}100%{transform: translateY(0);} }
}

@media (max-width: 480px) {
    .icones-sociais { gap: 0.6rem; }
    .icones-sociais a { padding: 0.6em; font-size: 1.15rem; }
}

/* entrance animation for social icons and links */
.conteudo-principal { position: relative; z-index: 1; }
.conteudo-principal .perfil-coluna, .conteudo-principal .links-coluna { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
body.ready .conteudo-principal .perfil-coluna { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
body.ready .conteudo-principal .links-coluna { opacity: 1; transform: translateY(0); transition-delay: 0.24s; }

.icones-sociais a:hover {
    color: white;
    background: var(--cor-fundo-hover);
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 4px 24px var(--sombra-cor);
}

.titulo-links {
    font-size: var(--fonte-pequena);
    font-weight: 500;
    color: var(--cor-texto);
    text-align: center;
}

.links {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--cor-fundo-link);
    color: var(--cor-texto);
    font-size: var(--fonte-normal);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--raio-borda-pequeno);
    padding: 0.8em 0.5em;
    box-shadow: 0 2px 12px rgba(0, 224, 255, 0.07);
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 8px rgba(0, 224, 255, 0.13);
}

.links a i {
    font-size: 1.2em;
    transition: transform 0.2s ease-in-out;
}

.links a:hover {
    background: var(--cor-fundo-hover);
    color: var(--cor-texto-escuro);
    box-shadow: 0 4px 24px var(--sombra-cor);
    transform: translateY(-2px) scale(1.03);
}

.links a:hover i {
    transform: scale(1.12) rotate(-8deg);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: grid;
    place-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.active { opacity:1; visibility:visible; }

.icones-sociais a#open-cv {
    color: var(--cor-primaria);
    font-size: var(--fonte-grande);
    text-decoration: none;
    border-radius: 50%;
    padding: 0.4em;
    background: var(--cor-fundo-link);
    box-shadow: 0 2px 8px rgba(0, 224, 255, 0.13);
    display: grid;
    place-items: center;
    transition: all 0.2s ease-in-out;
}
.icones-sociais a#open-cv:hover,
.icones-sociais a#open-cv:focus {
    color: white;
    background: var(--cor-fundo-hover);
    transform: scale(1.12) rotate(-8deg);
    box-shadow: 0 4px 24px var(--sombra-cor);
    outline: none;
}

.modal-content {
    background: var(--cor-fundo-container);
    padding: clamp(1.5rem, 5vw, 2rem);
    border-radius: var(--raio-borda);
    border: 2px solid var(--cor-primaria);
    box-shadow: 0 8px 32px rgba(0, 224, 255, 0.35);
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
    transform: translateY(-30px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-overlay.ativo .modal-content {
    transform: translateY(0);
}

/* CV modal (compact, centered) */
#modal-cv.modal-overlay.active, #modal-cv.modal-overlay.ativo { align-items: center }
#modal-cv .modal-content { width: 92%; max-width: 880px; height: auto; max-height: 80vh; border-radius: var(--raio-borda); display:flex; flex-direction:column; justify-content:flex-start; padding:1.25rem; overflow:hidden }
#modal-cv .cv-preview { flex:1; overflow:auto; padding-right:0.25rem }
#modal-cv .cv-preview iframe { width:100%; height:100%; border-radius:6px }

/* CV HTML content styling */
.cv-content {
    max-width: 900px;
    margin: 0 auto;
    color: var(--cor-texto);
    line-height: 1.5;
    padding: 0.5rem;
}
.cv-content h4 {
    color: var(--cor-primaria);
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}
.cv-content p { margin-bottom: 0.6rem; font-size: 0.97rem; }
.cv-content ul { margin-left: 1rem; margin-bottom: 0.6rem; }
.cv-content li { margin-bottom: 0.25rem; }
#modal-cv .close-button{ position: absolute; right:18px; top:18px; z-index:10 }

.close-button {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 2.2rem;
    color: var(--cor-texto);
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.close-button:hover {
    color: white;
    transform: scale(1.1);
}

.modal-content #modal-titulo {
    color: var(--cor-primaria);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: var(--fonte-grande);
    font-weight: 700;
}

.modal-content #modal-descricao {
    color: var(--cor-texto);
    font-size: var(--fonte-normal);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.modal-button {
    display: inline-block;
    background: var(--cor-primaria);
    color: var(--cor-texto-escuro);
    padding: 0.7em 1.8em;
    border-radius: var(--raio-borda-pequeno);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--fonte-normal);
    transition: background 0.2s, transform 0.2s;
}

.modal-button:hover {
    background: white;
    transform: scale(1.05);
}

.carregando-fullstack i {
    color: #00e0ff;
    margin-right: 8px;
    font-size: 1.1em;
    vertical-align: middle;
}


@media (min-width: 600px) {
    body {
        background: linear-gradient(135deg, #071014 0%, rgba(57,255,234,0.04) 100%);
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .conteudo-principal {
        min-height: auto; 
        max-width: 850px; 
        background: var(--cor-fundo-container);
        border-radius: var(--raio-borda);
        box-shadow: 0 8px 32px var(--sombra-cor), 0 1.5px 8px #0003;
        border: 2px solid var(--cor-primaria);
        animation: aparecer 1s cubic-bezier(0.25, 1, 0.5, 1);

        flex-direction: row;
        align-items: center;
        gap: clamp(1rem, 5vw, 3rem);
        padding: 2rem;
    }

    .perfil-coluna, .links-coluna {
        flex: 1;
        height: 100%;
        justify-content: center;
    }

    .links-coluna {
        max-width: none; 
    }

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

    /* Desktop: make the triangular backlight proportionally larger behind the profile */
    .perfil-foto::before {
        transform: translateX(-50%) translateY(34%);
        border-left: 96px solid transparent;
        border-right: 96px solid transparent;
        border-bottom: 136px solid rgba(57,255,234,0.05);
        filter: blur(8px);
    }
    .perfil-foto::after {
        transform: translateX(-50%) translateY(28%);
        border-left: 84px solid transparent;
        border-right: 84px solid transparent;
        border-bottom: 120px solid rgba(57,255,234,0.10);
        filter: blur(3px);
    }
}