/* =============================================================================
   16º NATAL SOLIDÁRIO — Projeto Orsi
   Estilos da página de pré-lançamento.

   TUDO está escopado sob .ns16 — nada aqui vaza para outras páginas do site
   institucional. A única regra global é o @font-face, que é inerte se a fonte
   não for usada.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONTES OFICIAIS — servidas da própria pasta, sem depender do Google Fonts

   Nata é a fonte da campanha (logo, frase, countdown).
   Asap é a complementar (rótulos, Pix, textos de apoio).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nata';
  src: url('../fonts/nata-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nata';
  src: url('../fonts/nata-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nata';
  src: url('../fonts/nata-black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nata';
  src: url('../fonts/nata-extrablack.woff2') format('woff2');
  font-weight: 950; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Asap';
  src: url('../fonts/asap-regular.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Asap';
  src: url('../fonts/asap-bold.woff2') format('woff2');
  font-weight: 700 800; font-style: normal; font-display: swap;
}

/* -----------------------------------------------------------------------------
   Propriedades registradas: sem isto o navegador não sabe interpolar uma
   variável CSS, e o respiro lento da cena andaria aos saltos.
   -------------------------------------------------------------------------- */
@property --amb-x { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --amb-y { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --amb-s { syntax: '<number>'; initial-value: 1;   inherits: false; }

/* =============================================================================
   TOKENS
   ========================================================================== */
.ns16 {
  --noite:        #0B1430;   /* azul-marinho base — cor de carregamento */
  --noite-2:      #060C1E;
  --creme:        #FFFFFF;
  --creme-dim:    rgba(255,255,255,.82);
  --ambar:        #FFB65A;
  --ambar-quente: #FF8A1F;
  --vermelho:     #E20E1D;

  --font-display: 'Nata', 'Arial Narrow', 'Arial Black', system-ui, sans-serif;
  /* a Nata já é condensada de nascença: nenhum ajuste de largura */
  --font-display-stretch: normal;
  --font-texto:   'Asap', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* medidas da cena, escritas pelo JS */
  --stage-w: 100vw;
  --stage-h: 100vh;
  --scene-w: 100vw;
  --scene-h: 56.25vw;
  --scene-x: 0px;
  --scene-y: 0px;

  --gutter: clamp(18px, 4.4vw, 76px);
  --seed-size: 22px;

  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin: 0;
  background: var(--noite);
  color: var(--creme);
  font-family: var(--font-texto);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.ns16 *, .ns16 *::before, .ns16 *::after { box-sizing: border-box; }

/* =============================================================================
   A. PALCO E CENA
   O palco é a janela. A cena é a imagem inteira, redimensionada para cobrir e
   deslocada conforme o enquadramento. Tudo que é "mundo" (fundo, personagem,
   luz, fio, árvore) vive DENTRO da cena, em coordenadas normalizadas — por isso
   a semente continua nas mãos e o fio continua na árvore em qualquer tela.
   ========================================================================== */
.ns16__stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--noite) 0%, var(--noite-2) 100%);
  z-index: 0;
}

.ns16__scene {
  position: absolute;
  left: var(--scene-x);
  top: var(--scene-y);
  width: var(--scene-w);
  height: var(--scene-h);
  will-change: transform;
  /* duas camadas somadas: o respiro lento (sempre ligado) e o parallax do
     mouse (só no desktop). O texto fica fora da cena e não se mexe. */
  transform:
    translate3d(calc(var(--par-x, 0px) + var(--amb-x)),
                calc(var(--par-y, 0px) + var(--amb-y)), 0)
    scale(calc(var(--par-s, 1) * var(--amb-s)));
  transition: --par-x .55s cubic-bezier(.2,.7,.3,1),
              --par-y .55s cubic-bezier(.2,.7,.3,1),
              --par-s .55s cubic-bezier(.2,.7,.3,1);
  animation: ns16-ambiente var(--amb-dur, 26s) ease-in-out infinite;
}
@keyframes ns16-ambiente {
  0%, 100% { --amb-x: calc(var(--amb-dist, 11px) * -1); --amb-y: calc(var(--amb-dist, 11px) * .30); --amb-s: 1; }
  50%      { --amb-x: var(--amb-dist, 11px);            --amb-y: calc(var(--amb-dist, 11px) * -.34); --amb-s: calc(1 + var(--amb-zoom, .012)); }
}
/* com a aba em segundo plano, nada continua rodando à toa */
.ns16.is-paused .ns16__scene,
.ns16.is-paused .ns16__charImg,
.ns16.is-paused .ns16__char,
.ns16.is-paused .ns16__seedCore,
.ns16.is-paused .ns16__seedHalo,
.ns16.is-paused .ns16__seedSpill,
.ns16.is-paused .ns16__tl { animation-play-state: paused; }

/* A. background ------------------------------------------------------------- */
.ns16__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;             /* a cena já tem a proporção exata da imagem */
  opacity: 0;
  transition: opacity .9s ease;
}
.ns16.is-ready .ns16__bg { opacity: 1; }

/* B. ajuste sutil de contraste — sem lavar a textura da cena ---------------- */
.ns16__grade {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 62%, rgba(255,150,40,.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(4,9,24,.62) 0%, rgba(4,9,24,.30) 34%, rgba(4,9,24,0) 62%),
    linear-gradient(0deg, rgba(4,9,24,.45) 0%, rgba(4,9,24,0) 38%);
}

/* C. iluminação adicional da árvore e da fachada ---------------------------- */
.ns16__treeGlow {
  position: absolute;
  left: calc(var(--tree-x) * 100%);
  top: calc(var(--tree-y) * 100%);
  width: 26%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle,
      rgba(255,186,102,.55) 0%,
      rgba(255,150,60,.26) 28%,
      rgba(255,140,50,.08) 52%,
      rgba(0,0,0,0) 70%);
  opacity: 0;
  transition: opacity var(--tree-release, 1400ms) ease-out;
  mix-blend-mode: screen;
}
.ns16__scene.is-lit .ns16__treeGlow {
  opacity: 1;
  transition: opacity var(--tree-ignite, 1000ms) ease-out;
}

/* D. sombra de contato do personagem ---------------------------------------- */
.ns16__contact {
  position: absolute;
  left: 50%; bottom: -1.5%;
  width: 108%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
      rgba(3,6,16,.62) 0%, rgba(3,6,16,.34) 42%, rgba(3,6,16,0) 72%);
  filter: blur(2px);
  pointer-events: none;
}

/* E. Orsinho ---------------------------------------------------------------- */
.ns16__char {
  position: absolute;
  left: calc(var(--char-x) * 100%);
  bottom: calc((1 - var(--char-feet)) * 100%);
  height: calc(var(--char-h) * 100%);
  aspect-ratio: 443 / 1021;
  transform-origin: 50% 100%;     /* o giro acontece sobre os pés */
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .8s ease .25s;
  animation: ns16-sway var(--sway-dur, 11s) ease-in-out infinite;
}
.ns16.is-ready .ns16__char { opacity: 1; }

/* Balanço: um deslocar de peso de um pé para o outro, lentíssimo.
   A semente e a área de toque viajam junto, então a luz nunca sai das mãos. */
@keyframes ns16-sway {
  0%, 100% { transform: translateX(-50%) rotate(calc(var(--sway-deg, .55deg) * -1)) translateY(0); }
  38%      { transform: translateX(-50%) rotate(calc(var(--sway-deg, .55deg) * .35)) translateY(-.30%); }
  72%      { transform: translateX(-50%) rotate(var(--sway-deg, .55deg))             translateY(.12%); }
}

.ns16__charImg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Respiração: o peito sobe e desce. Ciclo diferente do balanço de propósito —
     como os dois não fecham juntos, o movimento nunca parece um loop. */
  transform-origin: 50% 100%;
  animation: ns16-breathe var(--resp-dur, 5.2s) ease-in-out infinite;
}
@keyframes ns16-breathe {
  0%, 100% { transform: scale3d(1, 1, 1) translateY(0); }
  44%      { transform: scale3d(var(--resp-sx, .9965), var(--resp-sy, 1.011), 1)
                        translateY(var(--resp-ty, -.34%)); }
}

/* F. semente luminosa ------------------------------------------------------
   Três camadas: o núcleo (a lâmpada), o halo (o brilho em volta) e a luz que
   espalha nas mãos. As três pulsam no mesmo compasso, com forças diferentes —
   é isso que faz parecer uma luz de verdade e não um círculo com opacidade. */
.ns16__seed {
  position: absolute;
  left: calc(var(--seed-x) * 100%);
  top:  calc(var(--seed-y) * 100%);
  width: var(--seed-size); height: var(--seed-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ns16__seedCore,
.ns16__seedHalo,
.ns16__seedSpill {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

/* a luz que cai nas mãos */
.ns16__seedSpill {
  width:  calc(var(--seed-size) * var(--seed-spill, 7));
  height: calc(var(--seed-size) * var(--seed-spill, 7));
  margin: calc(var(--seed-size) * var(--seed-spill, 7) / -2);
  background: radial-gradient(circle,
      rgba(255,190,110,.34) 0%, rgba(255,165,70,.16) 30%,
      rgba(255,150,55,.05) 58%, rgba(255,150,55,0) 76%);
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: ns16-seed-pulse var(--seed-pulse, 3.4s) ease-in-out infinite;
  opacity: var(--seed-dim, .38);
}

/* o brilho em volta da lâmpada */
.ns16__seedHalo {
  width:  calc(var(--seed-size) * var(--seed-halo, 3.2));
  height: calc(var(--seed-size) * var(--seed-halo, 3.2));
  margin: calc(var(--seed-size) * var(--seed-halo, 3.2) / -2);
  background: radial-gradient(circle,
      rgba(255,235,180,.85) 0%, rgba(255,200,120,.45) 22%,
      rgba(255,170,75,.18) 48%, rgba(255,160,60,0) 72%);
  mix-blend-mode: screen;
  animation: ns16-seed-pulse var(--seed-pulse, 3.4s) ease-in-out infinite;
}

/* a lâmpada: forma orgânica, levemente alongada, núcleo quente e claro */
.ns16__seedCore {
  width: var(--seed-size); height: var(--seed-size);
  margin: calc(var(--seed-size) / -2);
  border-radius: 52% 48% 50% 50% / 62% 60% 40% 38%;
  background: radial-gradient(circle at 46% 40%,
      #FFFFFB 0%, #FFF6DA 22%, #FFDE9C 48%, #FFB863 70%,
      rgba(255,160,70,.45) 86%, rgba(255,150,50,0) 100%);
  box-shadow:
    0 0 calc(var(--seed-size) * 1.0) rgba(255,214,140,.95),
    0 0 calc(var(--seed-size) * 2.4) rgba(255,178,86,.60),
    0 0 calc(var(--seed-size) * 4.8) rgba(255,158,58,.28);
  animation: ns16-seed-pulse var(--seed-pulse, 3.4s) ease-in-out infinite;
  transition: transform .2s ease-out, filter .2s ease-out;
}

/* Acende e apaga com compasso de vaga-lume: uma batida forte, um respiro,
   uma batida menor. Nunca uma senóide — senóide parece um led de aparelho. */
@keyframes ns16-seed-pulse {
  0%   { opacity: var(--seed-dim, .38); transform: scale(.78); }
  16%  { opacity: 1;                    transform: scale(1.14); }
  32%  { opacity: calc(var(--seed-dim, .38) + .30); transform: scale(.92); }
  48%  { opacity: .92;                  transform: scale(1.06); }
  70%  { opacity: calc(var(--seed-dim, .38) + .12); transform: scale(.86); }
  100% { opacity: var(--seed-dim, .38); transform: scale(.78); }
}

/* mouse por cima, foco do teclado ou toque: a luz responde na hora */
.ns16__seed.is-hot .ns16__seedCore  { transform: scale(1.6);  filter: brightness(1.45) saturate(1.05); }
.ns16__seed.is-hot .ns16__seedHalo,
.ns16__seed.is-hot .ns16__seedSpill { animation-play-state: paused; opacity: 1; }

/* botão acessível da semente — área de toque confortável, sem parecer botão */
.ns16__seedBtn {
  position: absolute;
  left: calc(var(--seed-x) * 100%);
  top:  calc(var(--seed-y) * 100%);
  width: max(64px, calc(var(--seed-size) * 3.4));
  height: max(64px, calc(var(--seed-size) * 3.4));
  transform: translate(-50%, -50%);
  border: 0; padding: 0; margin: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
}
.ns16__seedBtn:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 4px;
  background: rgba(255,182,90,.10);
}

/* G. luzes da árvore e partículas -------------------------------------- */

.ns16__treeLights {
  position: absolute;
  left: calc(var(--tl-x) * 100%);
  top: calc(var(--tl-y) * 100%);
  width: calc(var(--tl-w) * 100%);
  height: calc(var(--tl-h) * 100%);
  pointer-events: none;
}
.ns16__tl {
  position: absolute;
  width: var(--tl-size, 7px); height: var(--tl-size, 7px);
  margin: calc(var(--tl-size, 7px) / -2) 0 0 calc(var(--tl-size, 7px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #FFF8E4 0%, #FFCE80 42%, rgba(255,180,90,0) 74%);
  box-shadow: 0 0 8px rgba(255,205,130,.95), 0 0 18px rgba(255,170,70,.55);
  /* cada luz tem seu próprio ritmo e atraso: pisca como pisca-pisca de rua,
     sem nunca cair em cadência de led de aparelho */
  animation: ns16-tl-pisca var(--tl-dur, 3s) ease-in-out var(--tl-delay, 0ms) infinite;
  opacity: 0;
  will-change: opacity, transform;
}
@keyframes ns16-tl-pisca {
  0%, 100% { opacity: var(--tl-min, .18); transform: scale(.72); }
  38%      { opacity: 1;                  transform: scale(1.12); }
  62%      { opacity: var(--tl-min, .18); transform: scale(.8); }
}

/* durante a interação, todas sobem juntas */
.ns16__scene.is-lit .ns16__tl {
  animation-play-state: paused;
  opacity: 1; transform: scale(1.25);
  transition: opacity .4s ease var(--tl-delay, 0ms), transform .4s ease var(--tl-delay, 0ms);
}

.ns16__spark {
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,214,150,.95);
  box-shadow: 0 0 6px rgba(255,190,110,.8);
  pointer-events: none;
  opacity: 0;
}

/* =============================================================================
   H. CONTEÚDO — logo, frase e countdown
   Fora da cena de propósito: texto nítido em qualquer resolução, nunca
   embutido na imagem, nunca deslocado pelo parallax.
   ========================================================================== */
.ns16__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3.4vh, 48px) var(--gutter) clamp(16px, 2.6vh, 34px);
  pointer-events: none;   /* a cena continua clicável; só os controles recebem eventos */
}
.ns16__content a,
.ns16__content button { pointer-events: auto; }

/* --- logo ------------------------------------------------------------------ */
.ns16__logo {
  width: clamp(190px, 23vw, 440px);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.ns16.is-ready .ns16__logo { opacity: 1; transform: none; }
.ns16__logo img { display: block; width: 100%; height: auto; }
.ns16__logo[data-oficial] { filter: drop-shadow(0 3px 22px rgba(0,0,0,.45)); }

/* letreiro provisório — reproduz o rascunho aprovado enquanto o arquivo
   oficial do 16º não chega. Some sozinho quando config.assets.logo é definido. */
.ns16__logoMark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--font-display-stretch);
  font-size: clamp(1.9rem, 3.0vw, 3.3rem);
  line-height: .94;
  letter-spacing: -.012em;
  text-transform: uppercase;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,.5));
}
.ns16__logoLine { display: flex; align-items: center; gap: .12em; }
.ns16__logoNum  { color: var(--creme); }
.ns16__logoWord { color: var(--vermelho); }
.ns16__logoLine2 { display: block; }
.ns16__logoTree { width: .42em; height: .94em; display: block; margin-bottom: .04em; }

.ns16__logoSparks { position: absolute; inset: 0; pointer-events: none; }
.ns16__logoSparks i {
  position: absolute;
  left: var(--sx); top: var(--sy);
  width: .26em; height: .26em;
  transform: scale(var(--ss, 1));
  background: #fff;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity: .85;
}

/* --- bloco central --------------------------------------------------------- */
.ns16__middle {
  align-self: center;
  display: flex;
  flex-direction: column;
  /* frase e Pix andam juntos, coladinhos; o countdown tem o respiro dele logo
     abaixo. O padding de baixo é o que empurra o conjunto para cima. */
  gap: clamp(13px, 2.2vh, 26px);
  max-width: 100%;
  padding-top: clamp(10px, 2vh, 24px);
  padding-bottom: clamp(34px, 9vh, 120px);
}
.ns16__count { margin-top: clamp(16px, 4.4vh, 62px); }

.ns16__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--font-display-stretch);
  /* linha única: o corpo é calculado pelo JS para caber na largura disponível */
  font-size: var(--headline-size, clamp(1.1rem, 2.6vw, 3rem));
  line-height: 1.12;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
  max-width: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease .12s, transform .7s cubic-bezier(.2,.7,.3,1) .12s;
}
.ns16.is-ready .ns16__headline { opacity: 1; transform: none; }

/* --- countdown ------------------------------------------------------------- */
.ns16__count {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease .26s, transform .7s cubic-bezier(.2,.7,.3,1) .26s;
}
.ns16.is-ready .ns16__count { opacity: 1; transform: none; }

/* O countdown cresce até o limite calculado pelo JS: o maior tamanho possível
   sem encostar no rosto, nas mãos nem na semente do Orsinho. Ver medirCountdown()
   em natal-solidario.js e fx.countdown em config.js. */
.ns16__clock {
  display: grid;
  /* cada grupo tem a largura exata dos seus algarismos; o vão entre eles
     acompanha o corpo dos números (o JS conta com esses mesmos .30em) */
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  align-items: start;
  column-gap: calc(var(--digit-size, 120px) * .30);
  width: max-content;
  max-width: 100%;
}

.ns16__group { min-width: 0; }

.ns16__digits {
  display: flex;
  justify-content: flex-start;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: var(--font-display-stretch);
  font-size: var(--digit-size, clamp(3.4rem, 14vw, 18rem));
  line-height: .84;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--creme);
  text-shadow: 0 4px 34px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
}

/* cada algarismo ocupa uma célula de largura fixa: trocar de 9 para 0 nunca
   empurra o layout */
.ns16__digit {
  display: inline-block;
  /* 1ch = a largura real de um algarismo na fonte carregada (com tabular-nums).
     Assim a célula acompanha a Nata, a substituta condensada ou qualquer
     fallback — sem sobrepor e sem empurrar o layout na troca de número. */
  width: 1ch;
  text-align: center;
  will-change: transform, opacity;
}
/* A troca de algarismo é um rolar curto, não uma piscada: o número nunca
   desaparece por completo — só desfoca de leve enquanto desliza. */
.ns16__digit.is-changing { animation: ns16-flip 300ms cubic-bezier(.32,.06,.24,1); }
@keyframes ns16-flip {
  0%   { transform: translateY(0);      opacity: 1;   }
  44%  { transform: translateY(-.11em); opacity: .28; }
  56%  { transform: translateY(.10em);  opacity: .28; }
  100% { transform: translateY(0);      opacity: 1;   }
}

.ns16__label {
  margin-top: clamp(4px, .9vh, 14px);
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: clamp(.58rem, 1.06vw, 1rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--creme-dim);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}

/* separador ":" entre os grupos, desenhado sem quebrar o grid */
.ns16__group + .ns16__group .ns16__digits { position: relative; }
.ns16__group + .ns16__group .ns16__digits::before {
  content: ':';
  position: absolute;
  /* no meio do vão: metade de .30em, convertida para o corpo do ":" (.80em) */
  left: -.1875em; top: -.02em;
  transform: translateX(-50%);
  font-size: .80em;
  opacity: .92;
}

/* --- Pix da ONG ------------------------------------------------------------
   Um cartão de vidro escuro sobre a cena: a chave fica legível sem brigar com
   o countdown, e o botão copia de verdade. Nada de formulário, nada de campo
   de pagamento — é só a chave da ONG, à vista e fácil de levar. */
.ns16__pix {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s ease .42s, transform .7s cubic-bezier(.2,.7,.3,1) .42s;
}
.ns16.is-ready .ns16__pix { opacity: 1; transform: none; }

.ns16__pixCard {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 20px);
  padding: clamp(12px, 1.35vh, 18px) clamp(14px, 1.15vw, 20px)
           clamp(12px, 1.35vh, 18px) clamp(16px, 1.35vw, 24px);
  border-radius: 16px;

  /* vidro mais denso, para o cartão virar um objeto sólido sobre a cena */
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(255,182,90,.13) 0%, rgba(255,182,90,0) 58%),
    rgba(7, 13, 30, .78);
  border: 1px solid rgba(255, 182, 90, .46);
  box-shadow:
    0 14px 42px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,182,90,.08),
    0 0 34px rgba(255,166,70,.16),          /* halo quente: a mesma luz da cena */
    inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  pointer-events: auto;
  max-width: 100%;
}

/* selo do cartão: o logo do Projeto Orsi em dourado, sobre a noite.
   O ladrilho continua sendo o primeiro ponto de peso do cartão — o que
   mudou é que agora ele carrega a marca, não um ícone genérico. */
.ns16__pixMark {
  display: grid; place-items: center;
  width: 46px; height: 54px;
  flex: 0 0 auto;
  /* sem ladrilho: a marca aparece solta sobre o cartão */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* a marca fica inteira dentro do ladrilho, sem deformar */
.ns16__pixMarkImg {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* o PNG já vem em âmbar; o brilho apenas o assenta na cena */
  filter: drop-shadow(0 0 9px rgba(255,166,70,.34)) drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

.ns16__pixInfo { display: grid; gap: 4px; min-width: 0; }

.ns16__pixLabel {
  font-size: clamp(.6rem, .74vw, .72rem);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ambar);
  white-space: nowrap;
}

.ns16__pixKey {
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.42vw, 1.42rem);
  letter-spacing: .012em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--creme);
  white-space: nowrap;
  user-select: all;              /* um clique já seleciona a chave inteira */
}

/* botão sólido: não tem como confundir com texto */
.ns16__pixBtn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 11px;
  padding: 12px 20px;
  background: linear-gradient(160deg, #FFC978 0%, var(--ambar) 58%, #F79A33 100%);
  color: #0B1430;
  font: inherit;
  font-weight: 700;
  font-size: clamp(.76rem, .9vw, .88rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(255,166,70,.30);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ns16__pixBtn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,166,70,.42); }
.ns16__pixBtn:active { transform: translateY(0); }
.ns16__pixBtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ns16__pixBtn[data-copiado] {
  background: linear-gradient(160deg, #B6F0C6 0%, #7ED79B 60%, #4FBE7A 100%);
  box-shadow: 0 5px 16px rgba(110,210,150,.32);
}

/* --- troca entre os estados A / B / C -------------------------------------- */
.ns16__stateB, .ns16__stateC { display: none; }
.ns16[data-phase="A"] .ns16__count  { display: block; }
.ns16[data-phase="B"] .ns16__count,
.ns16[data-phase="C"] .ns16__count  { display: none; }
.ns16[data-phase="B"] .ns16__stateB { display: block; }
.ns16[data-phase="C"] .ns16__stateC { display: block; }
.ns16[data-phase="B"] .ns16__hint,
.ns16[data-phase="C"] .ns16__hint   { opacity: .75; }

/* --- estados B e C --------------------------------------------------------- */
.ns16__message {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.6vw, 4rem);
  line-height: 1.06;
  max-width: 16ch;
  margin: 0;
  text-shadow: 0 3px 26px rgba(0,0,0,.55);
}
.ns16__messageSub {
  margin: .9em 0 0;
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  color: var(--creme-dim);
  max-width: 34ch;
}

/* --- rodapé ---------------------------------------------------------------- */
.ns16__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transition: opacity .8s ease .6s;
}
.ns16.is-ready .ns16__footer { opacity: 1; }

/* redes sociais: só o ícone. O nome existe para o leitor de tela, não na tela */
.ns16__redes {
  display: flex;
  align-items: center;
  gap: clamp(4px, .5vw, 10px);
  pointer-events: auto;
}
.ns16__rede {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.ns16__rede svg { width: 30px; height: 30px; display: block; }
.ns16__rede:hover {
  color: var(--ambar);
  background: rgba(255,182,90,.13);
  transform: translateY(-2px);
}
.ns16__rede:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  color: var(--ambar);
}
.ns16__redes[hidden] { display: none !important; }

.ns16__hint {
  margin: 0;
  font-size: clamp(.68rem, 1.02vw, .86rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

.ns16__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.62);
  font: inherit;
  font-size: clamp(.62rem, .9vw, .78rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 2px;
}
.ns16__sound:hover { color: #fff; }
.ns16__sound:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 4px; }
.ns16__sound[hidden] { display: none !important; }
.ns16__hint[hidden] { display: none !important; }

/* leitores de tela */
.ns16__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* =============================================================================
   RESPONSIVO
   No celular a experiência é recomposta, não encolhida.
   ========================================================================== */

/* notebook */
@media (max-width: 1279px) {

}

/* tablet */
@media (max-width: 1023px) {

  .ns16__middle { gap: clamp(24px, 5vh, 56px); }
}

/* celular e qualquer tela em retrato — a experiência é recomposta:
   texto em cima, centralizado; countdown numa linha só; cena embaixo */
@media (max-width: 719px), (max-aspect-ratio: 10/9) {
  .ns16 { --gutter: 20px; }

  /* O texto ocupa a parte de cima; a cena (Orsinho, semente, fio e árvore)
     fica livre embaixo, onde a pessoa consegue tocar sem esbarrar em texto. */
  .ns16__content {
    grid-template-rows: auto auto 1fr;
    /* a coluna nunca passa da tela, mesmo que algo dentro peça mais */
    grid-template-columns: minmax(0, 1fr);
    /* respiro entre o logo e a frase */
    gap: clamp(18px, 3.2vh, 34px);
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    /* véu para a leitura, dissolvendo antes de chegar no personagem */
    background:
      /* e um chão escuro no pé da tela, para os ícones lerem sobre a cena */
      linear-gradient(0deg, rgba(6,12,30,.78) 0%, rgba(6,12,30,.40) 7%, rgba(6,12,30,0) 14%),
      linear-gradient(180deg,
        rgba(6,12,30,.86) 0%, rgba(6,12,30,.70) 30%,
        rgba(6,12,30,.34) 50%, rgba(6,12,30,0) 66%);
  }

  .ns16__logo { width: clamp(124px, 36vw, 208px); justify-self: center; }

  .ns16__headline { text-align: center; }

  /* respiro entre a frase e o Pix */
  .ns16__middle { align-self: start; gap: clamp(18px, 2.8vh, 30px); padding-block: 0; }



  /* uma linha só, como no desktop: os quatro grupos lado a lado,
     espalhados na largura. O vão acompanha o corpo dos números, para o ":"
     sempre ter onde ficar — o JS conta com esse mesmo vão no cálculo. */
  /* centralizado e com o mesmo vão do desktop: o ":" fica sempre no meio
     entre os grupos (com space-between o vão crescia e o ":" ficava torto) */
  .ns16__clock {
    width: 100%;
    justify-content: center;
  }
  .ns16__digits { justify-content: center; }
  .ns16__label  { text-align: center; font-size: .54rem; letter-spacing: .16em; margin-top: 2px; white-space: nowrap; }

  /* o cartão do Pix ocupa a largura toda, mas continua em uma linha:
     cada pixel de altura aqui é pixel que o Orsinho perde lá embaixo */
  .ns16__pixCard {
    width: 100%;
    gap: 11px;
    padding: 10px 11px 10px 13px;
    border-radius: 14px;
  }
  .ns16__pixMark { width: 38px; height: 44px; }
  .ns16__pixInfo { flex: 1 1 auto; gap: 2px; }
  .ns16__pixLabel { font-size: .56rem; letter-spacing: .13em; }
  .ns16__pixKey { font-size: clamp(.92rem, 4.3vw, 1.1rem); }
  .ns16__pixBtn { padding: 10px 14px; font-size: .7rem; letter-spacing: .05em; }

  /* frase e Pix bem juntos; o countdown mantém o respiro dele */
  .ns16__count { margin-top: clamp(10px, 2.4vh, 22px); }

  /* o rodapé encosta no fim da tela, longe da semente */
  .ns16__footer { align-self: end; }


  .ns16__footer { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
  .ns16__rede { width: 50px; height: 50px; }
  .ns16__rede svg { width: 28px; height: 28px; }
}

/* celulares estreitos (320–360px): o cartão do Pix aperta sem sair da tela */
@media (max-width: 360px) {
  .ns16 { --gutter: 14px; }
  .ns16__pixCard { gap: 8px; padding: 9px 9px 9px 10px; }
  .ns16__pixMark { width: 30px; height: 36px; }
  .ns16__pixLabel { font-size: .5rem; letter-spacing: .08em; }
  .ns16__pixKey { font-size: 4.5vw; }
  .ns16__pixBtn { padding: 9px 10px; font-size: .64rem; letter-spacing: .03em; }
}
@media (max-width: 719px), (max-aspect-ratio: 10/9) {
  .ns16__pixInfo { min-width: 0; }
  .ns16__pixLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* telas pequenas de verdade (iPhone SE e afins): mais economia vertical */
@media (max-width: 719px) and (max-height: 700px) {
  .ns16__logo { width: clamp(112px, 33vw, 176px); }

  .ns16__content { gap: 14px; padding-top: max(12px, env(safe-area-inset-top)); }
  .ns16__middle { gap: 14px; }
  .ns16__hint { font-size: .62rem; letter-spacing: .1em; }
}

/* telas baixas em paisagem (celular deitado) */
@media (max-height: 480px) and (orientation: landscape) {
  .ns16__content { min-height: auto; padding-block: 14px; }
  .ns16__digits { font-size: clamp(2.2rem, 9vh, 5rem); }
  .ns16__middle { gap: 14px; }
}

/* =============================================================================
   PREFERÊNCIA POR MOVIMENTO REDUZIDO
   Sem parallax, sem entrada animada, sem pulsação contínua.
   A resposta luminosa ao acionamento continua existindo, simples.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ns16 *,
  .ns16 *::before,
  .ns16 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .ns16__logo, .ns16__headline, .ns16__count, .ns16__footer,
  .ns16__bg, .ns16__char { opacity: 1 !important; transform: none !important; }
  .ns16__scene { transform: none !important; }
  .ns16__seedCore, .ns16__seedHalo, .ns16__seedSpill {
    animation: none !important; opacity: 1 !important; transform: translate(0,0) scale(1) !important;
  }
  .ns16__seed.is-hot .ns16__seedCore { transform: scale(1.35) !important; }
  .ns16__char, .ns16__charImg { animation: none !important; }
  .ns16__tl { animation: none !important; opacity: 1 !important; transform: scale(1) !important; }
}

/* impressão: nada de cena, só a informação */
@media print {
  .ns16__stage { display: none; }
  .ns16 { color: #000; background: #fff; }
}