/* Superfície (ROTEIRO.md §3.2): o hero da v1 na linha do chão.
   Camadas: céu baixo (fundo) → comércio da rua → Forma com olhar → faixa de chão (cobre a cintura)
   → texto. A franja de nuvem no topo é a saída do céu; só existe quando a página anima. */

.superficie{
  --chao-h:clamp(64px,10vh,104px);--rua-h:clamp(120px,22vh,230px);--franja-h:clamp(150px,28vh,280px);
  min-height:max(720px,100svh);max-height:none;
  padding-bottom:calc(var(--chao-h) + 40px);
  background:linear-gradient(180deg,var(--superficie-topo) 0%,var(--superficie-base) 78%);
}
.superficie .atmosphere{background:radial-gradient(ellipse 55% 48% at 74% 60%,#8d96ee4d,transparent 62%)}
.superficie .hero-content{z-index:4}

/* Franja de nuvem: emenda com o branco que fecha o céu; o JS a empurra pra cima mais rápido que a rolagem */
.superficie-franja{display:none;position:absolute;inset:0 0 auto;z-index:5;height:var(--franja-h);pointer-events:none;will-change:transform}
html.animado .superficie-franja{display:block}
/* No filme a superfície sobe por cima do céu já coberto de nuvem: a borda de cima dela é recortada no
   mesmo desenho da franja (o branco atrás é o céu), então a emenda é sempre nuvem, nunca uma linha reta,
   mesmo depois que a franja sai. */
@media screen and (prefers-reduced-motion:no-preference){
  html.js .ceu-trilho:not(:has(> .ceu--estatico)) + .superficie{
    --franja-molde:max(100vw,calc(var(--franja-h) * 8));
    --franja-recorte:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 176 2400 124'%3E%3Cpath d='M2400 300V176C2384 237 2253 237 2237 176C2214 258 2030 258 2007 176C1990 241 1853 241 1836 176C1824 222 1723 222 1710 176C1692 254 1541 254 1522 176C1511 213 1420 213 1409 176C1398 223 1308 223 1296 176C1277 232 1119 232 1099 176C1075 281 885 281 862 176C843 249 689 249 670 176C658 210 560 210 548 176C531 226 392 226 374 176C361 216 260 216 247 176C237 213 154 213 143 176C129 244 14 244 0 176V300Z'/%3E%3C/svg%3E");
    -webkit-mask:var(--franja-recorte) 50% 0/var(--franja-molde) auto no-repeat,linear-gradient(#000 0 0) 0 calc(var(--franja-molde) * .0516 - 1px)/100% 100% no-repeat;
    mask:var(--franja-recorte) 50% 0/var(--franja-molde) auto no-repeat,linear-gradient(#000 0 0) 0 calc(var(--franja-molde) * .0516 - 1px)/100% 100% no-repeat;
  }
}
.superficie-franja svg{display:block;width:100%;height:100%}
.franja-frente{fill:var(--nuvem)}
.franja-tras{fill:var(--nuvem-sombra)}
.superficie-franja-zona{position:absolute;inset:0 0 38% 0}
/* Nuvens 3D na borda da franja: a mesma família das nuvens do céu, pra emenda não virar recorte chapado */
.franja-nuvem{position:absolute;height:auto;pointer-events:none;user-select:none}
.franja-nuvem-1{left:-6%;bottom:-24%;width:42%}
.franja-nuvem-2{left:24%;bottom:2%;width:40%}
.franja-nuvem-3{left:40%;bottom:-30%;width:30%;transform:scaleX(-1)}
.franja-nuvem-4{left:62%;bottom:-20%;width:40%;transform:scaleX(-1)}
.franja-nuvem-5{right:-8%;bottom:-36%;width:28%}
html[data-periodo="noite"] .franja-nuvem{filter:brightness(.84) saturate(1.15)}
@media(max-width:767px){.franja-nuvem-1{width:70%;left:-18%}.franja-nuvem-2{display:none}.franja-nuvem-3{width:56%;left:30%}.franja-nuvem-4{display:none}.franja-nuvem-5{width:58%;right:-22%}}

/* Rua de comércio local: silhuetas chapadas na linha do horizonte */
.superficie-rua{position:absolute;left:0;right:0;bottom:calc(var(--chao-h) - 4px);z-index:1;display:block;width:100%;height:var(--rua-h);overflow:visible}
.rua-predio{fill:#2e39ae}
.rua-escuro{fill:#2832a0}
.rua-janela{fill:#4f5ad3;transition:fill .6s}
.rua-porta{fill:#222b8c}
.rua-placa{fill:#3d48c6;stroke:#3d48c6;stroke-width:4}
.rua-toldo{fill:#8995f0}
.rua-toldo-listra{fill:#f1f3fa;opacity:.5}
.rua-arvore{fill:#2b36a8}
html[data-periodo="noite"] .rua-janela{fill:#ffe065;opacity:.82}
html[data-periodo="noite"] .rua-predio{fill:#1d2678}
html[data-periodo="noite"] .rua-escuro{fill:#19216a}

/* Pinos: um negócio já é achado; com o mouse ou o foco no botão principal, a rua inteira aparece */
.rua-pino{opacity:0;scale:.4;transform-box:fill-box;transform-origin:50% 100%;transition:opacity .25s var(--ease-quint),scale .45s var(--ease-expo);transition-delay:calc(var(--i) * 55ms)}
.rua-pino path{fill:var(--yellow)}
.rua-pino circle{fill:var(--blue-800)}
.rua-pino-aceso{opacity:1;scale:1;animation:pino-boia 2.8s ease-in-out infinite}
.superficie:has(.hero-actions .button:is(:hover,:focus-visible)) .rua-pino{opacity:1;scale:1}
@keyframes pino-boia{50%{translate:0 -6px}}

/* O Forma fica atrás da faixa de chão: o corte da cintura nunca aparece */
.superficie .character{bottom:calc(var(--chao-h) - 56px);height:min(76svh,840px,69vw);z-index:2}

.superficie-chao{position:absolute;left:0;right:0;bottom:0;z-index:3;height:var(--chao-h);background:var(--solo-1)}
.superficie-chao svg{position:absolute;left:0;right:0;bottom:100%;display:block;width:100%;height:34px;margin-bottom:-1px;overflow:visible}
.chao-corpo{fill:var(--solo-1)}
.chao-linha{fill:none;stroke:var(--yellow);stroke-width:3;vector-effect:non-scaling-stroke}

@media(max-width:767px){
  .superficie{--chao-h:68px;--rua-h:clamp(84px,15vh,130px);min-height:100svh;justify-content:space-between;padding:88px 20px 0}
  .superficie .hero-lead{color:var(--white)}
  .superficie .character{bottom:auto;height:clamp(240px,46svh,420px);margin:20px 0 calc(var(--chao-h) - 52px);mask-image:none;-webkit-mask-image:none}
}
@media(prefers-reduced-motion:reduce){.rua-pino-aceso{animation:none}}