/*
 * A vitrine: a abertura, o ceu, o topo, o heroi e a mostra do produto.
 *
 * Herda os tokens de `estilos.css` — a mesma paleta e as mesmas fontes do painel. Nao e economia:
 * quem chega aqui, instala o painel e volta precisa reconhecer o mesmo produto nas duas telas.
 *
 * ## A unica fonte propria do produto
 *
 * Sora, so nos titulos das paginas PUBLICAS: 25 KB num arquivo que nunca muda de nome, servido
 * com cache de sete dias. Fora do Windows a Bahnschrift nao existe e o titulo caia em
 * `system-ui` — a home que um dono abre no celular tinha outra cara. Dentro do dashboard a
 * fonte de sistema continua, porque la o que importa e a ferramenta, e nao a primeira impressao.
 */

@font-face {
  font-family: 'Sora';
  src: url('fontes/sora-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

.vitrine {
  --titulo: 'Sora', Bahnschrift, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  /* A pagina USA a tela: em `68rem` sobravam 455px mortos de cada lado num monitor de 1920. Quem
     limita a MEDIDA do texto e cada bloco (`.chamada` 46ch, `.faixa-nota` 62ch). */
  width: min(100%, 100rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3.5rem) 4rem;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------------- abertura */

/*
 * A marca se resolvendo sobre a pagina ja pintada. Quem decide se ela toca e `intro.js`; aqui
 * so o desenho: o tile sobe, o nome se junta letra a letra, o fio de luz atravessa, e tudo sai.
 */
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background:
    radial-gradient(50% 40% at 50% 45%, rgba(124, 58, 237, 0.18), transparent 70%),
    var(--preto);
}

html.com-intro { overflow: hidden; }

.intro-caixa { display: flex; flex-direction: column; align-items: center; gap: 22px; }

.intro-tile {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--roxo-claro), var(--roxo));
  box-shadow: var(--relevo), 0 24px 60px -20px rgba(124, 58, 237, 0.9);
  object-fit: cover;
  animation: intro-tile 700ms var(--saida) both;
}

.intro-tile svg { width: 36px; height: 36px; }

.intro-marca {
  font-family: var(--titulo);
  font-size: clamp(1.9rem, 5vw, 2.7rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  background: linear-gradient(105deg, #EDE9F5, #A855F7 55%, #7C3AED 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: intro-marca 720ms var(--saida) 160ms both;
}

.intro-fio {
  width: min(320px, 60vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--roxo-claro), transparent);
  animation: intro-fio 820ms var(--saida) 340ms both;
}

.intro--saindo { animation: intro-sai 380ms var(--entrada) forwards; }

@keyframes intro-tile { from { opacity: 0; transform: scale(0.55) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-marca { from { opacity: 0; letter-spacing: 0.32em; filter: blur(6px); } to { opacity: 1; letter-spacing: -0.02em; filter: blur(0); } }
@keyframes intro-fio { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes intro-sai { to { opacity: 0; transform: scale(1.04); } }

/* --------------------------------------------------------------------------------- ceu */

/* O fundo da primeira tela: a luz do painel na sala escura, sobre uma grade de sala de controle.
   Elemento proprio porque o fundo do body nao aceita mascara, e a grade precisa SUMIR antes das
   secoes densas. */
.ceu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(64rem, 140vh);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(48rem 32rem at 50% -10rem, rgba(124, 58, 237, 0.26), transparent 70%),
    radial-gradient(34rem 24rem at 88% 4rem, rgba(168, 85, 247, 0.10), transparent 70%),
    radial-gradient(30rem 20rem at 8% 30rem, rgba(46, 16, 101, 0.35), transparent 70%),
    linear-gradient(to right, rgba(168, 85, 247, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 3.25rem 3.25rem, 3.25rem 3.25rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
}

/* ------------------------------------------------------------------------------- dinos */

/*
 * As silhuetas. Desenhadas em SVG inline, geometricas, no vocabulario da coroa da marca — e
 * NAO tracadas da arte do jogo. Custam bytes de texto, e nao megabytes de imagem.
 *
 * Elas sao decoracao com proposito: a pagina fala de dinossauros e nao mostrava nenhum. Ficam
 * atras de tudo, em roxo diluido, e nunca competem com o texto.
 */
.dino { position: absolute; pointer-events: none; z-index: -1; }
.dino path { fill: url(#dino-luz); }

/* O que anda: na base do heroi, atras da mostra. Desliza com a rolagem onde o navegador sabe. */
.dino-palco {
  position: absolute;
  right: -6vw;
  bottom: -2.5rem;
  /* Larga o bastante para a cabeca sair de tras da mostra, entre o texto e o cartao. */
  width: clamp(28rem, 54vw, 48rem);
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 0 48px rgba(124, 58, 237, 0.28));
}

.dino-chao { position: static; width: 100%; height: auto; animation: dino-respira 6s ease-in-out infinite; }

@keyframes dino-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@supports (animation-timeline: scroll()) {
  .dino-palco { animation: dino-desliza linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  @keyframes dino-desliza { from { transform: translateX(0); } to { transform: translateX(-18vw) translateY(4rem); opacity: 0.2; } }
}

/* O que plana: atravessa o ceu devagar, de um lado ao outro, e volta. */
.dino-ceu {
  top: clamp(4rem, 9vw, 7rem);
  right: -12rem;
  width: clamp(6rem, 9vw, 8.5rem);
  opacity: 0.55;
  animation: dino-plana 52s linear infinite;
}

@keyframes dino-plana {
  0% { transform: translate(0, 0) rotate(-4deg); }
  50% { transform: translate(calc(-100vw - 12rem), 3rem) rotate(2deg); }
  50.01% { transform: translate(calc(-100vw - 12rem), 3rem) rotate(2deg) scaleX(-1); }
  100% { transform: translate(0, 0) rotate(-4deg) scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) {
  .dino-ceu, .dino-chao, .dino-palco { animation: none; }
}

@media (max-width: 1079px) {
  .dino-palco { width: clamp(16rem, 60vw, 24rem); right: -4rem; bottom: -2rem; opacity: 0.6; }
}

/* ------------------------------------------------------------------------------- topo */

/* Tres zonas: a marca, as secoes no centro, e as acoes na direita, onde a mao espera o botao.
   No telefone as secoes descem para uma segunda linha que rola de lado. */
.vitrine-topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--preto) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 5;
}

@media (min-width: 46rem) { .vitrine-topo { position: sticky; top: 0; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vitrine-topo { background: var(--preto); }
}

.topo-marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }

/* O simbolo, em tamanho de menu. `marcaPublica.js` o troca pelo icone do Discord de quem vende. */
.topo-tile {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--roxo-claro), var(--roxo));
  box-shadow: var(--relevo), 0 8px 20px -10px var(--roxo);
  object-fit: cover;
}

.topo-tile svg { width: 15px; height: 15px; }

.topo-secoes { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }

.topo-secoes a {
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color var(--t-rapido) var(--entrada), border-color var(--t-rapido) var(--entrada);
}

.topo-secoes a:hover,
.topo-secoes a:focus-visible { color: var(--texto); }

/* A secao em que se esta: sublinhado fino na cor da marca, e nao um botao. */
.topo-secoes a.atual { color: var(--texto); border-bottom-color: var(--roxo-claro); }

.topo-acoes { display: flex; align-items: center; gap: 0.6rem; }
.topo-acoes a.primario { color: #fff; }

/* O idioma: globo e nome da lingua numa pilula. O <select> nativo continua la. */
.idioma {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 40px;
  padding: 0 0.4rem 0 0.7rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--elevado);
  color: var(--texto-fraco);
  cursor: pointer;
  box-shadow: var(--relevo);
  transition: border-color var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada);
}

.idioma:hover { color: var(--texto); border-color: var(--roxo); }

.idioma:focus-within {
  color: var(--texto);
  border-color: var(--roxo-claro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--roxo-claro) 28%, transparent);
}

.idioma-icone { width: 15px; height: 15px; flex: none; }

.idioma .seletor-idioma {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0 1.1rem 0 0.1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A79CB8' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.15rem center / 10px 6px;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.idioma .seletor-idioma:focus-visible { outline: none; }
.idioma .seletor-idioma option { background: var(--vidro); color: var(--texto); }

@media (max-width: 45.99rem) {
  .vitrine-topo { grid-template-columns: 1fr auto; }
  .topo-marca { grid-row: 1; grid-column: 1; }
  .topo-acoes { grid-row: 1; grid-column: 2; justify-self: end; gap: 0.5rem; }
  .topo-acoes a.primario { padding: 0 14px; font-size: 0.9rem; white-space: nowrap; }

  /* A pilula vira so o globo; o select nativo fica invisivel por cima — o toque abre a lista. */
  .idioma { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .idioma .seletor-idioma { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; }

  /* As secoes viram a segunda linha e rolam de lado, com alvo de toque de verdade (44px). */
  .topo-secoes {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.5rem;
  }

  .topo-secoes::-webkit-scrollbar { display: none; }
  .topo-secoes a { font-size: 0.84rem; padding: 0.6rem 0.6rem; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 0; border-radius: var(--raio-p); }
  .topo-secoes a.atual { background: rgba(168, 85, 247, 0.12); }
}

.faixa { scroll-margin-top: 1rem; }
@media (min-width: 46rem) { .faixa { scroll-margin-top: 5rem; } }

/* ------------------------------------------------------------------------------ recado */

.recado {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--erro);
  border-radius: var(--raio-m);
  background: color-mix(in srgb, var(--erro) 10%, transparent);
  color: var(--texto);
  font-size: 0.95rem;
}

/* Cancelar nao e falha, e nao pode ter a cor de falha. */
.recado--calmo { border-color: var(--borda); background: var(--elevado); color: var(--texto-fraco); }

/* ------------------------------------------------------------------------------- heroi */

/* Duas colunas a partir de 1080px: o argumento a esquerda, o produto a direita. As duas
   comecam JUNTAS no topo; centradas, a da direita descia e a primeira tela parecia solta. */
.heroi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
}

@media (min-width: 1080px) {
  .heroi { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(27rem, 33vw, 37rem)); }
}

.heroi-texto { min-width: 0; position: relative; z-index: 1; }

.sobrancelha {
  margin: 0 0 1.25rem;
  color: var(--roxo-claro);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.heroi h1 {
  text-wrap: balance;
  margin: 0;
  font-family: var(--titulo);
  font-size: clamp(2.5rem, 6.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* A segunda linha e a virada da frase, e carrega o unico destaque de cor do titulo. */
.heroi h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #C4B5FD, var(--roxo-claro) 60%, #7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(168, 85, 247, 0.3));
}

.chamada {
  text-wrap: pretty;
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--texto-fraco);
}

/*
 * A coluna da direita: o painel e a jornada, colados, um objeto so. A inclinacao mora AQUI —
 * `perspective()` DENTRO do transform — e e o que anuncia "isto e uma tela". Some abaixo de
 * 1080px, onde a mostra fica em coluna unica e cheia, e em reduced-motion.
 */
.heroi-vitrine { min-width: 0; position: relative; z-index: 1; animation: vitrine-entra var(--t-lento) var(--saida) 120ms both; }

@media (min-width: 1080px) {
  .heroi-vitrine { transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); }
  @keyframes vitrine-entra {
    from { opacity: 0; transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg) translateY(14px); }
    to { opacity: 1; transform: perspective(1600px) rotateY(-5deg) rotateX(1.5deg) translateY(0); }
  }
}

@media (max-width: 1079px) {
  @keyframes vitrine-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .heroi-vitrine { transform: none; animation: none; }
}