/* ─────────────────────────────────────────────────────────────────────────────
   Packed · landing "coming soon"

   Design system tirado da tela do Figma (frame 1440 × 1024). Os valores
   máximos de cada token são exatamente os do Figma; abaixo de 1440px eles
   descem em linha reta até o mínimo, atingido em 390px (celular).

   Fontes: Forrest (títulos) e General Sans (todo o resto), servidas daqui.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Forrest";
  src: url("./assets/fonts/Forrest-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("./assets/fonts/GeneralSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("./assets/fonts/GeneralSans-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Cor ───────────────────────────────────────────── */
  --color-ink: #151515; /* moldura, texto, botão */
  --color-cream: #fbefdb; /* campo, texto do botão, recheio do logo */
  --color-stroke: #000000; /* borda dos controles */
  --color-card: var(--color-ink); /* atrás do vídeo: sem flash branco enquanto carrega */
  --color-placeholder: #6e675d; /* ink clareado sobre o creme (5:1) */

  /* ── Tipografia ────────────────────────────────────── */
  --font-display: "Forrest", Georgia, "Times New Roman", serif;
  --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-display: clamp(2rem, 1.35rem + 2.667vw, 3.75rem); /* 32 → 60 */
  --text-lead: clamp(1.125rem, 0.846rem + 1.143vw, 1.875rem); /* 18 → 30 */
  --text-control: clamp(1.0625rem, 0.877rem + 0.762vw, 1.5625rem); /* 17 → 25 */

  /* ── Forma ─────────────────────────────────────────── */
  --frame-gap-y: clamp(0.75rem, -0.0625rem + 3.333vw, 2.9375rem); /* 12 → 47: moldura escura */
  --frame-gap-x: clamp(0.75rem, -0.109rem + 3.524vw, 3.0625rem); /* 12 → 49 */
  --radius-card: clamp(1rem, 0.907rem + 0.381vw, 1.25rem); /* 16 → 20 */
  --radius-control: 0.875rem; /* 14 */
  --stroke: 2px;

  --control-height: clamp(3.25rem, 2.995rem + 1.048vw, 3.9375rem); /* 52 → 63 */
  --control-pad-x: clamp(1.125rem, 0.9625rem + 0.667vw, 1.5625rem); /* 18 → 25 */
  --button-width: clamp(150px, 134.8px + 3.905vw, 191px); /* 150 → 191 */
  --form-gap: clamp(12px, 9.4px + 0.667vw, 19px); /* 12 → 19 */

  --logo-width: clamp(190px, 154.3px + 9.143vw, 286px);

  /* Espaçamento vertical entre os blocos (logo → título → subtítulo → form) */
  --space-logo: clamp(2.5rem, 2.082rem + 1.714vw, 3.625rem);
  --space-title: clamp(1.25rem, 0.566rem + 2.857vw, 3.125rem); /* 20 → 50 */
  --space-lead: clamp(1.5rem, 1.314rem + 0.762vw, 2rem); /* 24 → 32 */

  /* No Figma o conjunto não está no centro exato do cartão: fica 5,5px abaixo.
     O deslocamento entra como padding no topo (metade dele vira descida). */
  --hero-offset: clamp(0rem, -0.255rem + 1.048vw, 0.6875rem); /* 0 → 11 */

  /* Tamanho do bloco central (logo + textos + form) em relação ao Figma.
     No celular fica 1 (já está no limite de leitura); do tablet para cima
     o bloco inteiro encolhe junto, sem mudar a proporção entre as partes. */
  --hero-scale: 1;

  /* Contorno creme atrás do texto, para ler sobre o vídeo. Em `em` para
     acompanhar o corpo: 1/6 dá 10px no título de 60px e 5px no subtítulo
     de 30px, e continua proporcional no celular. Feito com sombras em
     anel (e não -webkit-text-stroke) para as quinas saírem arredondadas
     como no logo, sem espetar nas serifas da Forrest. */
  --text-outline:
    0.1667em 0.0000em 0 var(--color-cream),
    0.1641em 0.0289em 0 var(--color-cream),
    0.1566em 0.0570em 0 var(--color-cream),
    0.1443em 0.0833em 0 var(--color-cream),
    0.1277em 0.1071em 0 var(--color-cream),
    0.1071em 0.1277em 0 var(--color-cream),
    0.0833em 0.1443em 0 var(--color-cream),
    0.0570em 0.1566em 0 var(--color-cream),
    0.0289em 0.1641em 0 var(--color-cream),
    0.0000em 0.1667em 0 var(--color-cream),
    -0.0289em 0.1641em 0 var(--color-cream),
    -0.0570em 0.1566em 0 var(--color-cream),
    -0.0833em 0.1443em 0 var(--color-cream),
    -0.1071em 0.1277em 0 var(--color-cream),
    -0.1277em 0.1071em 0 var(--color-cream),
    -0.1443em 0.0833em 0 var(--color-cream),
    -0.1566em 0.0570em 0 var(--color-cream),
    -0.1641em 0.0289em 0 var(--color-cream),
    -0.1667em 0.0000em 0 var(--color-cream),
    -0.1641em -0.0289em 0 var(--color-cream),
    -0.1566em -0.0570em 0 var(--color-cream),
    -0.1443em -0.0833em 0 var(--color-cream),
    -0.1277em -0.1071em 0 var(--color-cream),
    -0.1071em -0.1277em 0 var(--color-cream),
    -0.0833em -0.1443em 0 var(--color-cream),
    -0.0570em -0.1566em 0 var(--color-cream),
    -0.0289em -0.1641em 0 var(--color-cream),
    -0.0000em -0.1667em 0 var(--color-cream),
    0.0289em -0.1641em 0 var(--color-cream),
    0.0570em -0.1566em 0 var(--color-cream),
    0.0833em -0.1443em 0 var(--color-cream),
    0.1071em -0.1277em 0 var(--color-cream),
    0.1277em -0.1071em 0 var(--color-cream),
    0.1443em -0.0833em 0 var(--color-cream),
    0.1566em -0.0570em 0 var(--color-cream),
    0.1641em -0.0289em 0 var(--color-cream),
    0.0833em 0.0000em 0 var(--color-cream),
    0.0783em 0.0285em 0 var(--color-cream),
    0.0638em 0.0536em 0 var(--color-cream),
    0.0417em 0.0722em 0 var(--color-cream),
    0.0145em 0.0821em 0 var(--color-cream),
    -0.0145em 0.0821em 0 var(--color-cream),
    -0.0417em 0.0722em 0 var(--color-cream),
    -0.0638em 0.0536em 0 var(--color-cream),
    -0.0783em 0.0285em 0 var(--color-cream),
    -0.0833em 0.0000em 0 var(--color-cream),
    -0.0783em -0.0285em 0 var(--color-cream),
    -0.0638em -0.0536em 0 var(--color-cream),
    -0.0417em -0.0722em 0 var(--color-cream),
    -0.0145em -0.0821em 0 var(--color-cream),
    0.0145em -0.0821em 0 var(--color-cream),
    0.0417em -0.0722em 0 var(--color-cream),
    0.0638em -0.0536em 0 var(--color-cream),
    0.0783em -0.0285em 0 var(--color-cream);
}

@media (min-width: 768px) {
  :root {
    --hero-scale: 0.8;
  }
}

/* ── Telas maiores que o frame do Figma (1440 × 1024) ──────────────────────
   Até 1440px os tokens param no valor do Figma. Daqui para cima a página
   inteira cresce na mesma proporção, para um monitor de 27" ver a mesma
   composição que o MacBook, e não um bloco pequeno perdido no meio.

   Cada token vira `valor do Figma × fator`, e o fator é o MENOR entre
   largura/1440 e altura/1024: numa janela larga e baixa quem manda é a
   altura, então o conteúdo nunca estoura o cartão. O `max()` segura o
   valor do Figma como piso. */
@media (min-width: 1441px) {
  :root {
    --frame-gap-y: max(47px, min(3.264vw, 4.59vh));
    --frame-gap-x: max(49px, min(3.403vw, 4.785vh));
    --radius-card: max(20px, min(1.389vw, 1.953vh));
    --text-display: max(60px, min(4.167vw, 5.859vh));
    --text-lead: max(30px, min(2.083vw, 2.93vh));
    --text-control: max(25px, min(1.736vw, 2.441vh));
    --radius-control: max(14px, min(0.972vw, 1.367vh));
    --stroke: max(2px, min(0.139vw, 0.195vh));
    --control-height: max(63px, min(4.375vw, 6.152vh));
    --control-pad-x: max(25px, min(1.736vw, 2.441vh));
    --button-width: max(191px, min(13.264vw, 18.652vh));
    --form-gap: max(19px, min(1.319vw, 1.855vh));
    --logo-width: max(286px, min(19.861vw, 27.93vh));
    --space-logo: max(58px, min(4.028vw, 5.664vh));
    --space-title: max(50px, min(3.472vw, 4.883vh));
    --space-lead: max(32px, min(2.222vw, 3.125vh));
    --hero-offset: max(11px, min(0.764vw, 1.074vh));
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--frame-gap-y) var(--frame-gap-x);
  display: flex;
  background: var(--color-ink);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ── O cartão (área do vídeo) ──────────────────────── */
.card {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-card);
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
}

/* O vídeo de fundo fica atrás de tudo e cobre o cartão inteiro. */
.card__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* A largura do bloco é a do subtítulo (o texto mais largo). O formulário
     não entra nessa conta (`contain` abaixo), só ocupa 100% dela — assim a
     borda esquerda do campo e a direita do botão alinham com o texto. */
  width: fit-content;
  max-width: 100%;
  zoom: var(--hero-scale);
  padding-top: var(--hero-offset);
  text-align: center;
}

.hero__logo {
  display: block;
  width: var(--logo-width);
  height: auto;
  aspect-ratio: 286 / 210;
  margin: 0 0 var(--space-logo);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: var(--text-outline);
}

.hero__lead {
  margin: var(--space-title) 0 0;
  font-size: var(--text-lead);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: var(--text-outline);
}

/* ── Formulário ────────────────────────────────────── */
.signup {
  position: relative;
  display: flex;
  gap: var(--form-gap);
  width: 100%;
  contain: inline-size;
  margin-top: var(--space-lead);
}

.signup__input,
.signup__button {
  height: var(--control-height);
  border: var(--stroke) solid var(--color-stroke);
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-control);
  line-height: 1;
}

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--control-pad-x);
  background: var(--color-cream);
  color: var(--color-ink);
  appearance: none;
}

.signup__input::placeholder {
  color: var(--color-placeholder);
  font-weight: 500;
  opacity: 1;
}

.signup__input:focus-visible,
.signup__button:focus-visible {
  outline: var(--stroke) solid var(--color-ink);
  outline-offset: 3px;
}

.signup__button {
  flex: none;
  width: var(--button-width);
  padding: 0 1rem;
  background: var(--color-ink);
  color: var(--color-cream);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.signup__button:hover {
  background: #2b2b2b;
}

.signup__button:active {
  transform: translateY(1px);
}

.signup__button:disabled {
  cursor: default;
  transform: none;
}

.signup__button:disabled:hover {
  background: var(--color-ink);
}

/* Mensagem de retorno: fica fora do fluxo para não empurrar o layout. */
.signup__status {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 0;
  right: 0;
  margin: 0;
  font-size: clamp(0.9375rem, 0.845rem + 0.381vw, 1.125rem);
  line-height: 1.3;
}

.signup__status:empty {
  display: none;
}

/* Mesmo contorno creme dos textos, para a mensagem ler sobre o vídeo. */
.signup__status {
  text-shadow: var(--text-outline);
}

/* ── Redes sociais ─────────────────────────────────── */
/* Abaixo do formulário, com folga para a mensagem de envio (que fica por cima,
   posicionada logo embaixo do campo). Círculos pretos com o glifo creme: o mesmo
   par de cores do botão "Notify me!". */
.social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2.75rem, 2.46rem + 1.19vw, 3.5rem);
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 2.63rem + 0.48vw, 3.0625rem); /* 44 → 49 */
  aspect-ratio: 1;
  border: var(--stroke) solid var(--color-stroke);
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-cream);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.social__link svg {
  width: 46%;
  height: 46%;
}

.social__link:hover {
  background: #2b2b2b;
}

.social__link:active {
  transform: translateY(1px);
}

.social__link:focus-visible {
  outline: var(--stroke) solid var(--color-ink);
  outline-offset: 3px;
}

/* Campo-isca: fora da tela e fora da leitura, mas presente no formulário. */
.signup__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Celular: o botão desce para baixo do campo ─────── */
@media (max-width: 600px) {
  .signup {
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Em coluna, `flex: 1` viraria altura 0 + sobra, e o campo achataria. */
  .signup__input {
    flex: none;
  }

  .signup__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signup__button,
  .social__link {
    transition: none;
  }
}