/* --------------------------------------------------------------------------
   The entry page -- v3. Same three-layer background as before (wash,
   aurora blobs, curl-noise canvas -- see js/fx.js), now genuinely
   theme-aware rather than dark-only: every colour here reads a token that
   tokens.css redefines per theme, so this page re-themes along with the
   rest of the site instead of needing its own light variant written by
   hand. The literal "glass" overlays (rgba(255,255,255,.05) etc, tuned
   only for a dark background) became color-mix(..., var(--ink), ...)
   instead -- var(--ink) itself flips dark/light per theme, so the same
   expression darkens the glass on a light background and lightens it on
   a dark one, automatically.
   -------------------------------------------------------------------------- */

body {
  background: var(--d-bg);
  color: var(--d-ink);
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% 8%,  color-mix(in srgb, var(--teal) 20%, transparent), transparent 62%),
    radial-gradient(900px 620px at 88% 92%,  color-mix(in srgb, var(--astro) 16%, transparent), transparent 60%),
    radial-gradient(700px 700px at 78% 12%,  color-mix(in srgb, var(--amber) 12%, transparent), transparent 65%),
    linear-gradient(180deg, var(--d-bg-2), var(--d-bg) 55%);
}

#fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; opacity: .9;
}

.aurora {
  position: fixed; z-index: 0; border-radius: 50%;
  filter: blur(90px); opacity: .32; pointer-events: none;
  will-change: transform;
}
:root:not([data-theme="dark"]) .aurora { opacity: .16; }   /* lighter wash reads better on a light page */
.aurora-a {
  width: 46vw; height: 46vw; left: -10vw; top: -12vw;
  background: radial-gradient(circle, var(--teal), transparent 68%);
  animation: drift-a 26s var(--e-in-out) infinite alternate;
}
.aurora-b {
  width: 40vw; height: 40vw; right: -12vw; bottom: -14vw;
  background: radial-gradient(circle, var(--astro), transparent 66%);
  animation: drift-b 32s var(--e-in-out) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.16); } }
@keyframes drift-b { to { transform: translate3d(-8vw, -6vh, 0) scale(1.1); } }

.grid-lines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 4.5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 78%);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.entry {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-6);
}
@media (max-width: 940px) {
  .entry { grid-template-columns: 1fr; gap: var(--sp-6); padding-top: var(--sp-6); }
  .pitch { text-align: center; }
  .pitch .feats { justify-content: center; }
}

.brandmark {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: var(--sp-6);
}
.brandmark img { height: 40px; width: auto; }
.brandmark .divider { width: 1px; height: 30px; background: var(--d-line); }
.brandmark .product {
  font-family: var(--font-mono);
  font-size: var(--t-md); font-weight: 600; letter-spacing: .22em;
  color: var(--d-ink); text-transform: uppercase;
}

.pitch h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, var(--t-3xl));
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-bottom: var(--sp-4);
}
.pitch h1 .grad {
  background: linear-gradient(100deg, var(--teal-bright) 8%, var(--astro-bright) 55%, var(--amber-bright) 96%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  background-size: 220% 100%;
  animation: grad-slide 9s ease-in-out infinite alternate;
}
@keyframes grad-slide { to { background-position: 100% 0; } }

.pitch .lede {
  font-size: var(--t-lg); color: var(--d-muted); max-width: 46ch;
  margin-bottom: var(--sp-5);
}
@media (max-width: 940px) { .pitch .lede { margin-inline: auto; } }

.feats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-5); }
.feat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--d-line);
  border-radius: var(--r-pill);
  background: var(--d-glass);
  font-family: var(--font-mono);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--d-ink);
  backdrop-filter: blur(8px);
  transition: transform var(--dur-2) var(--e-spring),
              background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.feat:hover { transform: translateY(-2px); background: var(--d-glass-2); border-color: var(--d-line-soft); }
.feat.muted { opacity: .55; }
.feat .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---- right: the card --------------------------------------------------- */

.auth-card {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--void) 78%, transparent);
  border: 1px solid var(--d-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: pop-in var(--dur-4) var(--e-out) both;
}
.auth-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--a, 0deg), transparent 0deg,
              color-mix(in srgb, var(--teal) 85%, transparent) 60deg, transparent 130deg,
              transparent 220deg, color-mix(in srgb, var(--astro) 75%, transparent) 290deg, transparent 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: edge 12s linear infinite;
}
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes edge { to { --a: 360deg; } }

.auth-card h2 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.02em; }
.auth-card .sub { color: var(--d-muted); font-size: var(--t-sm); margin-top: 4px; }

.dev-tag {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--sp-4); padding: 5px 11px;
  border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--warn-text);
}

.field input, .field select, .field textarea {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-color: var(--d-line);
  color: var(--d-ink);
}
.field label { color: var(--d-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent-text);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label { color: var(--accent-text); }
.field .peek:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--d-ink); }
.field-hint { color: var(--d-muted); }
.btn-ghost { --btn-fg: var(--d-muted); --btn-bg-hover: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn-light {
  --btn-bg: color-mix(in srgb, var(--ink) 7%, transparent); --btn-bg-hover: color-mix(in srgb, var(--ink) 12%, transparent);
  --btn-fg: var(--d-ink); --btn-border: var(--d-line);
}
a { color: var(--accent-text); }

.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  animation: pop-in var(--dur-2) var(--e-out);
}
.alert-bad  { background: var(--danger-100); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger-text); }
.alert-ok   { background: var(--success-100); border: 1px solid color-mix(in srgb, var(--success) 45%, transparent); color: var(--success-text); }
.alert-info { background: var(--primary-100); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); color: var(--info-text); }

.entry-foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: center; align-items: center;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  color: var(--d-muted); font-size: var(--t-sm);
  font-family: var(--font-mono);
  border-top: 1px solid var(--d-line-soft);
  margin: 0 auto; max-width: 1240px;
}
.entry-foot a { color: var(--d-muted); }
.entry-foot a:hover { color: var(--d-ink); }