/* GABA3 — tarjeta do clima: uma janela pequena para o céu de agora.
   Só transform/opacity animados (a placa de vídeo faz sozinha), nada que
   repinte a página a cada quadro. */

.gaba3-clima-card{
    position:relative;
    display:block;
    padding:0;
    min-height:190px;
    isolation:isolate;
    color:#fff;
    background:#2b78d0;          /* antes de o céu ser desenhado */
}
.gaba3-clima-card[hidden]{display:none!important}

.ceu-vivo{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0;pointer-events:none}
.ceu-grupo{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.ceu-grupo.is-visivel{opacity:1}
.ceu-grupo>*{position:absolute;inset:0;display:block}
/* As faixas de nuvem/névoa são mais largas que a tarjeta de propósito (deslizam).
   A regra geral do celular (estilo.css: canvas{max-width:100%}) as espremia
   até a largura da tarjeta e as nuvens ficavam 3x mais altas. */
.ceu-grupo>canvas{max-width:none}

/* Pôr/nascer do sol: horizonte aquecido. */
.ceu-crepusculo.is-dia{background:linear-gradient(0deg,rgba(255,150,86,.5) 0%,rgba(255,186,120,.22) 32%,transparent 60%)}
.ceu-crepusculo.is-noite{background:linear-gradient(0deg,rgba(170,96,150,.38) 0%,rgba(90,70,140,.18) 35%,transparent 62%)}

.ceu-estrelas{background-repeat:repeat;background-size:240px 120px;animation:ceu-cintilar 9s ease-in-out infinite alternate}

.ceu-grupo>.ceu-astro{inset:auto;top:14%;right:12%;width:64px;height:64px;transition:opacity 1.4s ease}
.ceu-grupo>.ceu-astro.is-baixo{top:46%}
.ceu-sol{
    border-radius:50%;
    background:radial-gradient(circle,#fffbea 0%,#fff3c4 18%,rgba(255,226,140,.65) 30%,rgba(255,214,120,.22) 52%,rgba(255,210,120,0) 70%);
    transform:scale(1.9);
    animation:ceu-brilho 10s ease-in-out infinite alternate;
}
.ceu-sol.is-baixo{background:radial-gradient(circle,#fff1d6 0%,#ffd39a 20%,rgba(255,160,90,.6) 34%,rgba(255,140,80,.2) 55%,rgba(255,140,80,0) 72%)}
.ceu-grupo>.ceu-lua{width:34px;height:34px;top:16%;right:15%;filter:drop-shadow(0 0 10px rgba(220,230,255,.35))}
.ceu-lua svg{width:100%;height:100%;display:block}

/* Nuvens: faixa do dobro da largura, desliza devagar e emenda sem corte. */
.ceu-grupo>.ceu-nuvens{right:auto;bottom:auto;will-change:transform}
.ceu-nuvens-longe{opacity:.85;animation:ceu-deslizar 260s linear infinite}
.ceu-nuvens-perto{animation:ceu-deslizar 150s linear infinite;animation-delay:-40s}

.ceu-grupo>.ceu-nevoa{right:auto;bottom:auto;opacity:.9;animation:ceu-deslizar 120s linear infinite}

/* Chuva/neve: faixa do dobro da altura, cai em laço. */
.ceu-grupo>.ceu-chuva{bottom:auto;height:200%;background-repeat:repeat;background-size:240px 240px;animation:ceu-cair 1.1s linear infinite;will-change:transform}
.ceu-chuva.is-forte{animation-duration:.7s}
.ceu-chuva.is-forte.is-longe{opacity:.55;background-size:160px 160px;animation-duration:1.2s}
.ceu-chuva.is-neve{animation-duration:9s;background-size:200px 200px}

/* Tempestade: um clarão raro e fraco, nunca piscando. */
.ceu-raio{background:rgba(232,238,255,1);opacity:0;animation:ceu-raio 13s linear infinite}

/* Paisagem e vegetação viva na terra */
.ceu-grupo>.ceu-paisagem{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

/* Foto fotorrealista de fundo com suave movimento Ken Burns */
.ceu-paisagem-foto{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center bottom;
    will-change:transform;
    animation:ceu-foto-respiro 32s ease-in-out infinite alternate;
}

@keyframes ceu-foto-respiro{
    0%{transform:scale(1.02) translate3d(0,0,0)}
    50%{transform:scale(1.07) translate3d(-1%,-1%,0)}
    100%{transform:scale(1.04) translate3d(1%,0,0)}
}

/* Névoa atmosférica sutil entre as serras */
.ceu-paisagem-nevoa{
    position:absolute;
    inset:25% 0 30% 0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,.02) 65%,transparent 100%);
    filter:blur(6px);
    pointer-events:none;
    animation:ceu-nevoa-flutuar 18s ease-in-out infinite alternate;
}

@keyframes ceu-nevoa-flutuar{
    0%{transform:translate3d(-10%,0,0);opacity:.35}
    100%{transform:translate3d(12%,-2%,0);opacity:.65}
}

/* Moldura vegetal superior (copa da floresta com fusão suave) */
.ceu-moldura-folhagem{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:44%;
    background-image:url('../../assets/clima/vegetacao-moldura.webp');
    background-size:cover;
    background-position:center top;
    opacity:.72;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
    pointer-events:none;
    z-index:3;
    animation:ceu-moldura-brisa 12s ease-in-out infinite alternate;
}

@keyframes ceu-moldura-brisa{
    0%{transform:scale(1.01) translateY(0)}
    100%{transform:scale(1.03) translateY(-2px)}
}

/* Palmeiras Buriti reais isoladas com balanço natural da brisa */
.ceu-palmeira-real{
    position:absolute;
    bottom:-8px;
    background-image:url('../../assets/clima/palmeira-buriti-real.webp');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom center;
    transform-origin:50% 100%;
    pointer-events:none;
    z-index:4;
    will-change:transform;
}

.ceu-palmeira-real--esq{
    left:-12px;
    width:135px;
    height:185px;
    animation:ceu-buriti-brisa-esq 7.5s ease-in-out infinite alternate;
}

.ceu-palmeira-real--dir{
    right:-15px;
    width:120px;
    height:165px;
    transform:scaleX(-0.92) scaleY(0.92);
    animation:ceu-buriti-brisa-dir 6.8s ease-in-out infinite alternate;
}

.ceu-ramo-real--topo{
    position:absolute;
    top:-10px;
    right:20px;
    width:95px;
    height:95px;
    background-image:url('../../assets/clima/palmeira-ramo.webp');
    background-repeat:no-repeat;
    background-size:contain;
    transform-origin:90% 10%;
    opacity:.85;
    pointer-events:none;
    z-index:4;
    animation:ceu-ramo-brisa 6s ease-in-out infinite alternate;
}

@keyframes ceu-buriti-brisa-esq{
    0%{transform:rotate(-0.8deg) skewX(-0.5deg)}
    50%{transform:rotate(1.2deg) skewX(1deg)}
    100%{transform:rotate(2.6deg) skewX(2deg)}
}

@keyframes ceu-buriti-brisa-dir{
    0%{transform:scaleX(-0.92) scaleY(0.92) rotate(1.8deg) skewX(1deg)}
    50%{transform:scaleX(-0.92) scaleY(0.92) rotate(-0.5deg) skewX(-0.8deg)}
    100%{transform:scaleX(-0.92) scaleY(0.92) rotate(-2.4deg) skewX(-1.8deg)}
}

@keyframes ceu-ramo-brisa{
    0%{transform:rotate(0deg) scale(1)}
    100%{transform:rotate(4.2deg) scale(1.02)}
}

/* Quando há ventania ou chuva, a vegetação balança com mais energia */
.ceu-paisagem.is-ventania .ceu-palmeira-real--esq{
    animation:ceu-buriti-vento-esq 2.6s ease-in-out infinite alternate;
}

.ceu-paisagem.is-ventania .ceu-palmeira-real--dir{
    animation:ceu-buriti-vento-dir 2.4s ease-in-out infinite alternate;
}

.ceu-paisagem.is-ventania .ceu-ramo-real--topo{
    animation:ceu-ramo-vento 2.2s ease-in-out infinite alternate;
}

@keyframes ceu-buriti-vento-esq{
    0%{transform:rotate(-1.5deg) skewX(-1.5deg)}
    100%{transform:rotate(5.5deg) skewX(4.5deg)}
}

@keyframes ceu-buriti-vento-dir{
    0%{transform:scaleX(-0.92) scaleY(0.92) rotate(3.5deg) skewX(3deg)}
    100%{transform:scaleX(-0.92) scaleY(0.92) rotate(-5.5deg) skewX(-4.5deg)}
}

@keyframes ceu-ramo-vento{
    0%{transform:rotate(-2deg)}
    100%{transform:rotate(8.5deg)}
}

/* Bruma de chuva e impacto na terra */
.ceu-chuva-impacto{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:35px;
    background:radial-gradient(ellipse at bottom, rgba(220, 235, 245, 0.35) 0%, rgba(200, 220, 235, 0.1) 50%, transparent 80%);
    animation:ceu-chuva-neblina 2.2s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:5;
}

@keyframes ceu-chuva-neblina{
    0%{opacity:0.4;transform:scaleY(0.9)}
    100%{opacity:0.9;transform:scaleY(1.25)}
}

/* O tempo de verdade passa NA FRENTE da foto: nuvens perto e névoa, depois a chuva, depois o
   relâmpago (antes ficavam atrás da foto e a chuva nunca aparecia — 2026-10-07). */
.ceu-grupo>.ceu-nuvens-perto,.ceu-grupo>.ceu-nevoa{z-index:3}
.ceu-grupo>.ceu-nuvens-perto{opacity:.6}
.ceu-grupo>.ceu-chuva{z-index:4}
.ceu-grupo>.ceu-raio{z-index:5}

/* Legibilidade: escurece para garantir nitidez cristalina dos textos */
.ceu-veu{
    background:linear-gradient(180deg,rgba(6,12,24,.6) 0%,rgba(6,12,24,.12) 35%,rgba(6,12,24,.4) 75%,rgba(6,12,24,.75) 100%);
    z-index:6;
}

.ceu-parado *{animation-play-state:paused!important}

@keyframes ceu-deslizar{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ceu-cair{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes ceu-brilho{from{opacity:.92;transform:scale(1.85)}to{opacity:1;transform:scale(2.02)}}
@keyframes ceu-cintilar{from{opacity:.55}to{opacity:1}}
@keyframes ceu-raio{0%,93%{opacity:0}93.6%{opacity:.2}94.2%{opacity:0}95%{opacity:.1}95.6%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
    .ceu-vivo *{animation:none!important}
    .ceu-grupo{transition:none}
}

/* Conteúdo por cima do céu */
.gaba3-clima-conteudo{
    position:relative;
    z-index:10;
    height:100%;
    min-height:inherit;
    box-sizing:border-box;
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
    text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.5);
}
.gaba3-clima-topo{display:flex;flex-direction:column;gap:2px;min-width:0}
#gaba3-clima-cidade{font-size:14px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gaba3-clima-data{font-size:12.5px;opacity:.92}
.gaba3-clima-agora{display:flex;flex-direction:column;gap:2px;min-width:0}
#gaba3-clima-temp{font-size:54px;font-weight:300;line-height:1;letter-spacing:-.02em}
#gaba3-clima-desc{font-size:15px;font-weight:600;color:#fff}
.gaba3-clima-dia{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13px;font-weight:600}
#gaba3-clima-chuva{display:inline-flex;align-items:center;gap:5px}
#gaba3-clima-chuva svg{width:12px;height:12px;fill:currentColor;opacity:.9}
#gaba3-clima-idade{font-size:11px;opacity:.85}
.gaba3-clima-card.is-neutro .gaba3-clima-agora{justify-content:center}
.gaba3-clima-card.is-neutro #gaba3-clima-desc{font-weight:500;opacity:.92}

@media(max-width:820px){
    .gaba3-clima-card{min-height:178px}
    .gaba3-clima-conteudo{padding:14px 16px}
    #gaba3-clima-temp{font-size:44px}
    #gaba3-clima-desc{font-size:14px}
}