/* Sabiá: a cidade embaixo da primeira tela e o sabiá que acompanha a página (a landing, web/index.html).
   A camada que cidade.js monta no .hero: o céu passando pelas horas, a cidade em camadas andando sem fim, os eventos
   acendendo com o nome deles, e o sabiá, que voa sobre a cidade e, ao rolar, pousa nos elementos com data-pouso. Usa a
   paleta "Manhã" de temas.css (--b1…, --leaf, --far, --b-back…) e os tokens abaixo. Nenhuma cor ou fonte fora deste
   bloco e dos dois blocos de fachada (.cd-tom-tarde, .cd-tom-noite), que redefinem os tokens da paleta. */

/* ============================================================ TOKENS */
:root {
  /* o céu em quatro momentos: um degradê do alto da página até o horizonte, como um céu de verdade, sem nada chapado
     atrás da manchete. Quatro paradas: 1 no alto; 2 no fim da faixa da manchete (a altura do texto, posta pelo
     cidade.js em --cd-p2); 3 no meio entre ela e o horizonte (--cd-p3); 4 no horizonte. Quem garante a leitura é a cor
     do texto (data-ceu-tom no <html>): na manhã e no dia, a faixa da manchete (1 e 2) fica clara (luminância 0,68 ou
     mais: o marrom #7A5234 passa 4,5:1); no pôr do sol e na noite, escura (0,06 ou menos: #E8C9A8 e #F6F0E8 passam). */
  --cd-manha-1: #CDE4F7; --cd-manha-2: #D6E9F8; --cd-manha-3: #F1E4DA; --cd-manha-4: #FAD2B4;   /* azul claro, horizonte pêssego */
  --cd-dia-1: #C2E0F9;   --cd-dia-2: #BBDCF7;   --cd-dia-3: #7DBBEE;   --cd-dia-4: #DCEFFB;     /* azul vivo embaixo da manchete */
  --cd-tarde-1: #1C2860; --cd-tarde-2: #46397F; --cd-tarde-3: #D97C9E; --cd-tarde-4: #FFB565;   /* azul profundo, lilás, rosa, laranja */
  --cd-noite-1: #070E26; --cd-noite-2: #121F48; --cd-noite-3: #23336A; --cd-noite-4: #3F3F7C;   /* azul-marinho, mais claro perto da cidade */
  /* o sol baixo (nascendo e se pondo), a lua e as estrelas */
  --cd-sol-baixo: #FF9F5A;
  --cd-lua-0: #FFFFFF; --cd-lua: #F5F2E4; --cd-lua-2: #D9D4C0; --cd-estrela: #FFF6D6;
  /* o contorno claro do sabiá quando o céu escurece (ele é marrom, e o céu da noite também é escuro) */
  --cd-aro: #FFF8EA;
  /* as luzes dos eventos: claras de propósito */
  --cd-luz: #FFE9A8;            /* o facho do palco */
  --cd-luz-2: #FFF5DA;          /* o halo em volta de uma luz */
  --cd-lampada: #FFD978;        /* lâmpada acesa: varal, letreiro, coreto, janela */
  --cd-letreiro: #FFF0C2;       /* o brilho em volta do letreiro */
  /* as notas e as ondas no marrom das costas do sabiá; o confete */
  --cd-nota: var(--b-back);
  --cd-onda: var(--b-back);
  --cd-confete-1: #F2B33D; --cd-confete-2: #7FB3D5; --cd-confete-3: #E88F6A; --cd-confete-4: var(--leaf);
  /* o nome do evento aceso: texto solto e a seta. De dia e no pôr do sol (a cidade clara), na tinta da página com uma
     borda clara fina e macia; à noite (a cidade escura), claro com uma sombra escura suave (filtros no cidade.js) */
  --cd-rotulo-tinta: var(--fg);
  --cd-rotulo-halo: var(--surface);
  --cd-rotulo-tinta-noite: #F6F0E8;
  --cd-rotulo-sombra: #0B1431;
  /* a letra dos nomes, em caixa alta: Oswald 600, condensada de cartaz e de placa de rua (a página carrega do Google
     Fonts, junto com as outras) */
  --cd-letra-placa: 'Oswald', 'Arial Narrow', sans-serif;
  /* mais cores de fachada (as três cidades): claras como as da paleta, para a cidade continuar cenário */
  --cd-f1: #F2E2B8; --cd-f2: #EBC6BC; --cd-f3: #CFE0CB; --cd-f4: #D6D9EC; --cd-f5: #F4D6B0; --cd-f6: #C9DEE8;
  --cd-telha: #C98B6E; --cd-telha-2: #9FB0BD;   /* telhados */
  --cd-caixa: #B7C9D6; --cd-caixa-2: #9DB3C2;   /* a caixa-d'água */
  /* a fileira de trás da cidade: os mesmos prédios, clareados pela distância. Ela é opaca (o sol e a lua passam atrás
     dela) e clara pela cor: cada cor dela é esta fração da cor da cidade misturada com o céu atrás (1 = sem névoa) */
  --cd-fundo: .7;
}

/* ============================================================ A CAMADA (rola com a página) */
.cidade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.cidade[hidden] { display: none; }
.cidade > div, .cd-masc > div, .cd-luzes > div { position: absolute; left: 0; top: 0; }
.cd-ceu { width: 100%; background: var(--cd-dia-3); }
/* um degradê por momento, um em cima do outro; a passagem entre eles é a opacidade (só composição, nada é redesenhado) */
.cd-ceu > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: opacity; }
.cd-c-manha { background: linear-gradient(180deg, var(--cd-manha-1) 0, var(--cd-manha-2) var(--cd-p2, 45%), var(--cd-manha-3) var(--cd-p3, 72%), var(--cd-manha-4) 100%); }
.cd-c-dia   { background: linear-gradient(180deg, var(--cd-dia-1) 0, var(--cd-dia-2) var(--cd-p2, 45%), var(--cd-dia-3) var(--cd-p3, 72%), var(--cd-dia-4) 100%); }
.cd-c-tarde { background: linear-gradient(180deg, var(--cd-tarde-1) 0, var(--cd-tarde-2) var(--cd-p2, 45%), var(--cd-tarde-3) var(--cd-p3, 72%), var(--cd-tarde-4) 100%); }
.cd-c-noite { background: linear-gradient(180deg, var(--cd-noite-1) 0, var(--cd-noite-2) var(--cd-p2, 45%), var(--cd-noite-3) var(--cd-p3, 72%), var(--cd-noite-4) 100%); }
.cd-estrelas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cd-estrelas i { position: absolute; border-radius: 50%; background: var(--cd-estrela); box-shadow: 0 0 5px 1px color-mix(in srgb, var(--cd-estrela) 55%, transparent); }
/* o sol e a lua andam num arco, atrás da cidade: somem atrás dela ao se pôr e reaparecem dela ao nascer */
.cd-astros { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.cd-astros > div { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cd-sol-baixo { position: absolute; inset: 0; border-radius: 50%; background: var(--cd-sol-baixo); will-change: opacity;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--cd-sol-baixo) 26%, transparent), 0 0 60px 26px color-mix(in srgb, var(--cd-sol-baixo) 34%, transparent); }
.cd-lua { background: radial-gradient(circle at 36% 34%, var(--cd-lua-0) 0, var(--cd-lua) 42%, var(--cd-lua-2) 100%);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--cd-lua) 16%, transparent), 0 0 46px 16px color-mix(in srgb, var(--cd-lua) 24%, transparent); }
.cd-lua i { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--cd-lua-2) 70%, transparent); }
/* a cidade na luz de cada hora: a mesma cidade desenhada três vezes (o dia, o pôr do sol, a noite), uma em cima da outra.
   A manhã e o dia usam as cores da página; o pôr do sol esquenta as fachadas; à noite elas ficam azul-escuras, e as
   janelas da segunda cor (uma em cada quatro, mais as vitrines) acendem */
.cd-tom { position: absolute; left: 0; top: 0; will-change: opacity; }
.cd-tom-tarde {
  --b1: #F0C8A4; --b2: #EBAA8C; --b3: #F5DAC4; --b4: #CBB5AA; --trim: #BC8670; --win: #F6C6A0; --win2: #C4989C;
  --leaf: #8A976C; --leaf2: #6C7A56; --trunk: #6A4A3C; --ground: #D8BEAC; --cloud: #FFD8CA; --far: #D6B2B4; --far2: #C6A2AC;
  --cd-f1: #F3CE9E; --cd-f2: #EAAC9E; --cd-f3: #CBC4A4; --cd-f4: #D2B8C6; --cd-f5: #F4BE96; --cd-f6: #CCBCC2;
  --cd-telha: #BC6E56; --cd-telha-2: #9C8896; --cd-caixa: #BCA2A6; --cd-caixa-2: #A48C92;
}
.cd-tom-noite {
  --b1: #3A4570; --b2: #48477A; --b3: #414D7A; --b4: #33486A; --trim: #232B4A; --win: #2A3458; --win2: #FFD27A;
  --leaf: #2E4A4A; --leaf2: #233B3C; --trunk: #29213A; --ground: #BCBFD3;   /* o chão fica claro: o texto logo abaixo da cidade encosta nele */ --cloud: #46527E; --far: #2C3862; --far2: #263158;
  --cd-f1: #45507E; --cd-f2: #504A7C; --cd-f3: #385466; --cd-f4: #444C82; --cd-f5: #544E7C; --cd-f6: #385078;
  --cd-telha: #573C54; --cd-telha-2: #323E60; --cd-caixa: #3C486E; --cd-caixa-2: #313C60;
}
.cd-chao { width: 100%; bottom: 0; background: linear-gradient(180deg, var(--ground) 0, var(--bg) 36px); }
.cd-masc, .cd-luzes { width: 100%; height: 100%; }
.cd-tira { will-change: transform; }
.cd-tira svg { display: block; overflow: hidden; }
.cd-sol { border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 10px color-mix(in srgb, var(--sun) 30%, transparent), 0 0 46px 18px color-mix(in srgb, var(--sun) 34%, transparent); }
.cd-sentinela { width: 100%; }
/* o espaço que a cidade abre na coluna: o primeiro bloco que cairia em cima dela desce para depois dela */
.cd-espaco { display: block; height: 0; pointer-events: none; }

/* os eventos: cada um em duas caixas que andam com a cidade, uma para o que é desenho e uma para a luz */
.cd-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.cd-fx > * { position: absolute; display: block; }
.cd-facho {
  transform-origin: 50% 100%;
  background: linear-gradient(to top, color-mix(in srgb, var(--cd-luz) 88%, transparent) 0%, color-mix(in srgb, var(--cd-luz) 42%, transparent) 55%, color-mix(in srgb, var(--cd-luz) 0%, transparent) 100%);
  clip-path: polygon(45% 100%, 55% 100%, 100% 0, 0 0);
}
.cd-halo { border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cd-luz-2) 92%, transparent) 0%, color-mix(in srgb, var(--cd-luz-2) 55%, transparent) 45%, color-mix(in srgb, var(--cd-luz-2) 0%, transparent) 100%); }
.cd-anel { border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cd-letreiro) 0%, transparent) 40%, color-mix(in srgb, var(--cd-letreiro) 85%, transparent) 62%, color-mix(in srgb, var(--cd-letreiro) 0%, transparent) 100%); }
/* à noite (--cd-noite, de 0 a 1, posto pelo cidade.js) as lâmpadas e as janelas dos eventos brilham mais */
.cd-lamp { border-radius: 50%; background: var(--cd-lampada); box-shadow: 0 0 calc(6px + 8px * var(--cd-noite, 0)) calc(2px + 3px * var(--cd-noite, 0)) color-mix(in srgb, var(--cd-lampada) calc(60% + 30% * var(--cd-noite, 0)), transparent); }
.cd-janela { border-radius: 1px; background: var(--cd-lampada); box-shadow: 0 0 calc(10px + 12px * var(--cd-noite, 0)) calc(3px + 4px * var(--cd-noite, 0)) color-mix(in srgb, var(--cd-lampada) calc(45% + 35% * var(--cd-noite, 0)), transparent); }
.cd-nota { width: 1em; height: 1em; }
.cd-nota svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cd-nota path { fill: var(--cd-nota); }
.cd-onda { border: 2px solid transparent; border-right-color: var(--cd-onda); border-radius: 50%; }
.cd-onda.esq { border-right-color: transparent; border-left-color: var(--cd-onda); }
.cd-conf { border-radius: 1px; }
.cd-c1 { background: var(--cd-confete-1); } .cd-c2 { background: var(--cd-confete-2); }
.cd-c3 { background: var(--cd-confete-3); } .cd-c4 { background: var(--cd-confete-4); }
.cd-band { transform-origin: 50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* a camada dos nomes: rola com a cidade, na frente do sabiá (ele passa por trás de um nome) */
.cd-frente { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden; contain: strict; }
.cd-frente[hidden] { display: none; }
/* o nome do evento: texto solto com uma seta para baixo, apontando o prédio; quica enquanto o lugar está aceso */
.cd-rotulo { overflow: visible; }
.cd-rotulo text, .cd-rotulo path { fill: var(--cd-rotulo-tinta); }
.cd-rotulo g { filter: url(#cd-halo); }
.cd-frente[data-tom="escuro"] .cd-rotulo text, .cd-frente[data-tom="escuro"] .cd-rotulo path { fill: var(--cd-rotulo-tinta-noite); }
.cd-frente[data-tom="escuro"] .cd-rotulo g { filter: url(#cd-sombra); }
.cd-halo-cor { flood-color: var(--cd-rotulo-halo); flood-opacity: .8; }   /* a borda clara dos nomes (o filtro #cd-halo) */
.cd-sombra-cor { flood-color: var(--cd-rotulo-sombra); flood-opacity: .95; }   /* a sombra dos nomes à noite (#cd-sombra) */
.cd-aro-cor { flood-color: var(--cd-aro); }   /* o contorno claro do sabiá no céu escuro (#cd-aro) */
/* a letra em caixa alta: o tamanho deixa "FEIRA GASTRONÔMICA" folgado no celular (de 120 a 140 px) */
.cd-rotulo text { font: 600 14px var(--cd-letra-placa); letter-spacing: .045em; }
@media (min-width: 900px) { .cd-rotulo text { font-size: 15px; } }

/* o sabiá: na frente do conteúdo, para pousar nas coisas; voando, preso à tela; pousado, preso ao lugar */
.cd-ave { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.cd-ave.pousada { position: absolute; }
.cd-ave[hidden] { display: none; }
.cd-ave > div { position: absolute; left: 0; top: 0; }
.cd-ave svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cd-pousa > div { width: 100%; height: 100%; transform-origin: 50.83% 88.33%; }
.cd-pousa .canta { opacity: 0; }