/* dadiva-hero.css
   Camada da HERO da landing (index.html): loader, vídeo intro, MYLO, título e CTA.
   Dono: agente da hero. Fonte única destas regras — não duplicar em dadiva.css
   nem em dadiva-responsive.css. Carregada DEPOIS de dadiva-responsive.css.

   Estados (classe em .home-hero, geridos por dadiva.js):
     .intro-playing  o filme está a correr: vídeo visível, texto escondido
     (sem classe)    estado final e também o estado sem JS: texto visível
   Assim a landing lê-se na perfeição mesmo que o JS falhe ou seja bloqueado. */

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--ivory);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  text-align: center;
  transition: opacity 0.5s;
}
.loader .brand {
  font-size: 48px;
}
.loader .bar {
  display: block;
  width: 128px;
  height: 2px;
  background: #10294f22;
  border-radius: 99px;
  overflow: hidden;
}
.loader .bar b {
  display: block;
  height: 100%;
  width: 8%;
  background: var(--green);
  transform-origin: left;
  transition: width 0.25s linear;
}
.loader.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.5s,
    visibility 0s 0.5s;
}

/* ---------- Hero (desktop — composição aprovada pelo Jaime) ---------- */
/* --nav-h é definido em dadiva-nav.css (90px no PC, 58px no telemóvel).
   Aqui só se lê, nunca se redefine, para a hero acompanhar a barra do Agente D. */
.home-hero {
  position: relative;
  min-height: 760px;
  height: min(900px, 100dvh);
  isolation: isolate;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero-art,
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* O vídeo só aparece enquanto o filme corre; o fade-out cruza com a imagem,
   que tem exatamente o mesmo enquadramento do último frame. */
.intro-video {
  z-index: 1;
  opacity: 0;
  background: var(--ivory);
  transition: opacity 1s;
  pointer-events: none;
}
.home-hero.intro-playing .intro-video {
  opacity: 1;
}
.home-hero:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  background: linear-gradient(transparent, var(--ivory));
  z-index: 2;
  pointer-events: none;
}
/* Portáteis pequenos e tablets ao baixo (1024x768 e afins): a arte larga
   ainda entra em cover, mas com o enquadramento ao centro o chapéu do MYLO
   ficava cortado pela margem esquerda e o disco de sol desaparecia. Empurrar
   o enquadramento para a esquerda devolve a figura inteira. O vídeo leva o
   mesmo valor — senão haveria salto no fim do filme. */
@media (min-width: 951px) and (max-width: 1300px) {
  .hero-art,
  .intro-video {
    object-position: 22% 50%;
  }
}
.hero-copy {
  position: absolute;
  left: 54%;
  top: 24%;
  width: 40%;
  z-index: 3;
  transition:
    opacity 0.8s,
    transform 0.8s;
}
.home-hero.intro-playing .hero-copy {
  opacity: 0;
  transform: translateY(15px);
}
.hero-copy h1 {
  font-size: clamp(60px, 6.9vw, 108px);
  line-height: 0.94;
  letter-spacing: -5px;
  color: var(--green);
  font-weight: 900;
  margin-bottom: 26px;
}
.hero-copy p {
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.55;
  max-width: 440px;
}
/* O sublinhado de .word é desenhado junto às letras em dadiva.css
   (text-decoration), por isso não é preciso corrigi-lo aqui. */
/* Assinatura: uma linha discreta, não um segundo logotipo. O wordmark já
   está no header, no mesmo ecrã — repeti-lo a 24px em baixo à direita lia-se
   como duplicação. Recua o suficiente para o avatar flutuante do MYLO
   (canto inferior direito, ~124px de coluna) nunca lhe morder o fim. */
.signature {
  position: absolute;
  bottom: 90px;
  right: clamp(132px, 11vw, 220px);
  margin: 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.4;
  color: #3c5470;
  z-index: 3;
  transition: opacity 0.8s;
}
.home-hero.intro-playing .signature {
  opacity: 0;
}

/* ---------- Saltar introdução ---------- */
.skip-intro {
  position: absolute;
  right: 30px;
  bottom: 28px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #fffdf5ee;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px #10294f26;
}
.skip-intro:hover {
  background: var(--ivory);
}
.skip-intro:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.skip-intro[hidden] {
  display: none;
}

/* ---------- Hero empilhada: telemóvel e tablet ao alto ----------
   Em qualquer ecrã estreito e alto a arte larga (1639x922) só podia entrar
   com um corte brutal nos lados — o MYLO ficava fatiado ao meio. Aqui a
   hero empilha-se (arte ao alto por cima, texto em HTML por baixo) e usa a
   fonte vertical, que tem exatamente a mesma proporção do vídeo de intro. */
@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {
  .home-hero {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: calc(
      var(--hero-nav-h, var(--nav-h, 90px)) + env(safe-area-inset-top, 0px) +
        6px
    );
    padding-bottom: 34px;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  /* A caixa da arte tem de caber no primeiro ecrã (o título, o parágrafo e o
     CTA ocupam ~296px por baixo) — mas a LARGURA passa a ser deduzida dessa
     altura pela proporção da arte (822x922). Assim a caixa e a arte têm
     sempre a mesma forma e o object-fit: cover não tem nada para cortar.
     Era esta a raiz do MYLO sem chapéu e sem pés entre os 600 e os 1023px,
     onde a caixa ficava muito mais larga do que alta.
     Em ecrãs estreitos a largura bate no máximo do ecrã e volta a haver um
     recorte lateral de poucos píxeis — o comportamento de sempre a 390px.
     O vídeo vertical tem a mesma proporção, por isso a passagem filme ->
     imagem continua sem salto nenhum. */
  .hero-media {
    position: relative;
    inset: auto;
    z-index: 0;
    flex: none;
    margin-inline: auto;
    /* Recurso para navegadores sem svh; as linhas seguintes substituem-nas. */
    height: min(118vw, 452px);
    width: min(100%, calc(min(118vw, 452px) * 822 / 922));
    --hero-art-h: min(
      118vw,
      56svh,
      calc(100svh - var(--hero-nav-h, var(--nav-h, 58px)) - 296px)
    );
    height: var(--hero-art-h);
    width: min(100%, calc(var(--hero-art-h) * 822 / 922));
  }
  .hero-art,
  .intro-video {
    object-position: 50% 47%;
  }
  /* A arte bebe no papel pelas quatro arestas. Em píxeis, não em
     percentagem: assim o véu é o mesmo a 320 e a 820, e nunca cresce ao
     ponto de comer os pés do MYLO nas caixas mais baixas. Onde a caixa é
     mais estreita do que o ecrã (tablet ao alto, 320px) é isto que impede
     uma aresta reta a anunciar o fim de uma imagem. */
  .hero-media:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(to right, var(--ivory), rgba(255, 253, 245, 0) 28px),
      linear-gradient(to left, var(--ivory), rgba(255, 253, 245, 0) 28px),
      linear-gradient(to bottom, var(--ivory), rgba(255, 253, 245, 0) 22px),
      linear-gradient(to top, var(--ivory), rgba(255, 253, 245, 0) 44px);
  }
  .home-hero:after {
    display: none;
  }
  .hero-copy {
    position: static;
    width: auto;
    /* A goteira do site, a mesma do wordmark e das secções: o maior texto da
       página não pode ser o único que não alinha. */
    padding: 16px var(--gutter) 0;
  }
  /* O texto entra logo a seguir ao arranque do filme: por baixo da arte não
     tapa nada, e assim a faixa de texto nunca fica em branco durante os 6s
     da introdução (parecia uma página por acabar de carregar). */
  .home-hero.intro-playing .hero-copy {
    opacity: 0;
    transform: translateY(10px);
    animation: hero-copy-in 0.6s ease 0.45s forwards;
  }
  .hero-copy h1 {
    font-size: clamp(38px, 10.5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0 0 16px;
    max-width: 100%;
    text-wrap: balance;
  }
  .hero-copy p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 100%;
  }
  .hero-copy .button {
    background: var(--ivory);
    font-size: 15px;
    padding: 13px 22px;
    min-height: 48px;
  }
  .signature {
    display: none;
  }
  .skip-intro {
    right: 14px;
    bottom: 14px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@keyframes hero-copy-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Tablet ao alto (820x1180 e afins): mesma composição empilhada, mas com
   espaço para a arte respirar e o CTA ainda acima da dobra. */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  .home-hero {
    padding-bottom: 44px;
  }
  .hero-media {
    /* O bloco de texto ocupa ~300px, mais 96px de barra e 44px de fundo: com
       56svh (máx. 660px) a secção fica em ≈1106px num 820x1180 e em ≈1019px
       num 768x1024 — promessa e botão sempre no primeiro ecrã. A largura sai
       daqui pela proporção da arte, por isso o MYLO entra inteiro. */
    height: min(56svh, 112vw, 660px);
    --hero-art-h: min(56svh, 112vw, 660px);
    width: min(100%, calc(var(--hero-art-h) * 822 / 922));
  }
  .hero-copy {
    padding: 22px var(--gutter) 0;
  }
  .hero-copy h1 {
    font-size: clamp(46px, 7.4vw, 62px);
    margin-bottom: 18px;
  }
  .hero-copy p {
    font-size: 18px;
    max-width: 46ch;
    margin-bottom: 26px;
  }
  .hero-copy .button {
    font-size: 16px;
  }
}

/* Ecrãs muito baixos (320x640): aperta também a tipografia. */
@media (max-width: 700px) and (max-height: 700px) {
  .hero-copy h1 {
    font-size: clamp(34px, 9.6vw, 46px);
  }
  .hero-copy p {
    font-size: 16px;
    margin-bottom: 18px;
  }
}

/* A 360px e abaixo o bloco de texto é mais curto (tipografia apertada), por
   isso pode reservar-se menos e dar mais respiro à arte — que aqui já não é
   full-bleed e agradece cada píxel. */
@media (max-width: 360px) {
  .hero-media {
    --hero-art-h: min(
      118vw,
      56svh,
      calc(100svh - var(--hero-nav-h, var(--nav-h, 58px)) - 276px)
    );
    height: var(--hero-art-h);
    width: min(100%, calc(var(--hero-art-h) * 822 / 922));
  }
}

/* ---------- Movimento reduzido: sem filme, hero estática desde o início ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro-video {
    display: none;
  }
  .home-hero.intro-playing .hero-copy,
  .home-hero.intro-playing .signature {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   O VOO DO MYLO  (companheiro de dadiva-flight.js)
   ============================================================
   A .hero-art é agora a CHAPA (a aguarela sem o cogumelo). O MYLO é um
   recorte com alfa dentro de .hero-fly — position:fixed e FORA da
   .home-hero, senão o overflow:hidden da hero cortava-o a meio do voo.
   A caixa tem as medidas da arte (613x683 px) para o scale ser exatamente
   a mesma conta do object-fit:cover da hero; quem a escreve é o JS.

   Classes no <html>, todas postas por dadiva-flight.js:
     .flight-ready  a hero acabou a abertura — o recorte pode aparecer
     .flight-run    há scroll: o voo está a acontecer (sem transições)
     .flight        o voo manda na opacidade do avatar do canto
     .flight-hide   o avatar está invisível (fora do foco e do dedo)
   e a variável --flight-dock (0 -> 1) com a passagem recorte -> avatar. */
.hero-fly {
  position: fixed;
  left: 0;
  top: 0;
  /* Medidas da arte: o scale do voo é a mesma conta do cover da hero.
     O JS reescreve-as a partir das constantes dele. */
  width: 613px;
  height: 683px;
  /* ABAIXO da barra colante (40) e acima de todo o conteúdo em fluxo.
     Esteve em 90, por cima da barra, e isso partia o movimento reduzido: aí o
     recorte não voa, fica colado à arte e sobe com a hero — e subia por cima
     da barra, a tapar o wordmark (medido: 98% da palavra "descomplicai"
     escondida entre os 80 e os 400px de scroll, em 1440x900, 1280x720,
     820x1180, 390x844, 360x740 e 320x640). Com o voo normal acontecia o mesmo
     durante os primeiros píxeis, antes de o recorte arrancar.
     Nada se perde por descer: o percurso do voo (dadiva-flight.js) foge do
     topo do ecrã de propósito, e as camadas que TÊM de ficar por cima do
     recorte — a palavra em viagem (91), o companheiro (95) e os cartões do
     mapa levantados (96) — continuam todas acima. */
  z-index: 30;
  transform-origin: 50% 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  backface-visibility: hidden;
}
html.flight-ready .hero-fly {
  opacity: 1;
  will-change: transform, opacity;
}
/* Durante o voo a opacidade vem do scroll, frame a frame: uma transição
   aqui só a punha a arrastar-se atrás do dedo. */
html.flight-run .hero-fly {
  transition: none;
}
/* Menu do telemóvel aberto: o painel desce da barra (z-index 40, dadiva-nav.css)
   e o recorte em voo pintava-se por cima dele quando estava em 90. Só se lia
   "Vídeos" — o chapéu comia "Ferramentas" e o cogumelo tapava "MYLO", "Sobre"
   e a pílula EN. E como a .hero-fly é pointer-events:none os links continuavam
   a responder: tocava-se às cegas em cima de um desenho. Com o recorte já em
   30 isto está resolvido de origem; esta regra fica como rede, para o painel
   continuar acima do voo (e abaixo do companheiro, 95) se alguém voltar a
   subir a .hero-fly. Só existe abaixo de 700px, que é onde o painel existe.
   Apagar a .hero-fly aqui não servia: o dadiva-flight.js escreve-lhe a
   `opacity` em linha a cada frame e ganhava a qualquer regra desta folha. */
@media (max-width: 700px) {
  .site-nav.nav-open {
    z-index: 94;
  }
}
.hero-fly picture,
.hero-fly img {
  display: block;
  width: 100%;
  height: 100%;
}

/* O avatar flutuante fica escondido até o MYLO lá chegar. O dono dele é o
   dadiva-companion.js/mylo-companion.css — daí a conversa ser só por esta
   variável, e a classe sair no fim para ele voltar às regras dele. */
html.flight .mylo-companion {
  opacity: var(--flight-dock, 0);
  /* Enquanto o voo dura, nada aqui transita. A opacidade vem do scroll, frame
     a frame, e 0,3s de atraso punham o avatar a arrastar-se atrás do dedo. O
     `bottom` também não: durante o voo o --mylo-lift está preso a zero
     (dadiva-companion.js) porque este elemento é o DESTINO do voo, e uma
     transição a correr fazia a caixa medida e o valor da variável discordarem
     — o alvo ficava alguns píxeis ao lado durante a animação. Assim que a
     classe sai, o avatar volta às transições dele e o degrau desliza. */
  transition-property: none;
}
html.flight.flight-hide .mylo-companion {
  visibility: hidden;
}
/* Enquanto o MYLO ainda vem a caminho, o canto NÃO é um botão. Era este o
   buraco do "avatar rouba o toque": a meio do cross-fade o avatar já estava
   meio pintado e já apanhava o dedo, e como o voo o segura preso ao chão (é o
   destino) ele também não se sabia desviar do pino "Vídeos" que passa por
   esta coluna. Medido a 320x640 e 360x740: o toque no centro do pino abria a
   conversa. Sem pointer-events, o toque atravessa e vai ao cartão do mapa. */
html.flight .myloc-launch {
  pointer-events: none;
}

/* ── Os pinos do mapa passam à frente do MYLO ──────────────────────────
   Camadas da landing, de baixo para cima: recorte em voo 30, barra 40,
   palavra em viagem 91, avatar 95, e um cartão do mapa 96 — mas só enquanto
   estiver mesmo por baixo do avatar ou do recorte (o dadiva-flight.js põe e
   tira .is-front, e nunca o faz a um cartão que esteja a entrar por baixo da
   barra). Como a pintura e o toque seguem a mesma ordem, o dedo passa a
   acertar sempre no cartão — era este o "avatar rouba o toque".
   A .world tinha `isolation: isolate`, que prendia os cartões dentro dela e
   não os deixava subir acima do avatar. Sem isolamento, a única coisa que
   escapa é o z-index 2 do h2 da secção, que não se sobrepõe a nada. */
.world {
  isolation: auto;
}
.map-link.is-front {
  z-index: 96;
}

/* ── O mapa está a passar: o MYLO recolhe-se ────────────────────────────
   Num ecrã estreito os cartões do mapa são pílulas encostadas à direita e
   passam exatamente pela coluna onde o avatar poisa. Enquanto o mapa está no
   ecrã ele fica só com a cabeça, mais encostado à borda e sem etiqueta — a
   pílula "Fala comigo" é larga e era ela que tapava o "Vídeos →".
   Só depois de o voo acabar: enquanto ele corre, esta caixa é o DESTINO e
   mexer-lhe puxava o alvo a meio do percurso.
   O desvio vertical continua a ser o de sempre (os degraus do --mylo-lift do
   dadiva-companion.js), que voltam a funcionar assim que a classe .flight
   sai. A classe .map-near fica aqui para quem quiser consumi-la. */
/* O `right` passa a transitar como o `bottom`: sem isto, o encostar-se à
   borda (e o voltar ao lugar) eram dois saltos de 8px. */
.mylo-companion {
  transition:
    opacity 0.3s ease,
    right 0.28s ease,
    bottom 0.3s cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* Só abaixo dos 700px: é aí que os cartões do mapa são pílulas encostadas à
   direita. No tablet e no PC eles ficam bem dentro da ilha (medido: a aresta
   direita do "Vídeos" está a 730px num ecrã de 820 e o avatar começa aos 732)
   e não há nada a recolher. */
@media (max-width: 700px) {
  html.map-near:not(.flight) .mylo-companion {
    right: calc(max(6px, env(safe-area-inset-right)) + var(--mylo-shift, 0px));
  }
  /* A etiqueta recolhe-se mesmo durante o voo: como aqui só lhe mexemos na
     opacidade e num transform, a caixa do botão não muda e o destino do voo
     não se mexe. (Tirá-la do fluxo, sim, encolhia o botão e dava um salto de
     ~20px na figura, que está ancorada em baixo.) */
  html.map-near .mylo-companion .myloc-label {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
    pointer-events: none;
  }
}

/* ── "Fala comigo" depois da aterragem ─────────────────────────────────
   Acima dos 700px o companheiro anda sempre em is-quiet na landing (a página
   inteira é zona de silêncio) e a etiqueta nunca se via — justamente no sítio
   onde o voo acaba, o gesto ficava sem legenda. O dadiva-flight.js acende
   .mylo-hello durante ~3s quando o MYLO poisa, uma vez por sessão.
   Fica ao lado da cabeça, em absoluto: assim não empurra a figura para cima
   ao aparecer nem a deixa cair ao recolher, e não vai ao encontro do balão de
   "chamada de atenção", que nasce por cima. Abaixo dos 700px a etiqueta já se
   vê por omissão e quem manda é o recolhido do mapa. */
@media (min-width: 701px) {
  html.mylo-hello .mylo-companion .myloc-label {
    opacity: 1;
    position: absolute;
    right: 100%;
    bottom: auto;
    top: 50%;
    margin: 0 10px 0 0;
    transform: translateY(-50%);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.mylo-hello .mylo-companion .myloc-label {
    transition: none;
  }
}

/* ============================================================
   A MARCA  (teste A/B pedido pelo Jaime)
   ============================================================
   A (por omissão, ou ?brand=a): a navbar arranca sem marca visível e a
   assinatura da hero viaja para lá ao primeiro scroll.
   B (?brand=nav): marca na navbar desde o início, assinatura fora.
   Em qualquer dos dois só há UM wordmark no ecrã de cada vez.

   Acessibilidade: em A o link da marca continua no documento e na ordem de
   tabulação — só está a opacidade 0. Ao receber foco de teclado volta a
   ver-se. O espaço dele na barra nunca sai do layout, por isso não há salto
   quando a marca chega. */
html.brand-a .site-nav .brand {
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Invisível não deve apanhar o dedo nem o rato. O teclado continua a chegar
   lá (pointer-events não mexe no foco) e aí a marca acende-se. */
html.brand-a:not(.brand-arrived) .site-nav .brand {
  pointer-events: none;
}
html.brand-a .site-nav .brand:focus-visible,
html.brand-a.brand-arrived .site-nav .brand {
  opacity: 1;
}
/* Enquanto a palavra viaja, a troca no fim é no mesmo frame: a cópia
   desaparece e o link acende, no mesmo sítio e com a mesma letra. Com os
   0,25s de transição havia um quarto de segundo com a barra sem marca. */
html.brand-a.brand-moving .site-nav .brand {
  transition: none;
}
/* Onde não há assinatura na hero (telemóvel e tablet ao alto) não há nada
   para viajar: a marca fica onde sempre esteve. Em CSS, para não depender
   de JS nenhum e não piscar. */
@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {
  html.brand-a .site-nav .brand {
    opacity: 1;
  }
}
/* B: a assinatura sai de cena. A variante "fica subtil" seria trocar este
   display:none por opacity:.55 — mas aí o texto desce de 7,5:1 para 3,6:1
   de contraste e deixa de passar AA. Por isso, desaparece. */
html.brand-nav .signature {
  display: none;
}

/* A assinatura em duas partes: a frase, que se apaga, e a palavra da marca,
   que é substituída pela cópia que viaja (.brand-fly). O corte é feito em
   JS, e refeito a cada troca de língua — em EN a palavra está no meio. */
.signature .sig-lead {
  transition: opacity 0.25s ease;
}
html.brand-moving .signature .sig-lead {
  opacity: 0;
}
html.brand-moving .signature .sig-word {
  visibility: hidden;
}

/* ── A barra da landing fica colante ────────────────────────────────────
   Esta folha só é carregada pelo index.html, por isso tudo o que está aqui
   vale só para a landing. A barra passa a `fixed` DESDE O INÍCIO: a scroll 0
   `fixed` e `absolute` desenham no mesmo sítio, píxel a píxel (o topo do
   documento), por isso o primeiro ecrã é exatamente o que o Jaime aprovou —
   barra transparente por cima da aguarela.
   A partir dos 24px de scroll o dadiva-nav.js põe .is-stuck e a barra encolhe
   para marfim translúcido com desfoque e uma sombra ténue (as regras de
   .is-stuck vivem em dadiva-nav.css, partilhadas com as interiores). Sem isto
   a barra saía do ecrã aos ~96px e o wordmark em viagem nunca chegava a
   pousar em lado nenhum. */
.site-nav {
  position: fixed;
  transition:
    padding 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}
/* Nas interiores a barra volta a cair de cima (ela tinha mesmo saído do
   ecrã). Aqui nunca sai: a queda seria um solavanco. */
.site-nav.is-stuck {
  animation: none;
}
/* A barra fixa não pode tapar o alvo de uma âncora. */
:target,
#main,
.home-hero,
.world,
.pause,
.resources,
.return {
  scroll-margin-top: calc(var(--nav-h, 90px) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }
}

/* A cópia que viaja: duas escritas da mesma palavra sobrepostas pela mesma
   âncora (aresta esquerda + centro vertical) em cross-fade — sussurro da
   hero -> wordmark da barra. Só transform e opacity. */
.brand-fly {
  position: fixed;
  left: 0;
  top: 0;
  /* Acima do MYLO em voo (30): o caminho da assinatura para a barra atravessa
     o cogumelo, e por baixo dele a palavra desaparecia a meio do percurso.
     Continua abaixo do companheiro (95), que só aparece no fim. */
  z-index: 91;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.brand-fly span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  white-space: nowrap;
  /* A âncora é a aresta esquerda + o centro vertical: é por aí que as duas
     cópias crescem juntas durante a troca (ver MARK_SCALE em
     dadiva-flight.js). O JS reescreve este transform a cada frame. */
  transform-origin: 0 50%;
  transform: translateY(-50%);
}
/* Mesmos valores de .signature e de .site-nav .brand; line-height:1 porque
   a âncora é o centro do texto, não a caixa de linha. */
.bf-quiet {
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  color: #3c5470;
}
.bf-mark {
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.3px;
  color: var(--navy);
  /* O caminho da assinatura até à barra passa por cima da aguarela: um véu
     de papel à volta das letras faz a palavra ler-se como uma coisa a
     flutuar e não como um autocolante colado ao cogumelo. Só na cópia
     grande — a pequena tem de ser gémea da assinatura a sério. */
  text-shadow:
    0 0 14px rgba(255, 253, 245, 0.9),
    0 0 4px rgba(255, 253, 245, 0.95);
}