/* =============================================================================
   PRICING — HUD de seleção de acesso, em TELA INTEIRA (§ D47)

   Pedido do dono do projeto (2026-09-22): sem hero, sem conteúdo abaixo, sem
   scroll — "a tela é para passar essa ideia de jogo". A composição segue o
   esboço dele; o vocabulário é o do resto do site: vidro escuro, linhas finas,
   rótulos mono, cantos de instrumento, um bloom por camada.

   TRÊS CAMADAS DE MOVIMENTO, nunca todas ao mesmo tempo:
     1. PASSIVO — roda sempre: partículas (canvas, pricing.js), a luz que corre
        pelo contorno do arco, os anéis que se expandem atrás dele, o piso em
        perspectiva, a varredura lenta pela tela, o pulso dos cantos, a
        respiração do brilho dos cards.
     2. ENTRADA — CSS puro sobre `.hud--boot` (escrita pelo servidor), com
        `backwards`: cada coisa nasce agendada e entra na sua vez. A ordem:
        fundo → linha de boot → moldura → arco sobe → arte entra → cards sobem
        (um por um) → cards começam a brilhar → painéis laterais entram e as
        linhas escalonam → o card Founder desce. pricing.js tira a classe ao
        fim (ou no primeiro gesto), para as animações de TROCA não herdarem
        estes atrasos.
     3. TROCA — ao escolher um plano: a arte sai e a nova entra pelo arco, os
        painéis entram pelo lado (swap.js) e cada linha deles escalona
        (`.is-entering`, pricing.js), um anel estoura no palco, a tinta da cena
        e a luz do arco mudam para a cor do tier.

   Cor do tier em variáveis (`--tier` / `--tier-rgb`) na raiz, trocadas por
   `[data-selected]`: tudo que acende na cor do plano lê daqui.
   ============================================================================= */

@property --hud-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.hud-main { position: relative; }

/* ---------- a grade ------------------------------------------------------- */

.hud {
  --tier: var(--maia-cyan);
  --tier-rgb: 0, 212, 255;
  /* No desktop o arco desce por trás dos cards (a fileira deles + o vão + a
     sobra do arco): é a parte do arco que ninguém vê, e a arte em camadas
     ancora a MAIA ACIMA dela. No tablet e no celular os cards saem de baixo
     do arco e a folga é zero (ver a media query). */
  --pick-h: 146px;
  --arch-overhang: 60px;
  --arch-hidden: calc(var(--pick-h) + var(--space-7) + var(--arch-overhang));
  position: relative; isolation: isolate; overflow: clip;
  /* A altura é a da tela. Abaixo de 720px de altura a página passa a rolar
     em vez de esmagar os painéis — é o único caso em que existe scroll. */
  height: max(100svh, 720px);
  padding: calc(var(--header-h) + 14px) var(--container-pad) 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 440px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--space-9); row-gap: var(--space-7);
  background: var(--maia-black);
  color: var(--text-body);
}
/* A cor do plano selecionado (--tier / --tier-rgb) e' escrita pelo servidor no
   proprio .hud e atualizada por pricing.js na troca: os planos vem do catalogo,
   nenhum tier e' conhecido por este CSS. */

.hud__founder { grid-column: 1; grid-row: 1; z-index: 4; justify-self: start; }
.hud__details { grid-column: 1; grid-row: 2; z-index: 4; }
.hud__stage   { grid-column: 2; grid-row: 1 / -1; z-index: 2; }
.hud__info    { grid-column: 3; grid-row: 1 / 3; z-index: 4; }
.hud__picks   { grid-column: 1 / -1; grid-row: 3; z-index: 5; }

/* ---------- a cena --------------------------------------------------------- */

.hud__scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }

/* O fundo responde ao ponteiro (atmosphere.js escreve --mouse-x/y); a folga
   de 2% evita descobrir a borda oposta. */
.hud__bg { position: absolute; inset: -2.5%; }
.hud__bg .media-slot { width: 100%; height: 100%; }
.hud__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Tinta do tier: três camadas, uma acesa por vez — opacidade anima, gradiente
   não. */
.hud__tint {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 900ms var(--ease-hud);
  background:
    radial-gradient(ellipse 46% 60% at 50% 62%, rgba(var(--tint-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(5, 7, 12, .55), transparent 28%, transparent 66%, rgba(5, 7, 12, .9));
}
.hud__tint[data-active] { opacity: 1; }

.hud__particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Piso em perspectiva: uma grade que corre em direção ao leitor, como o chão
   de um palco. `transform` só — nada de background-position por quadro. */
.hud__floor {
  position: absolute; left: 50%; bottom: -4%; width: 150%; height: 44%;
  transform: translateX(-50%); perspective: 520px; perspective-origin: 50% 0%;
  overflow: clip; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 46% 100% at 50% 100%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 46% 100% at 50% 100%, #000 20%, transparent 72%);
}
.hud__floor-grid {
  position: absolute; inset: -60% -20% 0; transform-origin: 50% 100%;
  transform: rotateX(64deg);
  background:
    repeating-linear-gradient(0deg,  rgba(var(--tier-rgb), .22) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(var(--tier-rgb), .16) 0 1px, transparent 1px 48px);
  animation: hud-floor 5s linear infinite;
}
@keyframes hud-floor { to { transform: rotateX(64deg) translateY(48px); } }

/* Uma faixa de luz desce pela tela inteira, devagar, sempre. */
.hud__sweepline {
  position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(var(--tier-rgb), .07), transparent);
  animation: hud-sweepline 12s linear infinite;
}
@keyframes hud-sweepline { from { transform: translateY(-140px); } to { transform: translateY(110svh); } }

/* Scanlines finas + vinheta: o vidro da tela. */
.hud__scanlines {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgba(5, 7, 12, .6) 100%);
}

/* ---------- a moldura ------------------------------------------------------ */

.hud__frame {
  position: absolute; inset: calc(var(--header-h) + 4px) 14px 10px; z-index: 1;
  pointer-events: none;
}
.hud__frame-corner {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid rgba(var(--tier-rgb), .6);
  transition: border-color 700ms var(--ease-hud);
  animation: hud-corner-pulse 3.4s ease-in-out infinite;
}
.hud__frame-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hud__frame-corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: .4s; }
.hud__frame-corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: .8s; }
.hud__frame-corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: 1.2s; }
@keyframes hud-corner-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* A linha de boot: atravessa o topo e se apaga — "ligou". */
.hud__bootline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tier), transparent);
  transform-origin: left center; opacity: 0;
}
.hud--boot .hud__bootline { animation: hud-bootline 1000ms var(--ease-out) 60ms backwards; }
@keyframes hud-bootline {
  from { transform: scaleX(0); opacity: 1; }
  70%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 0; }
}

.hud__readout {
  position: absolute; margin: 0;
  font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label);
}
/* Coroa o arco, centrada: no canto direito ela cruzava o topo do painel de
   informações quando o seletor de período some (teste gratuito). */
.hud__readout--tr { top: -2px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.hud__readout--bl { bottom: 0; left: 0; }
.hud__readout--br { bottom: 0; right: 0; color: var(--tier); display: inline-flex; align-items: center; gap: var(--space-3); }
.hud__readout-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: hud-blink 1.6s steps(2, start) infinite; }
@keyframes hud-blink { to { opacity: 0; } }
.hud__readout [data-readout] { display: none; }
.hud__readout [data-readout][data-active] { display: inline; }

/* ---------- painéis: vidro escuro, cantos de instrumento -------------------- */

.hud__founder, .hud__details, .hud__info-panel, .hud__pick {
  position: relative;
  border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  background: rgba(7, 10, 16, .66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hud__corner {
  position: absolute; width: 10px; height: 10px; pointer-events: none; z-index: 2;
  border: 1px solid var(--maia-line-strong);
  transition: border-color var(--dur-base) var(--ease-hud);
}
.hud__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hud__corner--br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.hud__panel-head { display: flex; align-items: center; gap: var(--space-5); }
.hud__panel-title {
  margin: 0; font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label); white-space: nowrap;
}
.hud__panel-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--tier-rgb), .5), transparent); }

/* ---------- o card Founder -------------------------------------------------- */

.hud__founder {
  display: block;
  width: min(100%, 300px); padding: var(--space-3);
  text-align: start; cursor: pointer; color: var(--text-body);
  border-color: rgba(255, 194, 75, .3);
  transition: border-color var(--dur-fast) var(--ease-hud), transform var(--dur-fast) var(--ease-hud),
              box-shadow var(--dur-base) var(--ease-hud);
}
.hud__founder .hud__corner { border-color: var(--maia-amber); }
.hud__founder:hover { border-color: var(--maia-amber); transform: translateY(-2px); box-shadow: 0 0 28px rgba(255, 194, 75, .16); }
.hud__founder:active { transform: translateY(0); }
.hud__founder-art { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16 / 9; }
.hud__founder-art .media-slot { height: 100%; aspect-ratio: auto !important; }
/* A arte do card é a versão CENTRADA do pacote, já sem as barras de letterbox
   (reward-pricing-founder-pack, ver MediaCatalog): `cover` puro enche o 16:9
   com a caixa no meio. O enquadramento a 145% por posicionamento, que existia
   para o arquivo com barras, saiu junto com ele. */
.hud__founder-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Os dois rótulos por cima do topo da arte, numa faixa que escurece só o que
   precisa para ler. */
.hud__founder-top {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(180deg, rgba(5, 7, 12, .72), transparent);
}
.hud__founder-eyebrow {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--maia-amber); white-space: nowrap;
}
.hud__founder-cta {
  margin-top: 1px; text-align: end;
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.hud__founder:hover .hud__founder-cta { color: var(--maia-amber); }
/* O cronômetro na base da arte — o "72 : 07 : 03 : 49" do esboço. */
.hud__founder-timer {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: 1px; padding: var(--space-5) var(--space-4) var(--space-2);
  background: linear-gradient(180deg, transparent, rgba(5, 7, 12, .78) 55%);
}
.hud__founder-digits {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: baseline;
  font-size: 17px; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--text-body); text-align: center;
}
.hud__founder-digits [data-unit] { font-weight: var(--weight-medium); }
.hud__founder-sep { color: rgba(255, 194, 75, .6); font-size: 13px; padding: 0 2px; animation: hud-blink 1s steps(2, start) infinite; }
.hud__founder-units {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; text-align: center;
  font-size: 8px; letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--maia-amber);
}
.hud__founder-timer[data-state="closed"] .hud__founder-digits { color: var(--text-label); }

/* ---------- detalhes: o que o plano libera ----------------------------------- */

.hud__details {
  --line-x: -12px;
  padding: var(--space-6) var(--space-7);
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-5); min-height: 0;
}
.hud__details-panel { min-height: 0; }
/* Rolagem PRÓPRIA, com a borda de baixo se apagando: o que não cabe está ali,
   e a HUD não cresce para acomodar. `tabindex="0"` para o teclado rolar. */
.hud__scroll {
  height: 100%; max-height: 100%; overflow-y: auto; padding-right: var(--space-3);
  scrollbar-width: thin; scrollbar-color: rgba(var(--tier-rgb), .3) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.hud__scroll:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.hud__group + .hud__group { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-faint); }
.hud__group-head { display: flex; justify-content: space-between; gap: var(--space-5); }
.hud__group-tag {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--accent);
}
.hud__group[data-tone="apex"] .hud__group-tag { color: var(--accent-tier-apex); }
.hud__group[data-tone="founder"] .hud__group-tag { color: var(--maia-amber); }
.hud__group-who {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--status-available);
}
.hud__group[data-state="off"] .hud__group-who { color: var(--text-label); }
.hud__group-label { margin-top: var(--space-2); font-size: var(--text-ui); font-weight: var(--weight-medium); }
.hud__group[data-state="off"] .hud__group-label { color: var(--text-muted); }

.hud__unlocks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.hud__unlocks li {
  display: flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted);
}
.hud__unlocks li[data-state="off"] { color: var(--text-label); }
/* A marca: quadradinho aceso = liberado; vazado = bloqueado. Nunca só cor. */
.hud__mark {
  width: 7px; height: 7px; flex: none; border: 1px solid var(--status-available);
  background: var(--status-available); box-shadow: 0 0 8px rgba(0, 220, 130, .55);
}
.hud__unlocks li[data-state="off"] .hud__mark { background: transparent; border-color: var(--text-label); box-shadow: none; }

.hud__pending {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-amber);
}
.hud__detail-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); line-height: var(--lh-body); }

/* ---------- centro: o arco com a arte ---------------------------------------- */

.hud__stage { position: relative; min-height: 0; }

/* Anéis que se expandem atrás do arco — o palco está "ligado". */
.hud__rings { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
.hud__rings span {
  position: absolute; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; border: 1px solid rgba(var(--tier-rgb), .28); opacity: 0;
  animation: hud-ring 7.5s var(--ease-out) infinite;
}
.hud__rings span:nth-child(2) { animation-delay: 2.5s; }
.hud__rings span:nth-child(3) { animation-delay: 5s; }
@keyframes hud-ring {
  0%   { transform: scale(.5); opacity: 0; }
  12%  { opacity: .75; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* O estouro ao trocar de plano (pricing.js escreve data-burst no palco). */
.hud__burst {
  position: absolute; left: 50%; top: 44%; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%; border: 2px solid rgba(var(--tier-rgb), .85); opacity: 0; pointer-events: none;
  box-shadow: 0 0 40px rgba(var(--tier-rgb), .35);
}
.hud__stage[data-burst] .hud__burst { animation: hud-burst 820ms var(--ease-out) both; }
@keyframes hud-burst {
  from { transform: scale(.25); opacity: .95; }
  to   { transform: scale(2.8); opacity: 0; }
}

/* O arco: semicírculo no topo, reto embaixo, atravessa a tela até sair por
   trás do card central. É um portal, não um card. */
.hud__arch {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--arch-overhang) * -1);
  border-radius: 999px 999px 0 0; overflow: hidden;
  border: 1px solid rgba(var(--tier-rgb), .38);
  background: rgba(7, 10, 16, .55);
  box-shadow: 0 0 60px rgba(var(--tier-rgb), .1), inset 0 0 80px rgba(5, 7, 12, .6);
  transition: border-color 700ms var(--ease-hud), box-shadow 700ms var(--ease-hud);
}
/* A luz que corre pelo contorno: um conic-gradient girando, recortado numa
   fita de 2px pela máscara. `@property` anima o ângulo; sem suporte, a luz
   fica parada — e o arco continua inteiro. */
.hud__arch-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 2px;
  --hud-angle: 0deg;
  background: conic-gradient(from var(--hud-angle) at 50% 55%,
    transparent 0 62%, rgba(var(--tier-rgb), .95) 74%, transparent 84%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: hud-orbit 5.5s linear infinite;
  z-index: 3; pointer-events: none;
}
@keyframes hud-orbit { to { --hud-angle: 360deg; } }

.hud__arch-inner { position: absolute; inset: 0; }
.hud__art { position: absolute; inset: 0; margin: 0; }
.hud__art-slot { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.hud__art-slot.media-slot--pending { border: 0; padding: 0; }
.hud__art-slot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- a arte em CAMADAS (PlanArt + MediaCatalog.PlanArt) ----------------
   Pedido do dono do projeto (2026-09-24), com as artes desmembradas dele:
     1. partículas flutuando em volta da logo, POR TRÁS dela — o canvas abaixo,
        desenhado por pricing.js, na cor do plano;
     2. a logo flutua, devagar, sempre;
     3. onde a MAIA aparece, ela surge ANTES da logo.
   Onde cada camada senta vem da própria arte (--logo-top/--logo-w/--maia-w/
   --maia-bottom, inline em .hud__art-layers): cada arquivo tem a sua margem
   de brilho, e o CSS não conhece arte nenhuma. */
.hud__art-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hud__art-layers { position: absolute; inset: 0; }
.hud__art-layer {
  position: absolute; display: block; width: auto; overflow: visible;
  background: none; pointer-events: none;
}
.hud__art-layer img { display: block; width: 100%; height: auto; object-fit: contain; }
.hud__art-layer--logo { top: var(--logo-top, 4%); left: 50%; width: var(--logo-w, 86%); margin-left: calc(var(--logo-w, 86%) / -2); z-index: 2; }
.hud__art-layer--maia {
  bottom: calc(var(--maia-bottom, 0%) + var(--arch-hidden));
  left: 50%; width: var(--maia-w, 100%); margin-left: calc(var(--maia-w, 100%) / -2); z-index: 1;
}

/* A flutuação fica na IMAGEM, e a entrada na camada: duas animações de
   transform em elementos diferentes, nenhuma pisa na outra. */
.hud__art-float { animation: hud-float 5.6s ease-in-out infinite; }
@keyframes hud-float {
  0%, 100% { transform: translateY(-2.4%); }
  50%      { transform: translateY(2.4%); }
}

/* As entradas são das camadas, não do figure: assim rodam de novo a cada troca
   (o `hidden` que sai reinicia as animações dos filhos) sem depender do
   data-swap, que o swap.js tira do figure assim que a animação DELE termina —
   antes de a logo sequer começar. A MAIA sobe da base; a logo nasce depois. */
@keyframes hud-maia-in {
  from { opacity: 0; transform: translateY(16%); }
  to   { opacity: 1; transform: none; }
}
@keyframes hud-logo-in {
  from { opacity: 0; transform: translateY(5%) scale(.92); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.hud__art-layer--maia { animation: hud-maia-in 720ms var(--ease-out) backwards; }
.hud__art-layer--logo { animation: hud-logo-in 680ms var(--ease-out) 460ms backwards; }

/* Na troca, o figure em camadas só se apaga e acende — o recorte que abre de
   cima para baixo (hud-art-in) esconderia a MAIA justamente no instante em que
   ela deveria aparecer primeiro. */
.hud__art--layered[data-swap="in"] { animation: hud-art-in-layered 320ms var(--ease-out) both; }
@keyframes hud-art-in-layered {
  from { opacity: var(--swap-start-opacity, 0); }
  to   { opacity: 1; }
}

.hud__art-caption {
  position: absolute; left: 0; right: 0; top: 12%; text-align: center;
  font-size: var(--text-mono-micro); letter-spacing: var(--track-season);
  text-transform: uppercase; color: rgba(var(--tier-rgb), .85);
}
/* Varredura passiva: uma linha de luz desce pela arte, devagar, sempre. */
.hud__sweep {
  position: absolute; left: 12%; right: 12%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--tier-rgb), .6), transparent);
  filter: blur(.5px); pointer-events: none;
  animation: hud-sweep 7s linear infinite;
}
@keyframes hud-sweep { from { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { transform: translateY(min(80svh, 760px)); opacity: 0; } }

/* O brilho na base do arco, na cor do tier. */
.hud__arch-base {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 200px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--tier-rgb), .38), transparent 70%);
  transition: opacity 700ms var(--ease-hud);
}

/* Troca de plano: a arte sai encolhendo e a nova entra por baixo com o
   recorte abrindo — a "seleção de personagem". */
.hud__art[data-swap="out"] { animation: hud-art-out 240ms var(--ease-hud) forwards; }
.hud__art[data-swap="in"]  { animation: hud-art-in 560ms var(--ease-out) both; }
@keyframes hud-art-out {
  from { opacity: var(--swap-start-opacity, 1); transform: var(--swap-start-transform, none); }
  to { opacity: 0; transform: translateY(-14px) scale(.97); clip-path: inset(0 0 30% 0); }
}
@keyframes hud-art-in {
  from { opacity: var(--swap-start-opacity, 0); transform: var(--swap-start-transform, translateY(28px) scale(.98)); clip-path: var(--swap-start-clip, inset(0 0 55% 0)); }
  to   { opacity: 1; transform: none; clip-path: inset(0); }
}

/* ---------- direita: informações do plano ------------------------------------- */

.hud__info {
  --line-x: 12px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-6); min-height: 0;
}
/* Sem `overflow: auto` aqui: os cantos de instrumento ficam 1px para fora da
   caixa e virariam barras de rolagem. Abaixo de 720px de altura é a PÁGINA
   que rola. */
.hud__info-panel { padding: var(--space-8); display: grid; align-content: start; gap: var(--space-4); min-height: 0; }
.hud__info-eyebrow {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--tier);
}
.hud__info-name { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.01em; line-height: 1.1; }
.hud__info-price { font-size: var(--text-h3); color: var(--text-body); }
.hud__info-per { font-size: var(--text-sm); color: var(--text-label); margin-left: var(--space-2); }
.hud__info-desc { color: var(--text-muted); line-height: var(--lh-body); }
.hud__cta { margin-top: var(--space-4); justify-self: start; }
/* O CTA acende na cor cadastrada do plano (--pick, inline no painel). */
.hud__info-panel .hud__cta { background: var(--pick); color: var(--maia-black); box-shadow: 0 0 24px rgba(var(--pick-rgb), .35); }
.hud__info-panel .hud__cta:hover { background: var(--pick); filter: brightness(1.12); }
.hud__cta--static { background: transparent; color: var(--text-muted); border: 1px solid var(--border-faint); box-shadow: none; cursor: default; }
.hud__info-panel .hud__cta--static, .hud__info-panel .hud__cta--static:hover { background: transparent; filter: none; box-shadow: none; }
.hud__info-panel .hud__corner { border-color: rgba(var(--tier-rgb), .8); }
.configurator__after {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}
.hud__provisional { margin: 0; font-size: var(--text-mono-meta); letter-spacing: var(--track-tight); color: var(--maia-amber); }

/* ---------- rodapé: as três escolhas ------------------------------------------ */

.hud__picks { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-7); }
/* Os três cards têm a MESMA altura e a mesma base; só o selecionado sobe
   (`--rest-y`, pedido do dono do projeto, 2026-09-22). O respiro de 34px no
   topo é o espaço da etiqueta "Popular", igual nos três para os tamanhos não
   divergirem — sem ele, no celular a etiqueta cruzava o índice. */
.hud__pick {
  --pick: var(--maia-cyan); --pick-rgb: 0, 212, 255;
  --glow-lo: .28; --glow-hi: .5;
  --rest-y: 0px;
  display: grid; gap: var(--space-2); align-content: end; justify-items: center;
  width: min(100%, 300px); min-height: var(--pick-h); padding: 34px var(--space-8) var(--space-7);
  text-align: center; cursor: pointer; color: var(--text-nav);
  overflow: hidden; border-color: rgba(var(--pick-rgb), .28);
  transform: translateY(var(--rest-y));
  transition: border-color var(--dur-fast) var(--ease-hud), transform var(--dur-base) var(--ease-hud),
              box-shadow var(--dur-base) var(--ease-hud), background var(--dur-base) var(--ease-hud);
}

/* Brilho na base do card, na cor do tier. Nasce apagado, acende depois que o
   card sobe (entrada) e respira sempre. O selecionado respira mais forte. */
.hud__pick-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--glow-lo);
  background: radial-gradient(70% 60% at 50% 105%, rgba(var(--pick-rgb), .42), transparent 70%);
  animation: hud-glow-breathe 3.4s ease-in-out calc(2200ms + var(--i, 0) * 140ms) infinite;
}
@keyframes hud-glow-breathe { 0%, 100% { opacity: var(--glow-lo); } 50% { opacity: var(--glow-hi); } }

/* Luz que responde ao ponteiro dentro do card (--mx/--my escritos por pricing.js). */
.hud__pick::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(180px 120px at var(--mx, 50%) var(--my, 50%), rgba(var(--pick-rgb), .18), transparent 70%);
  transition: opacity var(--dur-base) var(--ease-hud);
}
.hud__pick:hover::before { opacity: 1; }
.hud__pick:hover { transform: translateY(calc(var(--rest-y) - 4px)); border-color: rgba(var(--pick-rgb), .6); }
.hud__pick:active { transform: translateY(calc(var(--rest-y) - 1px)) scale(.995); }

.hud__pick-flag {
  position: absolute; top: var(--space-4); left: 50%; transform: translateX(-50%);
  padding: 2px var(--space-4); border: 1px solid var(--pick); border-radius: var(--radius-chip);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--pick);
  box-shadow: 0 0 12px rgba(var(--pick-rgb), .3);
}
.hud__pick-index { font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-label); }
.hud__pick-name { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-body); }
/* A faixa do valor: acesa na cor do tier — é o "[valor]" do esboço. */
.hud__pick-price {
  display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(var(--pick-rgb), .4); border-radius: var(--radius-sm);
  background: rgba(var(--pick-rgb), .07); color: var(--pick);
  font-size: var(--text-ui); letter-spacing: .04em;
  transition: background var(--dur-base) var(--ease-hud), box-shadow var(--dur-base) var(--ease-hud);
}
.hud__pick-per { font-size: var(--text-mono-meta); color: var(--text-muted); margin-left: 2px; }
.hud__pick-lock {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0;
  text-align: center; font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--maia-black); background: var(--pick);
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease-hud);
}

/* Selecionado: contorno e bloom na cor do tier, a faixa "Selecionado" sobe,
   os cantos acendem e o brilho respira mais forte. Cor nunca sozinha. */
.hud__pick[aria-selected="true"] {
  --glow-lo: .6; --glow-hi: 1;
  --rest-y: -12px;
  border-color: var(--pick); background: rgba(var(--pick-rgb), .05);
  box-shadow: 0 0 30px rgba(var(--pick-rgb), .22);
}
.hud__pick[aria-selected="true"] .hud__corner { border-color: var(--pick); }
.hud__pick[aria-selected="true"] .hud__pick-index { color: var(--pick); }
.hud__pick[aria-selected="true"] .hud__pick-lock { transform: none; }
.hud__pick[aria-selected="true"] .hud__pick-price {
  background: rgba(var(--pick-rgb), .16);
  box-shadow: 0 0 18px rgba(var(--pick-rgb), .28), inset 0 0 14px rgba(var(--pick-rgb), .12);
}

/* Clique = "lock in": um flash curto no card (pricing.js escreve data-lock). */
.hud__pick[data-lock] { animation: hud-lock 380ms var(--ease-hud); }
@keyframes hud-lock {
  0%   { box-shadow: 0 0 0 0 rgba(var(--pick-rgb), .6); }
  45%  { box-shadow: 0 0 0 12px rgba(var(--pick-rgb), 0); }
  100% { box-shadow: 0 0 30px rgba(var(--pick-rgb), .22); }
}

/* ---------- as linhas de cada painel: escalonadas ---------------------------- */

/* Cada linha entra na sua vez, pelo lado do painel (`--line-x`). Na ENTRADA
   da página, depois do painel; na TROCA, assim que o painel novo aparece
   (`.is-entering`, escrita por pricing.js — o `display:none` → visível
   reinicia as animações dos filhos). */
@keyframes hud-line-in {
  from { opacity: 0; transform: translateX(var(--line-x, 0px)); }
  to   { opacity: 1; transform: none; }
}
.is-entering .hud__line {
  animation: hud-line-in 420ms var(--ease-out) backwards;
  animation-delay: calc(110ms + var(--i, 0) * 50ms);
}

/* ---------- ENTRADA DA PÁGINA — a sequência ---------------------------------- */

@keyframes hud-scene-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes hud-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes hud-arch-in  { from { clip-path: inset(100% 0 0 0); opacity: 0; } 30% { opacity: 1; } to { clip-path: inset(0); opacity: 1; } }
/* O card termina na SUA posição de repouso (`--rest-y`): o selecionado sobe
   até os -12px dele, os outros até zero — sem salto ao fim da entrada. */
@keyframes hud-rise     { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(var(--rest-y, 0px)); } }
@keyframes hud-glow-in  { from { opacity: 0; } to { opacity: var(--glow-lo); } }
@keyframes hud-slide-l  { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes hud-slide-r  { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes hud-drop     { from { opacity: 0; transform: translateY(-24px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/*  t (ms)  o que acontece
    ------  ----------------------------------------------------------------
       0    o fundo entra, por escala (1400ms)
      60    a linha de boot atravessa o topo
     300    a moldura e as leituras aparecem; o piso acende
     420    o arco sobe do chão (900ms)
     880    a arte entra pelo arco
    1000    card 00 sobe · 1140 card 01 · 1280 card 02
    1700    card 00 acende · 1840 · 1980 — e passam a respirar
    1500    o painel de detalhes entra pela esquerda, o de informações pela
            direita (620ms); as linhas escalonam a partir de 1900
    2300    o card Founder desce
    ~3800   pricing.js tira `.hud--boot`; só o passivo continua            */

.hud--boot .hud__bg .media-slot { animation: hud-scene-in 1400ms var(--ease-out) backwards; }
.hud--boot .hud__frame-corner,
.hud--boot .hud__readout        { animation: hud-fade 500ms var(--ease-out) 300ms backwards; }
.hud--boot .hud__frame-corner   { animation: hud-fade 500ms var(--ease-out) 300ms backwards, hud-corner-pulse 3.4s ease-in-out 800ms infinite; }
.hud--boot .hud__floor          { animation: hud-fade 900ms var(--ease-out) 300ms backwards; }
.hud--boot .hud__rings          { animation: hud-fade 900ms var(--ease-out) 600ms backwards; }
.hud--boot .hud__arch           { animation: hud-arch-in 900ms var(--ease-out) 420ms backwards; }
.hud--boot .hud__art            { animation: hud-art-in 640ms var(--ease-out) 880ms backwards; }
/* Em camadas: o figure só acende às 880; a MAIA sobe no mesmo instante e a
   logo nasce às 1360, quando a MAIA já parou. */
.hud--boot .hud__art--layered   { animation: hud-fade 420ms var(--ease-out) 880ms backwards; }
.hud--boot .hud__art-layer--maia { animation-delay: 880ms; }
.hud--boot .hud__art-layer--logo { animation-delay: 1360ms; }
.hud--boot .hud__pick {
  animation: hud-rise 620ms var(--ease-out) backwards;
  animation-delay: calc(1000ms + var(--i, 0) * 140ms);
}
.hud--boot .hud__pick-glow {
  animation: hud-glow-breathe 3.4s ease-in-out calc(2200ms + var(--i, 0) * 140ms) infinite,
             hud-glow-in 520ms var(--ease-out) calc(1700ms + var(--i, 0) * 140ms) backwards;
}
.hud--boot .hud__details        { animation: hud-slide-l 620ms var(--ease-out) 1500ms backwards; }
.hud--boot .hud__info           { animation: hud-slide-r 620ms var(--ease-out) 1500ms backwards; }
.hud--boot .hud__line {
  animation: hud-line-in 460ms var(--ease-out) backwards;
  animation-delay: calc(1900ms + var(--i, 0) * 55ms);
}
.hud--boot .hud__founder        { animation: hud-drop 560ms var(--ease-out) 2300ms backwards; }

/* ---------- o diálogo do Founder ---------------------------------------------- */

.hud__dialog {
  padding: 0; border: 0; background: transparent; max-width: min(92vw, 560px);
  color: var(--text-body);
}
.hud__dialog::backdrop { background: rgba(5, 7, 12, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hud__dialog[open] { animation: hud-dialog-in 260ms var(--ease-out) both; }
@keyframes hud-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.hud__dialog .founder__window { max-width: none; }
.hud__dialog-close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
  width: 36px; height: 36px; border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  background: var(--maia-black); color: var(--text-muted); cursor: pointer;
}
.hud__dialog-close:hover { color: var(--text-body); border-color: var(--maia-line-strong); }

/* ---------- tablet: as escolhas no TOPO, numa faixa; o arco à direita ------
   Pedido do dono do projeto (2026-09-22): no tablet os cards ficavam abaixo
   da dobra. Sobem para a primeira linha, na mesma faixa rolável do celular;
   o resto fica onde estava. A página passa a rolar. */
@media (max-width: 1080px) {
  .hud {
    height: auto; min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .hud__picks {
    grid-column: 1 / -1; grid-row: 1;
    /* `flex-start`, e NÃO o `center` do desktop: com a faixa transbordando, o
       centro empurra metade do excesso para a esquerda, onde o scroll não
       chega — o primeiro card ficava cortado para sempre. Quem centra quando
       cabe são as margens automáticas do primeiro e do último card, abaixo. */
    justify-content: flex-start;
    align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4);
    /* 14px no topo é o espaço para o card selecionado subir sem ser cortado
       pela faixa (overflow-x: auto também recorta na vertical). */
    padding: 14px var(--container-pad) var(--space-3);
    margin-inline: calc(var(--container-pad) * -1);
    scrollbar-width: none;
  }
  .hud__picks::-webkit-scrollbar { display: none; }
  .hud__pick { flex: 0 0 min(300px, 72%); width: auto; scroll-snap-align: center; }
  /* Cabem: centrados. Não cabem: as margens colapsam e a faixa rola desde o
     primeiro — `justify-content: center` deixaria o primeiro inalcançável. */
  .hud__pick:first-child { margin-left: auto; }
  .hud__pick:last-child  { margin-right: auto; }

  .hud__founder { grid-column: 1; grid-row: 2; }
  .hud__info    { grid-column: 1; grid-row: 3; }
  .hud__stage   { grid-column: 2; grid-row: 2 / 4; min-height: 560px; }
  .hud__details { grid-column: 1 / -1; grid-row: 4; max-height: 440px; }
  .hud          { --arch-hidden: 0px; }
  .hud__arch    { bottom: 0; }
  .hud__readout--tr { display: none; }
  /* O arco fica mais largo em relação à altura: as camadas encolhem um pouco
     para a logo não sentar na cabeça da MAIA. */
  .hud__art-layer--logo { width: calc(var(--logo-w, 86%) * .86); margin-left: calc(var(--logo-w, 86%) * -.43); }
  .hud__art-layer--maia { width: calc(var(--maia-w, 100%) * .92); margin-left: calc(var(--maia-w, 100%) * -.46); }
}

/* ---------- celular: uma coluna — Founder primeiro, depois as escolhas ------ */
@media (max-width: 720px) {
  .hud {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: var(--space-6);
    padding-inline: var(--space-8);
  }
  .hud__founder { grid-column: 1; grid-row: 1; width: 100%; }
  .hud__picks   { grid-row: 2; padding-inline: var(--space-8); margin-inline: calc(var(--space-8) * -1); }
  .hud__stage   { grid-column: 1; grid-row: 3; min-height: 0; aspect-ratio: 4 / 5; }
  .hud__info    { grid-column: 1; grid-row: 4; }
  .hud__details { grid-column: 1; grid-row: 5; max-height: 380px; }
  .hud__info-name { font-size: 26px; }
  .hud__floor { display: none; }
  .hud__readout { display: none; }
}

/* ---------- movimento reduzido: tudo visível, nada se move -------------------- */
@media (prefers-reduced-motion: reduce) {
  .hud *, .hud *::before, .hud *::after { animation: none !important; transition: none !important; }
  .hud__particles, .hud__art-particles, .hud__sweepline, .hud__rings, .hud__burst, .hud__bootline { display: none; }
  .hud__pick:hover, .hud__founder:hover { transform: none; }
}

/* A assinatura vigente, acima do seletor de período: a pessoa vê de onde parte
   antes de escolher para onde vai. Sem caixa alta — é um dado, não um rótulo. */
.hud__subscription {
  margin: 0; font-size: var(--text-mono-label); letter-spacing: var(--track-label);
  color: var(--tier);
}