@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* --- Reset e Variáveis --- */
:root {
    --bg-dark: rgb(34, 33, 30);
    --flag-width: 18vw;
    --flag-height: 12vw;
    --transition-speed: 0.4s;
    
    /* Cores das Bandeiras */
    --white: #ffffff;
    --blue: #002395;
    --red: #D2042D;
    --black: #000000;
    --yellow: #FDDA24;
    --green: #009c3b;
    --brazil-blue: #002776;
}

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

body {
    min-height: 100vh;
    background-color: var(--bg-dark);
    font-family: 'Lato', sans-serif;
    color: var(--white);
    padding: 5vh 2vw;
    overflow-x: hidden;
}

header {
    text-align: center;
    margin-bottom: 5vh;
}

header h1 { font-size: 2.5rem; margin-bottom: 10px; }
header p { opacity: 0.7; }

/* --- Container e Grupos --- */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw;
}

.flag-group {
    display: flex;
    flex-direction: column;
    gap: 5vh;
    align-items: center;
}

/* --- Flag Wrapper (Interatividade via Hover) --- */
.flag-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--flag-width);
    transition: width var(--transition-speed) ease;
}

/* Efeito de expansão ao passar o mouse */
.flag-wrapper:hover {
    width: calc(var(--flag-width) + 250px);
}

/* --- Estilo Base das Bandeiras --- */
.flag {
    width: var(--flag-width);
    height: var(--flag-height);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    background-color: var(--white);
    z-index: 2;
}

/* Ajuste da bandeira no hover */
.flag-wrapper:hover .flag {
    transform: translateX(-10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* --- Descrição --- */
.description {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
    padding-left: 20px;
    pointer-events: none;
    max-width: 250px;
    white-space: normal; /* Garante que o texto quebre linha */
}

/* Mostrar descrição no hover */
.flag-wrapper:hover .description {
    opacity: 1;
    transform: translateX(0);
}

.description h3 { margin-bottom: 8px; color: var(--yellow); }
.description p { font-size: 0.9rem; line-height: 1.4; }

/* --- Efeito de Tecido (Animação) --- */
.flag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.1) 15%, 
        rgba(0,0,0,0.15) 30%, 
        rgba(255,255,255,0.1) 45%, 
        rgba(0,0,0,0.15) 60%, 
        rgba(255,255,255,0.1) 75%,
        rgba(255,255,255,0) 100%
    );
    background-size: 50% 100%;
    z-index: 5;
    animation: wave 3s linear infinite;
    pointer-events: none;
}

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

/* --- Layouts de Listras --- */
.flag-horizontal { display: flex; flex-direction: column; }
.flag-horizontal .stripe { flex: 1; width: 100%; }

.flag-vertical { display: flex; flex-direction: row; }
.flag-vertical .stripe { flex: 1; height: 100%; }

/* --- Bandeiras Especiais --- */
.flag-special { display: flex; justify-content: center; align-items: center; }

/* Japão */
#japao { background-color: var(--white); }
#japao .circle { width: 6vw; height: 6vw; background-color: var(--red); border-radius: 50%; }

/* Brasil */
#brasil { background-color: var(--green); }
#brasil .lozenge {
    width: 16vw; height: 10vw; background-color: var(--yellow);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    display: flex; justify-content: center; align-items: center;
}
#brasil .circle-brazil { width: 5vw; height: 5vw; background-color: var(--brazil-blue); border-radius: 50%; position: relative; overflow: hidden; }
#brasil .stripe-brazil { position: absolute; width: 120%; height: 0.5vw; background-color: var(--white); top: 50%; left: -10%; transform: rotate(-15deg); }

/* Ucrânia */
#ucrania .stripe { height: 50%; }

/* --- Cores Utilitárias --- */
.color-white { background-color: var(--white); }
.color-blue { background-color: var(--blue); }
.color-red { background-color: var(--red); }
.color-black { background-color: var(--black); }
.color-yellow { background-color: var(--yellow); }
.color-green { background-color: var(--green); }

/* --- Responsividade --- */
@media (max-width: 900px) {
    :root {
        --flag-width: 70vw;
        --flag-height: 46vw;
    }
    
    .container { flex-direction: column; align-items: center; }
    .flag-group { width: 100%; }

    .flag-wrapper:hover {
        width: var(--flag-width);
        flex-direction: column;
        height: auto;
    }

    .flag-wrapper:hover .flag {
        transform: translateY(-10px) scale(1.02);
    }

    .description {
        padding: 20px 0;
        max-width: 100%;
        text-align: center;
        transform: translateY(-20px);
        padding-left: 0;
    }

    .flag-wrapper:hover .description {
        transform: translateY(0);
    }

    #japao .circle { width: 22vw; height: 22vw; }
    #brasil .lozenge { width: 62vw; height: 38vw; }
    #brasil .circle-brazil { width: 20vw; height: 20vw; }
    #brasil .stripe-brazil { height: 2vw; }
}