/* ==================================================
   01. VARIÁVEIS GLOBAIS
   Todas as cores e medidas-base editáveis ficam aqui.
   ================================================== */

:root {
    /* ---------- Cores ---------- */
    --color-background: #AFCA0B;
    --color-page-edge: #702677;

    /* ---------- Sombras ---------- */
    --shadow-header: 0 6px 8px rgba(0, 0, 0, 0.28);
    --shadow-button: 0 5px 3px rgba(0, 0, 0, 0.28);

    /* ---------- Layout ---------- */
    --content-max-width: 430px;
    --button-max-width: 350px;
    --button-gap: clamp(12px, 3.8vw, 18px);
}


/* ==================================================
   02. RESET E CONFIGURAÇÕES GERAIS
   ================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

html {
    /* Fundo externo exibido no overscroll */
    background: var(--color-page-edge);
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    font-family: Arial, Helvetica, sans-serif;

    /* O fundo externo permanece roxo.
       Ele aparece apenas fora do container .page
       e durante o overscroll. */
    background: var(--color-page-edge);

    /* Reduz o overscroll quando suportado pelo navegador */
    overscroll-behavior-y: none;
}



/* ==================================================
   03. CONTAINER GERAL DA PÁGINA
   O body é roxo; toda a página visual fica dentro
   deste container verde. Assim, as transparências
   dos SVGs revelam verde, enquanto o overscroll
   revela o roxo externo.
   ================================================== */

.page {
    width: 100%;
    max-width: var(--content-max-width);
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    position: relative;
    overflow: hidden;

    background: var(--color-background);
}


/* ==================================================
   04. CABEÇALHO
   A sombra é aplicada via CSS para manter o SVG limpo.
   ================================================== */

.site-header {
    position: relative;
    z-index: 3;
    width: 100%;
    line-height: 0;
    filter: drop-shadow(var(--shadow-header));
}

.site-header__image {
    display: block;
    width: 100%;
    height: auto;
}


/* ==================================================
   05. CONTEÚDO PRINCIPAL
   O verde existe somente nesta região visual do layout.
   overflow:hidden recorta a máscara dentro do conteúdo.
   ================================================== */

.main-content {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: clamp(560px, 112vw, 760px);
    padding: clamp(42px, 12vw, 72px) 0 clamp(34px, 9vw, 56px);
    overflow: hidden;
    background: var(--color-background);
}

.background-mask {
    position: absolute;
    z-index: 0;
    top: 1%;
    left: 10%;
    width: clamp(430px, 145vw, 500px);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
}


/* ==================================================
   06. BOTÕES PRINCIPAIS
   O conjunto cresce verticalmente e o body faz o scroll.
   ================================================== */

.main-links {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--button-gap);
    width: min(84%, var(--button-max-width));
    margin: 0 auto;
}

.main-button {
    display: block;
    width: 100%;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    filter: drop-shadow(var(--shadow-button));
    transition:
        filter 120ms ease,
        transform 120ms ease,
        opacity 120ms ease;
}

.main-button img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* Feedback visual obrigatório de toque/clique.
   brightness altera levemente a cor do SVG sem modificá-lo. */
.main-button:active,
.main-button.is-pressed {
    filter:
        brightness(0.88)
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.24));
    transform: translateY(2px) scale(0.99);
}


/* ==================================================
   07. RODAPÉ
   Possui fundo próprio; o verde não continua após ele.
   ================================================== */

.site-footer {
    position: relative;
    z-index: 2;
    width: 100%;
    line-height: 0;
}

.site-footer__image {
    display: block;
    width: 100%;
    height: auto;
}


/* ==================================================
   08. RESPONSIVIDADE
   Ajustes para telas muito estreitas e telas maiores.
   ================================================== */

@media (max-width: 340px) {
    .main-links {
        width: 88%;
    }

    .main-content {
        padding-top: 34px;
        padding-bottom: 30px;
    }
}