/* ===== CONFIGURAÇÕES GERAIS ===== */

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

/* ===== CORPO DA PÁGINA ===== */

body {
    background-color: #061B2A;
    color: #E5F1F5;
    font-family: Georgia, serif;
    min-height: 100vh;
}

/* ===== CABEÇALHO ===== */

header {
    text-align: center;
    padding: 35px 20px;
    background-color: #0B293B;
    border-bottom: 1px solid #287A91;
}

header h1 {
    font-size: 32px;
    color: #B8DDE5;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

header p {
    color: #A8C9D9;
    font-size: 16px;
}

/* ===== CONTEÚDO PRINCIPAL ===== */

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75vh;
    padding: 30px 20px;
}

/* ===== PRIMEIRA SEÇÃO ===== */

#inicio {
    max-width: 700px;
    text-align: center;
    padding: 40px 25px;
}

#inicio h2 {
    font-size: 38px;
    color: #B8DDE5;
    margin-bottom: 25px;
}

#inicio p {
    font-size: 18px;
    line-height: 1.8;
    color: #C0DCE9;
    margin-bottom: 30px;
}

/* ===== BOTÃO ===== */

button {
    background-color: #287A91;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #3B9CB5;
    transform: scale(1.05);
}
/* ===== IMAGEM DA BALEIA ===== */

.baleia {
    margin-bottom: 25px;
}


.baleia img {
    width: 100%;
    max-width: 450px;
    height: auto;

    /* Sombra ao redor da baleia */
    filter: drop-shadow(0 0 20px #287A91);

    /* Ativa a animação */
    animation: nadar 5s ease-in-out infinite;
}

/* ===== ANIMAÇÃO DA BALEIA ===== */

@keyframes nadar {

    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-2deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }

}


/* ===== AMBIENTE SUBMARINO ===== */

main {
    position: relative;
    overflow: hidden;
}

/* Raios de luz */

main::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(120, 220, 255, 0.08) 40%,
            transparent 55%
        ),
        linear-gradient(
            70deg,
            transparent 45%,
            rgba(120, 220, 255, 0.07) 55%,
            transparent 70%
        );

    animation: luz 9s ease-in-out infinite;
    pointer-events: none;
}

/* Movimento da iluminação */

@keyframes luz {
    0%, 100% {
        opacity: 0.3;
        transform: translateX(-10px);
    }

    50% {
        opacity: 1;
        transform: translateX(10px);
    }
}


/* ===== BOLHAS ===== */

.bolhas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bolhas span {
    position: absolute;
    bottom: -30px;

    width: 12px;
    height: 12px;

    border: 1px solid rgba(184, 221, 229, 0.5);
    border-radius: 50%;

    animation: subir 8s linear infinite;
}

/* Posição e velocidade de cada bolha */

.bolhas span:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.bolhas span:nth-child(2) {
    left: 25%;
    width: 8px;
    height: 8px;
    animation-delay: 2s;
}

.bolhas span:nth-child(3) {
    left: 45%;
    width: 16px;
    height: 16px;
    animation-delay: 4s;
}

.bolhas span:nth-child(4) {
    left: 65%;
    animation-delay: 1s;
}

.bolhas span:nth-child(5) {
    left: 80%;
    width: 9px;
    height: 9px;
    animation-delay: 3s;
}

.bolhas span:nth-child(6) {
    left: 92%;
    width: 15px;
    height: 15px;
    animation-delay: 5s;
}

/* Movimento das bolhas */

@keyframes subir {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-85vh);
        opacity: 0;
    }
}

/* Mantém o conteúdo acima dos efeitos */

#inicio {
    position: relative;
    z-index: 1;
}


/* ===== SEÇÃO DE ESPÉCIES ===== */

#especies {
    padding: 80px 25px;
    background-color: #092638;
    color: #E5F1F5;
}

/* Título da seção */

.titulo-secao {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 55px;
}

.subtitulo {
    color: #55B6CC;
    letter-spacing: 4px;
    font-size: 13px;
    margin-bottom: 15px;
}

.titulo-secao h2 {
    font-size: 36px;
    color: #B8DDE5;
    margin-bottom: 20px;
}

.titulo-secao > p:last-child {
    line-height: 1.7;
    color: #A8C9D9;
}

/* Cartão da espécie */

.cartao-especie {
    max-width: 1000px;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 35px;

    background-color: #10364B;
    border: 1px solid #287A91;
    border-radius: 20px;
    padding: 25px;
}

/* Fotografia */

.imagem-especie {
    flex: 1;
    min-width: 0;
}

.imagem-especie img {
    width: 100%;
    display: block;
    border-radius: 15px;
}

/* Informações */

.informacoes-especie {
    flex: 1;
}

.categoria {
    color: #55B6CC;
    font-size: 12px;
    letter-spacing: 3px;
}

.informacoes-especie h3 {
    font-size: 32px;
    color: #B8DDE5;
    margin: 12px 0 5px;
}

.nome-cientifico {
    color: #83B8C9;
    font-style: italic;
    margin-bottom: 20px;
}

.descricao-especie {
    line-height: 1.8;
    color: #C0DCE9;
    margin-bottom: 25px;
}

/* Dados científicos */

.dados-especie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
}

.dados-especie div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dados-especie strong {
    color: #71C5D8;
    font-size: 18px;
}

.dados-especie span {
    color: #A8C9D9;
    font-size: 12px;
}

/* Curiosidade */

.curiosidade {
    padding: 18px;
    background-color: #0B293B;
    border-left: 3px solid #55B6CC;
    border-radius: 5px;
}

.curiosidade h4 {
    color: #71C5D8;
    margin-bottom: 8px;
}

.curiosidade p {
    color: #C0DCE9;
    line-height: 1.6;
}

/* Adaptação para celulares */

@media (max-width: 700px) {

    .cartao-especie {
        flex-direction: column;
        margin-bottom: 35px;
    }

    .informacoes-especie h3 {
        font-size: 27px;
    }

    .titulo-secao h2 {
        font-size: 29px;
    }

}

/* ===== DETALHES DA BALEIA ===== */

#botao-detalhes {
    margin-top: 20px;
}

/* Área que aparece após o clique */

#detalhes-baleia {
    margin-top: 20px;
    padding: 20px;

    background-color: #061B2A;
    border-radius: 10px;

    border: 1px solid #287A91;
}

#detalhes-baleia h4 {
    color: #71C5D8;
    margin-bottom: 12px;
}

#detalhes-baleia p {
    color: #C0DCE9;
    line-height: 1.7;
    margin-bottom: 12px;
}

#detalhes-baleia[hidden] {
    display: none;
}


/* ===== SEÇÃO DAS CANÇÕES ===== */

#cancoes {
    padding: 80px 25px;
    background-color: #061B2A;
}

/* Conteúdo central */

.conteudo-cancoes {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

/* Ondas sonoras */

.ondas-sonoras {
    height: 120px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;

    margin-bottom: 35px;
}

.ondas-sonoras span {
    width: 7px;
    height: 20px;

    background-color: #55B6CC;
    border-radius: 10px;

    animation: ondas 1.2s ease-in-out infinite alternate;
}

/* Variação da animação */

.ondas-sonoras span:nth-child(2n) {
    animation-delay: 0.2s;
}

.ondas-sonoras span:nth-child(3n) {
    animation-delay: 0.4s;
}

.ondas-sonoras span:nth-child(4n) {
    animation-delay: 0.6s;
}

@keyframes ondas {

    from {
        height: 15px;
        opacity: 0.5;
    }

    to {
        height: 90px;
        opacity: 1;
    }

}

/* Textos */

.conteudo-cancoes h3 {
    color: #B8DDE5;
    font-size: 27px;
    margin-bottom: 15px;
}

.texto-cancoes {
    color: #A8C9D9;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Botões de espécies */

.botoes-cancoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.botao-cancao {
    background-color: #10364B;
    border: 1px solid #287A91;
}

.botao-cancao:hover {
    background-color: #287A91;
}

/* Informações selecionadas */

#informacao-cancao {
    background-color: #10364B;
    padding: 30px;
    border-radius: 15px;
    border: 1px solid #287A91;
    text-align: left;
}

#informacao-cancao h4 {
    color: #71C5D8;
    font-size: 21px;
    margin-bottom: 15px;
}

#informacao-cancao p {
    color: #C0DCE9;
    line-height: 1.8;
}

/* ===== REPRODUTOR DE SONS ===== */

.reprodutor {
    max-width: 600px;
    margin: 40px auto;
    padding: 25px;
    background-color: #092638;
    border: 1px solid #287A91;
    border-radius: 12px;
    text-align: center;
}

.reprodutor h3 {
    color: #71C5D8;
    margin-bottom: 20px;
}

.reprodutor audio {
    width: 100%;
    max-width: 450px;
}


/* ===== UMA DESCOBERTA PARA HOJE ===== */

#descoberta {
    padding: 80px 25px;
    background-color: #092638;
}

.cartao-descoberta {
    max-width: 700px;
    margin: 40px auto 0;
    padding: 35px;
    text-align: center;

    background-color: #061B2A;
    border: 1px solid #287A91;
    border-radius: 15px;

    box-shadow: 0 0 25px rgba(40, 122, 145, 0.12);
}

.icone-descoberta {
    font-size: 45px;
    color: #71C5D8;
    margin-bottom: 20px;

    animation: brilho-descoberta 3s ease-in-out infinite;
}

.cartao-descoberta h3 {
    color: #71C5D8;
    font-size: 24px;
    margin-bottom: 20px;
}

.cartao-descoberta p {
    color: #C0DCE9;
    line-height: 1.8;
    margin-bottom: 25px;
}

#botao-descoberta {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;

    background-color: #287A91;
    color: #FFFFFF;

    font-size: 16px;
    cursor: pointer;

    transition: background-color 0.3s, transform 0.3s;
}

#botao-descoberta:hover {
    background-color: #399BB5;
    transform: translateY(-3px);
}

@keyframes brilho-descoberta {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Ajuste para telas menores */
@media (max-width: 600px) {
    .cartao-descoberta {
        padding: 25px 20px;
    }

    .cartao-descoberta h3 {
        font-size: 21px;
    }
}


/* ===== MENSAGEM FINAL PARA A IZA ===== */

#mensagem-final {
    padding: 90px 25px;
    background-color: #061B2A;
}

.carta-final {
    max-width: 750px;
    margin: 45px auto 0;
    padding: 45px;

    background: linear-gradient(
        145deg,
        #0B293B,
        #061B2A
    );

    border: 1px solid #287A91;
    border-radius: 15px;

    box-shadow: 0 0 35px rgba(40, 122, 145, 0.12);
}

.estrela-carta {
    text-align: center;
    font-size: 40px;
    color: #71C5D8;
    margin-bottom: 30px;

    animation: brilho-descoberta 3s ease-in-out infinite;
}

.saudacao-carta {
    color: #71C5D8;
    font-family: Georgia, serif;
    font-size: 24px;
    margin-bottom: 30px;
}

.texto-carta p {
    color: #C0DCE9;
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 2;
    margin-bottom: 25px;
}

.assinatura-carta {
    text-align: center;
    color: #71C5D8;
    font-size: 35px;
    margin-top: 30px;
}

/* Ajustes para celulares */
@media (max-width: 600px) {
    .carta-final {
        padding: 30px 22px;
    }

    .texto-carta p {
        font-size: 16px;
        line-height: 1.8;
    }

    .saudacao-carta {
        font-size: 21px;
    }
}


/* ===== MENU DE NAVEGAÇÃO ===== */

.navegacao {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 15px 20px;

    background-color: rgba(6, 27, 42, 0.95);
    border-bottom: 1px solid #287A91;
    backdrop-filter: blur(10px);
}

.navegacao a {
    color: #C0DCE9;
    text-decoration: none;

    font-size: 14px;
    padding: 9px 14px;
    border-radius: 20px;

    transition: background-color 0.3s, color 0.3s;
}

.navegacao a:hover {
    background-color: #287A91;
    color: #FFFFFF;
}

/* Faz os links descerem suavemente até as seções */
html {
    scroll-behavior: smooth;
}

/* Evita que o menu cubra o título da seção */
section {
    scroll-margin-top: 90px;
}

/* Ajuste para celulares */
@media (max-width: 600px) {
    .navegacao {
        gap: 5px;
        padding: 10px 8px;
    }

    .navegacao a {
        font-size: 12px;
        padding: 8px 10px;
    }
}