/* GLOBAL CSS - André LPDZ v2
   Baseado no reset.css original + Modern Best Practices
*/

:root {
    /* Cores Base (Websafe) */
    --blue: #0099CC;
    --orange: #FF6600;
    --green: #33CC00;

    /* Tons de Cinza */
    --gray-300: #333333;
    --gray-600: #666666;
    --gray-900: #999999;
    --white: #FFFFFF;
    --black: #000000;

    /* Transição de Mundos */
    --transition-speed: 0.4s;
}

/* Reset Baseado em andrelpdz.com.br/css/reset.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--gray-300);
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

#page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
    pointer-events: none; /* Permite clicar através dela quando invisível */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Classe que ativa o fade */
.fade-out {
    opacity: 1 !important;
}

.bioma:active {
    filter: brightness(0.5); /* Dá um feedback visual de que está "entrando" no mundo */
}