/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: url('IMG/background.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
}

/* Estilos do submarino */
.submarino {
    width: 250px;
    position: absolute;
    bottom: 51%;
    left: 5%;
    animation: mover-horizontal 25s linear infinite;
    cursor: pointer;
}

/* Estilos dos objetos (peixes, caranguejos, estrelas) */
.objeto {
    width: 100px;
    height: auto;
    position: absolute;
    cursor: pointer;
}

/* Estilos do polvo */
.polvo {
    width: 200px;
    position: absolute;
    right: -150px; /* Começa fora da tela, na direita */
    animation: mover-polvo 15s linear infinite;
    cursor: pointer;
}


/* 👇 Estilos do Golfinho – igual ao Polvo */
.golfinho {
    width: 200px;
    position: absolute;
    right: -150px; /* Começa fora da tela, na direita */
    animation: mover-polvo 15s linear infinite;
    cursor: pointer;
}

/* 👇 Estilos do Cavalo-Marinho – igual ao Polvo */
.cavalo-marinho {
    width: 200px;
    position: absolute;
    right: -150px; /* Começa fora da tela, na direita */
    animation: mover-polvo 15s linear infinite;
    cursor: pointer;
}

/* Splash ao clicar */
.splash {
    width: 220px;
    position: absolute;
    pointer-events: none;
    animation: desaparecer 0.5s forwards;
}


/* Animação de movimento horizontal (peixes, submarino) */
@keyframes mover-horizontal {
    0% { left: -100px; }
    100% { left: 100vw; }
}

/* Animação do polvo (movimento contrário) */
@keyframes mover-polvo {
    0% { right: -150px; }
    100% { right: 100vw; }
}

/* Animação de desaparecimento */
@keyframes desaparecer {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Ajustes para mobile */
@media (max-width: 768px) {
    body {
        background: url('IMG/fundomobile.jpg') no-repeat center center;
        background-size: cover;
        overflow: hidden;
    }
    .submarino {
        width: 130px;
        bottom: 54%;
    }
    .objeto {
        width: 60px;
    }
    .polvo {
        width: 120px;
    }
}