/* =============================================================================
   Cloudyn — A BASE
   Reset, corpo da página, o travamento de cada página na rolagem e a
   travessia entre elas. É o chão em que as seções se apoiam.

   Este arquivo é uma FATIA do antigo assets/css/loader.css, que guardava o site
   inteiro em 1511 linhas. A ordem de carga importa (ver o bloco de <link> no
   HTML): a cascata é a mesma de antes, arquivo a arquivo, na mesma sequência.
   ============================================================================= */

/* o reset saiu daqui para o assets/css/reset.css — ele valia para as três
   páginas e estava escrito nas três */

/* o cursor NATIVO nunca aparece — em elemento nenhum, em momento nenhum */
*, *::before, *::after { cursor: none !important; }

html {
  /* 'clip' e não 'hidden': hidden viraria um contexto de rolagem e quebraria o
     position:sticky que prende a apresentação na tela */
  overflow-x: clip;
  scrollbar-width: none;          /* Firefox: esconde a nativa (usamos a própria) */
  -ms-overflow-style: none;
}
body {
  min-height: 100vh;
  overflow-x: clip;
  /* TINTA, E NÃO OSSO. Corpo em osso dava um clarão em qualquer instante em
     que a seção escura ainda não estivesse pintada — ao descer da 1ª para a 2ª
     página, por exemplo. Quem é claro pinta o próprio claro: a home (.home) e
     o fecho (.fim). */
  background: var(--black);
  font-family: var(--body-font);
  /* o mesmo alisamento do aplicativo (apps/ui/src/styles/index.css): além de
     deixar as duas telas com o texto idêntico, tira a diferença de desenho
     entre um texto promovido a camada própria e um texto comum */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;   /* UI não-selecionável: evita "selecionar texto" ao clicar */
          user-select: none;
}
/* só o necessário é selecionável (campos de digitação) */
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* esconde a scrollbar nativa do WebKit — a própria é um overlay (#scrollbar) */
::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* trava a rolagem durante a intro; só libera quando a intro termina OU dá skip */
body:not(.scroll-ready) { height: 100vh; overflow: hidden; }

/* ===================== O TRAVAMENTO DE CADA PÁGINA =======================
   Cada seção prende na tela. Um empurrãozinho na roda não sai do lugar — a
   página volta para onde estava; só um gesto de verdade passa para a
   seguinte. E passa para a SEGUINTE, uma de cada vez: `scroll-snap-stop:
   always` proíbe o site de pular a 2ª página inteira num arremesso só.

   Vale a partir de `scroll-ready`, que é quando a intro solta a rolagem.
   Antes disso não há o que travar: o documento não rola.

   As guardas importam. Seção que não cabe na janela viraria armadilha com
   snap obrigatório — o pé dela ficaria inalcançável, porque ao soltar a
   rolagem volta para o topo da seção. Então o travamento só liga com altura
   suficiente e com ponteiro de verdade; em tela baixa, no toque e para quem
   pediu menos movimento, a rolagem fica livre.                              */
@media (min-height: 700px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:has(body.scroll-ready) {
    scroll-snap-type: y mandatory;
  }
  .home, .stage, .plans, .fim {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* ARRASTANDO A BARRA, O ENCAIXE SAI DE CENA.
     Encaixe obrigatório significa "puxe sempre" — inclusive no meio do arrasto,
     e aí a barra dava tranco a cada pixel e não dava para navegar com ela.
     Enquanto o retângulo está na mão, a rolagem é livre; ao soltar, o encaixe
     volta e a página assenta sozinha na seção mais perto.
     A classe é posta pelo próprio arrasto, em assets/js/loader.js.

     O seletor repete o `:has()` de propósito: `html.arrastando` sozinho perde
     para `html:has(body.scroll-ready)`, porque o `:has()` carrega a
     especificidade do que está dentro dele. Igualando os dois, vence quem vem
     depois — e depois é este. */
  html:has(body.scroll-ready).arrastando { scroll-snap-type: none; }
}
/* …e durante a intro a 2ª página fica FORA DE CENA. Sem isto ela cobre a tela
   de carga (z-index maior) e engole o clique no botão Revelar. */
body:not(.scroll-ready) .stage { visibility: hidden; pointer-events: none; }

/* ============ A TROCA DE PÁGINA — CONDUZIDA PELA ROLAGEM =================
   O travamento resolvia ONDE a página para; não resolvia o caminho até lá. A
   seção que saía apagava de um corte e a que entrava já estava inteira: dois
   estados, nenhuma travessia.

   Aqui quem controla o tempo da animação é a rolagem, não um relógio —
   `animation-timeline: view()`. O quadro exibido corresponde exatamente a
   quanto da seção está em cena: rolou metade, está na metade da animação;
   voltou, ela volta junto. É o que faz a troca parecer uma coisa contínua, e
   não dois slides trocando.

   Duas faixas por elemento, e por isso duas animações na mesma declaração:
   `entry` cuida da chegada, `exit` cuida da saída. Uma só não daria conta —
   `animation-range` vale para a animação inteira.

   Sem suporte (ou com menos movimento pedido), nada disso existe e o site
   continua igual: as entradas por classe que já estavam lá seguem valendo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* TEXTO SOLTO ANDA, MAS NÃO DESBOTA. Animar opacidade num bloco de texto
       sem fundo promove ele a uma camada própria, e aí o texto perde o
       antisserrilhado subpixel: o retângulo do bloco passa a se ler como um
       fundo de tom diferente, colado atrás das palavras. Por isso os blocos de
       texto só ANDAM — quem desbota é o cartão, que tem fundo próprio e
       compunha certo de qualquer jeito. */

    /* a 1ª página SAI. São as PALAVRAS que andam, e não os painéis: o painel
       de cima carrega a máscara líquida, que vive em coordenadas do documento
       — mover o painel deslocaria ele e deixaria a mancha para trás. */
    .home .word {
      animation: secao-sai-texto linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }

    /* a 2ª página SAI — a chegada dela já é a das palavras subindo */
    .stage__content {
      animation: secao-sai-texto linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }

    /* a 3ª página CHEGA e sai. A chegada é a vida que faltava aqui: o título
       e os três cartões sobem conforme a seção entra, cada um no seu tempo. */
    .plans__head {
      animation: secao-chega-texto linear both, secao-sai-texto linear both;
      animation-timeline: view(), view();
      animation-range: entry 6% entry 66%, exit 0% exit 92%;
    }
    .plan {
      animation: secao-chega linear both;
      animation-timeline: view();
    }
    /* o escalonamento é feito na FAIXA, não num atraso: atraso é tempo, e aqui
       não há relógio — o que existe é posição. Cada cartão completa a sua
       entrada um pouco depois do anterior. */
    .plan:nth-child(1) { animation-range: entry 10% entry 68%; }
    .plan:nth-child(2) { animation-range: entry 16% entry 76%; }
    .plan:nth-child(3) { animation-range: entry 22% entry 84%; }

    .plans__grid {
      animation: secao-sai-texto linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 92%;
    }
  }
}

/* com desbote: para o que tem fundo próprio (os cartões) */
@keyframes secao-chega {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}
@keyframes secao-sai {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-46px); }
}
/* só movimento: para texto solto sobre o fundo da seção */
@keyframes secao-chega-texto {
  from { transform: translateY(38px); }
  to   { transform: none; }
}
@keyframes secao-sai-texto {
  from { transform: none; }
  to   { transform: translateY(-46px); }
}

/* defs SVG fora de fluxo (estava no fim do antigo loader.css) */
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }