/* Day OFF · a bancada. O sistema esta em base.css. */

/* o base.css entra por <link> no HTML, antes deste arquivo: @import poe os
   dois em fila e atrasa a pagina. */

body { min-height: 100vh; padding: 0; overflow-x: hidden; }
img { display: block; max-width: 100%; }
p { text-wrap: pretty; }
h1 { text-wrap: balance; }

/* ============ A JANELA ============
   O escuro nao toma conta da pagina: e uma FAIXA no topo.
   O ceu e o que voce ve quando larga o celular. A janela mostra pra onde
   voce esta sendo convidado, e a bancada clara te leva la. */
/* A altura sai do CONTEUDO, nunca de um teto em vh.
   ⚠️ Nao voltar a por max-height aqui: com overflow:hidden ele DECEPA o titulo
   e o texto. Foi exatamente esse o bug (48px cortados em todo celular). */
#janela {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  background: var(--noite);
  border-bottom: 3px solid rgba(0,0,0,.35);
}
.janela-conteudo {
  position: relative; z-index: 4;
  max-width: 900px; margin: 0 auto; width: 100%;
  padding: clamp(40px, 8vh, 76px) 20px;
}
.janela-marca { margin-bottom: 24px; }
#janela h1 { font-size: var(--t-h1); color: var(--creme); }
#janela .lede { margin-top: 20px; max-width: 34ch; color: rgba(255,248,237,.68); }

/* a aurora. Sem filter:blur: radiais de parada suave ja saem borradas de graca,
   e desfoque em area grande e o que trava celular fraco.
   Ela mora AQUI e nao no Modo Foco, porque esta visita dura segundos
   e a do Modo Foco dura 90 minutos. */
.aurora { position: absolute; inset: -12%; z-index: 1; pointer-events: none; }
.aurora i {
  position: absolute; display: block; mix-blend-mode: screen;
  transition: transform 1.2s var(--curva-saida);
  will-change: transform, opacity;
}
.aurora i:nth-child(1) {
  left: 0; top: 2%; width: 100%; height: 54%;
  background: radial-gradient(58% 100% at 32% 50%,
    rgba(120,169,140,.46) 0%, rgba(120,169,140,.19) 42%, rgba(120,169,140,0) 74%);
  transform: translate(calc(var(--mx, 0) * 40px), calc(var(--my, 0) * 22px));
  animation: derivarA 52s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  left: 0; top: 18%; width: 100%; height: 60%;
  background: radial-gradient(52% 100% at 68% 45%,
    rgba(76,150,152,.36) 0%, rgba(76,150,152,.15) 46%, rgba(76,150,152,0) 76%);
  transform: translate(calc(var(--mx, 0) * -28px), calc(var(--my, 0) * 30px));
  animation: derivarB 61s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  left: 0; top: 42%; width: 100%; height: 52%;
  background: radial-gradient(64% 100% at 46% 40%,
    rgba(148,196,150,.24) 0%, rgba(148,196,150,.09) 50%, rgba(148,196,150,0) 78%);
  transform: translate(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * -16px));
  animation: derivarA 74s ease-in-out infinite alternate-reverse;
}
@keyframes derivarA { 0% { opacity: .76; } 50% { opacity: 1; } 100% { opacity: .68; } }
@keyframes derivarB { 0% { opacity: .60; } 55% { opacity: .95; } 100% { opacity: .74; } }

/* ninguem paga bateria por um efeito que nao esta vendo */
#janela.fora .aurora i { animation-play-state: paused; }

.janela-ceu { z-index: 2; }

/* ============ A PROVA DO ACERVO ============
   A home dizia "1.400 obras" num rótulo minúsculo e não mostrava nenhuma,
   então ninguém percebia o valor do que tem dentro. Agora ela MOSTRA. */
#acervo { position: relative; margin: 0 0 46px; }

.esteira {
  overflow: hidden; padding: 26px 0 22px;
  background: var(--noite);
  border-bottom: 3px solid var(--ambar-base);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.esteira-fita {
  display: flex; gap: 12px; width: max-content;
  animation: desfilar 92s linear infinite;
}
.esteira-fita img {
  width: 84px; height: 126px; object-fit: cover; flex: none;
  border-radius: 3px; background: #1b2b31;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.8);
}
@keyframes desfilar { to { transform: translateX(-50%); } }
.esteira:hover .esteira-fita { animation-play-state: paused; }

/* a faixa dourada agora e componente do sistema (.faixa-ouro em base.css):
   ela assina a home E o topo da trilha, no lugar de existir so aqui */

/* ============ A BANCADA ============ */
main { max-width: 940px; margin: 0 auto; padding: 0 0 60px; }
#bancada, #jornada { padding: 0 20px; }
/* relative: a estrela escondida se ancora no canto da secao, NUNCA dentro dos
   cards, que sao <a> e engoliriam o clique */
#bancada { position: relative; padding-bottom: 30px; }

#bancada > .rotulo, #jornada > .rotulo { display: block; margin-bottom: 14px; }

.ferramentas {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.ferramenta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 22px 22px; text-decoration: none; color: var(--tinta);
  border-bottom-width: 4px;
  transition: transform .07s var(--curva-tecla), border-bottom-width .07s var(--curva-tecla),
              border-color .2s ease;
}
.ferramenta:hover { border-color: var(--ambar-base); }
.ferramenta:active { transform: translateY(3px); border-bottom-width: 1px; }
.ferramenta.destaque { background: linear-gradient(180deg, var(--ambar-fundo) 0%, var(--painel) 34%); }

.ferramenta-topo { display: flex; flex-direction: column; gap: 5px; }
.ferramenta-nome {
  font-family: 'Archivo', system-ui, sans-serif; font-variation-settings: 'wdth' 118; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: var(--t-h3);
}
.ferramenta-frase {
  font-size: var(--t-micro); line-height: 1.6; color: var(--tinta-suave);
  margin: 4px 0 2px; max-width: 42ch;
}
.ferramenta-baixo { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ferramenta-placar { display: flex; align-items: baseline; gap: 12px; }
.ferramenta .num { font-size: 52px; color: var(--ambar-base); }

/* o Modo Foco nao tem progresso pra mostrar, entao no lugar de um numero
   inventado ele mostra o dado real: as duracoes que existem */
.duracoes { display: flex; gap: 6px; margin: 10px 0 2px; flex-wrap: wrap; }
.duracoes i {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 15px; letter-spacing: .04em; color: var(--tinta);
  border: 1px solid var(--fio-forte); border-bottom: 2px solid var(--base);
  border-radius: 3px; padding: 6px 9px; background: var(--creme);
}
/* o placar da constelacao do foco, quando ja existe uma */
#f-foco-placar { margin-top: 12px; }
#f-foco-placar .num { font-size: 44px; }
.constelacao-dado { display: inline-flex; align-items: center; gap: 7px; }
.constelacao-dado::before {
  content: ''; width: 11px; height: 11px; flex: none; background: var(--ambar-base);
  -webkit-mask: var(--mask-estrela) center / contain no-repeat;
          mask: var(--mask-estrela) center / contain no-repeat;
}

.ferramenta-tecla { margin-top: auto; align-self: flex-start; pointer-events: none; }
.estado-travado { color: var(--coral-texto); display: inline-flex; align-items: center; gap: 7px; }

/* relative: as estrelas escondidas se ancoram no canto destas pecas */
#jornada { margin-top: 44px; position: relative; }
.jornada-numeros { display: flex; flex-wrap: wrap; gap: 40px; }
.jornada-numeros span { display: flex; flex-direction: column; }
.jornada-numeros .num { font-size: 52px; }
.jornada-numeros i { font-style: normal; margin-top: 6px; }

/* ============ RODAPE ============ */
footer {
  position: relative;
  max-width: 900px; margin: 0 auto; padding: 30px 20px 60px;
  border-top: 1px solid var(--fio); color: var(--tinta-suave); font-size: var(--t-micro);
}
footer .lema {
  font-family: 'Archivo', system-ui, sans-serif; font-variation-settings: 'wdth' 118; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  font-size: var(--t-h3); color: var(--tinta); margin-bottom: 16px;
}
footer .lema .destaque { color: var(--petroleo); }
footer p { margin-bottom: 12px; }
footer .assinatura { margin-top: 16px; font-size: 12px; }

@media (max-width: 520px) {
  .janela-marca { width: 64px; height: 64px; margin-bottom: 18px; }
}