/* css/urbana.css */

/* Estilos Gerais */
body {
    background: #000000; /* Fundo preto puro */
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* Transição de Página */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 50; /* Acima de tudo inicialmente */
    opacity: 1;
    transition: opacity 5s ease-in-out; /* Fade mais lento para transição inicial */
}

.page-transition.fade-out {
    opacity: 0;
    display: none;
}

/* Container das Imagens Flutuantes */
.floating-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Abaixo do popup */
    overflow: hidden;
}

.float-item {
    position: absolute;
    max-height: 150px; /* Altura máxima para corresponder a imagens horizontais */
    width: auto; /* Mantém proporção */
    cursor: pointer;
    transition: opacity 5s ease-in-out; /* Fade lento para flutuantes */
    will-change: transform, opacity;
}

/* Popup Central - Agora full screen */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent; /* Sem fundo, apenas mídia */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 30; /* Acima das flutuantes */
    opacity: 0;
    transition: opacity 5s ease-in-out; /* Fade lento para popup */
}

.popup.active {
    display: flex;
    opacity: 1;
}

.popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#media-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#media-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ocupa toda a tela, cortando se necessário; mude para 'contain' se quiser sem corte */
    transition: opacity 5s ease-in-out; /* Fade lento para imagens no popup */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #F5F5F5;
    font-size: 2em;
    cursor: pointer;
    z-index: 40;
}

/* Links Flutuantes (Botões) - Adaptado do consciência.css */
.floating-text {
    position: fixed;
    color: #F5F5F5;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    font-weight: 300;
    text-decoration: none;
    z-index: 40; /* Acima de tudo */
    transition: color 0.5s ease;
}

.floating-text:hover {
    color: #FFD700;
}

.floating-text.chaos8 { /* Return ◯ */
    top: 5%;
    left: 5%;
    animation: subtleChaos8 90s infinite ease-in-out;
}

.floating-text.chaos10 { /* Reset ⊙ */
    bottom: 10%;
    left: 10%;
    animation: subtleChaos10 90s infinite ease-in-out;
}

/* Animações sutis para botões - Copiado do consciência.css */
@keyframes subtleChaos8 {
    0% { top: 5%; left: 5%; transform: rotate(0deg); }
    20% { top: 7%; left: 7%; transform: rotate(4deg); }
    40% { top: 6%; left: 6%; transform: rotate(-4deg); }
    60% { top: 8%; left: 8%; transform: rotate(3deg); }
    80% { top: 6%; left: 7%; transform: rotate(-3deg); }
    100% { top: 5%; left: 5%; transform: rotate(0deg); }
}

@keyframes subtleChaos10 {
    0% { bottom: 10%; left: 10%; transform: rotate(0deg); }
    20% { bottom: 12%; left: 12%; transform: rotate(4deg); }
    40% { bottom: 11%; left: 11%; transform: rotate(-4deg); }
    60% { bottom: 13%; left: 13%; transform: rotate(3deg); }
    80% { bottom: 11%; left: 12%; transform: rotate(-3deg); }
    100% { bottom: 10%; left: 10%; transform: rotate(0deg); }
}