/* ==========================================================================
   1. RESET E CONFIGURAÇÕES GLOBAIS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ff1a1a; /* Fundo vermelho puro */
    font-family: 'Oswald', 'Impact', 'Arial Black', sans-serif; /* Fonte uniforme em PC/Celular */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. CONTAINER DO TOPO (MÁXIMO DE 1100PX ALINHADO COM A GALERIA)
   ========================================================================== */
.hero-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 20px 10px 20px;
}

/* Bloco único com o efeito de máscara transparente nas letras */
.text-mask-block {
    --bg-image: url('bg/bg1.jpg');
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-image 1.2s ease-in-out;
    user-select: none;
}

/* ==========================================================================
   3. O MOTOR DE DISTRIBUIÇÃO AUTOMÁTICA (LETRA POR LETRA DE BORDA A BORDA)
   ========================================================================== */
.row-letras {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.row-letras span {
    font-weight: 900;
    line-height: 0.72; /* Mantém a compressão vertical nativa da fonte */
    display: inline-block;
}

/* ==========================================================================
   4. DIAGRAMAÇÃO AJUSTADA: SOBREPOSIÇÕES LEVES (VIEWPORT WIDTH)
   ========================================================================== */

/* --- Linha 1: SERAFINI --- */
.row-1 span {
    font-size: 19.5vw;
}

/* --- Linha 2: ILLUSTRATION ---
   Sobreposição perfeita e suave sobre o SERAFINI */
.row-2 {
    margin-top: 1vw; 
}
.row-2 span {
    font-size: 11.8vw;
}

/* --- Linha 3 Complexa (ART à esquerda + ABOUT/DESIGN à direita) --- */
.text-row-3-complex {
    width: 100%;
    display: flex;
    margin-top: 1vw;
}

/* Sub-bloco ART: Assume exatamente 60% da largura horizontal */
.art-block {
    width: 60%;
}
.art-block span {
    font-size: 21.5vw;
}

/* Sub-bloco Lateral: Assume os 40% restantes e se adapta às mudanças */
.side-block {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Mantém ABOUT no topo e DESIGN colado na base do bloco do ART */
    padding-left: 2.5%;
}

.side-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.side-row span {
    line-height: 0.7;
}

/* ABOUT: Acompanha o topo do bloco ART */
.about-row span {
    font-size: 10.8vw;
}

/* DESIGN: Acompanha a base do bloco ART */
.design-row span {
    font-size: 10.5vw;
}

/* --- Linha 4: ARCHITECTURE ---
   CORRIGIDO: Agora segue a mesma proporção leve de sobreposição do ILLUSTRATION (-0.6vw) */
.row-4 {
    margin-top: 1vw;
}
.row-4 { margin-bottom: 1vw; }
.row-4 span {
    font-size: 11.2vw;
}

/* ==========================================================================
   5. TRAVAS DE AJUSTE MANUAL EM MONITORES GRANDES (ACIMA DE 1100PX)
   ========================================================================== */
@media (min-width: 1100px) {
    .row-1 span { font-size: 215px; }
    
    .row-2 { margin-top: 14px; } 
    .row-2 span { font-size: 130px; }
    
    .text-row-3-complex { margin-top: 10px; }
    
    .art-block span { font-size: 250px; }
    
    .about-row span { font-size: 120px; }
    .design-row span { font-size: 120px; }
    
    /* CORRIGIDO: Modificado de positivo para negativo para puxar para cima na proporção exata,
       evitando que ele morda demais ou fique muito longe em telas grandes */
    .row-4 { margin-top: 9px; } 
    .row-4 span { font-size: 123px; }
}

/* ==========================================================================
   6. INTERAÇÃO DOS FILTROS (HOVER / SELEÇÃO ACTIVE)
   ========================================================================== */
.filter-btn {
    cursor: pointer;
}

.filter-btn:hover span, 
.filter-btn.active span,
.about-btn:hover span {
    -webkit-text-fill-color: #ffffff !important;
    transition: -webkit-text-fill-color 0.2s ease-in-out;
}

.about-btn {
    cursor: pointer;
    text-decoration: none;
}

/* ==========================================================================
   ANIMAÇÃO DE "BRILHO" — palavras interativas acendem brevemente em branco
   ========================================================================== */
@keyframes flash-word {
    0%   { -webkit-text-fill-color: transparent; }
    15%  { -webkit-text-fill-color: rgba(255, 255, 255, 0.95); }
    65%  { -webkit-text-fill-color: rgba(255, 255, 255, 0.95); }
    100% { -webkit-text-fill-color: transparent; }
}

.flash-white span {
    animation: flash-word 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Base de transição suave usada tanto pelo hover/filtro ativo quanto pelo
   brilho ambiente abaixo — sem isso a mudança de cor fica "seca", instantânea. */
.filter-btn span,
.about-btn span {
    transition: -webkit-text-fill-color 1.5s ease-in-out;
}

/* ==========================================================================
   BRILHO AMBIENTE (ART / DESIGN / ARCHITECTURE / ABOUT)
   Classe ligada/desligada via JS, uma palavra por vez, em ciclo.
   ========================================================================== */
.shine span {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   7. GALERIA DE FOTOS (ESTILO GOOGLE PHOTOS / WINDOWS)
   ========================================================================== */
.gallery-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2px 20px 40px 20px;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-item {
    height: 300px;
    flex-grow: 1;
    cursor: pointer;
    overflow: hidden;
    border: 3px solid #ff1a1a;
}

.gallery-item img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   8. COMPORTAMENTO RESPONSIVO EXCLUSIVO PARA SMARTPHONES
   ========================================================================== */
@media (max-width: 768px) {
    .hero-container { padding: 10px 10px 1px 10px; }
    .gallery-wrapper { padding: 2px 10px 40px 10px; }
    
    .row-letras span, .side-row span { line-height: 0.78; }
    
    .row-1 span { font-size: 17.2vw; }
    
    .row-2 { margin-top: -0.2vw; }
    .row-2 span { font-size: 11.6vw; }
    
    .text-row-3-complex { margin-top: -0.4vw; }
    .art-block span { font-size: 19.5vw; }
    .about-row span { font-size: 10.3vw; }
    .design-row span { font-size: 10vw; }
    
    /* CORRIGIDO: Removido os antigos "10vw" que quebravam o mobile jogando a palavra para baixo.
       Agora acompanha o comportamento sutil e perfeito das linhas de cima */
    .row-4 { margin-top: -0.0vw; }
    .row-4 { margin-bottom: 2vw; }
    .row-4 span { font-size: 10.6vw; }
    
    .gallery-item {
        height: 160px;
    }
}

/* ==========================================================================
   9. LIGHTBOX (VISUALIZAÇÃO EM TELA CHEIA)
   ========================================================================== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.lightbox.visible {
    opacity: 1;
    pointer-events: auto;
}

.lightbox img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #ff1a1a;
}

/* ==========================================================================
   10. SCROLL INFINITO (LOADER E SENTINELA)
   ========================================================================== */
.gallery-loader {
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    font-size: 13px;
    padding: 25px 0;
}

#scroll-sentinel {
    width: 100%;
    height: 1px;
}

/* ==========================================================================
   11. PÁGINA "ABOUT" (PERFIL)
   ========================================================================== */
.about-page-wrapper {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px 60px;
    display: flex;
    justify-content: center;
}

.about-back-link {
    position: fixed;
    top: 22px;
    left: 22px;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 950;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.about-back-link:hover {
    opacity: 1;
}

.about-card {
    background: #ffffff;
    color: #1a1a1a;
    width: 100%;
    max-width: 480px;
    border-radius: 4px;
    padding: 55px 35px 40px;
    position: relative;
    text-align: center;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.about-photo-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #ff1a1a;
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    font-size: 46px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}

.about-photo {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 22px;
    display: block;
}

.about-name {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.about-role {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 22px;
}

.about-bio {
    font-size: 15px;
    line-height: 1.65;
    color: #333;
    text-align: left;
    margin-bottom: 26px;
}

.about-contact {
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: left;
    font-size: 14px;
}

.about-contact p {
    margin-bottom: 8px;
}

.about-contact a {
    color: #ff1a1a;
    text-decoration: none;
}

.about-contact a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .about-back-link {
        top: 14px;
        left: 14px;
    }
    .about-page-wrapper {
        padding: 70px 14px 40px;
    }
    .about-card {
        padding: 40px 22px 28px;
    }
}

/* ==========================================================================
   12. BOTÃO "VOLTAR AO TOPO"
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
    z-index: 900;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: #ff1a1a;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 16px;
        right: 16px;
        width: 42px;
        height: 42px;
        font-size: 19px;
    }
}