/* ============================================================
   ÓRBITA · O FILME (02/10/2026) — a moldura do filme do
   Posicionamento. O desenho é todo do assets/orbita-filme.js
   (canvas); aqui ficam o palco, o "pino" que prende a seção na tela
   enquanto a rolagem toca o filme, a legenda em três tempos e a
   lista de núcleos (links) para teclado, leitor de tela e Google.
   Substitui a figura .pos-orbita (pílulas com ícone), cujo CSS
   antigo ficou sem alvo. (02/10/2026) O dono testou também um vídeo
   3D no lugar desta animação e preferiu a animação: "volte com a
   animação, como estava antes" — o vídeo ficou guardado em
   scratchpad/orbita-filme-video.bak.* e scratchpad/filme3d. Voltar: scratchpad/index.pre-orbita-filme.bak.html
   ============================================================ */

/* ---------- 1. O palco ---------- */
.po-trilho { min-width: 0; }
.po-filme { margin: 0; position: relative; }
.po-palco {
  position: relative;
  aspect-ratio: 5 / 4;
}
.po-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
}

/* ---------- 2. A legenda: três tempos do filme ---------- */
.po-roteiro {
  position: relative;
  margin: clamp(4px, 1vw, 12px) auto 0;
  min-height: 2.9em;
  max-width: 30em;
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 0.3vw + 0.82rem, 1.02rem);
  line-height: 1.4;
  text-align: center;
  color: var(--cor-tinta, #1A1D24);
}
.po-roteiro p {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
  text-wrap: balance;
}
.po-roteiro p.is-on { opacity: 1; transform: none; }
/* sem JS, só o primeiro tempo */
.po-filme:not(.po-filme-on) .po-roteiro p:first-child { opacity: 1; transform: none; }

/* ---------- 3. Os núcleos como links: escondidos, aparecem no foco ---------- */
.po-nucleos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.po-nucleos a {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.po-nucleos a:focus-visible {
  left: 50%;
  bottom: 2%;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  z-index: 3;
  transform: translateX(-50%);
  padding: 0.55em 1em;
  border-radius: 12px;
  background: #1A1D24;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #F0BB4A;
  outline-offset: 2px;
}
/* sem JS: a lista vira texto simples embaixo do palco */
.po-filme:not(.po-filme-on) .po-nucleos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.po-filme:not(.po-filme-on) .po-nucleos a { position: static; width: auto; height: auto; clip: auto; overflow: visible; color: inherit; }

/* ---------- 4. Tamanho do filme ----------
   Nada fica preso (02/10/2026, o dono: "só dê uma arrastadinha e já partir
   para o próximo"): a animação anda da faixa do +400 até o filme chegar ao
   meio da tela (orbita-filme.js). A versão presa: scratchpad/orbita-filme.pre-rapida.bak.* */
@media (min-width: 1024px) {
  #clinica .clinica-grid--mapa { align-items: center; }
  .po-filme {
    width: 100%;
    max-width: calc((100vh - 240px) * 5 / 4);
    margin-inline: auto;
  }
}
@media (max-width: 1023.98px) {
  .po-trilho { width: 100%; max-width: 620px; justify-self: center; margin-inline: auto; }
}
@media (max-width: 559.98px) {
  .po-trilho { max-width: none; margin-inline: -8px; width: calc(100% + 16px); }
  .po-palco { aspect-ratio: 1 / 0.92; }
  .po-roteiro { padding-inline: 12px; }
}

/* ---------- 5. A chamada que abre os núcleos: o "11" gigante ----------
   Pedido do dono (02/10/2026): "Descubra os 11 núcleos… que surja, uma
   animação bonita, impactante, que preencha a tela, que nasça do nada…
   não quero um espaço branco… conforme o scroll, algo premium".
   Coreografia, presa à rolagem (o compositor calcula; JS só mede, em
   assets/nucleos-chamada.js):
     1. assim que a órbita sai, sobe um "11" amarelo do tamanho da tela;
     2. a cena gruda e o "11" encolhe e voa até o lugar dele na frase;
     3. as palavras sobem de dentro de máscaras, uma a uma;
     4. entra a frase de apoio, segura um instante e solta: os cartões.
   Trilha de 250vh (cover 0% = trilha entrando pelo pé da tela; a cena
   gruda em ~29% e solta em ~71%). 05/10/2026: fases mais espaçadas e as
   palavras subindo juntas ("muita animação uma em seguida da outra"). Sem suporte a animação por rolagem
   (Firefox, Safari antigo) ou com movimento reduzido: só a frase, parada. */
.nucleos-chamada { position: relative; padding: clamp(56px, 10vh, 120px) 0; }
.nc-cena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nc-tit {
  margin: 0 auto;
  max-width: 12.5em;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.6vw + 0.6rem, 5.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--cor-tinta, #1A1D24);
  text-wrap: balance;
}
.nc-onze { display: inline-block; line-height: 1; color: var(--cor-marca, #F0BB4A); }
.nc-w { display: inline-block; }
.nc-w > span { display: inline-block; }
.nc-sub {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.2rem);
  line-height: 1.45;
  color: var(--cor-cinza, #6B7280);
}
.nc-gigante { display: none; }

/* nasce pequeno e transparente logo abaixo da órbita e cresce enquanto
   sobe, até encher a tela (o -30vh adianta ele em relação à cena, que
   ainda está entrando pelo pé da tela) */
@keyframes nc-surge {
  from { opacity: 0; transform: translate(-50%, calc(-50% - 16vh)) scale(0.34); }
  40% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes nc-encolhe {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(calc(-50% + var(--nc-x, 0px)), calc(-50% + var(--nc-y, 0px))) scale(var(--nc-s, 0.15)); }
}
@keyframes nc-some { to { opacity: 0; } }
@keyframes nc-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes nc-palavra {
  from { transform: translate3d(0, 112%, 0); }
  to { transform: none; }
}
@keyframes nc-sub-entra {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nucleos-chamada {
      height: 250vh;
      padding: 0;
      view-timeline: --chamada block;
    }
    .nc-cena {
      position: sticky;
      top: 0;
      height: 100vh;
      padding-top: 56px;
      box-sizing: border-box;
      overflow: clip;
    }
    .nc-gigante {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: 0;
      font-family: var(--font-display);
      font-size: min(112vh, 96vw);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.035em;
      color: var(--cor-marca, #F0BB4A);
      white-space: nowrap;
      pointer-events: none;
      transform: translate(-50%, -50%);
      will-change: transform, opacity;
      /* o encolher só vale a partir do começo dele (forwards), para não
         apagar o "surgir" que vem antes */
      animation:
        nc-surge linear both,
        nc-encolhe linear forwards,
        nc-some linear forwards;
      animation-timeline: --chamada, --chamada, --chamada;
      animation-range:
        cover 3% cover 28%,
        cover 31% cover 50%,
        cover 49% cover 51%;
    }
    /* o "11" da frase só acende quando o gigante chega nele */
    .nc-onze {
      opacity: 0;
      animation: nc-aparece linear both;
      animation-timeline: --chamada;
      animation-range: cover 49% cover 51%;
    }
    /* as palavras sobem de dentro de uma máscara (a borda de baixo da linha) */
    .nc-w { clip-path: inset(-0.35em -0.2em 0 -0.2em); }
    .nc-w > span {
      animation: nc-palavra linear both;
      animation-timeline: --chamada;
    }
    /* as palavras sobem praticamente juntas: um movimento só */
    .nc-w:nth-child(1) > span { animation-range: cover 48% cover 60%; }
    .nc-w:nth-child(2) > span { animation-range: cover 48.6% cover 60.6%; }
    .nc-w:nth-child(3) > span { animation-range: cover 49.2% cover 61.2%; }
    .nc-w:nth-child(5) > span { animation-range: cover 49.8% cover 61.8%; }
    .nc-sub {
      animation: nc-sub-entra linear both;
      animation-timeline: --chamada;
      animation-range: cover 61% cover 68%;
    }
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .nucleos-chamada { height: 225svh; }
    .nc-cena { height: 100svh; padding: 48px 20px 0; }
    .nc-gigante { font-size: min(80svh, 104vw); }
  }
}
#nucleos.extrato-anexo { padding-top: 0; }

/* ---------- 6. Os cartões dos núcleos ----------
   Sem animação própria desde 05/10/2026 (menos animação em sequência):
   entram com o aparecimento discreto do resto do site (.reveal da folha). */