:root {
    --brand-green: #008eb0;
    --brand-green-dark: #006837;
    --brand-yellow: #fdb913;
    --brand-white: #ffffff;
}

/* Global Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Garantia global */
}

body {
    background-color: var(--brand-green-dark);
    margin: 0;
    overflow: hidden;
    /* Garante sem rolagem */
    position: relative;
    height: 100%;
    /* Fallback */
    height: 100dvh;
    /* Altura real do viewport mobile */
    width: 100%;
    /* Mudança de 100vw para 100% evita pulo horizontal com scrollbar */
    overscroll-behavior: none;
    /* Evita pull-to-refresh indesejado */
}

.splash-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: 2vh 2vw;
    /* Padding dinâmico */
    box-sizing: border-box;
}

.container-tight {
    max-width: 100%;
    width: 100%;
}

.content-wrapper {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    /* Espaçamento vertical flexível base */
}

/* Remover margens fixas do Tabler/Bootstrap para usar gap */
.content-wrapper .mb-4,
.content-wrapper .mt-5 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Typography settings moved to media queries section */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    color: var(--brand-white);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Logo Styles */
.splash-logo {
    max-width: 50vw;
    /* Tamanho relativo à largura da tela */
    width: 350px;
    /* Max width desktop */
    height: auto;
    display: block;
    margin: 0 auto;

    /* Make logo white */
    filter: brightness(0) invert(1);
}

/* Decor Images Positioning */
/* Decor Images Positioning */
/* Decor Images Positioning */
.decor-img {
    position: absolute;
    z-index: 1;
    pointer-events: none;

    /* Initial State */
    opacity: 0;

    /* Animation */
    animation: smoothEntry 1.5s ease-out forwards;
}

/* Stagger delays for corners */
.decor-top-left {
    animation-delay: 0.2s;
}

.decor-top-right {
    animation-delay: 0.6s;
}

.decor-bottom-left {
    animation-delay: 1.0s;
}

.decor-bottom-right {
    animation-delay: 1.4s;
}

/* Keyframes using modern Scale/Rotate properties to avoid Transform conflict */
@keyframes smoothEntry {
    from {
        opacity: 0;
        scale: 0.8;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

/* Individual Positioning & Sizing (Desktop/Tablet Base) */

/* Canto Superior Esquerdo - Médio */
/* Canto Superior Esquerdo - Médio */
.decor-top-left {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 40vmin;
    max-width: 250px;
}

/* Canto Superior Direito - Menor, apenas espiando */
.decor-top-right {
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: 35vmin;
    max-width: 200px;
}

/* Canto Inferior Esquerdo - Médio/Grande */
.decor-bottom-left {
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
    width: 50vmin;
    max-width: 300px;
}

/* Canto Inferior Direito - O MAIOR (Dominante) */
.decor-bottom-right {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
    width: 65vmin;
    /* Aumentado para manter impacto */
    max-width: 400px;
}

/* Animations */

.fade-in-up {
    animation: fadeInUp 1.5s ease-out both;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 4vh, 0);
    }

    /* Usar vh para translação relativa */
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(253, 185, 19, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(253, 185, 19, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(253, 185, 19, 0);
    }
}

/* --- RESPONSIVE TYPOGRAPHY & LAYOUT --- */

/* Mobile (Default / Small Screens) */
.h1 {
    font-size: clamp(2rem, 7vw, 2.5rem) !important;
    /* Aumentado */
}

.fs-3 {
    font-size: clamp(1.2rem, 5vw, 1.5rem) !important;
    /* Aumentado */
}

.fs-4 {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    /* Aumentado */
}

.badge {
    font-size: clamp(1rem, 3vw, 1.2rem) !important;
    /* Aumentado */
    padding: 0.6em 1em;
}

@media (max-width: 576px) {
    .splash-logo {
        width: 85vw;
        /* Mais largo no mobile */
        max-width: 320px;
        /* Limite aumentado */
    }

    .content-wrapper {
        padding: 0 10px;
        gap: 2vh;
    }

    /* Ajustes específicos Mobile para manter hierarquia */
    .decor-top-left {
        width: 45vmin;
    }

    .decor-top-right {
        width: 40vmin;
    }

    .decor-bottom-left {
        width: 55vmin;
    }

    .decor-bottom-right {
        width: 70vmin;
    }

    /* Nota: Positioning top/left etc herdado do base (0,0) + transform */
}

/* Tablet */
@media (min-width: 768px) {
    .splash-logo {
        width: 400px;
        max-width: 100%;
    }

    .content-wrapper {
        gap: 4vh;
    }

    .h1 {
        font-size: 2.5rem !important;
    }

    .fs-3 {
        font-size: 1.5rem !important;
    }

    .fs-4 {
        font-size: 1.25rem !important;
    }

    .badge {
        font-size: 1.1rem !important;
    }
}

/* Desktop */
@media (min-width: 1200px) {

    /* Em telas muito grandes, liberamos mais tamanho */
    /* Em telas muito grandes, liberamos mais tamanho */
    /* Usando transform para garantir que o CENTRO da imagem fique no canto (vazado meio a meio) */

    .decor-top-left {
        width: 300px;
        max-width: none;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
    }

    .decor-top-right {
        width: 250px;
        max-width: none;
        top: 0;
        right: 0;
        transform: translate(50%, -50%);
        /* Direita/Cima */
    }

    .decor-bottom-left {
        width: 350px;
        max-width: none;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 50%);
        /* Esquerda/Baixo */
    }

    .decor-bottom-right {
        width: 450px;
        max-width: none;
        bottom: 0;
        right: 0;
        transform: translate(50%, 50%);
        /* Direita/Baixo */
    }

    .h1 {
        font-size: 2.5rem !important;
    }

    .fs-3 {
        font-size: 1.75rem !important;
    }

    .fs-4 {
        font-size: 1.5rem !important;
    }

    .badge {
        font-size: 1.2rem !important;
    }

    .splash-logo {
        width: 450px;
    }
}