/* banner.css — Banner de descanso (o céu que veste o tema).
   Parte de painel.css, dividido em 13/09/2026: um arquivo de 3.782 linhas
   não se navega. A ORDEM dos <link> no index.html importa (cascata). */

/* ---------- banner de descanso: uma noite no topo do painel ---------- */
#banner-descanso {
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--banner-ceu);
  border-bottom: 1px solid var(--graf-borda);
  color: var(--banner-texto);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 16px;
  text-align: center;
  text-shadow: var(--banner-sombra);
}
#banner-descanso {
  animation: banner-entra .45s ease-out; /* desliza ao aparecer (display muda reinicia) */
}
@keyframes banner-entra {
  from { transform: translateY(-100%); opacity: .4; }
  to { transform: none; opacity: 1; }
}
/* o horário de retorno vira um chip de leitura instantânea */
#banner-descanso b {
  color: var(--banner-chip);
  font-weight: 700;
  background: var(--banner-chip-bg);
  border: 1px solid var(--banner-chip-borda);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 2px;
  white-space: nowrap;
}
#banner-descanso .descanso-icone,
#banner-descanso #banner-descanso-texto { position: relative; z-index: 1; }

/* feixe de luz sutil varrendo o banner (movimento profissional, sem chamar atenção) */
#banner-descanso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .07) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: banner-varredura 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes banner-varredura {
  0%, 55% { transform: translateX(-100%); }
  85%, 100% { transform: translateX(100%); }
}

/* céu: camadas de estrelas piscando em ritmos diferentes */
.noite { position: absolute; inset: 0; pointer-events: none; }

/* aurora: manchas de luz derivando bem devagar, dão profundidade ao céu */
.aurora {
  position: absolute;
  top: -46px;
  width: 340px;
  height: 120px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .4;
}
.aurora.a1 {
  left: 10%;
  background: radial-gradient(circle, var(--banner-aurora-1), transparent 70%);
  animation: aurora-deriva 16s ease-in-out infinite alternate;
}
.aurora.a2 {
  right: 8%;
  background: radial-gradient(circle, var(--banner-aurora-2), transparent 70%);
  animation: aurora-deriva 21s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-deriva {
  from { transform: translateX(-28px) scale(1); }
  to { transform: translateX(42px) scale(1.14); }
}

/* nuvens noturnas: SVG iluminado pela lua, cruzando o céu em três velocidades.
   Delays negativos = já entram em cena distribuídas, sem céu vazio no início. */
/* Movimento de nuvem de verdade: a travessia (translate) leva uma deriva
   vertical dentro do próprio percurso, e uma SEGUNDA animação respira a forma
   (scale) em ritmo diferente. São propriedades independentes — `translate` e
   `scale` compõem, o que `transform` sozinho não permitiria. Cada camada tem
   duração, altura e opacidade próprias: é a paralaxe que dá profundidade. */
.nuvem {
  position: absolute;
  left: -280px;
  will-change: translate, scale;
  animation: nuvem-passa linear infinite, nuvem-respira ease-in-out infinite alternate;
}
.nuvem.n1 { top: -18px; width: 230px; opacity: .95; animation-duration: 82s, 15s; animation-delay: -18s, -3s; }
.nuvem.n2 { top: -6px;  width: 132px; opacity: .62; animation-duration: 58s, 11s; animation-delay: -41s, -7s; }
.nuvem.n3 { top: -14px; width: 182px; opacity: .85; animation-duration: 104s, 19s; animation-delay: -76s, -12s; }
.nuvem.n4 { top: 2px;   width: 96px;  opacity: .42; animation-duration: 132s, 23s; animation-delay: -55s, -2s; }
.nuvem.n5 { top: -22px; width: 154px; opacity: .55; animation-duration: 70s, 13s; animation-delay: -63s, -9s; }
@keyframes nuvem-passa {
  0%   { translate: 0 0; }
  22%  { translate: calc((100vw + 560px) * .22) -7px; }
  45%  { translate: calc((100vw + 560px) * .45) 4px; }
  70%  { translate: calc((100vw + 560px) * .7) -5px; }
  100% { translate: calc(100vw + 560px) 0; }
}
/* a respiração é PRÓPRIA de cada camada: com um scale só para todas, as cinco
   nuvens infl(av)am em uníssono e o céu inteiro pulsa junto */
@keyframes nuvem-respira { from { scale: 1 1; } to { scale: 1.06 .93; } }
@keyframes nuvem-respira-b { from { scale: 1.02 .97; } to { scale: .96 1.05; } }
@keyframes nuvem-respira-c { from { scale: .98 1.03; } to { scale: 1.08 .94; } }
.nuvem.n2 { animation-name: nuvem-passa, nuvem-respira-b; }
.nuvem.n4 { animation-name: nuvem-passa, nuvem-respira-c; }
.nuvem.n5 { animation-name: nuvem-passa, nuvem-respira-b; }

/* Os puffs por dentro se mexem em contratempo; sem isso a nuvem é um adesivo
   deslizando. `transform-box: fill-box` faz cada elipse girar no próprio
   centro, não no canto do viewBox.
   ⚠️ O que fazia parecer artificial era TODO puff derivar para o mesmo canto
   com o mesmo scale: a silhueta ia e voltava inteira, como um fole. Agora cada
   um tem rumo, deformação e leve rotação próprios — a borda muda de forma sem
   a massa se deslocar, que é como nuvem se transforma de verdade. */
.nuvem .pf {
  transform-box: fill-box;
  transform-origin: center;
  animation: ease-in-out infinite alternate;
}
.nuvem .pf:nth-child(2) { animation-name: puff-a; animation-duration: 17s; animation-delay: -2s; }
.nuvem .pf:nth-child(3) { animation-name: puff-b; animation-duration: 13s; animation-delay: -6s; }
.nuvem .pf:nth-child(4) { animation-name: puff-c; animation-duration: 21s; animation-delay: -11s; }
.nuvem .pf:nth-child(5) { animation-name: puff-d; animation-duration: 15s; animation-delay: -4s; }
.nuvem .pf:nth-child(6) { animation-name: puff-e; animation-duration: 25s; animation-delay: -14s; }
.nuvem .pf:nth-child(7) { animation-name: puff-f; animation-duration: 19s; animation-delay: -8s; }
.nuvem .pf:nth-child(8) { animation-name: puff-g; animation-duration: 23s; animation-delay: -17s; }
.nuvem .pf:nth-child(9) { animation-name: puff-b; animation-duration: 27s; animation-delay: -21s; }
.nuvem .pf:nth-child(10) { animation-name: puff-d; animation-duration: 31s; animation-delay: -5s; }
/* A base é o piso de condensação: quase não sobe, só se alonga com o vento.
   ⚠️ Esta regra vem DEPOIS das de :nth-child de propósito. Ela empata em
   especificidade com elas, e o n1 tem um <defs> como primeiro filho — ou seja,
   a base dele é o segundo filho e cairia na regra do puff-a se a ordem fosse
   outra. Empate resolvido pela ordem, que é o que garante a base plana. */
.nuvem .pf.base { animation-name: puff-base; animation-duration: 29s; animation-delay: -7s; }

/* Cada rumo é diferente: um sobe, outro desce, outro só engorda. Os `scale`
   são anisotrópicos (x ≠ y) porque puff de nuvem não infla como balão: ele
   se alonga na direção do vento enquanto afina, ou o contrário. */
@keyframes puff-base {
  from { transform: translate(-2px, 0) scale(1, 1); }
  to { transform: translate(3px, .5px) scale(1.05, .94); }
}
@keyframes puff-a {
  from { transform: translate(0, 0) scale(1, 1) rotate(0deg); }
  to { transform: translate(4px, -3px) scale(1.07, .95) rotate(1.5deg); }
}
@keyframes puff-b {
  from { transform: translate(1px, -1px) scale(1.03, .98); }
  to { transform: translate(-3px, 2px) scale(.94, 1.06); }
}
@keyframes puff-c {
  from { transform: translate(-2px, 1px) scale(.97, 1.02) rotate(-1deg); }
  to { transform: translate(2px, -4px) scale(1.09, .96) rotate(1deg); }
}
@keyframes puff-d {
  from { transform: translate(2px, 1px) scale(1.04, 1.01); }
  to { transform: translate(-4px, -2px) scale(.93, 1.04); }
}
@keyframes puff-e {
  from { transform: translate(-1px, -2px) scale(1, 1.03) rotate(1deg); }
  to { transform: translate(5px, 1px) scale(1.08, .92) rotate(-1.5deg); }
}
@keyframes puff-f {
  from { transform: translate(3px, 0) scale(.96, 1.05); }
  to { transform: translate(-2px, -3px) scale(1.06, .97); }
}
@keyframes puff-g {
  from { transform: translate(0, 2px) scale(1.05, .96) rotate(-2deg); }
  to { transform: translate(-3px, -1px) scale(.95, 1.07) rotate(2deg); }
}

/* Movimento é enfeite: quem pediu menos animação fica com o céu parado, e a
   nuvem continua desenhada no lugar. */
@media (prefers-reduced-motion: reduce) {
  .nuvem, .nuvem .pf { animation: none; }
}
.estrelas {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
}
.estrelas.camada1 {
  box-shadow:
    24px 8px 0 0 rgba(255, 255, 255, .7), 90px 22px 0 0 rgba(255, 255, 255, .5),
    160px 6px 0 0 rgba(255, 255, 255, .8), 240px 18px 0 0 rgba(255, 255, 255, .45),
    330px 10px 0 0 rgba(255, 255, 255, .7), 420px 26px 0 0 rgba(255, 255, 255, .5),
    510px 8px 0 0 rgba(255, 255, 255, .75), 620px 20px 0 0 rgba(255, 255, 255, .45),
    730px 12px 0 0 rgba(255, 255, 255, .65), 850px 24px 0 0 rgba(255, 255, 255, .5),
    960px 7px 0 0 rgba(255, 255, 255, .8), 1080px 18px 0 0 rgba(255, 255, 255, .5),
    1220px 10px 0 0 rgba(255, 255, 255, .7), 1360px 22px 0 0 rgba(255, 255, 255, .45),
    1500px 14px 0 0 rgba(255, 255, 255, .65), 1650px 9px 0 0 rgba(255, 255, 255, .55);
  animation: estrela-pisca 3.4s ease-in-out infinite;
}
.estrelas.camada2 {
  width: 2.5px; height: 2.5px;
  box-shadow:
    60px 14px 0 0 rgba(255, 244, 214, .9), 200px 26px 0 0 rgba(255, 244, 214, .6),
    380px 6px 0 0 rgba(255, 244, 214, .85), 560px 16px 0 0 rgba(255, 244, 214, .55),
    760px 26px 0 0 rgba(255, 244, 214, .8), 940px 12px 0 0 rgba(255, 244, 214, .6),
    1140px 24px 0 0 rgba(255, 244, 214, .85), 1320px 8px 0 0 rgba(255, 244, 214, .55),
    1480px 20px 0 0 rgba(255, 244, 214, .75), 1620px 25px 0 0 rgba(255, 244, 214, .6);
  animation: estrela-pisca 2.6s ease-in-out infinite;
  animation-delay: -1.3s;
}
.estrelas.camada3 {
  width: 1.5px; height: 1.5px;
  box-shadow:
    140px 15px 0 0 rgba(210, 222, 255, .5), 460px 22px 0 0 rgba(210, 222, 255, .4),
    690px 9px 0 0 rgba(210, 222, 255, .5), 1010px 21px 0 0 rgba(210, 222, 255, .4),
    1270px 13px 0 0 rgba(210, 222, 255, .45), 1560px 18px 0 0 rgba(210, 222, 255, .4);
  animation:
    estrelas-deriva 42s linear infinite alternate,
    estrela-pisca 4.4s ease-in-out infinite; /* paralaxe: deriva + pisca */
}
@keyframes estrelas-deriva {
  from { transform: translateX(0); }
  to { transform: translateX(26px); }
}
@keyframes estrela-pisca {
  0%, 100% { opacity: .3; }
  50% { opacity: 1; }
}

/* estrela cadente de vez em quando */
.estrela-cadente {
  position: absolute;
  top: 5px;
  left: 72%;
  width: 74px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), transparent);
  transform: rotate(-16deg);
  opacity: 0;
  animation: estrela-corre 9s linear infinite;
  animation-delay: 2.5s;
}
@keyframes estrela-corre {
  0%, 86% { opacity: 0; transform: translate(0, 0) rotate(-16deg); }
  89% { opacity: 1; }
  96% { opacity: 0; transform: translate(-150px, 40px) rotate(-16deg); }
  100% { opacity: 0; }
}

/* selo da lua com pulso de respiração — calmo, no ritmo de quem descansa */
.descanso-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* cores do chip do tema: no escuro é a lua âmbar sobre o céu; no claro o
     âmbar translúcido sumia contra o fundo pastel, então o selo ganha corpo */
  border: 1px solid var(--banner-chip-borda);
  background: var(--banner-chip-bg);
  color: var(--banner-chip);
  flex-shrink: 0;
  animation: descanso-respira 3.6s ease-in-out infinite;
}
.descanso-icone svg { stroke-width: 2.4; }
body.tema-claro .descanso-icone {
  background: #fff;
  border-color: currentColor;
  box-shadow: 0 1px 3px rgba(12, 14, 18, .12);
}
@keyframes descanso-respira {
  0%, 100% { box-shadow: 0 0 0 0 var(--banner-chip-bg); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px transparent; transform: scale(1.06); }
}
/* o pulso do claro parte da sombra sólida, senão o selo "pisca" sem anel */
body.tema-claro .descanso-icone { animation-name: descanso-respira-claro; }
@keyframes descanso-respira-claro {
  0%, 100% { box-shadow: 0 1px 3px rgba(12, 14, 18, .12), 0 0 0 0 var(--banner-chip-bg); transform: scale(1); }
  50% { box-shadow: 0 1px 3px rgba(12, 14, 18, .12), 0 0 0 7px transparent; transform: scale(1.06); }
}

/* acessibilidade: quem pediu menos movimento ganha a noite parada */
@media (prefers-reduced-motion: reduce) {
  #banner-descanso, .estrelas, .aurora, .estrela-cadente, .descanso-icone,
  .nuvem, .nuvem ellipse { animation: none; }
  #banner-descanso::after { display: none; }
}