/* =========================================================
   Bemorrow.today
   A hero: o ceu (camada fixa .cosmos) com o sol no meio.
   Descendo, o lockup fecha em volta do sol, o sol recua para o
   topo e o preto do site sobe por cima de tudo.
   ========================================================= */

/* progresso — os estados escondidos sao gated por .has-js (classe posta
   no <head>), entao sem JS nada depende destes valores iniciais.
   inherits: false de proposito: mudam a cada quadro da descida, e uma
   variavel herdada obriga o navegador a recalcular todos os descendentes
   de quem a recebe — as 154 estrelas, quando o ceu subia 1px. O hero.js
   escreve cada uma direto nos elementos que a leem (a tabela READERS). */
@property --p   { syntax: '<number>'; inherits: false; initial-value: 0; }  /* palco 0→1        */
@property --ps  { syntax: '<number>'; inherits: false; initial-value: 0; }  /* sol recua        */
@property --r   { syntax: '<number>'; inherits: false; initial-value: 0; }  /* "today." sobe    */
@property --r2  { syntax: '<number>'; inherits: false; initial-value: 0; }  /* rodape           */
@property --o   { syntax: '<number>'; inherits: false; initial-value: 1; }  /* saida do texto   */
@property --mx  { syntax: '<number>'; inherits: false; initial-value: 0; }  /* ponteiro X -1→1  */
@property --my  { syntax: '<number>'; inherits: false; initial-value: 0; }  /* ponteiro Y -1→1  */

:root{
  /* universo */
  --void:    #000000;
  --void-2:  #010207;

  /* luz */
  --cream:   #F7F0E4;
  --cream-2: rgba(247,240,228,.58);
  --cream-3: rgba(247,240,228,.2);
  --gold:    #F5B45C;

  /* ── o sol: comeca grande no meio, termina pequeno no topo ── */
  --sun-d:   21svh;
  --sun-y:   39svh;
  --sun-k:   .22;      /* escala final */
  --sun-dy:  -27svh;   /* quanto sobe   */

  /* tipografia
     medido no navegador: "Bemorrow," junto ocupa 3.483em e "today." 1.887em.
     --split maior que ~.18em prioriza o vao entre "Be" e "morrow," sobre o
     casamento da borda esquerda com "today." — as duas linhas ficam um
     pouco desalinhadas, de proposito. */
  --word-b: clamp(3.8rem, 24vw, 20rem);
  --word-a: calc(var(--word-b) * .491);
  --split:  .32em;     /* o passo do "Be" para a esquerda */

  /* as bordas do sol: as duas palavras se ancoram nelas */
  --sun-top: calc(var(--sun-y) - var(--sun-d) / 2);
  --sun-bot: calc(var(--sun-y) + var(--sun-d) / 2);
  --gap-a:   -2svh;    /* da base de "bemorrow," ate o topo do sol */
  --gap-b:   -2svh;    /* do pe do sol ate o topo das letras de "today." */
  --gutter: clamp(20px, 4.4vw, 60px);

  --display: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  /* Instrument Sans e da mesma casa da Instrument Serif do lockup: e a
     grotesca de tudo que vem depois do sol, no papel que a Suisse Int'l
     Medium faz no fantasy.co */
  --sans:    'Instrument Sans', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ease:     cubic-bezier(.22,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.28,1);
}

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-size: clamp(15px, .5vw + 13.8px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* "clip", nao "hidden": hidden faria do body um contêiner de scroll
     e quebraria o position:sticky da hero */
  overflow-x: clip;
}

::selection{ background: var(--gold); color: var(--void); }

a{ color: inherit; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 3px; }

.skip{
  position: absolute; left: 12px; top: -64px; z-index: 99;
  background: var(--cream); color: var(--void);
  padding: 10px 16px; border-radius: 999px;
  font-size: .85rem; text-decoration: none;
}
.skip:focus{ top: 12px; }

/* ─────────────  NAV  ───────────── */

.nav{
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(16px, 2.6vh, 28px) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s var(--ease);
}
.nav--scrolled{
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(247,240,228,.09);
}
/* por cima do painel claro do fim, a nav inverte (site.js poe a classe) */
.nav--light{
  background: rgba(247,240,228,.74);
  border-bottom-color: rgba(10,10,11,.08);
}
.nav--light .nav__mark{ color: #0A0A0B; }
.nav--light .nav__dim{ color: rgba(10,10,11,.56); }
.nav--light .nav__links a{ color: rgba(10,10,11,.66); }
.nav--light .nav__links a:hover{ color: #0A0A0B; }
.nav--light .nav__cta{ border-color: rgba(10,10,11,.28); }
.nav--light .nav__cta:hover{ background: #0A0A0B; border-color: #0A0A0B; color: var(--cream); }
.nav--light :focus-visible{ outline-color: #0A0A0B; }

.nav__mark{
  font-size: .92rem; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; color: var(--cream);
}
.nav__dim{ color: var(--cream-2); font-weight: 400; }

.nav__links{ display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav__links a{
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--cream-2);
  transition: color .4s var(--ease);
}
.nav__links a:hover{ color: var(--cream); }
.nav__cta{
  padding: .62em 1.15em; border-radius: 999px;
  border: 1px solid var(--cream-3);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover{ background: var(--cream); border-color: var(--cream); color: var(--void); }

@media (max-width: 640px){
  .nav__links a:not(.nav__cta){ display: none; }
}

/* =========================================================
   O UNIVERSO — camada fixa atras do site inteiro
   ========================================================= */

.cosmos{
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
/* depois da hero o preto do site cobre o ceu inteiro: site.js poe
   .cosmos-off e o ceu para de ser desenhado e de animar */
.cosmos-off .cosmos{ visibility: hidden; }
/* !important: cada estrela traz o atalho "animation" no proprio style, e
   as regras de entrada do sol (.has-js .sun__*) vem depois deste bloco —
   um atalho redefine o play-state para running. Sem o !important, o sol
   continuava respirando e girando escondido no site inteiro */
.cosmos-off .cosmos *,
.cosmos-off .cosmos *::before{ animation-play-state: paused !important; }

.deep{
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 44% at 50% 40%, rgba(9,13,26,.3) 0%, transparent 72%),
    linear-gradient(to bottom, var(--void) 0%, var(--void-2) 52%, var(--void) 100%);
}

/* ── estrelas: 154 pontos, nenhum grande (.85 a 1.7px), cada uma com seu
      tamanho, brilho, temperatura, periodo e fundo de pulsacao ──

   Cada <span> traz os proprios valores em propriedades de verdade:
     left/top      posicao
     width/height  tamanho
     background    a cor (branco, ambar, azul-frio) com o BRILHO no alfa
     box-shadow    a aura: 3x o tamanho, alfa .42 x o brilho
     animation     twNN, periodo, fase. NN e o fundo da pulsacao: tw23
                   apaga ate 23% do brilho, tw62 quase nao pisca —
                   estrelas variaveis, cada uma no seu ritmo

   Nada de var() aqui, de proposito. Durante a descida o navegador
   reamostra as 154 animacoes a cada quadro, e var() na estrela (no
   estilo ou no @keyframes) dobra o custo disso. Pelo mesmo motivo elas
   moram num involucro (.stars__in): o .stars recebe as variaveis do
   scroll, e uma variavel que muda no pai obriga o navegador a
   recalcular os filhos do zero — 4ms por quadro, medidos. */

.stars{
  position: absolute; inset: -18% 0;
  /* --p sobe o ceu durante a hero */
  transform: translate3d(calc(var(--mx) * -3px),
                         calc(var(--p) * -5svh + var(--my) * -2px), 0);
  will-change: transform;
}
.stars__in{ position: absolute; inset: 0; }
.stars span{ position: absolute; border-radius: 50%; }
/* com JS, as estrelas saem do DOM e vao para um canvas do tamanho da
   tela, desenhado numa thread propria (stars.js); os <span> ficam de
   reserva e voltam se o canvas falhar */
.stars__cv{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.stars--cv .stars__in{ display: none; }

@keyframes tw23{ 0%, 100%{ opacity: .23; } 50%{ opacity: 1; } }
@keyframes tw24{ 0%, 100%{ opacity: .24; } 50%{ opacity: 1; } }
@keyframes tw25{ 0%, 100%{ opacity: .25; } 50%{ opacity: 1; } }
@keyframes tw26{ 0%, 100%{ opacity: .26; } 50%{ opacity: 1; } }
@keyframes tw27{ 0%, 100%{ opacity: .27; } 50%{ opacity: 1; } }
@keyframes tw28{ 0%, 100%{ opacity: .28; } 50%{ opacity: 1; } }
@keyframes tw29{ 0%, 100%{ opacity: .29; } 50%{ opacity: 1; } }
@keyframes tw30{ 0%, 100%{ opacity: .30; } 50%{ opacity: 1; } }
@keyframes tw31{ 0%, 100%{ opacity: .31; } 50%{ opacity: 1; } }
@keyframes tw32{ 0%, 100%{ opacity: .32; } 50%{ opacity: 1; } }
@keyframes tw33{ 0%, 100%{ opacity: .33; } 50%{ opacity: 1; } }
@keyframes tw34{ 0%, 100%{ opacity: .34; } 50%{ opacity: 1; } }
@keyframes tw36{ 0%, 100%{ opacity: .36; } 50%{ opacity: 1; } }
@keyframes tw37{ 0%, 100%{ opacity: .37; } 50%{ opacity: 1; } }
@keyframes tw38{ 0%, 100%{ opacity: .38; } 50%{ opacity: 1; } }
@keyframes tw39{ 0%, 100%{ opacity: .39; } 50%{ opacity: 1; } }
@keyframes tw40{ 0%, 100%{ opacity: .40; } 50%{ opacity: 1; } }
@keyframes tw41{ 0%, 100%{ opacity: .41; } 50%{ opacity: 1; } }
@keyframes tw42{ 0%, 100%{ opacity: .42; } 50%{ opacity: 1; } }
@keyframes tw43{ 0%, 100%{ opacity: .43; } 50%{ opacity: 1; } }
@keyframes tw44{ 0%, 100%{ opacity: .44; } 50%{ opacity: 1; } }
@keyframes tw45{ 0%, 100%{ opacity: .45; } 50%{ opacity: 1; } }
@keyframes tw46{ 0%, 100%{ opacity: .46; } 50%{ opacity: 1; } }
@keyframes tw47{ 0%, 100%{ opacity: .47; } 50%{ opacity: 1; } }
@keyframes tw48{ 0%, 100%{ opacity: .48; } 50%{ opacity: 1; } }
@keyframes tw49{ 0%, 100%{ opacity: .49; } 50%{ opacity: 1; } }
@keyframes tw50{ 0%, 100%{ opacity: .50; } 50%{ opacity: 1; } }
@keyframes tw51{ 0%, 100%{ opacity: .51; } 50%{ opacity: 1; } }
@keyframes tw52{ 0%, 100%{ opacity: .52; } 50%{ opacity: 1; } }
@keyframes tw53{ 0%, 100%{ opacity: .53; } 50%{ opacity: 1; } }
@keyframes tw54{ 0%, 100%{ opacity: .54; } 50%{ opacity: 1; } }
@keyframes tw55{ 0%, 100%{ opacity: .55; } 50%{ opacity: 1; } }
@keyframes tw56{ 0%, 100%{ opacity: .56; } 50%{ opacity: 1; } }
@keyframes tw57{ 0%, 100%{ opacity: .57; } 50%{ opacity: 1; } }
@keyframes tw58{ 0%, 100%{ opacity: .58; } 50%{ opacity: 1; } }
@keyframes tw59{ 0%, 100%{ opacity: .59; } 50%{ opacity: 1; } }
@keyframes tw60{ 0%, 100%{ opacity: .60; } 50%{ opacity: 1; } }
@keyframes tw61{ 0%, 100%{ opacity: .61; } 50%{ opacity: 1; } }
@keyframes tw62{ 0%, 100%{ opacity: .62; } 50%{ opacity: 1; } }

/* ── meteoros: um risco minusculo atravessa o fundo de vez em quando ──
   Cada um anda so nos primeiros 6% do seu ciclo (--cyc, 97s a 211s) e
   fica invisivel o resto do tempo — a travessia leva de 6s a 13s, entao
   ele passa devagar e o ceu fica quieto por um minuto ou mais. Com fases
   (--d) diferentes, nunca coincidem. A cabeca vai na frente, o rastro atras. */

.meteors{
  position: absolute; inset: 0;
  transform: translate3d(calc(var(--mx) * -3px),
                         calc(var(--p) * -5svh + var(--my) * -2px), 0);
}
.meteors span{
  position: absolute; left: var(--x); top: var(--y);
  width: var(--len); height: 1px;
  /* gira em volta da cabeca (ponta direita), depois anda no eixo dela */
  transform-origin: 100% 50%;
  transform: rotate(var(--ang)) translate3d(0, 0, 0);
  background: linear-gradient(90deg,
      rgba(255,250,242,0) 0%, rgba(255,250,242,.2) 60%, rgba(255,252,246,.8) 100%);
  opacity: 0;
  animation: shoot var(--cyc) linear infinite var(--d);
}
.meteors span::after{
  content: ''; position: absolute; right: -.5px; top: 50%;
  width: 1.6px; height: 1.6px; margin-top: -.8px;
  border-radius: 50%; background: #FFFDF8;
  box-shadow: 0 0 4px rgba(255,248,232,.65);
}

@keyframes shoot{
  0%   { opacity: 0;        transform: rotate(var(--ang)) translate3d(0, 0, 0); }
  1%   { opacity: var(--a); }
  4.6% { opacity: var(--a); }
  6%   { opacity: 0;        transform: rotate(var(--ang)) translate3d(var(--far), 0, 0); }
  100% { opacity: 0;        transform: rotate(var(--ang)) translate3d(var(--far), 0, 0); }
}

/* ═══════════  O SOL  ═══════════
   Sol de fotografia estourada: o centro nao tem cor, so branco puro.
   Nada de textura, mancha ou borda — o que da forma e a queda de luz,
   que sai do branco, passa pelo creme e morre no dourado. Os raios
   existem, mas no limite do visivel: sao variacoes do brilho, nao
   feixes desenhados.  */

.sun{
  position: absolute; left: 50%; top: var(--sun-y);
  width: var(--sun-d); height: var(--sun-d);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--mx) * -5px), calc(var(--sun-dy) * var(--ps) + var(--my) * -4px))
    scale(calc(1 - (1 - var(--sun-k)) * var(--ps)));
  will-change: transform;
}

/* o corpo: branco chapado no meio, sem limite duro em lugar nenhum.
   Do branco ao dourado a passagem e curta — e o que faz o miolo
   parecer queimado em vez de pintado de amarelo. */
.sun__disc{
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      #FFFFFF 0%, #FFFFFF 45%,
      rgba(255,253,243,.99) 57%,
      rgba(255,242,198,.94) 69%,
      rgba(255,222,142,.78) 80%,
      rgba(255,198,96,.46)  89%,
      rgba(253,180,74,.17)  96%,
      rgba(251,172,66,0)   100%);
}

/* o estouro: a luz que vaza por cima da propria borda e a apaga */
.sun__rim{
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(closest-side,
      rgba(255,249,228,.5)  0%,
      rgba(255,234,172,.44) 34%,
      rgba(255,206,112,.32) 52%,
      rgba(253,180,76,.17)  70%,
      rgba(248,160,58,.055) 85%,
      transparent 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
}

/* o halo e a coroa tem duas animacoes cada: a ignicao e o movimento
   que fica (respirar, girar). No mesmo elemento, duas animacoes de
   transform nao rodam no compositor — e basta UMA animacao na thread
   principal para o navegador recalcular, a cada quadro, todas as outras
   (as 154 estrelas junto). Por isso o desenho mora no ::before, que
   leva o movimento, e o elemento so faz a ignicao. */

/* o dourado que toma o ceu em volta e some no preto.
   Cada parada vale mais ou menos metade da anterior: a queda nunca
   tem joelho, entao o halo acaba sem deixar circulo nenhum atras. */
.sun__halo{ position: absolute; inset: -150%; }
.sun__halo::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255,230,168,.48)  0%,
      rgba(255,216,138,.32)  8%,
      rgba(255,199,108,.21) 16%,
      rgba(253,182,84,.135)    24%,
      rgba(250,166,66,.086)  33%,
      rgba(246,152,54,.054)   42%,
      rgba(242,138,44,.034)  52%,
      rgba(238,126,38,.019)  62%,
      rgba(234,116,32,.0095)  73%,
      rgba(230,108,28,.003)  85%,
      rgba(228,104,26,0)    100%);
  filter: blur(12px);
}

/* os raios: oito setores largos, quase nada de opacidade e muito borrao.
   De perto nao se acha nenhum; de longe o halo so parece vivo. */
.sun__corona{ position: absolute; inset: -170%; }
.sun__corona::before{
  content: ''; position: absolute; inset: 0;
  background: conic-gradient(
      rgba(255,222,160,0)    0deg, rgba(255,230,176,.085)  22deg, rgba(255,222,160,0)  46deg,
      rgba(255,222,160,0)   66deg, rgba(255,230,176,.055)  88deg, rgba(255,222,160,0) 110deg,
      rgba(255,222,160,0)  130deg, rgba(255,230,176,.095) 152deg, rgba(255,222,160,0) 176deg,
      rgba(255,222,160,0)  196deg, rgba(255,230,176,.05)  214deg, rgba(255,222,160,0) 236deg,
      rgba(255,222,160,0)  256deg, rgba(255,230,176,.09)  278deg, rgba(255,222,160,0) 302deg,
      rgba(255,222,160,0)  322deg, rgba(255,230,176,.055) 342deg, rgba(255,222,160,0) 360deg);
  filter: blur(12px);
  -webkit-mask-image: radial-gradient(closest-side, transparent 20%, rgba(0,0,0,.5) 36%, transparent 84%);
          mask-image: radial-gradient(closest-side, transparent 20%, rgba(0,0,0,.5) 36%, transparent 84%);
  will-change: transform;
}

/* ── atmosfera da cena ── */

.vignette{
  position: absolute; inset: 0;
  background: radial-gradient(116% 86% at 50% 42%,
      rgba(0,0,0,0) 32%, rgba(0,0,0,.46) 72%, rgba(0,0,0,.82) 100%);
}

/* grao por cima de tudo, inclusive do conteudo */
.grain{
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: .4; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

/* =========================================================
   CONTEÚDO — rola por cima do universo
   ========================================================= */

main{ position: relative; z-index: 1; }

/* 300vh = duas telas de descida. Era 400vh quando a Terra ainda tinha um
   terceiro ato; as faixas do hero.js foram reescaladas para que cada
   gesto aconteca no mesmo pixel de scroll de antes */
.stage{ position: relative; height: 300vh; }

.hero{
  position: sticky; top: 0;
  height: 100svh; min-height: 540px;
  opacity: var(--o);
}
.hero--gone{ visibility: hidden; }   /* depois que o texto sai, nao intercepta foco */

/* ─────────────  TIPOGRAFIA  ───────────── */

.lockup{ position: absolute; inset: 0; margin: 0; font-weight: 400; }

.word{
  position: absolute; left: 0; right: 0;
  display: block; text-align: center;
  font-family: var(--display);
  line-height: .82; letter-spacing: -.03em;
  /* metade do letter-spacing sobra depois da ultima letra e desloca o texto
     centrado; o text-indent devolve a palavra ao centro optico */
  text-indent: -.015em;
}
.word__in{ display: block; }

/* Metricas da Instrument Serif, medidas no navegador (em em):
     ascent 0.99 | descent 0.31 | ink acima da base 0.74 | ink abaixo 0.17-0.205
   Com line-height .82 sobra (1.30 - .82) / 2 = .24em de meia-entrelinha de cada
   lado, entao: linha de base = topo da caixa + .75em; topo do ink = topo + .01em. */
.word--a{
  /* ancorado pela base: a linha de base pousa --gap-a acima do sol */
  top: auto;
  bottom: calc(100% - var(--sun-top) + var(--gap-a) - .07em);
  font-size: var(--word-a);
  color: var(--cream);
}
/* o "Be" se descola do "morrow," e a marca vira frase: "Be morrow, today."
   quem anda e so o "Be": um passo de --split para a esquerda. O "morrow," fica
   exatamente onde nasceu — por isso o vao e transform e nao margem, que mudaria
   a largura da linha e o centro levaria o "morrow," junto */
.word--a .be{ display: inline-block; transform: translateX(calc(var(--split) * -1)); }
/* desce ate o sol — o text-indent compensa o espaco que o letter-spacing
   deixa depois da ultima letra */
.has-js .word--a{
  transform: translate3d(0, calc((1 - var(--r)) * -6svh), 0);
  will-change: transform;
}
.has-js .word--a .be{
  transform: translate3d(calc(var(--r) * var(--split) * -1), 0, 0);
  will-change: transform;
}

.word--b{
  /* o topo das letras pousa --gap-b abaixo do sol */
  top: calc(var(--sun-bot) + var(--gap-b) - .01em);
  font-size: var(--word-b);
  text-shadow: 0 6px 40px rgba(0,0,0,.72);
}
.word--b .word__in{
  /* o topo das letras pega a luz que vem de cima */
  background: linear-gradient(180deg, #FFE7BD 0%, #F9DEB5 18%, var(--cream) 54%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* "today." sobe de baixo, focando, e trava sob o sol */
.has-js .word--b{
  transform: translate3d(0, calc((1 - var(--r)) * 24svh), 0);
  opacity: clamp(0, calc(var(--r) * 1.7 - .14), 1);
  filter: blur(calc((1 - var(--r)) * 9px));
  will-change: transform, filter;
}

/* quando a descida assenta, o texto larga a camada por UM quadro e a
   retoma: a camada volta nova e e rasterizada do zero, no lugar. Sem
   isso o navegador guardava as letras na fase de subpixel de algum
   quadro do meio do deslize, e o lockup parado ficava 14% menos nitido
   (medido). Parado, ele continua em camada propria, como sempre foi —
   repintado fora dela o desenho das bordas muda uma fracao de pixel */
.has-js .hero--repaint .word--a,
.has-js .hero--repaint .word--a .be,
.has-js .hero--repaint .word--b{ will-change: auto; }

/* ─────────────  RODAPÉ DA HERO  ───────────── */

.meta{
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(24px, 4.6svh, 56px);
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  gap: clamp(14px, 2.4svh, 26px) 24px;
}
.meta__rule{
  grid-column: 1 / -1;
  height: 1px; background: var(--cream-3);
  transform-origin: left center;
}
.has-js .meta__rule{ transform: scaleX(var(--r2)); }

.meta__text{
  margin: 0;
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.85; color: var(--cream-2);
}
.meta__cta{
  justify-self: end;
  display: inline-flex; align-items: center; gap: .6em;
  padding-bottom: 4px;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--cream);
  border-bottom: 1px solid var(--cream-3);
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.meta__cta span{ transition: transform .45s var(--ease); }
.meta__cta:hover{ border-bottom-color: var(--gold); color: var(--gold); }
.meta__cta:hover span{ transform: translateX(5px); }

.has-js .meta__text,
.has-js .meta__cta{
  opacity: var(--r2);
  transform: translate3d(0, calc((1 - var(--r2)) * 16px), 0);
}

/* ─────────────  CONVITE AO SCROLL  ───────────── */

.cue{
  position: absolute; left: 50%;
  bottom: clamp(24px, 4.6svh, 56px);
  margin: 0; transform: translateX(-50%);
  color: var(--cream-2);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: calc(1 - var(--p) * 6);
  pointer-events: none;
}
.cue__in{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cue__line{
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(247,240,228,.05), rgba(247,240,228,.75));
  transform-origin: top center;
  animation: cue 2.9s var(--ease) infinite;
}

/* ─────────────  ENTRADA (cinema slow-in)  ───────────── */

@keyframes fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes focus{
  from{ opacity: 0; filter: blur(16px); }
  to  { opacity: 1; filter: blur(0); }
}
@keyframes ignite{
  from{ opacity: 0; transform: scale(.82); }
  to  { opacity: 1; transform: none; }
}
@keyframes cue{
  0%  { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100%{ transform: scaleY(1); opacity: 0; }
}
/* uma estrela nao fica parada: o halo respira e a coroa gira devagar.
   Entram depois da ignicao — por isso o delay maior que a entrada. */
@keyframes breathe{
  from{ transform: scale(1);    opacity: .9; }
  to  { transform: scale(1.06); opacity: 1;  }
}
@keyframes turn{ to{ transform: rotate(1turn); } }

/* as entradas terminam em "backwards", nao "both": o estado final delas
   e o natural do elemento, e "both" deixava a animacao viva para sempre —
   o blur(0) do "focus" prendia o "Bemorrow," numa superficie de filtro e
   cada "fade" prendia uma camada (3 dos 11 passes de cada quadro). As do
   sol continuam "both": a borda mescla em screen com o halo, e isso
   depende de cada camada continuar onde esta */
.has-js .deep,
.has-js .stars,
.has-js .stars__cv        { animation: fade 2.4s var(--ease-out) backwards; }
.has-js .sun__disc,
.has-js .sun__rim,
.has-js .sun__halo        { animation: ignite 2.8s var(--ease-out) both .15s; }
.has-js .sun__halo::before{ animation: breathe 9s ease-in-out 3s infinite alternate; }
.has-js .sun__corona      { animation: ignite 3.4s var(--ease-out) both .3s; }
.has-js .sun__corona::before{ animation: turn 300s linear 3.4s infinite; }
.has-js .word--a .word__in{ animation: focus 1.9s var(--ease-out) backwards .5s; }
.has-js .nav              { animation: fade 1.2s var(--ease-out) backwards 1.5s; }
.has-js .cue__in          { animation: fade 1.2s var(--ease-out) backwards 1.9s; }

/* ─────────────  RESPONSIVO  ───────────── */

/* telefone em pé. Deitado, ele fica com as regras de tela baixa, abaixo:
   até 01/10/2026 este bloco valia para qualquer tela de até 720px, e o
   telefone deitado (667×375) herdava o "today." a 33vw — 220px de letra
   numa tela de 375, com o "Bemorrow," por cima do menu */
@media (max-width: 720px) and (orientation: portrait){
  :root{
    --sun-d: 17svh; --sun-y: 34svh; --sun-k: .26; --sun-dy: -22svh;
    --word-b: 33vw;
    --gap-a: 1.2svh;
    --gap-b: 1.2svh;
  }
  .stage{ height: 290vh; }
  .meta{ grid-template-columns: 1fr; justify-items: start; }
  .meta__cta{ justify-self: start; }
}

@media (max-height: 620px) and (orientation: landscape){
  :root{
    --sun-d: 16svh; --sun-y: 34svh; --sun-dy: -20svh;
    --word-b: clamp(3rem, 15vw, 9rem);
  }
}

/* tela baixa: o telefone deitado, de 300 a 430px de altura (já sem a
   barra do navegador). A hero passa a se medir só pela altura — o menu
   encolhe, o lockup fica todo em svh e a hero larga o min-height de
   540px, que passava da tela e deixava o rodapé dela (a frase e o
   "start a project") abaixo da dobra. O sol termina a descida logo
   abaixo do menu, não por trás dele. */
@media (max-height: 500px) and (orientation: landscape){
  :root{
    --sun-d: 14svh; --sun-y: 44svh; --sun-k: .3; --sun-dy: -23svh;
    --word-b: 20svh;
    --gap-a: -1.4svh;
    --gap-b: -1.4svh;
  }
  .nav{ padding-block: 10px; }
  .hero{ min-height: 0; }
  .meta{ bottom: 18px; row-gap: 10px; }
}

/* no toque, os links de texto do menu ganham área de toque sem mudar de
   lugar: o padding cresce para fora e a margem negativa o devolve */
@media (pointer: coarse){
  .nav__links a:not(.nav__cta){ padding-block: 10px; margin-block: -10px; }
}

/* ─────────────  PREFERÊNCIAS  ───────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  /* !important: as regras de entrada sao mais especificas */
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .has-js .word--b{ transform: none; filter: none; opacity: 1; }
  .cue{ display: none; }
  .meteors{ display: none; }
}