/* =======================================================================
   VILLE DE MERAKI
   style.css
   -----------------------------------------------------------------------
   ARQUIVO PRINCIPAL DA CIDADE

   Este CSS controla a aparência geral da Ville de Meraki.

   Cada página terá seu próprio CSS específico, mas todas herdarão
   a identidade visual definida aqui.

   Você pode alterar as cores da cidade modificando apenas as variáveis
   abaixo.
======================================================================= */





/* =======================================================================
   RESET
======================================================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    min-height:100vh;

    overflow-x:hidden;

    font-family:Georgia, "Times New Roman", serif;

    color:var(--text-color);

    background:var(--background-color);

}





/* =======================================================================
   VARIÁVEIS DA CIDADE
======================================================================= */

:root{

    /* ==========================================================
       CORES PRINCIPAIS
    ========================================================== */

    --background-color:#dff6ff;

    --sky-top:#d7f1ff;

    --sky-middle:#bfe8ff;

    --sky-bottom:#9ed8ff;

    --ocean-light:#83d7ff;

    --ocean-medium:#58bde8;

    --ocean-dark:#2f8ec9;

    --white:#ffffff;

    --paper:#fffdf8;

    --sand:#f9efd4;

    --wood:#d7b38c;

    --wood-dark:#a57b59;





    /* ==========================================================
       TEXTO
    ========================================================== */

    --text-color:#24435d;

    --title-color:#195b8d;

    --subtitle-color:#46789f;





    /* ==========================================================
       PLANTAS
    ========================================================== */

    --leaf:#73ba8a;

    --leaf-dark:#4e9b69;

    --vine:#6cb67e;





    /* ==========================================================
       DECORAÇÕES
    ========================================================== */

    --shadow:rgba(0,0,0,.15);

    --light-shadow:rgba(0,0,0,.07);

    --glass:rgba(255,255,255,.45);

    --border:#b8def5;

}





/* =======================================================================
   SELEÇÃO DE TEXTO
======================================================================= */

::selection{

    background:#7acdf5;

    color:white;

}





/* =======================================================================
   BARRA DE ROLAGEM
======================================================================= */

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#dff6ff;

}

::-webkit-scrollbar-thumb{

    background:#79c6ec;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#54add8;

}





/* =======================================================================
   BODY
======================================================================= */

body{

    background:

    linear-gradient(
        180deg,
        var(--sky-top),
        var(--sky-middle),
        var(--sky-bottom)
    );

}





/* =======================================================================
   CIDADE
======================================================================= */

.city{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

}





/* =======================================================================
   CAMADA DE FUNDO
======================================================================= */

.background-decoration{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-5;

}





/* =======================================================================
   CÉU
======================================================================= */

.sky{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        #dff7ff 0%,

        #cbefff 25%,

        #b2e4ff 55%,

        #99d7ff 100%

    );

}





/* =======================================================================
   OCEANO
======================================================================= */

.ocean{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:33vh;

    background:

    linear-gradient(

        180deg,

        var(--ocean-light),

        var(--ocean-medium),

        var(--ocean-dark)

    );

}





/* =======================================================================
   BRILHO DA ÁGUA
======================================================================= */

.water-shine{

    position:absolute;

    bottom:26vh;

    width:100%;

    height:160px;

    opacity:.45;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.8),

        rgba(255,255,255,0)

    );

}





/* =======================================================================
   TEXTURA GERAL
======================================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.18;

    background-image:

    radial-gradient(
        rgba(255,255,255,.45) 1px,
        transparent 1px
    );

    background-size:18px 18px;

}





/* =======================================================================
   CONTAINER PRINCIPAL
======================================================================= */

main{

    width:min(1300px,92%);

    margin:auto;

}





/* =======================================================================
   LINKS
======================================================================= */

a{

    color:inherit;

    text-decoration:none;

}





/* =======================================================================
   IMAGENS
======================================================================= */

img{

    display:block;

    max-width:100%;

}





/* =======================================================================
   TÍTULOS
======================================================================= */

h1,h2,h3,h4{

    color:var(--title-color);

    font-weight:normal;

}





/* =======================================================================
   PARÁGRAFOS
======================================================================= */

p{

    line-height:1.8;

}





/* =======================================================================
   BOTÕES
======================================================================= */

button{

    cursor:pointer;

    border:none;

    background:none;

    font:inherit;

}





/* =======================================================================
   LISTAS
======================================================================= */

ul{
  list-style:none;

}

/* =======================================================================
   HEADER DA CIDADE
======================================================================= */

.city-header{

    position:relative;

    width:100%;

    min-height:520px;

    padding:70px 30px 90px;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    overflow:hidden;

}





/* =======================================================================
   ÁREA DA BALEIA
======================================================================= */

.whale-area{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:650px;

    max-width:90%;

    pointer-events:none;

}





/* =======================================================================
   GIF / VÍDEO DA BALEIA
======================================================================= */

.whale{

    width:100%;

    height:auto;

    object-fit:contain;

    opacity:.92;

    filter:

        drop-shadow(0 18px 18px rgba(0,0,0,.12));

    animation:

        whaleFloat 11s ease-in-out infinite;

}





/* =======================================================================
   ÁREA DO TÍTULO
======================================================================= */

.title-area{

    position:relative;

    z-index:10;

    margin-top:170px;

}





/* =======================================================================
   TÍTULO PRINCIPAL
======================================================================= */

.city-title{

    font-size:clamp(3.2rem,7vw,6rem);

    color:var(--title-color);

    letter-spacing:2px;

    text-shadow:

        0 4px 0 rgba(255,255,255,.7),

        0 10px 25px rgba(0,0,0,.12);

}





/* =======================================================================
   SUBTÍTULO
======================================================================= */

.city-subtitle{

    max-width:760px;

    margin:25px auto 0;

    font-size:1.15rem;

    line-height:2;

    color:var(--subtitle-color);

}





/* =======================================================================
   DECORAÇÕES DO TOPO
======================================================================= */

.header-decoration{

    position:absolute;

    inset:0;

    pointer-events:none;

}





/* =======================================================================
   ELEMENTOS DECORATIVOS
======================================================================= */

.shell,
.starfish,
.wave,
.leaf{

    position:absolute;

    font-size:2rem;

    user-select:none;

}





/* Concha */

.shell{

    top:100px;

    left:12%;

    animation:

        floatSlow 6s ease-in-out infinite;

}





/* Estrela */

.starfish{

    top:180px;

    right:14%;

    animation:

        rotateStar 12s linear infinite;

}





/* Onda */

.wave{

    bottom:120px;

    left:10%;

    font-size:2.5rem;

    animation:

        waveMove 4s ease-in-out infinite;

}





/* Folha */

.leaf{

    top:80px;

    right:24%;

    animation:

        leafSwing 5s ease-in-out infinite;

}





/* =======================================================================
   APRESENTAÇÃO
======================================================================= */

.welcome-section{

    position:relative;

    margin:40px auto 70px;

    padding:45px;

    max-width:900px;

    text-align:center;

    border-radius:30px;

    background:

        rgba(255,255,255,.55);

    backdrop-filter:blur(12px);

    box-shadow:

        0 12px 35px rgba(0,0,0,.08);

}





/* =======================================================================
   TÍTULO DA APRESENTAÇÃO
======================================================================= */

.welcome-section h2{

    font-size:2.4rem;

    margin-bottom:25px;

}





/* =======================================================================
   TEXTO DE APRESENTAÇÃO
======================================================================= */

.welcome-section p{

    font-size:1.1rem;

    color:var(--text-color);

}





/* =======================================================================
   MAPA DA CIDADE
======================================================================= */

.city-map{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

    margin-top:50px;

}





/* =======================================================================
   CARD DOS EDIFÍCIOS
======================================================================= */

.building-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:

        rgba(255,255,255,.82);

    backdrop-filter:blur(8px);

    padding:35px;

    min-height:260px;

    transition:

        .35s;

    box-shadow:

        0 10px 25px rgba(0,0,0,.08);

}





/* =======================================================================
   HOVER DOS CARDS
======================================================================= */

.building-card:hover{

    transform:

        translateY(-10px)
        scale(1.02);

    box-shadow:

        0 25px 40px rgba(0,0,0,.15);

}





/* =======================================================================
   ÍCONE DO CARD
======================================================================= */

.building-icon{

    font-size:3rem;

    margin-bottom:20px;

}





/* =======================================================================
   NOME DO EDIFÍCIO
======================================================================= */

.building-card h3{

    font-size:1.7rem;

    margin-bottom:18px;

}





/* =======================================================================
   TEXTO DO CARD
======================================================================= */

.building-card p{

    color:var(--text-color);

}





/* =======================================================================
   BRILHO DOS CARDS
======================================================================= */

.building-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.35),

            transparent,

            rgba(255,255,255,.18)

        );

    pointer-events:none;

}





/* =======================================================================
   EFEITO AO CLICAR
======================================================================= */

.building-card:active{

    transform:

        scale(.98);

}

/* =======================================================================
   PRAIA DA PRAÇA CENTRAL
======================================================================= */

.central-beach{

    position:relative;

    width:100%;

    margin-top:80px;

    min-height:260px;

}





/* =======================================================================
   AREIA
======================================================================= */

.sand-area{

    position:relative;

    width:100%;

    min-height:260px;

    border-radius:40px;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        #fff9ec,

        var(--sand),

        #f3e2b7

    );

    box-shadow:

        inset 0 8px 20px rgba(255,255,255,.5),

        0 15px 35px rgba(0,0,0,.08);

}





/* =======================================================================
   ITENS DA PRAIA
======================================================================= */

.beach-item{

    position:absolute;

    user-select:none;

    font-size:2rem;

}





/* Conchas */

.shell-01{

    top:40px;

    left:12%;

}

.shell-02{

    bottom:35px;

    right:18%;

}

.shell-03{

    top:130px;

    left:48%;

}





/* Caranguejo */

.crab{

    bottom:25px;

    left:28%;

}





/* Peixe */

.fish{

    top:80px;

    right:12%;

}





/* Bolha */

.bubble{

    left:62%;

    bottom:60px;

}





/* Folha */

.beach-item.leaf{

    left:82%;

    top:50px;

}






/* =======================================================================
   JARDIM DA CIDADE
======================================================================= */

.city-garden{

    position:relative;

    min-height:260px;

    margin-bottom:80px;

}





/* =======================================================================
   TREPADEIRAS
======================================================================= */

.vine{

    position:absolute;

    width:140px;

    height:240px;

    opacity:.9;

}





.vine-left{

    left:0;

    top:0;

}





.vine-right{

    right:0;

    top:0;

}





/* =======================================================================
   FLORES
======================================================================= */

.flowers{

    position:absolute;

    inset:0;

}





/* =======================================================================
   GRAMA
======================================================================= */

.grass{

    position:absolute;

    bottom:0;

    width:100%;

    height:60px;

}





/* =======================================================================
   PEQUENAS ÁRVORES
======================================================================= */

.small-trees{

    position:absolute;

    inset:0;

}





/* =======================================================================
   FOLHAS FLUTUANDO
======================================================================= */

.floating-leaves{

    position:absolute;

    inset:0;

    pointer-events:none;

}





.floating-leaves::before,

.floating-leaves::after{

    content:"🍃";

    position:absolute;

    font-size:2rem;

    opacity:.7;

}





.floating-leaves::before{

    left:10%;

    top:18%;

    animation:

        leafFloatOne 16s linear infinite;

}





.floating-leaves::after{

    right:12%;

    top:35%;

    animation:

        leafFloatTwo 18s linear infinite;

}





/* =======================================================================
   PÉTALAS
======================================================================= */

.floating-petals{

    position:absolute;

    inset:0;

    pointer-events:none;

}





.floating-petals::before,

.floating-petals::after{

    content:"🌸";

    position:absolute;

    font-size:1.8rem;

}





.floating-petals::before{

    left:35%;

    top:0;

    animation:

        petalsFallOne 12s linear infinite;

}





.floating-petals::after{

    right:25%;

    top:-20px;

    animation:

        petalsFallTwo 15s linear infinite;

}





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

.bubbles{

    position:absolute;

    inset:0;

    pointer-events:none;

}





.bubbles::before,

.bubbles::after{

    content:"🫧";

    position:absolute;

    font-size:2rem;

}





.bubbles::before{

    left:20%;

    bottom:0;

    animation:

        bubbleRiseOne 10s linear infinite;

}





.bubbles::after{

    right:18%;

    bottom:-30px;

    animation:

        bubbleRiseTwo 13s linear infinite;

}





/* =======================================================================
   PEIXES
======================================================================= */

.small-fishes{

    position:absolute;

    inset:0;

    pointer-events:none;

}





.small-fishes::before{

    content:"🐟";

    position:absolute;

    left:-80px;

    bottom:120px;

    font-size:2rem;

    animation:

        fishSwim 22s linear infinite;

}





/* =======================================================================
   CONCHAS ESCONDIDAS
======================================================================= */

.hidden-shells{

    position:absolute;

    inset:0;

    pointer-events:none;

}





.hidden-shells::before{

    content:"🐚";

    position:absolute;

    bottom:55px;

    right:10%;

    opacity:.35;

    font-size:2rem;

}





/* =======================================================================
   ELEMENTOS ESCONDIDOS
======================================================================= */

.hidden-elements{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:70px 0;

}





.secret-button{

    width:60px;

    height:60px;

    border-radius:50%;

    font-size:1.8rem;

    background:rgba(255,255,255,.75);

    box-shadow:

        0 8px 18px rgba(0,0,0,.10);

    transition:.3s;

}





.secret-button:hover{

    transform:

        scale(1.12)
        rotate(8deg);

}

/* =======================================================================
   MURAL DA PRAÇA CENTRAL
======================================================================= */

.city-notice-board{

    margin:90px auto;

    padding:45px;

    border-radius:35px;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(12px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

}





.city-notice-board h2{

    text-align:center;

    font-size:2.2rem;

    margin-bottom:40px;

}





.notice-list{

    display:flex;

    flex-direction:column;

    gap:25px;

}





.notice{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:25px;

    border-radius:22px;

    background:rgba(255,255,255,.65);

    transition:.3s;

}





.notice:hover{

    transform:translateX(8px);

}





.notice-icon{

    font-size:2.3rem;

}





.notice-content h3{

    margin-bottom:10px;

    font-size:1.3rem;

}





/* =======================================================================
   RELÓGIO
======================================================================= */

.city-clock{

    margin:80px auto;

    text-align:center;

}





.city-clock h2{

    margin-bottom:20px;

}





#cityTime{

    display:inline-block;

    padding:18px 35px;

    border-radius:20px;

    background:white;

    font-size:2.3rem;

    letter-spacing:3px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);

}





/* =======================================================================
   CLIMA
======================================================================= */

.city-weather{

    margin:80px auto;

    text-align:center;

}





.weather-display{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:25px;

}





.weather-icon{

    font-size:3rem;

}





/* =======================================================================
   FRASE DO DIA
======================================================================= */

.daily-message{

    margin:90px auto;

}





.daily-message blockquote{

    max-width:850px;

    margin:auto;

    padding:45px;

    border-left:8px solid #84c8ef;

    border-radius:20px;

    background:rgba(255,255,255,.82);

    font-style:italic;

    line-height:2;

    font-size:1.15rem;

}





/* =======================================================================
   ÂNCORA
======================================================================= */

.anchor-decoration{

    text-align:center;

    margin:70px 0;

    font-size:3rem;

}





/* =======================================================================
   RODAPÉ
======================================================================= */

.city-footer{

    margin-top:120px;

    padding:70px 30px;

    text-align:center;

    color:white;

    background:

        linear-gradient(
            180deg,
            #3d95c7,
            #226f9f
        );

}





.footer-logo{

    font-size:2rem;

    margin-bottom:20px;

}





.footer-navigation{

    margin:35px 0;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}





.footer-navigation a{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    transition:.3s;

}





.footer-navigation a:hover{

    background:rgba(255,255,255,.3);

}





.credits{

    margin-top:35px;

    opacity:.9;

}





/* =======================================================================
   ANIMAÇÕES
======================================================================= */

@keyframes whaleFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}





@keyframes floatSlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}





@keyframes rotateStar{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}





@keyframes waveMove{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(10px);

    }

}





@keyframes leafSwing{

    0%,100%{

        transform:rotate(-6deg);

    }

    50%{

        transform:rotate(6deg);

    }

}





@keyframes leafFloatOne{

    from{

        transform:
            translate(-50px,-30px)
            rotate(0deg);

    }

    to{

        transform:
            translate(120vw,80vh)
            rotate(360deg);

    }

}





@keyframes leafFloatTwo{

    from{

        transform:
            translate(50px,-20px)
            rotate(0deg);

    }

    to{

        transform:
            translate(-120vw,90vh)
            rotate(-360deg);

    }

}





@keyframes petalsFallOne{

    from{

        transform:translateY(-50px);

    }

    to{

        transform:
            translateY(100vh)
            rotate(260deg);

    }

}





@keyframes petalsFallTwo{

    from{

        transform:translateY(-80px);

    }

    to{

        transform:
            translateY(100vh)
            rotate(-320deg);

    }

}





@keyframes bubbleRiseOne{

    from{

        transform:
            translateY(0)
            scale(.8);

        opacity:.2;

    }

    to{

        transform:
            translateY(-700px)
            scale(1.3);

        opacity:1;

    }

}





@keyframes bubbleRiseTwo{

    from{

        transform:
            translateY(0);

        opacity:.25;

    }

    to{

        transform:
            translateY(-650px);

        opacity:1;

    }

}





@keyframes fishSwim{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(100vw + 200px));

    }

}





/* =======================================================================
   RESPONSIVIDADE
======================================================================= */

@media (max-width:900px){

    .city-header{

        padding:50px 20px 70px;

    }

    .title-area{

        margin-top:130px;

    }

    .building-card{

        min-height:auto;

    }

    .notice{

        flex-direction:column;

        text-align:center;

    }

    .weather-display{

        flex-direction:column;

    }

}





@media (max-width:600px){

    .city-title{

        font-size:2.8rem;

    }

    .city-subtitle{

        font-size:1rem;

    }

    .welcome-section{

        padding:30px;

    }

    .city-notice-board{

        padding:25px;

    }

    #cityTime{

        font-size:1.8rem;

    }

    .footer-navigation{

        flex-direction:column;

        align-items:center;

    }

}

    list-style:none;

}