:root {
    /* Cores principais da marca */
    --cor-primaria: #ff0000;
    --cor-secundaria: #c01c21;
    --cor-terciaria: #cc0008;
    --cor-quaternaria: #dd0004;

    /* Tipografia */
    --font-mono: "Anonymous Pro", monospace;
}

/* ========== Reset e Base ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-snap-type: y proximity;
    scroll-padding-top: 4vh;
    scroll-behavior: smooth;
}

/* ========== Tipografia ========== */
/* Classes reutilizáveis para fonte Anonymous Pro */
.anonymous-pro-regular {
    font-family: var(--font-mono);
    font-weight: 400;
    font-style: normal;
}

.anonymous-pro-bold {
    font-family: var(--font-mono);
    font-weight: 700;
    font-style: normal;
}

.anonymous-pro-regular-italic {
    font-family: var(--font-mono);
    font-weight: 400;
    font-style: italic;
}

.anonymous-pro-bold-italic {
    font-family: var(--font-mono);
    font-weight: 700;
    font-style: italic;
}

.geo-regular {
    font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.geo-regular-italic {
    font-family: "Geo", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.share-tech-regular {
    font-family: "Share Tech", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.barriecito-regular {
    font-family: "Barriecito", system-ui;
    font-weight: 400;
    font-style: normal;
}

.bangers-regular {
    font-family: "Bangers", system-ui;
    font-weight: 400;
    font-style: normal;
}


/* Estilos de títulos */
h1 {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 3rem;
    color: #FFFFFF;
}

h2 {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 2rem;
    color: #000000;
}

a {
    color: var(--cor-primaria);
    text-decoration: underline;

}

a:hover {
    color: var(--cor-secundaria);
}

p {
    font-family: var(--font-mono);
    font-weight: 200;
    font-size: 1rem;
    color: #000000;
}

/* Variações de fonte para h1 sincronizadas com texturas */
h1.fonte1 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.25rem;
    line-height: 1.2;
}

h1.fonte2 {
    font-family: "Barriecito", system-ui;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.4rem;
    line-height: 1.2;
}

h1.fonte3 {
    font-family: "Bangers", system-ui;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.6rem;
    line-height: 1.2;
}

h1.fonte4 {
    font-family: "Share Tech", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    line-height: 1.2;
}

h1.fonte5 {
    font-family: "Geo", sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.5rem;
    line-height: 1.2;
    font-style: italic;
}

/* ========== Layout Geral ========== */
/* Container de seções */
.inicio,
.secao {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Grid de conteúdo: 70% esquerdo + 30% direito */
.conteudo_completo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

/* Centralização de conteúdo: vertical (no meio) ou início */
.noMeio {
    justify-content: center;
}

.noInicio {
    justify-content: flex-start;
}

.spacado {
    gap: 5vh;
}

.espaco {
    height: 4vh;
}

/* ========== Lado Esquerdo (30%) ========== */
.lado_esquerdo {
    flex: 0 0 auto;
    width: 30%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    position: relative;
    z-index: 1;
    background: transparent;
    pointer-events: auto;
}

/* Container de texto (traz o texto à frente da textura fixa) */
.texto_esquerdo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: 1;
    position: relative;
    z-index: 1;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}

.texto_esquerdo h1 {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Container de ações no rodapé do lado esquerdo */
.acoes-bottom {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Botão de navegacião */
.btn-proximo {
    padding: 0.75rem 2rem;
    background-color: var(--cor-primaria);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    pointer-events: auto;
    z-index: 2;
}

.btn-proximo:hover {
    background-color: #FFFFFF;
    color: var(--cor-primaria);
    transform: scale(1.05);
}

/* ========== Lado Direito (70%) ========== */
.lado_direito {
    flex: 0 0 auto;
    width: 70%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 5%;
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
}

/* ========== Background Fixo ========== */
/* Elemento que mantém a textura fixa enquanto página faz scroll */
#textura-fixa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* ========== Texturas (Padrões 1-5) ========== */
/* Define variáveis CSS e padrão de fundo para #textura-fixa */

.textura1 {

    --s: 30px;
    /* control the size*/
    --c1: var(--cor-primaria);
    --c2: var(--cor-secundaria);

    --_s: 37.5% 12.5% at 62.5%;
    --_g: 34% 99%, #0000 101%;
    --g1: radial-gradient(var(--_s) 100%, #0000 32%, var(--c1) var(--_g));
    --g2: radial-gradient(var(--_s) 0, #0000 32%, var(--c1) var(--_g));
    --g3: radial-gradient(var(--_s) 100%, #0000 32%, var(--c2) var(--_g));
    --g4: radial-gradient(var(--_s) 0, #0000 32%, var(--c2) var(--_g));
    background:
        var(--g1),
        var(--g2) 0 calc(3*var(--s)),
        var(--g3) var(--s) calc(3*var(--s)),
        var(--g4) var(--s) calc(6*var(--s)),
        var(--g1) calc(2*var(--s)) calc(6*var(--s)),
        var(--g2) calc(2*var(--s)) calc(9*var(--s)),
        var(--g3) calc(3*var(--s)) calc(9*var(--s)),
        var(--g4) calc(3*var(--s)) 0,
        repeating-linear-gradient(var(--c1) 0 25%, var(--c2) 0 50%);
    background-size: calc(4*var(--s)) calc(12*var(--s));

}

.textura2 {
    --s: 200px;
    --_g: var(--cor-primaria) 0% 5%, var(--cor-secundaria) 6% 15%, var(--cor-primaria) 16% 25%, var(--cor-secundaria) 26% 35%, var(--cor-primaria) 36% 45%,
        var(--cor-secundaria) 46% 55%, var(--cor-primaria) 56% 65%, var(--cor-secundaria) 66% 75%, var(--cor-primaria) 76% 85%, var(--cor-secundaria) 86% 95%, #0000 96%;
    background:
        radial-gradient(50% 50% at 100% 0, var(--_g)),
        radial-gradient(50% 50% at 0 100%, var(--_g)),
        radial-gradient(50% 50%, var(--_g)),
        radial-gradient(50% 50%, var(--_g)) calc(var(--s)/2) calc(var(--s)/2) var(--cor-primaria);
    background-size: var(--s) var(--s);
}

.textura3 {
    --s: 100px;
    --_g: var(--cor-primaria) 90deg, #0000 90.5deg;
    background:
        conic-gradient(from -45deg, var(--_g)),
        conic-gradient(from 135deg, var(--_g)) calc(var(--s)/2) 0,
        var(--cor-secundaria);
    background-size: var(--s) var(--s);
}

.textura4 {
    --s: 100px;
    --_g: var(--cor-quaternaria) 0 120deg, #0000 0;
    background:
        conic-gradient(from -60deg at 50% calc(100%/3), var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3), var(--_g)),
        conic-gradient(from 60deg at calc(200%/3), var(--cor-quaternaria) 60deg, var(--cor-secundaria) 0 120deg, #0000 0),
        conic-gradient(from 180deg at calc(100%/3), var(--cor-primaria) 60deg, var(--_g)),
        linear-gradient(90deg, var(--cor-primaria) calc(100%/6), var(--cor-secundaria) 0 50%,
            var(--cor-primaria) 0 calc(500%/6), var(--cor-secundaria) 0);
    background-size: calc(1.732 * var(--s)) var(--s);
}

.textura5 {
    --s: 220px;
    /* control the size*/
    --c1: var(--cor-primaria);
    --c2: var(--cor-secundaria);

    --_g: var(--s) var(--s) radial-gradient(var(--c1) 17%, var(--c2) 18% 35%, #0000 36.5%);
    background:
        calc(var(--s)/-4) calc(var(--s)/-4)/var(--_g),
        calc(var(--s)/ 4) calc(var(--s)/ 4)/var(--_g),
        radial-gradient(var(--c2) 34%, var(--c1) 36% 68%, #0000 70%) 0 0/calc(var(--s)/2) calc(var(--s)/2),
        repeating-linear-gradient(45deg, var(--c1) -12.5% 12.5%, var(--c2) 0 37.5%) 0 0/var(--s) var(--s);
}

/* ========== GALERIA ========== */

.galeria-secao {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 2rem;
}

.galeria-secao:last-child {
    border-bottom: none;
}

.galeria-secao h2 {
    color: var(--cor-primaria);
}

/* seção da galeria com botões aos lados */

.galeria-secao {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 1rem;
}

.galeria-secao h2 {
    grid-column: 1 / -1;
}

/* controles */

.controles-galeria {
    display: contents;
}

.controles-galeria button {
    background: var(--cor-primaria);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.controles-galeria button:hover {
    background: var(--cor-secundaria);
}

.prev {
    grid-column: 1;
    grid-row: 2;
}

.next {
    grid-column: 3;
    grid-row: 2;
}

/* container da galeria */

.gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 6px;
    grid-column: 2;
    grid-row: 2;
}

/* cada imagem */

.gallery-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.gallery-item.active {
    opacity: 1;
    position: relative;
}

/* imagem */

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* ========== Seção Fotografia Expandida ========== */
/* Permet que apenas a seção Fotografia cresça além de 100vh */
#Fotografia {
    height: auto;
    min-height: 100vh;
}

#Fotografia .conteudo_completo {
    height: auto;
    min-height: 100%;
}

#Fotografia .lado_direito {
    height: auto;
    min-height: 100%;
}