/* ==========================================================================
   ORBIT · o hero da landing, rodando dentro do case

   Uma peça do cliente que roda de verdade na página, em vez de screenshot: o
   hero da landing v1.7, no meio da galeria do case.

   Por que este arquivo existe separado de style.css: o que está aqui é
   identidade do Orbit (Cobalt, Libre Caslon, Public Sans), não do Lucas. O
   CLAUDE.md proíbe reaproveitar essa identidade no site; mostrar dentro do
   case do próprio cliente é outra coisa. Manter separado deixa a fronteira
   visível e impede que alguém puxe um token daqui achando que é do site.

   Carregado só por work/orbit.html.

   ESCOPO. Todo seletor daqui vive sob .orbit-hero. Os nomes originais do
   Orbit (.hero, .hero__title, .btn, .badge) colidem com os do site e por isso
   foram renomeados: o hero do site é outro hero.

   HOUVE UMA SEGUNDA PEÇA E ELA SAIU. Em 29/08/2026 as oito pranchas do manual
   de marca também rodaram aqui, geradas a partir do arquivo do cliente. O
   mecanismo funcionava; o resultado na página não convenceu, e voltaram a ser
   imagem. O registro do que foi tentado e do que se aprendeu está em
   docs/HISTORY.md, pra ninguém refazer a tentativa achando que é ideia nova.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO DA LANDING · porte da v1.7

   Origem: Orbit/Orbit-v1-7/Orbit-v1.7.html, .hero e .orbital-hero.
   O original é React com min-height de 100vh. Aqui ele vive dentro de uma
   célula 16:9 da galeria, então a altura vem da proporção e as medidas
   escalam por clamp. Os valores de cor são cópia literal do original.
   -------------------------------------------------------------------------- */

.orbit-hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;

  /* Fonte de luz no canto superior direito. Cópia do original. */
  background:
    radial-gradient(ellipse at 88% 12%,
      rgba(255, 255, 255, 0.78) 0%,
      #0051FF 26%,
      #1A2E99 58%,
      #090F2B 100%);
}

/* Os pontos que reagem ao cursor. Desenhados por js/orbit-hero.js. */
.orbit-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.orbit-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 4.5vw, 72px);
}

.orbit-hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 28px);
}

.orbit-hero__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #F0F1F3;
  white-space: nowrap;
}

.orbit-hero__title {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(26px, 3.5vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #F0F1F3;
  text-wrap: balance;
}

.orbit-hero__title em {
  font-style: italic;
}

.orbit-hero__subtitle {
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: clamp(13px, 1.25vw, 18px);
  line-height: 1.62;
  color: rgba(240, 241, 243, 0.72);
  max-width: 44ch;
}

.orbit-hero__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Os CTAs são peça de vitrine, não navegação: o alvo real deles é a
   plataforma do cliente, que não existe aqui. Viram <span> no HTML, sem
   href e fora da ordem de tabulação, pra não prometer clique que não
   acontece nem sujar a navegação por teclado do case. */
.orbit-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(32px, 3.2vw, 44px);
  padding: 0 clamp(14px, 1.8vw, 24px);
  border-radius: 99px;
  border: 1px solid transparent;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

/* Frost no lugar do cobalt: o botão azul some no fundo azul. */
.orbit-hero__btn--primary {
  background-color: #F0F1F3;
  border-color: #F0F1F3;
  color: #0D0D0D;
}

.orbit-hero__btn--secondary {
  border-color: rgba(240, 241, 243, 0.32);
  color: #F0F1F3;
}

/* --------------------------------------------------------------------------
   Coluna direita: o orbital animado
   -------------------------------------------------------------------------- */

.orbit-hero__orbital {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vinheta escura em volta: separa o SVG dos pontos do canvas. */
.orbit-hero__orbital::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(9, 15, 43, 0.48) 0%,
    rgba(9, 15, 43, 0.18) 34%,
    transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.orbit-hero__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Cada anel gira em torno do centro do viewBox (280,280). */
.orbit-hero__ring { transform-origin: 280px 280px; }

@keyframes orbit-hero-ring-1 { from { transform: rotate(-12deg); } to { transform: rotate(348deg); } }
@keyframes orbit-hero-ring-2 { from { transform: rotate(28deg); }  to { transform: rotate(-332deg); } }
@keyframes orbit-hero-ring-3 { from { transform: rotate(8deg); }   to { transform: rotate(368deg); } }
@keyframes orbit-hero-ring-4 { from { transform: rotate(-50deg); } to { transform: rotate(-410deg); } }
@keyframes orbit-hero-ring-5 { from { transform: rotate(-68deg); } to { transform: rotate(292deg); } }

.orbit-hero__ring--1 { animation: orbit-hero-ring-1  90s linear infinite; }
.orbit-hero__ring--2 { animation: orbit-hero-ring-2  55s linear infinite; }
.orbit-hero__ring--3 { animation: orbit-hero-ring-3 120s linear infinite; }
.orbit-hero__ring--4 { animation: orbit-hero-ring-4  45s linear infinite; }
.orbit-hero__ring--5 { animation: orbit-hero-ring-5 160s linear infinite; }

@keyframes orbit-hero-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.10); }
}

.orbit-hero__glow,
.orbit-hero__star {
  transform-origin: 280px 280px;
  animation: orbit-hero-pulse 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Responsivo

   Os cortes são por largura de viewport porque a célula da galeria ocupa a
   largura inteira do container: uma coisa acompanha a outra. Abaixo de
   860px o orbital sai, como no original, e a copy ocupa a largura toda.

   Nessa faixa a célula também larga o 16:9: numa tela de 400px o 16:9 dá
   225px de altura, e a copy não cabe em 225px sem virar sopa. Em vez de
   escolher outra proporção fixa, que seria chute, a altura passa a vir do
   conteúdo. A regra de proporção uniforme por fileira continua valendo: esta
   peça ocupa as doze colunas, então não tem vizinha de linha pra desalinhar.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .orbit-hero__inner { grid-template-columns: 1fr; }
  .orbit-hero__orbital { display: none; }

  .orbit-hero-cell { aspect-ratio: auto; }
  .orbit-hero-cell .orbit-hero { position: relative; inset: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-hero__ring,
  .orbit-hero__glow,
  .orbit-hero__star { animation: none; }
}

/* --------------------------------------------------------------------------
   A nota que apresenta a peça viva

   Fica na grade da galeria, ocupando as doze colunas, logo acima do hero. O
   gap da galeria sozinho encostava ela na fileira de cima e a nota lia como
   legenda da peça anterior, que é justo a que ela não descreve.
   -------------------------------------------------------------------------- */

.orbit-hero-nota {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-10);
}