/* ==========================================================
   PROOF — pré-lançamento
   Cores e fontes da marca ficam todas aqui em cima.
   ========================================================== */
:root {
  --black: #000000;
  --orange: #FF5100;
  --white: #F2F2F2;
  --muted: #8A8A8A;
  --card: #0B0B0B;
  --line: #1E1E1E;

  --font-logo: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-title: "Zilla Slab", Georgia, serif;
  --font-text: "Courier Prime", "Courier New", monospace;

  --gutter: 16px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: var(--black); }

a { color: inherit; }

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

/* ---------- Fundo: papel de seda ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* papel branco vira preto, traços pretos viram claros */
  filter: invert(1) grayscale(1);
  mix-blend-mode: screen;
  opacity: var(--backdrop-opacity, 0.22);
}

/* ---------- Escaneamento na abertura ---------- */
.scanline {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  height: 2px;
  background: var(--orange);
  box-shadow: 0 0 18px 3px rgba(255, 81, 0, 0.65);
  pointer-events: none;
  opacity: 0;
  animation: scan 1.5s cubic-bezier(0.55, 0, 0.35, 1) 0.15s forwards;
}

@keyframes scan {
  0%   { opacity: 1; transform: translateY(0); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(100vh); }
}

@keyframes reveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- Carimbo de aprovação ---------- */
.stamp {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  animation: fade-in 0.2s ease-out;
}

.stamp.is-leaving { animation: fade-out 0.4s ease-in forwards; }

.stamp .seal {
  width: min(62vw, 260px);
  height: min(62vw, 260px);
  margin: 0;
  animation: stamp-hit 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}

.stamp__text {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 44px);
  color: var(--white);
  animation: fade-in 0.3s 0.45s both;
}

.stamp__sub {
  margin: -10px 0 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fade-in 0.3s 0.6s both;
}

@keyframes stamp-hit {
  0%   { opacity: 0; transform: scale(2.6) rotate(-35deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-12deg); }
}

@keyframes shake {
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, 0); }
}

.page.is-shaking { animation: shake 0.3s 0.3s; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- Estrutura ---------- */
.page {
  position: relative;
  z-index: 1;
  animation: reveal 1.5s cubic-bezier(0.55, 0, 0.35, 1) 0.15s both;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.topbar,
.footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.topbar__status { display: inline-flex; align-items: center; gap: 8px; }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2s ease-in-out infinite;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 0 40px;
}

/* ---------- Logo e frase ---------- */
.logo {
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: clamp(96px, 34vw, 184px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* ---------- Selo ---------- */
.seal {
  width: 132px;
  height: 132px;
  margin: 36px 0 40px;
  transform: rotate(-12deg);
}

.seal__ring { fill: none; stroke: var(--orange); stroke-width: 2; }

.seal__text {
  fill: var(--orange);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 15px;
}

.seal__text-ring {
  transform-origin: 100px 100px;
  animation: spin 28s linear infinite;
}

.seal__check {
  fill: none;
  stroke: var(--orange);
  stroke-width: 7;
  stroke-linecap: square;
}

/* ---------- Card da lista de espera ---------- */
.card {
  width: 100%;
  background: rgba(11, 11, 11, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 20px;
  text-align: left;
}

.card__title {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
}

.card__text {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}

.form { display: flex; flex-direction: column; gap: 10px; }

.form__input,
.form__button {
  width: 100%;
  min-height: 52px;
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 16px; /* 16px evita zoom automático no iPhone */
}

.form__input {
  padding: 0 14px;
  background: var(--black);
  color: var(--white);
  border: 1px solid #2E2E2E;
  outline: none;
  transition: border-color 0.15s;
}

.form__input::placeholder { color: #5A5A5A; }
.form__input:focus { border-color: var(--orange); }
.form__input[aria-invalid="true"] { border-color: var(--orange); }

.form__button {
  padding: 0 18px;
  border: 0;
  background: var(--orange);
  color: var(--black);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.form__button:hover { opacity: 0.9; }
.form__button:active { transform: translateY(1px); }
.form__button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.form__button[disabled] { opacity: 0.55; cursor: wait; }

.form__msg {
  min-height: 1.5em;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.form__msg.is-ok { color: var(--orange); }

/* Campo-armadilha anti-robô */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Data e Instagram ---------- */
.info {
  width: 100%;
  margin: 28px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.info__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.info__row:first-child { border-top: 1px solid var(--line); }

.info dt { color: var(--muted); }
.info dd { margin: 0; color: var(--white); }

.info a {
  color: var(--orange);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
}

.info a:hover,
.info a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 72px 0 56px; justify-content: center; }
  .seal { width: 150px; height: 150px; }
  .card { padding: 32px 28px; }
  .form { flex-direction: row; }
  .form__button { width: auto; white-space: nowrap; }
}

/* ---------- Animações ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }

@media (prefers-reduced-motion: reduce) {
  .seal__text-ring, .dot, .page, .page.is-shaking { animation: none; }
  .scanline { display: none; }
  .stamp, .stamp .seal, .stamp__text, .stamp__sub { animation: none; }
}