/* Padrões de fundo (marca d'água) e transições entre seções. Só tokens; regras em docs/design-system/componentes.md.
   Padrão: SVG de um traço só em static/img/padroes, usado como máscara e pintado com a cor do tema, então vale em claro e escuro.
   Transição: silhueta branca sobre preto em static/img/home, usada como máscara (luminância) e pintada com a cor da seção de baixo. */
.marca-dagua{position:relative;isolation:isolate}
.marca-dagua::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--marca,var(--ink));opacity:var(--op-marca-dagua);
  mask-image:var(--padrao);-webkit-mask-image:var(--padrao);mask-repeat:var(--padrao-repete,repeat);-webkit-mask-repeat:var(--padrao-repete,repeat);mask-position:var(--padrao-pos,0 0);-webkit-mask-position:var(--padrao-pos,0 0);mask-size:var(--padrao-tam,auto);-webkit-mask-size:var(--padrao-tam,auto)}
/* Esvanece: o padrão aparece devagar no topo e some devagar embaixo (a máscara do padrão cruza com um degradê vertical),
   para as ondas irem até o fim da seção sem corte seco */
.marca-dagua.esvanece::before{
  mask-image:var(--padrao),linear-gradient(to bottom,transparent,var(--ink) 14%,var(--ink) 55%,transparent);
  -webkit-mask-image:var(--padrao),linear-gradient(to bottom,transparent,var(--ink) 14%,var(--ink) 55%,transparent);
  mask-repeat:var(--padrao-repete,repeat),no-repeat;-webkit-mask-repeat:var(--padrao-repete,repeat),no-repeat;
  mask-position:var(--padrao-pos,0 0),0 0;-webkit-mask-position:var(--padrao-pos,0 0),0 0;
  mask-size:var(--padrao-tam,auto),100% 100%;-webkit-mask-size:var(--padrao-tam,auto),100% 100%;
  mask-composite:intersect;-webkit-mask-composite:source-in}
/* Surge: o padrão aparece devagar no topo da seção (a base fica inteira) */
.marca-dagua.surge::before{
  mask-image:var(--padrao),linear-gradient(to bottom,transparent,var(--ink) 30%);
  -webkit-mask-image:var(--padrao),linear-gradient(to bottom,transparent,var(--ink) 30%);
  mask-repeat:var(--padrao-repete,repeat),no-repeat;-webkit-mask-repeat:var(--padrao-repete,repeat),no-repeat;
  mask-position:var(--padrao-pos,0 0),0 0;-webkit-mask-position:var(--padrao-pos,0 0),0 0;
  mask-size:var(--padrao-tam,auto),100% 100%;-webkit-mask-size:var(--padrao-tam,auto),100% 100%;
  mask-composite:intersect;-webkit-mask-composite:source-in}
/* Funde: a base da seção se mistura com a cor da seção de baixo (--funde-para), sem linha de corte */
.marca-dagua.funde-abaixo::after{content:"";position:absolute;inset:auto 0 0 0;height:clamp(96px,14vw,200px);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--funde-para))}
/* Uma faixa só, no meio da altura da seção (em vez de repetir para baixo) */
.marca-dagua.faixa-central{--padrao-repete:repeat-x;--padrao-pos:center}
/* Uma faixa só, no topo da seção */
.marca-dagua.faixa-topo{--padrao-repete:repeat-x;--padrao-pos:top}
.marca-dagua.sobre-escuro{--marca:var(--on-primary)}
.marca-dagua.sobre-claro{--marca:var(--ink)}
/* casas: hoje só no fecho da home */
.padrao-casas{--padrao:url("../img/padroes/casas.430d2138f842.svg");--padrao-tam:200px 150px}
.padrao-pontos{--padrao:url("../img/padroes/pontos.f9dc8d615929.svg");--padrao-tam:28px 28px}
.padrao-curvas{--padrao:url("../img/padroes/curvas.8235945fd06b.svg");--padrao-tam:400px 216px}
.padrao-caminho{--padrao:url("../img/padroes/caminho.42eb2136a6f9.svg");--padrao-tam:450px 250px}

/* Transição: a faixa tem a cor da seção de cima (--de) e a silhueta sobe pintada com a cor da seção de baixo (--para) */
.transicao{--de:var(--bg);--para:var(--surface);position:relative;height:clamp(72px,11vw,168px);margin-top:-1px;background:var(--de);pointer-events:none}
.transicao::before{content:"";position:absolute;inset:0;background:var(--para);
  -webkit-mask-image:var(--silhueta);mask-image:var(--silhueta);-webkit-mask-mode:luminance;mask-mode:luminance;
  -webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:bottom center;mask-position:bottom center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.transicao.espelho::before{transform:scaleX(-1)}
/* Sobe: mais alta (mostra a silhueta inteira, com os pinos) e puxada para dentro da seção de cima */
.transicao.sobe{height:clamp(120px,20vw,288px);margin-top:calc(var(--e12) * -1)}
/* Luar: faixa mais alta, com a silhueta em largura inteira (sem cortar as laterais) e céu livre no alto para a lua */
.transicao.luar{isolation:isolate;height:clamp(180px,26vw,380px)}
.transicao.luar::before{-webkit-mask-size:100% auto;mask-size:100% auto}
.lua{--lua:clamp(56px,7vw,104px);position:absolute;left:50%;top:10%;z-index:-1;width:var(--lua);height:var(--lua);margin-left:calc(var(--lua) / -2)}
.lua-brilho{position:absolute;inset:-70%;border-radius:100%;background:radial-gradient(circle,color-mix(in srgb,var(--art-suave) 32%,transparent),transparent 68%)}
.lua-disco{position:relative;display:block;width:100%;height:100%}
.lua{will-change:transform,opacity}
.lua-corpo{fill:url(#lua-g)}
.lg0{stop-color:var(--lua-clara)}
.lg1{stop-color:var(--lua-media)}
.lg2{stop-color:var(--lua-borda)}
.lh0{stop-color:var(--on-primary);stop-opacity:.55}
.lh1{stop-color:var(--on-primary);stop-opacity:0}
.lua-mar{fill:var(--lua-escura);opacity:.62}
.lua-mar .tinta{fill:var(--lua-tinta)}
.lua-halo-tycho{fill:url(#lua-halo-tycho)}
.lua-raios{fill:none;stroke:var(--on-primary);stroke-width:.4;stroke-linecap:round;opacity:.5}
/* Crateras clássicas (luz vinda do alto à esquerda): meia-lua de sombra na parede de cima e à esquerda por dentro, parede iluminada embaixo e à direita, aro fino */
.cr-sombra{fill:var(--lua-escura);opacity:.5}
.cr-luz{fill:var(--on-primary);opacity:.38}
.cr-aro{fill:none;stroke:var(--lua-borda);stroke-width:.2;opacity:.4}
.cr-viva .cr-luz{opacity:.9}
.cr-viva .cr-sombra{opacity:.55}
.cr-viva .cr-aro{stroke:var(--on-primary);opacity:.6}
.lua-ruido{fill:var(--lua-escura);opacity:.3}
.transicao.cidade{--silhueta:url("../img/home/transicao-cidade.667524d8faad.png")}
.transicao.caminho{--silhueta:url("../img/home/transicao-caminho.74354b6c98c3.png")}
.transicao.litoral{--silhueta:url("../img/home/transicao-litoral.443ca538c7e5.png")}
@media (forced-colors:active){.marca-dagua::before{display:none}.transicao{display:none}}