/* Cena céu (ROTEIRO.md §1). Do fundo pra frente: céu em CSS (degradê do período), astros (noite),
   nuvens do shader (canvas transparente), nuvens 3D de trás, palco, nuvens 3D da frente, Forma,
   nuvens de passagem, balão, nuvem que passa na frente do balão, banco de nuvem que fecha a tela e dica.
   Dois modos. Filme: JS e movimento liberado, quadro de 100svh preso por position: sticky num trilho
   mais alto que ele (--ceu-percurso); a superfície sobe por cima do fim do trilho (--ceu-sobra).
   Estático: sem JS, movimento reduzido, sem WebGL ou economia de dados; seção corrida, tudo à vista.
   O que o GSAP anima nunca é centralizado com transform: ele dobraria % em px. */

/* ---------- Céu ---------- */
.ceu{
  --ceu-astro:linear-gradient(transparent,transparent);
  position:relative;overflow:hidden;color:var(--white);
  background-color:var(--ceu-base);
  background-image:var(--ceu-astro),linear-gradient(to top,var(--ceu-base),var(--ceu-topo));
}
/* Manhã: sol amarelo baixo no horizonte. Tarde: azul presença puro. Noite: brilho da lua. */
html[data-periodo="manha"] .ceu{--ceu-astro:radial-gradient(ellipse 75% 52% at 14% 106%,color-mix(in srgb,var(--sol) 60%,transparent),color-mix(in srgb,var(--sol) 16%,transparent) 46%,transparent 72%)}
html[data-periodo="noite"] .ceu{--ceu-astro:radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--sol) 20%,transparent),transparent 26%)}

.ceu-filtros{position:absolute;width:0;height:0;overflow:hidden}
.ceu-astros,.ceu-shader,.ceu-nuvens,.ceu-perto{position:absolute;inset:0;pointer-events:none}
.ceu-astros{z-index:var(--z-cena);display:none}
html[data-periodo="noite"] .ceu-astros{display:block}
.ceu-shader{z-index:var(--z-cena);display:block;width:100%;height:100%}
.ceu-nuvens-tras{z-index:var(--z-cena)}
.ceu-palco{position:relative;z-index:var(--z-conteudo)}
.ceu-nuvens-frente,.ceu-forma,.ceu-perto,.ceu-balao,.ceu-cobertura,.ceu-dica{z-index:var(--z-frente)}

/* Estrelas em CSS piscando devagar (só à noite; a pausa global congela pelo html.pausado) */
.ceu-estrelas{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;animation:ceu-cintila 6.5s ease-in-out infinite;
  box-shadow:0vw 57.1vh 0 .5px var(--white),72.9vw 33vh 0 0 var(--white),75.5vw 33.7vh 0 0 var(--white),81.7vw 15vh 0 0 var(--white),69.8vw 3.3vh 0 .5px var(--white),92.2vw 50.1vh 0 1px var(--white),51.3vw 57.2vh 0 0 var(--white),57.7vw 56.5vh 0 .5px var(--white),33.5vw 51.9vh 0 .5px var(--white),29.8vw 26.6vh 0 0 var(--white),55.7vw 45.2vh 0 .5px var(--white),27.3vw 34.8vh 0 .5px var(--white),19.3vw 56.4vh 0 1px var(--white),36.5vw 21.3vh 0 0 var(--white),51.5vw 10.3vh 0 .5px var(--white),36.4vw 26.3vh 0 0 var(--white),61.4vw 14.5vh 0 .5px var(--white),86.3vw 39.4vh 0 0 var(--white),50.5vw 42.7vh 0 .5px var(--white),70.8vw 15.6vh 0 .5px var(--white),33.1vw 24.3vh 0 0 var(--white),11.1vw 50.8vh 0 1px var(--white),40.7vw 9.5vh 0 1px var(--white),99.6vw 13.6vh 0 .5px var(--white),45.7vw 36.8vh 0 1px var(--white),92.2vw 54.8vh 0 0 var(--white),90.8vw 47.2vh 0 .5px var(--white),24.8vw 4.7vh 0 1px var(--white),61.7vw 14.3vh 0 .5px var(--white),68.8vw 14.8vh 0 .5px var(--white),37.4vw 55.4vh 0 1px var(--white),48.9vw .2vh 0 0 var(--white),92.2vw 1.3vh 0 .5px var(--white),96.9vw 35vh 0 .5px var(--white)}
.ceu-estrelas-2{animation-duration:9.5s;animation-delay:-4s;
  box-shadow:22.3vw 11.7vh 0 .5px var(--yellow-100),76.9vw 39.2vh 0 .5px var(--yellow-100),3.3vw 6.2vh 0 .5px var(--yellow-100),68.8vw 50vh 0 1px var(--yellow-100),88.3vw 48.2vh 0 0 var(--yellow-100),76.5vw 23.5vh 0 0 var(--yellow-100),88.2vw 22.3vh 0 .5px var(--yellow-100),88.7vw 31.3vh 0 0 var(--yellow-100),73.5vw 18.8vh 0 .5px var(--yellow-100),19.9vw 17.5vh 0 0 var(--yellow-100),63.2vw 48.8vh 0 .5px var(--yellow-100),64.5vw 7.6vh 0 0 var(--yellow-100),77.1vw 53vh 0 .5px var(--yellow-100),44.7vw 9.3vh 0 0 var(--yellow-100),56.2vw 28.4vh 0 .5px var(--yellow-100),75.1vw 1.5vh 0 0 var(--yellow-100),20.3vw 40.5vh 0 .5px var(--yellow-100),66vw 24vh 0 1px var(--yellow-100),77.3vw 46.1vh 0 0 var(--yellow-100),68.1vw 53.7vh 0 1px var(--yellow-100),76.2vw 33.7vh 0 0 var(--yellow-100),3.7vw 7.6vh 0 1px var(--yellow-100)}
@keyframes ceu-cintila{0%,100%{opacity:.95}50%{opacity:.35}}
/* Lua no lugar do sol: tudo derivado do --sol da noite */
.ceu-lua{--lua:clamp(46px,5.4vw,90px);position:absolute;left:18%;top:14%;width:var(--lua);height:var(--lua);margin:calc(var(--lua) / -2) 0 0 calc(var(--lua) / -2);border-radius:50%;
  background:radial-gradient(circle at 64% 60%,color-mix(in srgb,var(--sol),var(--ink) 10%) 0 9%,transparent 10%),radial-gradient(circle at 38% 72%,color-mix(in srgb,var(--sol),var(--ink) 7%) 0 6%,transparent 7%),radial-gradient(circle at 34% 32%,color-mix(in srgb,var(--sol),var(--white) 78%),var(--sol) 58%,color-mix(in srgb,var(--sol),var(--ink) 8%));
  box-shadow:0 0 36px 6px color-mix(in srgb,var(--sol) 38%,transparent),0 0 110px 34px color-mix(in srgb,var(--sol) 13%,transparent)}

/* ---------- Nuvens 3D (parallax) ---------- */
.ceu-nuvem{position:absolute;display:block;pointer-events:none}
.ceu-nuvem picture,.ceu-nuvem img{display:block;width:100%;height:auto}
.ceu-nuvem--espelho img{transform:scaleX(-1)}
/* Luar: as nuvens 3D pegam a cor de nuvem da noite (#c9cfea) sem imagem nova */
html[data-periodo="noite"] .ceu-nuvem img,html[data-periodo="noite"] .ceu-banco img{filter:url(#ceu-luar)}
.ceu-nuvem-1{left:-9%;top:3%;width:46vw}
.ceu-nuvem-2{left:73%;top:2%;width:31vw}
.ceu-nuvem-5{left:-8%;top:63%;width:40vw}
.ceu-nuvem-6{left:56%;top:67%;width:52vw}
.ceu-nuvem-8{left:84%;top:31%;width:23vw}
.ceu-nuvem-3{left:-15%;top:41%;width:36vw}
.ceu-nuvem-4{left:80%;top:49%;width:30vw}
/* A nuvem que esconde o letreiro de longe: o topo dela fica no meio do letreiro */
.ceu-nuvem-letreiro{left:-17%;width:134%;top:-57%}

/* ---------- Palco: saudação, título com letreiro 2.5D, apoio ---------- */
.ceu-palco{text-align:center;text-shadow:0 1px 22px color-mix(in srgb,var(--ink) 45%,transparent)}
/* Véu atrás do texto: garante contraste do branco sobre o céu claro e sobre nuvem */
.ceu-palco::before{content:"";position:absolute;inset:-16% -24%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 42%,transparent),color-mix(in srgb,var(--ink) 18%,transparent) 62%,transparent)}
html[data-periodo="noite"] .ceu-palco::before{opacity:.55}
.ceu-saudacao{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .35em;margin:0;font-size:clamp(1.45rem,2.4vw,2.1rem);font-weight:650;line-height:1.2;letter-spacing:-.02em}
.ceu-saudacao .little-star{font-size:1.1em;margin-right:.15em}
.ceu-saudacao-periodo{color:var(--yellow);text-shadow:0 0 1px var(--ink),0 1px 3px color-mix(in srgb,var(--ink) 80%,transparent),0 0 14px color-mix(in srgb,var(--ink) 55%,transparent)}
.ceu-titulo{display:flex;flex-direction:column;align-items:center;gap:clamp(2px,1vh,10px);margin-top:clamp(12px,2.4vh,24px);font-weight:720}
.ceu-titulo-linha{font-size:clamp(1.65rem,3.3vw,2.9rem);line-height:1.08;letter-spacing:-.03em}
.ceu-letreiro{position:relative;display:block;width:min(80vw,740px)}
.lettering-25d{position:relative;display:block;width:100%}
.lettering-25d svg{display:block;width:100%;height:auto;overflow:visible}
/* Sem JS o letreiro fica chapado com relevo de sombras empilhadas; o componente troca pelas camadas */
.lettering-25d-fonte{fill:var(--yellow);filter:drop-shadow(.7px 1.2px 0 var(--blue)) drop-shadow(.7px 1.2px 0 var(--blue)) drop-shadow(.7px 1.2px 0 var(--blue-700)) drop-shadow(.7px 1.2px 0 var(--blue-700)) drop-shadow(.7px 1.2px 0 var(--blue-deep)) drop-shadow(.7px 1.2px 0 var(--blue-deep)) drop-shadow(0 16px 20px color-mix(in srgb,var(--ink-950) 40%,transparent))}
.lettering-25d-camadas{filter:drop-shadow(0 18px 22px color-mix(in srgb,var(--ink-950) 38%,transparent))}
/* Sem mouse, o componente desenha as camadas e essa mesma sombra num canvas, uma vez (lettering-25d.js) */
.lettering-25d-raster{position:absolute;display:block;pointer-events:none}
.ceu-apoio{max-width:34ch;margin:clamp(14px,2.8vh,28px) auto 0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;padding:8px 16px;border-radius:14px;background:color-mix(in srgb,var(--ink) 30%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 1px 2px color-mix(in srgb,var(--ink) 55%,transparent)}
/* Texto pequeno passa sobre nuvem branca: a pastilha de tinta translúcida garante o 4,5:1 em qualquer quadro */
@media(prefers-reduced-transparency:reduce){.ceu-apoio{background:color-mix(in srgb,var(--ink) 72%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Forma na nuvem (moldura com cantoneiras e legenda amarela da proposta) ---------- */
.ceu-forma{margin:0}
.ceu-forma-arte{position:relative;transform-origin:50% 85%}
.ceu-forma picture,.ceu-forma img{display:block;width:100%;height:auto}
.ceu-forma .art-corner{position:absolute;width:clamp(30px,3.2vw,48px);height:clamp(30px,3.2vw,48px);border:2px solid var(--yellow)}
.ceu-forma .art-corner-top{right:8%;top:4%;border-bottom:0;border-left:0;border-radius:0 16px 0 0;transform:rotate(8deg)}
.ceu-forma .art-corner-bottom{left:4%;bottom:20%;border-top:0;border-right:0;border-radius:0 0 0 16px;transform:rotate(-8deg)}
.ceu-forma figcaption{position:relative;display:flex;gap:12px;align-items:center;width:fit-content;max-width:min(94%,340px);margin:-15% auto 0;padding:12px 18px;border-radius:var(--radius-control);background:var(--yellow);color:var(--ink);font-size:15px;font-weight:500;line-height:1.4;transform:rotate(-4deg);
  box-shadow:0 8px 0 color-mix(in srgb,var(--ink) 9%,transparent),0 22px 40px -20px color-mix(in srgb,var(--ink-950) 60%,transparent)}
.ceu-forma figcaption .icon{width:24px;height:24px}
@keyframes ceu-balanca{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(1.4deg)}}
html.js .ceu-forma-arte{animation:ceu-balanca 5.6s ease-in-out infinite}

/* ---------- Balão, nuvens de passagem, banco de nuvem ---------- */
.ceu-balao{margin:0}
.ceu-balao picture{display:block;transform-origin:50% 6%;animation:ceu-baloica 4.8s ease-in-out infinite}
.ceu-balao img{display:block;width:100%;height:auto}
@keyframes ceu-baloica{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.ceu-perto picture{position:absolute;top:100%;display:block}
.ceu-perto img{display:block;width:100%;height:auto;filter:blur(2px)}
html[data-periodo="noite"] .ceu-perto img{filter:url(#ceu-luar) blur(2px)}
.ceu-perto-1{left:-12%;width:78vw}
.ceu-perto-2{left:46%;width:74vw}
.ceu-perto-3{left:58%;width:56vw}
.ceu-perto-4{left:-22%;width:92vw}
/* A da frente cruza o balão: mais desfocada (mais perto da câmera) e um pouco translúcida, o balão some dentro dela */
.ceu-perto-5{left:-8%;width:64vw}
.ceu-perto--frente img{filter:blur(3px);opacity:.94}
html[data-periodo="noite"] .ceu-perto--frente img{filter:url(#ceu-luar) blur(3px)}
/* O banco: domos de nuvem em cima, corpo liso em --nuvem embaixo (a superfície emenda nesse corpo) */
.ceu-cobertura{pointer-events:none;--domo:clamp(90px,13vw,230px)}
/* Corpo opaco a partir de --domo (o JS mede o offsetTop dele); o degradê acima funde os domos no liso */
.ceu-cobertura-corpo{position:absolute;left:0;right:0;top:var(--domo);bottom:0;background:var(--nuvem)}
.ceu-cobertura-corpo::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(40px,6vw,110px);background:linear-gradient(to top,var(--nuvem),color-mix(in srgb,var(--nuvem) 0%,transparent))}
.ceu-banco{position:absolute;display:block}
.ceu-banco img{display:block;width:100%;height:auto}
.ceu-banco-1{left:-8%;top:calc(var(--domo) - 15vw);width:44%}
.ceu-banco-2{left:20%;top:calc(var(--domo) - 18vw);width:30%}
.ceu-banco-3{left:34%;top:calc(var(--domo) - 11.5vw);width:50%}
.ceu-banco-4{left:62%;top:calc(var(--domo) - 15.5vw);width:42%}
.ceu-banco-4 img,.ceu-banco-5 img{transform:scaleX(-1)}
.ceu-banco-5{left:83%;top:calc(var(--domo) - 17vw);width:28%}

/* ---------- Dica de rolagem ---------- */
.ceu-dica{position:absolute;left:0;right:0;bottom:clamp(64px,9vh,96px);display:flex;align-items:center;gap:8px;width:fit-content;margin:0 auto;padding:8px 14px 8px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 64%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--white) 14%,transparent) inset;
  font-size:13px;font-weight:600;line-height:1.2;color:var(--white)}
.ceu-dica .icon{width:16px;height:16px;transform:rotate(90deg);animation:ceu-seta 1.8s var(--ease-quint) infinite}
@keyframes ceu-seta{0%,100%{translate:0 -2px}50%{translate:0 3px}}
/* Marco do altímetro ("dentro das nuvens"): no pé da seção; no filme, a 79 % do percurso (o banco começa a subir) */
.ceu-trilho{position:relative}
.ceu-marco{position:absolute;left:0;top:100%;height:0;pointer-events:none}

/* ---------- Modo estático (base): sem trilho, tudo no fluxo ---------- */
.ceu{display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;padding-top:clamp(104px,15vh,150px)}
.ceu-palco{width:min(100% - 2 * var(--gutter),980px);margin:0 auto}
.ceu-forma{position:relative;width:min(62vw,300px);margin:clamp(20px,4vh,40px) auto 0}
.ceu-balao,.ceu-perto,.ceu-dica{display:none}
.ceu-cobertura{position:relative;flex:none;width:108vw;height:calc(var(--domo) + clamp(56px,9vh,96px));margin:clamp(-120px,-8vh,-40px) -4vw 0}
@media(min-width:1024px){
  .ceu{padding-bottom:0}
  .ceu-forma{position:absolute;left:6vw;top:18vh;width:min(22vw,28vh,300px);margin:0;z-index:calc(var(--z-frente) + 1)}
  .ceu-cobertura{margin-top:auto}
}

/* ---------- Modo filme: quadro preso no trilho, camadas absolutas ----------
   O quadro tem a altura da tela com a barra do navegador recolhida (lvh): quando a barra recolhe no
   celular, nada de faixa vazia embaixo. Com a barra à mostra, o pé do quadro fica atrás dela, então o
   que é ancorado embaixo sobe --ceu-barra (a altura da barra; zero no desktop). */
@media screen and (prefers-reduced-motion:no-preference){
  html.js{--ceu-quadro:max(100vh,540px);--ceu-barra:0px;--ceu-percurso:400vh;--ceu-sobra:.16}
  @supports (height:100lvh){html.js{--ceu-quadro:max(100lvh,540px);--ceu-barra:calc(100lvh - 100svh);--ceu-percurso:400svh}}
  html.js .ceu-trilho:not(:has(> .ceu--estatico)){height:calc(var(--ceu-quadro) + var(--ceu-percurso))}
  html.js .ceu-trilho:not(:has(> .ceu--estatico)) .ceu-marco{top:calc(var(--ceu-quadro) * .5 + var(--ceu-percurso) * .79)}
  html.js .ceu-trilho:not(:has(> .ceu--estatico)) + .superficie{margin-top:calc(var(--ceu-percurso) * var(--ceu-sobra) * -1)}
  html.js .ceu:not(.ceu--estatico){position:sticky;top:0;display:block;height:var(--ceu-quadro);padding:0}
  html.js .ceu:not(.ceu--estatico) .ceu-palco{position:absolute;inset:0 0 var(--ceu-barra);width:min(100% - 2 * var(--gutter),980px);height:fit-content;margin:auto;padding-top:clamp(36px,5vh,60px)}
  html.js .ceu:not(.ceu--estatico) .ceu-forma{position:absolute;left:auto;top:auto;right:clamp(16px,6vw,120px);bottom:calc(7vh + var(--ceu-barra));width:min(32vw,44vh,460px);margin:0}
  html.js .ceu:not(.ceu--estatico) .ceu-balao{display:block;position:absolute;left:clamp(12px,13vw,240px);bottom:100%;width:min(26vw,38vh,380px)}
  html.js .ceu:not(.ceu--estatico) .ceu-perto{display:block}
  html.js .ceu:not(.ceu--estatico) .ceu-cobertura{position:absolute;left:-4vw;right:-4vw;top:100%;width:auto;height:calc(100% + var(--domo) + 14vh);margin:0}
  html.js .ceu:not(.ceu--estatico) .ceu-dica{display:flex;bottom:calc(clamp(64px,9vh,96px) + var(--ceu-barra))}
  /* Nuvem que a rolagem move ganha camada própria: o navegador só desliza a imagem pronta, em vez de
     redesenhar (com o desfoque das de passagem) a cada quadro. Metade da GPU da cena (14/10/2026). */
  html.js .ceu:not(.ceu--estatico) .ceu-nuvem,html.js .ceu:not(.ceu--estatico) .ceu-perto picture{will-change:transform}
}

/* ---------- Celular ---------- */
@media(max-width:767px){
  .ceu-nuvem-1{left:-34%;top:5%;width:98vw}
  .ceu-nuvem-2{left:56%;top:11%;width:64vw}
  .ceu-nuvem-6{left:18%;top:73%;width:112vw}
  .ceu-nuvem-3{left:-38%;top:80%;width:80vw}
  /* No celular a saudação passa sobre nuvem: pastilha de tinta como a do apoio */
  .ceu-saudacao{width:fit-content;margin-inline:auto;padding:4px 16px;border-radius:999px;font-size:24px;font-weight:700;background:color-mix(in srgb,var(--ink) 34%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .ceu-nuvem-4,.ceu-nuvem-5,.ceu-nuvem-8{display:none}
  .ceu-letreiro{width:min(84vw,420px)}
  .ceu-apoio{max-width:30ch}
  .ceu-perto-1{left:-30%;width:130vw}
  .ceu-perto-2{left:20%;width:120vw}
  .ceu-perto-3{left:30%;width:104vw}
  .ceu-perto-4{left:-46%;width:170vw}
  .ceu-perto-5{left:-34%;width:124vw}
  .ceu-cobertura{--domo:clamp(80px,26vw,150px)}
  .ceu-banco-1{left:-24%;top:calc(var(--domo) - 26vw);width:70%}
  .ceu-banco-2{left:14%;top:calc(var(--domo) - 30vw);width:52%}
  .ceu-banco-3{left:30%;top:calc(var(--domo) - 20vw);width:84%}
  .ceu-banco-4{left:58%;top:calc(var(--domo) - 25vw);width:66%}
  .ceu-banco-5{display:none}
  .ceu-forma figcaption{font-size:14px;padding:10px 14px}
}
@media screen and (max-width:767px) and (prefers-reduced-motion:no-preference){
  html.js{--ceu-percurso:272vh;--ceu-sobra:.21}
  @supports (height:100svh){html.js{--ceu-percurso:272svh}}
  html.js .ceu:not(.ceu--estatico) .ceu-forma{right:4vw;bottom:calc(5vh + var(--ceu-barra));width:min(58vw,34vh,300px)}
  html.js .ceu:not(.ceu--estatico) .ceu-balao{left:6vw;width:min(46vw,30vh,260px)}
}
@media print{.ceu-shader,.ceu-nuvens,.ceu-perto,.ceu-cobertura,.ceu-balao,.ceu-dica,.ceu-astros{display:none}}