/* ===================================================================
   humor-fundo.css — as cenas do fundo do "clima da equipe" (home e TVs).
   Monta-se com HumorFundo.montar(el) (humor-fundo.js) numa camada
   .hm-fundo FIXA atras do conteudo. Cards continuam solidos por cima:
   so' o fundo muda, uma pendencia vencida segue vermelha em qualquer humor.

   MOVIMENTO SO' COM transform E opacity. Medido no Visao 360 (01/10/2026,
   CPU 4x mais lenta): box-shadow/filter animados = 47-64% do processador,
   transform/opacity = 0,3%. Gradiente e blur aqui sao ESTATICOS (o blur do
   vapor e' desenhado uma vez e a placa de video so' o desloca). Nao anime
   background, filter ou box-shadow nesta folha.
   =================================================================== */
.hm-fundo{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* Tokens locais com fallback: a home herda os do tokens.css; a TV declara
     os seus (ela nao tem tema claro). */
  --hm-bg:var(--bg,#f4f6fa); --hm-acc:var(--accent,#1A5BD8); --hm-ink:var(--ink,#0f2540);
  --hm-lilas:#8b5cf6; --hm-tint:24%;
}
body.dark .hm-fundo{ --hm-tint:30%; --hm-lilas:#a78bfa; }

.hm-cena{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.hm-cena.on{opacity:1;}
/* Cena escondida nao gasta nada: animacao parada. */
.hm-cena:not(.on) *, .hm-fundo.parado *{animation-play-state:paused !important;}

/* Animado: manha clara, bolhas subindo */
.hm-animado{background:linear-gradient(180deg,color-mix(in oklab,#38bdf8 var(--hm-tint),var(--hm-bg)) 0%,var(--hm-bg) 75%);}
.hm-animado i{position:absolute;bottom:-60px;border-radius:50%;
  border:1.5px solid color-mix(in oklab,var(--hm-acc) 45%,transparent);
  background:color-mix(in oklab,var(--hm-acc) 7%,transparent);
  animation:hmSobe linear infinite;will-change:transform,opacity;}
@keyframes hmSobe{0%{transform:translateY(0);opacity:0}12%{opacity:1}85%{opacity:.8}
  100%{transform:translateY(calc(-1 * var(--hm-alt,760px)));opacity:0}}

/* Tranquilo: ondas lentas no rodape */
.hm-tranquilo{background:linear-gradient(180deg,var(--hm-bg) 35%,color-mix(in oklab,#14b8a6 var(--hm-tint),var(--hm-bg)) 100%);}
.hm-tranquilo svg{position:absolute;left:0;width:200%;height:22%;min-height:90px;animation:hmOnda linear infinite;will-change:transform;}
.hm-tranquilo svg path{fill:color-mix(in oklab,#14b8a6 18%,transparent);}
.hm-tranquilo svg:nth-of-type(1){bottom:0;animation-duration:26s;}
.hm-tranquilo svg:nth-of-type(2){bottom:-3%;animation-duration:38s;animation-direction:reverse;opacity:.8;}
.hm-tranquilo svg:nth-of-type(3){bottom:-6%;animation-duration:52s;opacity:.6;}
@keyframes hmOnda{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Focado: grade de pontos parada e um feixe de luz que passa devagar */
.hm-focado{background:linear-gradient(160deg,color-mix(in oklab,#1A5BD8 calc(var(--hm-tint) * .6),var(--hm-bg)),var(--hm-bg) 60%);}
.hm-pontos{position:absolute;inset:0;
  background-image:radial-gradient(color-mix(in oklab,var(--hm-ink) 16%,transparent) 1px,transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);}
.hm-feixe{position:absolute;top:-30%;bottom:-30%;left:0;width:34%;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--hm-acc) 12%,transparent),transparent);
  transform:translateX(-120%) rotate(14deg);animation:hmFeixe 16s ease-in-out infinite;will-change:transform;}
@keyframes hmFeixe{0%{transform:translateX(-120%) rotate(14deg)}60%,100%{transform:translateX(380%) rotate(14deg)}}

/* Precisando de cafe: tons quentes e vapor subindo */
.hm-cafe{background:radial-gradient(120% 90% at 100% 100%,color-mix(in oklab,#f59e0b var(--hm-tint),var(--hm-bg)),var(--hm-bg) 70%);}
.hm-cafe i{position:absolute;bottom:-120px;border-radius:50%;background:color-mix(in oklab,#d97706 22%,transparent);
  filter:blur(28px);animation:hmVapor ease-in-out infinite;will-change:transform,opacity;}
@keyframes hmVapor{0%{transform:translateY(0) scale(.8);opacity:0}25%{opacity:.9}
  100%{transform:translateY(calc(-.75 * var(--hm-alt,760px))) scale(1.7);opacity:0}}

/* Dia puxado: um circulo que respira, 5 s enchendo e 5 s esvaziando */
.hm-puxado{background:linear-gradient(180deg,color-mix(in oklab,#8b5cf6 calc(var(--hm-tint) * .8),var(--hm-bg)),var(--hm-bg) 80%);}
.hm-resp{position:absolute;right:-8%;top:8%;width:min(560px,70vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--hm-lilas) 26%,transparent),transparent 68%);
  animation:hmRespira 10s ease-in-out infinite;will-change:transform;}
@keyframes hmRespira{0%,100%{transform:scale(.7)}50%{transform:scale(1.12)}}

/* Automaticos, por cima do humor: chuva de verdade e aniversario */
.hm-niver i{position:absolute;top:-20px;width:7px;height:11px;border-radius:2px;animation:hmConfete linear infinite;will-change:transform;}
@keyframes hmConfete{0%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(26px,calc(var(--hm-alt,760px) * .45)) rotate(300deg)}
  100%{transform:translate(-10px,var(--hm-alt,760px)) rotate(620deg)}}

/* ===== Tempo de Sao Caetano (13/10/2026) =====
   Camadas por cima do humor, ligadas por HumorFundo.aplicarTempo(). Mais
   discretas que as do humor: o humor e' da equipe, o tempo e' contexto.
   A TV (.hm-tv, sempre escura) usa as variantes do tema escuro: nuvem clara
   ou sol forte mudariam o contraste do --meta, medido contra a bola. */

/* Sol: disco quente no canto e raios girando devagar (rotate = transform). */
.hm-sol .hm-disco{position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.42),rgba(251,191,36,.16) 45%,transparent 70%);}
.hm-sol .hm-raios{position:absolute;right:-260px;top:-260px;width:640px;height:640px;border-radius:50%;
  background:repeating-conic-gradient(rgba(251,191,36,.10) 0deg 6deg,transparent 6deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  animation:hmGira 90s linear infinite;will-change:transform;}
@keyframes hmGira{to{transform:rotate(360deg)}}
body.dark .hm-sol .hm-disco, .hm-tv .hm-sol .hm-disco{background:radial-gradient(circle,rgba(251,191,36,.20),rgba(251,191,36,.07) 45%,transparent 70%);}
body.dark .hm-sol .hm-raios, .hm-tv .hm-sol .hm-raios{opacity:.5;}
/* Na TV o sol fica no canto do PALCO, nao atras da barra fixa (texto --meta). */
.hm-tv .hm-sol{right:var(--bw,0px);}

/* Nublado: uma nuvem no canto superior direito, no lugar do sol, e uma
   menor atras. Balanca de leve (transform). Chovendo, a mesma nuvem fica
   mais escura e os pingos saem dela (.hm-chuva), sem cobrir a tela. */
.hm-nuvens{position:absolute;right:18px;top:-8px;width:300px;height:190px;}
.hm-nuvens svg{position:absolute;overflow:visible;}
.hm-nuvens .n1{right:0;top:0;width:240px;animation:hmBalanca 11s ease-in-out infinite alternate;will-change:transform;}
.hm-nuvens .n2{right:150px;top:44px;width:130px;opacity:.7;animation:hmBalanca 14s ease-in-out infinite alternate-reverse;will-change:transform;}
.hm-nuvens g{fill:#cbd5e1;} .hm-nuvens .luz{fill:#fff;opacity:.55;}
.hm-fundo[data-tempo~="chuva"] .hm-nuvens g{fill:#94a3b8;}
.hm-fundo[data-tempo~="chuva"] .hm-nuvens .luz{opacity:.25;}
body.dark .hm-nuvens g, .hm-tv .hm-nuvens g{fill:#3b4a5f;}
body.dark .hm-nuvens .luz, .hm-tv .hm-nuvens .luz{fill:#64748b;opacity:.35;}
body.dark .hm-fundo[data-tempo~="chuva"] .hm-nuvens g, .hm-tv.hm-fundo[data-tempo~="chuva"] .hm-nuvens g{fill:#2a3647;}
@keyframes hmBalanca{from{transform:translateX(-10px)}to{transform:translateX(10px)}}

/* Chuva: pingos caindo DA nuvem do canto e sumindo antes da metade da tela. */
.hm-pingos{position:absolute;right:46px;top:120px;width:190px;height:200px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);}
.hm-pingos i{position:absolute;top:-16px;width:2px;height:16px;border-radius:2px;
  background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--hm-acc) 70%,transparent));
  transform:rotate(8deg);animation:hmPingo linear infinite;will-change:transform;}
@keyframes hmPingo{from{transform:translateY(0) rotate(8deg)}to{transform:translate(-22px,210px) rotate(8deg)}}

/* Noite de ceu limpo: lua no canto (no lugar do sol) e estrelas piscando. */
.hm-lua{position:absolute;right:70px;top:24px;width:70px;height:70px;border-radius:50%;
  box-shadow:-16px 10px 0 0 #fbbf24;opacity:.75;}
body.dark .hm-lua, .hm-tv .hm-lua{box-shadow:-16px 10px 0 0 #fde68a;opacity:.6;}
.hm-noite i{position:absolute;width:3px;height:3px;border-radius:50%;background:color-mix(in oklab,var(--hm-ink) 55%,transparent);
  animation:hmPisca ease-in-out infinite;will-change:opacity;}
body.dark .hm-noite i, .hm-tv .hm-noite i{background:#e2e8f0;}
@keyframes hmPisca{0%,100%{opacity:.15}50%{opacity:.9}}
/* Na TV o canto e' o do PALCO, nao atras da barra fixa, e a' esquerda do
   relogio: em cima dele a nuvem e os pingos atrapalhavam ler a hora. */
.hm-tv .hm-nuvens, .hm-tv .hm-pingos, .hm-tv .hm-lua{margin-right:calc(var(--bw,0px) + clamp(260px,19vw,380px));}

/* Calor (30 graus ou mais): brilho quente de baixo e "ar quente" subindo. */
.hm-calor{background:linear-gradient(0deg,color-mix(in oklab,#f97316 calc(var(--hm-tint) * .7),transparent),transparent 40%);}
.hm-calor i{position:absolute;bottom:-30px;width:180px;height:26px;animation:hmCalor ease-in-out infinite;will-change:transform,opacity;}
.hm-calor svg{width:100%;height:100%;display:block;}
.hm-calor path{fill:none;stroke:color-mix(in oklab,#f97316 45%,transparent);stroke-width:2;}
@keyframes hmCalor{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(calc(-.55 * var(--hm-alt,760px)));opacity:0}}

/* Frio (15 graus ou menos): geada nos cantos e floquinhos caindo devagar. */
.hm-geada{position:absolute;inset:0;
  background:radial-gradient(60% 50% at 0% 0%,color-mix(in oklab,#7dd3fc var(--hm-tint),transparent),transparent 70%),
             radial-gradient(60% 50% at 100% 100%,color-mix(in oklab,#7dd3fc var(--hm-tint),transparent),transparent 70%);}
.hm-frio i{position:absolute;top:-10px;border-radius:50%;background:color-mix(in oklab,#7dd3fc 65%,#fff);
  box-shadow:0 0 0 1px color-mix(in oklab,#38bdf8 25%,transparent);animation:hmFloco linear infinite;will-change:transform;}
@keyframes hmFloco{0%{transform:translate(0,0)}50%{transform:translate(18px,calc(var(--hm-alt,760px) * .5))}
  100%{transform:translate(-8px,calc(var(--hm-alt,760px) + 20px))}}

@media (prefers-reduced-motion: reduce){ .hm-fundo *{animation:none !important;} }