/*
 * O céu da hora: o topo de toda tela. A faixa (data-faixa) escolhe o degradê, o sol ou a lua e as nuvens.
 * O servidor desenha a faixa certa; o ceu.js só a troca quando a hora vira. Sem JS continua certo.
 * O que se mexe (a deriva das nuvens e o esmaecer na troca de faixa) só roda com `no-preference`.
 */
.topo {
  --topo: var(--ceu-dia-topo);
  --meio: var(--ceu-dia-meio);
  --baixo: var(--ceu-dia-baixo);
  --letra: var(--ceu-dia-texto);
  --agora-fundo: var(--ceu-dia-cartao);
  --agora-texto: var(--ceu-dia-cartao-texto);
  --agora-suave: var(--ceu-dia-cartao-suave);
  --agora-link: var(--ceu-dia-cartao-link);
  --agora-botao: var(--ceu-dia-cartao-botao);
  --agora-sobre-botao: var(--ceu-dia-cartao-sobre-botao);
  --sol-x: 78%;
  --sol-y: 22%;
  --nuvem: rgba(255, 255, 255, 0.85);
  --sol-opaco: 1;
  --lua-opaca: 0;
  --estrelas: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--esp-4);
  align-content: end;
  min-height: 9.5rem;
  /* O alto é a faixa das estrelas: texto e cartão começam abaixo dela. O pé (3rem) é onde o céu se funde com a
     página, e nenhum texto fica em cima dele: o texto claro sobre o fade claro não se leria. */
  padding-block: 4rem calc(var(--esp-4) + 3rem);
  background: linear-gradient(180deg, var(--topo) 0%, var(--meio) 55%, var(--baixo) 100%);
  color: var(--letra);
}
.topo[data-faixa="madrugada"] {
  --topo: var(--ceu-madrugada-topo);
  --meio: var(--ceu-madrugada-meio);
  --baixo: var(--ceu-madrugada-baixo);
  --letra: var(--ceu-madrugada-texto);
  --agora-fundo: var(--ceu-madrugada-cartao);
  --agora-texto: var(--ceu-madrugada-cartao-texto);
  --agora-suave: var(--ceu-madrugada-cartao-suave);
  --agora-link: var(--ceu-madrugada-cartao-link);
  --agora-botao: var(--ceu-madrugada-cartao-botao);
  --agora-sobre-botao: var(--ceu-madrugada-cartao-sobre-botao);
  --nuvem: transparent;
  --sol-opaco: 0;
  --lua-opaca: 1;
  --estrelas: 1;
}
.topo[data-faixa="amanhecer"] {
  --topo: var(--ceu-amanhecer-topo);
  --meio: var(--ceu-amanhecer-meio);
  --baixo: var(--ceu-amanhecer-baixo);
  --letra: var(--ceu-amanhecer-texto);
  --agora-fundo: var(--ceu-amanhecer-cartao);
  --agora-texto: var(--ceu-amanhecer-cartao-texto);
  --agora-suave: var(--ceu-amanhecer-cartao-suave);
  --agora-link: var(--ceu-amanhecer-cartao-link);
  --agora-botao: var(--ceu-amanhecer-cartao-botao);
  --agora-sobre-botao: var(--ceu-amanhecer-cartao-sobre-botao);
  --sol-x: 14%;
  --sol-y: 52%;
  --nuvem: rgba(255, 255, 255, 0.6);
}
.topo[data-faixa="entardecer"] {
  --topo: var(--ceu-entardecer-topo);
  --meio: var(--ceu-entardecer-meio);
  --baixo: var(--ceu-entardecer-baixo);
  --letra: var(--ceu-entardecer-texto);
  --agora-fundo: var(--ceu-entardecer-cartao);
  --agora-texto: var(--ceu-entardecer-cartao-texto);
  --agora-suave: var(--ceu-entardecer-cartao-suave);
  --agora-link: var(--ceu-entardecer-cartao-link);
  --agora-botao: var(--ceu-entardecer-cartao-botao);
  --agora-sobre-botao: var(--ceu-entardecer-cartao-sobre-botao);
  --sol-x: 80%;
  --sol-y: 48%;
  --nuvem: rgba(255, 190, 160, 0.3);
  --estrelas: 0.35;
}
.topo[data-faixa="noite"] {
  --topo: var(--ceu-noite-topo);
  --meio: var(--ceu-noite-meio);
  --baixo: var(--ceu-noite-baixo);
  --letra: var(--ceu-noite-texto);
  --agora-fundo: var(--ceu-noite-cartao);
  --agora-texto: var(--ceu-noite-cartao-texto);
  --agora-suave: var(--ceu-noite-cartao-suave);
  --agora-link: var(--ceu-noite-cartao-link);
  --agora-botao: var(--ceu-noite-cartao-botao);
  --agora-sobre-botao: var(--ceu-noite-cartao-sobre-botao);
  --nuvem: transparent;
  --sol-opaco: 0;
  --lua-opaca: 1;
  --estrelas: 1;
}

/* No pé do céu o degradê se funde com o fundo da página, no claro e no escuro. */
.topo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3rem;
  background: linear-gradient(180deg, transparent, var(--fundo));
  z-index: -1;
}

.ceu {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.ceu__sol,
.ceu__lua,
.ceu__nuvem,
.ceu__estrelas {
  position: absolute;
}
.ceu__sol {
  left: var(--sol-x);
  top: var(--sol-y);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c9, #ffd45c 60%, #ffb833);
  box-shadow: 0 0 3.5rem 1rem rgba(255, 214, 92, 0.5);
  opacity: var(--sol-opaco);
}
.ceu__lua {
  left: 76%;
  top: 18%;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: inset 0.8rem -0.3rem 0 0 #f1eeff;
  filter: drop-shadow(0 0 0.6rem rgba(220, 220, 255, 0.45));
  opacity: var(--lua-opaca);
}
.ceu__estrelas {
  top: var(--esp-2);
  right: var(--margem);
  left: var(--margem);
  width: auto;
  height: 3rem;
  fill: #ffffff;
  opacity: var(--estrelas);
}
.ceu__nuvem {
  border-radius: 999px;
  background: var(--nuvem);
}
.ceu__nuvem--a {
  width: 6rem;
  height: 1.7rem;
  left: 48%;
  top: 4.2rem;
}
.ceu__nuvem--b {
  width: 4rem;
  height: 1.2rem;
  left: 60%;
  top: 3.2rem;
}
.ceu__nuvem--c {
  width: 5rem;
  height: 1.4rem;
  left: 8%;
  top: 5.4rem;
}

.topo__texto {
  max-width: var(--medida);
}
.topo__data {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--tipo-pequeno);
  max-width: none;
}
.topo__titulo {
  margin: var(--esp-1) 0 0;
  font-size: clamp(1.625rem, 5vw, var(--tipo-titulo));
}

/* O "agora": um cartão translúcido sobre o céu, com o que pede atenção e o tempo que falta. */
.agora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-radius: 22px;
  background: var(--agora-fundo);
  color: var(--agora-texto);
}
@supports (backdrop-filter: blur(8px)) {
  .agora {
    backdrop-filter: blur(10px);
  }
}
.agora__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--raio-icone);
  background: var(--c-fundo);
  color: var(--c-texto);
}
.agora__texto {
  flex: 1 1 10rem;
  min-width: 0;
}
.agora__rotulo {
  margin: 0;
  color: var(--agora-suave);
  font-size: var(--tipo-pequeno);
  max-width: none;
}
.agora__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.agora__tempo {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: var(--tipo-medio);
  font-variant-numeric: tabular-nums;
  color: var(--agora-link);
}
.agora a {
  color: var(--agora-link);
}
.agora button {
  background: var(--agora-botao);
  color: var(--agora-sobre-botao);
}

/* No escuro o dia não ofusca: o sol é mais suave, as nuvens quase somem e o amanhecer ainda guarda umas estrelas. */
@media (prefers-color-scheme: dark) {
  .ceu__sol {
    background: radial-gradient(circle at 40% 40%, #f3e7b8, #e4b94d 60%, #cf9a2e);
    box-shadow: 0 0 3rem 0.6rem rgba(228, 185, 77, 0.25);
  }
  .topo[data-faixa="amanhecer"] {
    --nuvem: rgba(255, 255, 255, 0.1);
    --estrelas: 0.3;
  }
  .topo[data-faixa="dia"] {
    --nuvem: rgba(255, 255, 255, 0.12);
  }
  .topo[data-faixa="entardecer"] {
    --nuvem: rgba(255, 190, 160, 0.12);
    --estrelas: 0.5;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ceu__sol,
  .ceu__lua,
  .ceu__estrelas {
    transition: opacity 1.5s ease;
  }
  .ceu__nuvem {
    animation: deriva 90s ease-in-out infinite alternate;
  }
  .ceu__nuvem--b {
    animation-duration: 120s;
  }
  .ceu__nuvem--c {
    animation-duration: 150s;
  }
}
@keyframes deriva {
  from {
    transform: translateX(-1.5rem);
  }
  to {
    transform: translateX(1.5rem);
  }
}

/* O céu fino das outras telas: uma faixa com o título sempre na mesma altura (o céu alto é só da Hoje, onde
   mora o cartão "agora"). O título vem primeiro e a data fica do outro lado, na mesma linha. */
.topo--fino {
  min-height: 0;
  gap: 0;
  align-content: center;
  padding-block: var(--esp-4);
}
.topo--fino::after {
  height: 1rem;
}
.topo--fino .topo__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-4);
  max-width: none;
}
.topo--fino .topo__titulo {
  order: -1;
  margin: 0;
  font-size: var(--tipo-grande);
}
.topo--fino .ceu__estrelas,
.topo--fino .ceu__nuvem {
  display: none;
}
/* O sol e a lua moram logo depois do fim do texto, nunca em cima da data. Na tela larga a margem já cabe o astro; na
   estreita, o texto para antes e deixa o lugar dele (--reserva). */
.topo.topo--fino {
  --reserva: max(var(--margem), 4.5rem);
  padding-inline-end: var(--reserva);
}
.topo--fino .ceu__sol,
.topo--fino .ceu__lua {
  top: 50%;
  left: auto;
  right: calc(var(--reserva) - 3.5rem);
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(-50%);
}
.topo--fino .ceu__sol {
  box-shadow: 0 0 2rem 0.5rem rgba(255, 214, 92, 0.5);
}