/* Aurora dia e noite — as quatro fases do céu da Costa Sul, derivadas da paleta
   da marca. Fase automática pelo horário de Camburi. */

:root {
  /* Destaque único da marca. O extremo CLARO (--accent-2) é o pior caso de
     contraste: .btn-primary pinta o degradê inteiro e a tinta clara cai junto
     com ele — medido sobre #faf9fc, var(--pink) dava 2,64:1, abaixo do piso de
     4,5:1. Daí o roxo médio no lugar do rosa da paleta. */
  --accent: #772db7;
  --accent-2: #8e45d2;
  --accent-ink: #faf9fc;
  --grad-accent: linear-gradient(104deg, var(--accent) 0%, var(--accent-2) 100%);
  --sky: transparent;
  --star-opacity: 0;
  --lockup: url('../assets/brand/nav-lockup.png');
  --lockup-foot: url('../assets/brand/foot-lockup.png');
  --hero-veil: linear-gradient(90deg, rgba(16, 13, 21, 0.82), rgba(16, 13, 21, 0.22)),
               linear-gradient(0deg, var(--bg), transparent 48%);
  /* Véu das setas do carrossel, que não têm fundo próprio. O `contrast` achata o
     que estiver atrás — foto, mapa ou cor plana — numa faixa estreita e o
     `brightness` empurra essa faixa para o lado oposto ao do glifo. Nas fases
     claras `--fg` fica escuro, então lá o empurrão inverte. */
  --arrow-veu: blur(8px) contrast(0.35) brightness(0.45);
}

/* ---- Noite (19h–5h): a identidade base, com céu estrelado ---------------- */
html[data-phase='noite'] {
  --star-opacity: 1;
  --sky: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(119, 45, 183, 0.34), transparent 70%);
}

/* ---- Aurora (5h–8h): roxo e rosa da marca, com um fio de ouro ------------ */
html[data-phase='aurora'] {
  --bg: #fbeafa;
  --ink-900: #fbeafa;
  --ink-850: #fff6fe;
  --ink-800: #f6ddf4;
  --ink-750: #f1d3f0;
  --ink-700: #f4ddf3;
  --ink-600: #e4bfe4;
  --surface: rgba(90, 20, 130, 0.05);
  --surface-2: rgba(90, 20, 130, 0.09);
  --fg: #2b1038;
  --arrow-veu: blur(8px) contrast(0.35) brightness(1.95);
  --fg-muted: #472b4e;
  --fg-dim: #5a4163;
  --fg-label: #912e8a;
  --paper: #2b1038;
  --mist: #472b4e;
  --line: rgba(76, 26, 120, 0.16);
  --line-strong: rgba(76, 26, 120, 0.34);
  --pink-soft: #a8369f;
  --gold: #a66b00;
  --focus: #772db7;
  /* A pedido, a estrela usa aqui o mesmo ouro das fases escuras, para comparação
     lado a lado. Medido assim ele dá 1,05:1 contra este fundo claro — abaixo dos
     3:1 que um ícone pede —, então o traço fica quase invisível de dia. */
  --fav-ring: #ffbb27;
  --fav-glyph: #ffbb27;
  --lockup: url('../assets/brand/nav-lockup-light.png');
  --lockup-foot: url('../assets/brand/foot-lockup-light.png');
  --grad-text: linear-gradient(96deg, #4c1a78 0%, #b3379f 52%, #a66b00 100%);
  --grad-line: linear-gradient(90deg, transparent, #772db7 22%, #dd73dd 52%, #c88a05 80%, transparent);
  --shadow-card: 0 18px 44px -26px rgba(76, 26, 120, 0.5);
  --sky: linear-gradient(170deg, rgba(119, 45, 183, 0.3) 0%, rgba(221, 115, 221, 0.4) 40%, rgba(255, 187, 39, 0.24) 70%, transparent 90%);
  /* Mapa claro: a terra desce um tom abaixo do fundo da página, senão a via
     clara não teria contra o que aparecer. */
  --map-terra: #f8e8f7;
  --map-agua: #a9c0e6;
  --map-verde: #d6e5d1;
  --map-quadra: #e8cce8;
  --map-via: #e4c6e4;
  --map-via-forte: #8f55a6;
  --map-costa: #6f82b0;
  --map-texto: #4a2b52;
  --map-texto-agua: #2f4780;
  --map-halo: #f8e8f7;
}

/* ---- Dia (8h–16h): o ouro da paleta, com o rosa entrando no céu --------- */
html[data-phase='dia'] {
  --bg: #fef4db;
  --ink-900: #fef4db;
  --ink-850: #fffaee;
  --ink-800: #fde9d7;
  --ink-750: #fbe0cd;
  --ink-700: #fdecd8;
  --ink-600: #ecd0a6;
  --surface: rgba(140, 30, 118, 0.05);
  --surface-2: rgba(140, 30, 118, 0.09);
  --fg: #2a1535;
  --arrow-veu: blur(8px) contrast(0.35) brightness(1.95);
  --fg-muted: #45314a;
  --fg-dim: #58475e;
  --fg-label: #952f8c;
  --paper: #2a1535;
  --mist: #45314a;
  --line: rgba(60, 34, 90, 0.16);
  --line-strong: rgba(60, 34, 90, 0.32);
  --pink-soft: #a8369f;
  --gold: #9b6a00;
  --focus: #772db7;
  --fav-ring: #ffbb27;
  --fav-glyph: #ffbb27;
  --lockup: url('../assets/brand/nav-lockup-light.png');
  --lockup-foot: url('../assets/brand/foot-lockup-light.png');
  --grad-text: linear-gradient(96deg, #8c2f84 0%, #b8379f 42%, #9b6a00 100%);
  --grad-line: linear-gradient(90deg, transparent, #772db7 22%, #dd73dd 52%, #c88a05 80%, transparent);
  --shadow-card: 0 18px 44px -26px rgba(60, 34, 90, 0.42);
  --sky: linear-gradient(175deg, rgba(255, 187, 39, 0.5) 0%, rgba(221, 115, 221, 0.3) 48%, rgba(221, 115, 221, 0.08) 74%, transparent 90%);
  --map-terra: #fdf0d2;
  --map-agua: #aec8e9;
  --map-verde: #d8e5c9;
  --map-quadra: #f0d8c4;
  --map-via: #f2d6c0;
  --map-via-forte: #a06a53;
  --map-costa: #6f87b2;
  --map-texto: #4a3718;
  --map-texto-agua: #2f4780;
  --map-halo: #fdf0d2;
}

/* ---- Poente (16h–19h): o degradê da marca no próprio céu ---------------- */
html[data-phase='poente'] {
  --bg: #310f3b;
  --ink-900: #310f3b;
  --ink-850: #3a1244;
  --ink-800: #42154a;
  --ink-750: #4b184e;
  --ink-700: #521c53;
  --ink-600: #682763;
  --surface: rgba(255, 220, 190, 0.07);
  --surface-2: rgba(255, 220, 190, 0.12);
  --fg: #fff3e6;
  /* Com o céu mais forte, o rosa dele sobe a luminância do fundo e o texto
     secundário caía a 4,38:1 sobre a faixa clara. Clarear a tinta custa menos
     que apagar o céu, que é justamente o que se quis ver aqui. */
  --fg-muted: #f7dcd0;
  --fg-dim: #f2e9e7;
  --fg-label: #f3c5f3;
  --paper: #fff3e6;
  --mist: #f7dcd0;
  --line: rgba(255, 220, 190, 0.18);
  --line-strong: rgba(255, 220, 190, 0.36);
  --focus: var(--gold);
  --grad-text: linear-gradient(96deg, #fff3e6 0%, #ffb3e4 44%, #ffbb27 100%);
  --star-opacity: 0.45;
  --sky: linear-gradient(185deg, rgba(119, 45, 183, 0.62) 0%, rgba(221, 115, 221, 0.46) 36%, rgba(255, 187, 39, 0.26) 68%, transparent 90%);
  --map-terra: #471e55;
  --map-agua: #26134f;
  --map-verde: #3a1c48;
  --map-quadra: #5e2b6c;
  --map-via: #7f4090;
  --map-via-forte: #dc90de;
  --map-costa: #ac67bb;
  --map-texto: #ffeadf;
  --map-texto-agua: #d7a8f2;
  --map-halo: #1a0824;
}

/* O cartão translúcido deixa o céu da fase atravessar, e o pixel mais extremo
   derruba `.card p` abaixo do piso de 4,5:1 — eram 4,19:1 em poente e 3,88:1 em
   dia. Com a superfície opaca o pior pixel passa a ser o mesmo da mediana, sem
   abrir mão do texto secundário nem do verniz de vidro, que fica na camada de
   cima. */
html[data-phase='poente'] .card {
  background-color: var(--ink-800);
  background-image: linear-gradient(170deg, rgba(250, 249, 252, 0.06), rgba(250, 249, 252, 0.015));
}
html[data-phase='aurora'] .card,
html[data-phase='dia'] .card {
  background-color: var(--ink-850);
  background-image: linear-gradient(170deg, rgba(76, 26, 120, 0.05), rgba(76, 26, 120, 0.015));
}

/* O herói fica sobre vídeo escuro em qualquer fase: nas fases claras ele mantém
   a tipografia noturna, senão vira texto escuro sobre imagem escura. */
html[data-phase='aurora'] .hero,
html[data-phase='dia'] .hero {
  --fg: #faf9fc;
  --fg-muted: #c9bed5;
  --fg-dim: #a19ba9;
  /* O vídeo escuro aguenta o rosa da marca; os tokens claros das fases não. */
  --fg-label: #efa8ef;
  --line: rgba(201, 190, 213, 0.14);
  --line-strong: rgba(201, 190, 213, 0.3);
  --surface: rgba(250, 249, 252, 0.04);
  --surface-2: rgba(250, 249, 252, 0.08);
  --grad-text: linear-gradient(96deg, #faf9fc 0%, #efa8ef 48%, #ffbb27 100%);
}

/* ---- Céu: camada ambiente comum a todas as fases ------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--sky);
  transition: background var(--dur-slow) var(--ease-out);
}
.sky::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--star-opacity);
  transition: opacity var(--dur-slow) var(--ease-out);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 12%, var(--pink-soft), transparent),
    radial-gradient(1.6px 1.6px at 44% 36%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 52%, var(--gold), transparent),
    radial-gradient(1.3px 1.3px at 26% 62%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 64% 78%, var(--pink), transparent);
  background-size: 260px 300px, 340px 380px, 420px 320px, 300px 420px, 380px 340px, 460px 400px;
  animation: twinkle 7s var(--ease-in-out) infinite alternate;
}
@keyframes twinkle { from { opacity: calc(var(--star-opacity) * 0.55); } to { opacity: var(--star-opacity); } }

/* Marca: o lockup acompanha a fase, sem placa de fundo. */
.nav__brand img, .foot__brand img { display: none; }
.nav__brand {
  display: block;
  width: 117px;
  height: 32px;
  background: var(--lockup) center / contain no-repeat;
}
.foot__brand > a, .foot__brand > span.foot__lock {
  display: block;
  width: 200px;
  height: 63px;
  background: var(--lockup-foot) center left / contain no-repeat;
}

/* ---- Seletor de clima na navegação -------------------------------------- */
.sky-picker { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
/* O seletor veste o chip, não o campo de busca: com `appearance: none` e fundo
   --surface-2 ele saía pílula clara de borda forte, igual ao input do Explorar,
   e lia como texto editável. Fundo transparente mais a seta desenhada no
   invólucro dizem "escolha uma opção" sem imitar um campo. A lista continua
   sendo o popup nativo do sistema, que nunca é cortado pelo layout. */
.sky-picker__caixa { position: relative; display: inline-flex; align-items: center; }
.sky-picker__caixa::after {
  content: ''; position: absolute; right: 0.72rem; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  color: var(--fg-muted); pointer-events: none;
}
.sky-picker__phase {
  appearance: none;
  background: transparent;
  color: var(--fg-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.42rem 2rem 0.42rem 0.82rem;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sky-picker__caixa:hover .sky-picker__phase { color: var(--fg); border-color: var(--pink); }
.sky-picker__phase:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* O popup é desenhado pelo sistema e não herda os tokens da fase: sem isto, a
   lista sai texto claro sobre branco nas fases de dia. */
.sky-picker__phase option { background: #17121f; color: #faf9fc; }

/* O destaque assume os elementos de ação da interface — menos o que já carrega
   significado: no mapa a cor do ponto diz a categoria do lugar, e o chip do
   filtro repete essa mesma cor, então o destaque não passa por cima. */
.btn-primary { background-image: var(--grad-accent); color: var(--accent-ink); }
.chip[aria-pressed='true']:not([data-cat]), .calendar-actions .btn[aria-pressed='true'] {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
}
.grad-line, .section__head::after { background-image: var(--grad-line); }

/* No celular o seletor mora no menu, em linha própria. */
.nav__links .sky-picker {
  margin-left: 0;
  justify-content: space-between;
  padding-block: var(--sp-3);
}
.nav__links .sky-picker__caixa { flex: 1; max-width: 180px; }
.nav__links .sky-picker__phase { width: 100%; }