:root {
  color-scheme: dark;

  /* ── Tokens Void Prophecy (alinhados a landing oficial) ── */
  --bg: #02040a;
  --ink: #00000a;
  --indigo: #3d2bff;
  --indigo-soft: rgba(61, 43, 255, 0.55);
  --cyan: #00ffe5;
  --gold: #ebc66b;
  --gold-light: #f5d87a;
  --text: #f7fbff;
  --muted: rgba(226, 239, 255, 0.72);

  /* Tipografia da landing */
  --font-display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-serif: "Cinzel", Georgia, serif;
  --font-body: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  cursor: none;
}

/* Se o cursor customizado nao estiver ativo (touch/sem JS), volta ao nativo */
body.no-custom-cursor,
body.no-custom-cursor * {
  cursor: auto;
}

body.no-custom-cursor a,
body.no-custom-cursor button {
  cursor: pointer;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
}

/* ─────────────────────────── Cursor customizado ─────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  opacity: 0;
}

.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring {
  opacity: 1;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 255, 229, 0.9);
  transition: width 160ms ease, height 160ms ease, background 160ms ease;
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(61, 43, 255, 0.75);
  box-shadow: 0 0 18px rgba(61, 43, 255, 0.35), inset 0 0 10px rgba(0, 255, 229, 0.14);
  transition: width 220ms var(--ease-out-expo), height 220ms var(--ease-out-expo),
    border-color 220ms ease, background 220ms ease;
}

.cursor-active .cursor-ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(0, 255, 229, 0.85);
  background: rgba(61, 43, 255, 0.08);
}

.cursor-active .cursor-dot {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--gold-light);
}

.cursor-down .cursor-ring {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}

/* ─────────────────────────────── Fundo ──────────────────────────────────── */
.starfield {
  position: fixed;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
}

.gateway {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(61, 43, 255, 0.22), transparent 30%),
    radial-gradient(ellipse at 50% 74%, rgba(235, 198, 107, 0.08), transparent 38%),
    linear-gradient(180deg, #000 0%, #030711 48%, #000 100%);
}

/* Vinheta suave sobre o canvas para dar foco ao portal */
.gateway::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 34%, rgba(0, 0, 0, 0.2) 62%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(180deg, transparent 0 60%, rgba(0, 0, 0, 0.55) 100%);
}

/* .stars: brilhos pontuais estaticos como camada extra sobre o canvas */
.stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(235, 198, 107, 0.22), transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(0, 255, 229, 0.26), transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.2), transparent 1px),
    radial-gradient(circle at 12% 78%, rgba(61, 43, 255, 0.24), transparent 1px);
  opacity: 0.7;
}

@media (max-width: 520px) {
  .gateway {
    padding: 18px;
  }

  .portal {
    padding: 32px 22px 28px;
  }

  .portal__media {
    width: min(100%, 330px);
  }

  /* Em telas pequenas, cursor nativo */
  * {
    cursor: auto;
  }
}