/* =====================================================================
   O CÉU DE AGORA — a capa ilustrada das telas de entrada (21/10/2026).
   Desenho em includes/entrada_ceu.php; cores e posições em assets/entrada-ceu.js.
   As variáveis --c1…--r6, --sol, --nebOp... são as cores DA HORA, já misturadas.
   ===================================================================== */
.cad-lado--ceu{ background:var(--c1, #0B1220); justify-content:space-between; padding:44px 56px 52px; isolation:isolate; }
.cad-lado--ceu::after{ display:none; }
.cad-lado--ceu > .ceu-cena{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.cad-lado--ceu > .ceu-sombra{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,8,20,.35) 0%, rgba(4,8,20,0) 16%),
    linear-gradient(0deg, rgba(4,8,20,.62) 0%, rgba(4,8,20,.28) 24%, rgba(4,8,20,0) 40%);
}
.cad-lado--ceu > .cad-lado-marca, .cad-lado--ceu > .ceu-texto{ position:relative; z-index:1; }
.cad-lado--ceu .cad-lado-marca img{ height:34px; filter:drop-shadow(0 2px 14px rgba(0,0,0,.3)); }

/* --- céu, estrelas, Via Láctea --- */
.ceu-via{ opacity:calc(var(--via, 0) * .55); }
.ceu-estrelas circle{ fill:#fff; }
.ceu-estrelas{ opacity:var(--estrelas, 0); }
.ceu-estrela-pisca{ animation:ceuPisca 4.6s ease-in-out infinite; }
@keyframes ceuPisca{ 0%, 100%{ opacity:1; } 50%{ opacity:.25; } }
.ceu-cadente{ opacity:0; animation:ceuCadente 11s ease-in infinite; animation-delay:3s; }
.cad-lado--ceu:not(.ceu-noite) .ceu-cadente{ display:none; }
@keyframes ceuCadente{
  0%, 86%{ opacity:0; transform:translate(640px, 120px) rotate(152deg); }
  88%{ opacity:.95; }
  96%{ opacity:0; transform:translate(470px, 220px) rotate(152deg); }
  100%{ opacity:0; }
}

/* --- sol e lua --- */
.ceu-sol{ opacity:var(--solOp, 1); }
.ceu-raios{ opacity:var(--raios, .3); transform-box:fill-box; transform-origin:center; animation:ceuGira 160s linear infinite; mix-blend-mode:screen; }
@keyframes ceuGira{ to{ transform:rotate(360deg); } }
.ceu-lua{ opacity:var(--lua, 0); }

/* --- nuvens: cúmulos que andam devagar, cirros finos --- */
.ceu-nuvens{ opacity:var(--nOp, .9); }
.ceu-nuvem{ animation:ceuNuvem 90s ease-in-out infinite alternate; }
.ceu-nuvem-2{ animation-duration:120s; animation-delay:-40s; }
.ceu-nuvem-3{ animation-duration:75s; animation-delay:-20s; opacity:.85; }
.ceu-nuvem-4{ animation-duration:105s; animation-delay:-60s; opacity:.9; }
@keyframes ceuNuvem{ from{ transform:translateX(-36px); } to{ transform:translateX(48px); } }
.ceu-cirros{ opacity:calc(var(--cirros, 0) * .7); }

/* --- pássaros --- */
.ceu-aves{ opacity:var(--aves, 0); }
.ceu-aves path{ fill:none; stroke:var(--r6, #0B1220); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.ceu-aves-bando{ animation:ceuVoo 48s linear infinite; }
.ceu-aves-bando path{ transform-box:fill-box; transform-origin:center; animation:ceuAsa .9s ease-in-out infinite alternate; }
.ceu-aves-bando path:nth-child(2){ animation-delay:-.3s; }
.ceu-aves-bando path:nth-child(3){ animation-delay:-.55s; }
@keyframes ceuVoo{ from{ transform:translate(-120px, 430px); } to{ transform:translate(1000px, 300px); } }
@keyframes ceuAsa{ from{ transform:scaleY(1); } to{ transform:scaleY(.45); } }

/* --- a usina: vidro que reflete o céu, células, moldura de alumínio, sombra no chão --- */
.ceu-usina-sombra{ fill:#000; opacity:.22; }
.ceu-usina-vidro{ fill:url(#ceuVidro); }
.ceu-usina-grade{ fill:none; stroke:rgba(255,255,255,.15); stroke-width:.6; }
.ceu-usina-luz{ fill:none; stroke:#fff; stroke-width:1.3; stroke-linecap:round; opacity:calc(.25 + var(--brilho, .5) * .55); }
.ceu-usina-base{ fill:none; stroke:rgba(4,8,18,.75); stroke-width:1.6; stroke-linecap:round; }
.ceu-usina-pe{ fill:none; stroke:rgba(4,8,18,.6); stroke-width:1.8; stroke-linecap:round; }
.ceu-usina-reflexo{ opacity:var(--brilho, .5); animation:ceuReflexo 9s ease-in-out infinite; }
@keyframes ceuReflexo{ 0%{ transform:skewX(-28deg) translateX(-200px); } 55%, 100%{ transform:skewX(-28deg) translateX(980px); } }

/* --- vaga-lumes, grão --- */
.ceu-vagalumes{ opacity:var(--vaga, 0); }
.ceu-vagalumes circle{ fill:#E9FF9C; animation:ceuVagalume 5s ease-in-out infinite; }
@keyframes ceuVagalume{ 0%, 100%{ opacity:0; transform:translate(0, 0); } 30%{ opacity:1; } 60%{ opacity:.2; transform:translate(10px, -14px); } 80%{ opacity:.9; } }
.ceu-grao{ opacity:.13; mix-blend-mode:soft-light; pointer-events:none; }

/* --- o texto --- */
.ceu-texto{ display:flex; flex-direction:column; gap:10px; max-width:460px; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.ceu-saudacao{ margin:0; font-size:clamp(34px, 3.1vw, 46px); font-weight:500; letter-spacing:-.035em; line-height:1.05; color:#fff; }
.ceu-frase{ margin:0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.88); }
.ceu-quando{ display:flex; align-items:center; gap:9px; margin:8px 0 0; font-size:13px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.ceu-ponto{ width:8px; height:8px; border-radius:50%; background:#2FCB8B; box-shadow:0 0 0 4px rgba(47,203,139,.25); animation:ceuVivo 2.4s ease-in-out infinite; flex:none; }
@keyframes ceuVivo{ 0%, 100%{ box-shadow:0 0 0 4px rgba(47,203,139,.25); } 50%{ box-shadow:0 0 0 7px rgba(47,203,139,.08); } }
.ceu-leitor{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  .ceu-estrela-pisca, .ceu-cadente, .ceu-raios, .ceu-nuvem, .ceu-aves-bando, .ceu-aves-bando path,
  .ceu-usina-reflexo, .ceu-vagalumes circle, .ceu-ponto{ animation:none; }
}

/* --- volume dos morros, cafezal, cerca, cidade, horizonte (2ª rodada) --- */
.ceu-borda{ fill:none; stroke:var(--neb, #CBE4F4); stroke-width:1.6; opacity:calc(var(--nebOp, .4) * .7); }
.ceu-horizonte{ opacity:calc(.35 + var(--raios, .3) * .9); }
.ceu-cidade circle{ fill:#FFD27A; }
.ceu-cidade{ opacity:calc(var(--janela, 0) * .9); }