/* ═══════════════════════════════════════════════════════════════════════════
   Landing / sign-in page. Theme = cold chrome + one electric blue, lifted
   from the HZ mark. scrollcraft.css supplies the floor; this file is the page.
   The page is Hebrew, right-to-left: copy anchors right, the mark goes left.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sc-canvas:     #07090c;
  --sc-surface:    #0e1218;
  --sc-ink:        #e8edf4;
  --sc-ink-soft:   #93a1b4;
  --sc-accent:     #2e9bff;
  --sc-accent-ink: #03111e;
  --sc-font-display: "Rubik", "Heebo", system-ui, sans-serif;
  --sc-font-text:    "Heebo", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sc-shadow-color: 214 60% 2%;
  --chrome: #c9d4e2;
}

[hidden] { display: none !important; }
/* Hebrew display: upright (italic Hebrew reads wrong), no stretch, near-zero
   tracking, and a touch more leading so final letters (ק ן ף ץ ך) keep tails. */
.lp .sc-display { font-weight: 800; font-style: normal; font-stretch: normal; letter-spacing: -0.01em; line-height: 1.04; }
/* Kinetic word masks clip to the line box; give descenders room back. */
.lp .sc-split { padding-block: 0.04em 0.18em; margin-block: -0.04em -0.18em; }
/* Scroll progress fills from the reading edge. */
.lp [data-sc-progress] { transform-origin: 100% 50%; }

/* ── Bar ─────────────────────────────────────────────────────────────────── */
.lp-bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
}
.lp-bar__mark { display: inline-flex; align-items: center; gap: var(--sc-3); text-decoration: none; }
.lp-bar__mark img { width: 44px; height: auto; }
.lp-bar__mark span {
  font-family: var(--sc-font-display); font-weight: 800; font-style: normal;
  letter-spacing: 0.04em; font-size: var(--sc-t-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sc-2);
  min-height: 48px; padding: 0 var(--sc-5);
  border: 0; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 650; font-size: var(--sc-t-sm); letter-spacing: 0; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.lp-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .lp-btn:hover { background: #55aeff; }
  .lp-btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
}
.lp-btn--small { min-height: 40px; padding: 0 var(--sc-4); }
.lp-btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.lp-btn--discord { background: #5865f2; color: #fff; }
@media (hover: hover) and (pointer: fine) { .lp-btn--discord:hover { background: #6b77f5; } }

/* ── Act 1 · hero ────────────────────────────────────────────────────────── */
.lp-hero__stage { background: var(--sc-canvas); }
.lp-hero__sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 55% at 38% 38%, rgb(28 92 170 / 0.30), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgb(20 50 96 / 0.25), transparent 70%);
}
/* Perspective floor: the far plane. Grid lines thin out toward the horizon. */
.lp-hero__floor {
  position: absolute; inset: auto -20% -6% -20%; height: 62%; z-index: 1;
  perspective: 520px; perspective-origin: 50% 0%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%, #000 100%);
}
.lp-hero__grid {
  position: absolute; inset: 0;
  transform: rotateX(62deg); transform-origin: 50% 0;
  background-image:
    linear-gradient(to right, rgb(120 170 230 / 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(120 170 230 / 0.16) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: lp-grid 14s linear infinite;
}
@keyframes lp-grid { to { background-position: 0 64px, 0 64px; } }

.lp-hero__title {
  position: absolute; z-index: 2;
  left: auto; right: var(--sc-gutter); top: clamp(5.5rem, 16vh, 10rem);
  text-align: right;
  font-size: clamp(3rem, 1.2rem + 5.4vw, 6.6rem);
  max-width: 13ch;
  color: var(--sc-ink);
}
/* The mark sits in front of the headline plane. It only grazes the tail of
   the lines, so the planes read as separate and every word stays readable. */
.lp-hero__mark {
  position: absolute; z-index: 3;
  right: auto; left: clamp(-1rem, 1vw, 3rem); top: 62%;
  width: min(48vw, 860px);
  translate: 0 -38%;
}
.lp-hero__lift { will-change: transform, opacity; }
.lp-hero__logo {
  width: 100%; height: auto;
  filter: drop-shadow(0 28px 40px rgb(1 6 14 / 0.75)) drop-shadow(0 6px 10px rgb(1 6 14 / 0.6));
  will-change: transform;
}
.lp-hero__dust { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.lp-hero .sc-scrim { z-index: 5; }
/* The engine anchors .sc-copy--lead on the left; in RTL the lead corner is
   bottom-right. justify-items:start is the right edge under dir=rtl. */
.lp-hero__copy {
  left: auto; right: var(--sc-gutter); text-align: right;
  z-index: 6; display: grid; gap: var(--sc-5); justify-items: start;
}
.lp-hero__copy .sc-lede { color: var(--sc-ink); max-width: 34ch; letter-spacing: 0; }

@media (max-width: 860px) {
  .lp-hero__title {
    font-size: clamp(2.4rem, 11vw, 3.6rem); top: 6rem; z-index: 4;
    left: var(--sc-gutter); max-width: none;
  }
  .lp-hero__mark { width: 88vw; right: auto; left: -10vw; top: 52%; translate: 0 -40%; }
  .lp-hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 2.5rem; }
}

/* ── Act 2 · kinetic lines ───────────────────────────────────────────────── */
.lp-say__stage {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-inline: var(--sc-gutter);
  background:
    linear-gradient(to left, transparent 60%, rgb(46 155 255 / 0.05)),
    var(--sc-canvas);
}
.lp-say__lines { position: relative; height: 100%; }
.lp-say__line {
  position: absolute; left: auto; right: 0; top: 50%; translate: 0 -50%;
  margin: 0; max-width: 17ch;
  font-size: var(--sc-t-3xl);
  color: var(--sc-ink);
}
/* Grid columns follow dir=rtl: lines take the right column, the rail the
   left one, with its hairline on the side that faces the lines. */
.lp-say__rail {
  list-style: none; margin: 0; padding: 0; padding-inline-start: var(--sc-6);
  display: grid; gap: var(--sc-3);
  border-inline-start: 1px solid var(--sc-hairline);
  font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-sm);
  letter-spacing: 0;
  color: var(--sc-ink-soft);
}
.lp-say__rail li { opacity: calc(0.35 + var(--lit, 0) * 0.65); transition: opacity 200ms var(--sc-ease-out); }
@media (max-width: 860px) {
  .lp-say__stage { grid-template-columns: 1fr; }
  .lp-say__rail { display: none; }
  .lp-say__line { font-size: var(--sc-t-2xl); }
}

/* ── Act 3 · radar (the peak) ────────────────────────────────────────────── */
.lp-radar__stage {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sc-7);
  padding-inline: var(--sc-gutter);
  background: radial-gradient(60% 70% at 68% 50%, rgb(14 44 84 / 0.55), transparent 72%), var(--sc-canvas);
}
.lp-radar__scope { justify-self: center; width: min(78vh, 46vw); aspect-ratio: 1; }
.lp-radar__svg { width: 100%; height: 100%; overflow: visible; }
.lp-radar__svg .ring { fill: none; stroke: rgb(120 170 230 / 0.18); stroke-width: 0.4; }
.lp-radar__svg .cross { stroke: rgb(120 170 230 / 0.12); stroke-width: 0.3; }
.lp-radar__svg .arm { stroke: #2e9bff; stroke-width: 0.6; }
.lp-radar__svg .hub { fill: var(--chrome); }
.lp-radar__svg .blip { fill: #9fd0ff; }
.lp-radar__svg .blip-ring { fill: none; stroke: #2e9bff; stroke-width: 0.4; }
.lp-radar__arm { transform-origin: 0 0; will-change: transform; }

/* dir=rtl puts the scope in the right column; the copy block sits at the far
   left (end) and reads from its own right edge (start). */
.lp-radar__copy { position: relative; justify-self: end; text-align: start; display: grid; gap: var(--sc-4); justify-items: start; }
.lp-radar__count {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 800; font-style: normal;
  font-size: var(--sc-t-3xl); line-height: var(--sc-leading-tight); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  max-width: 12ch; text-wrap: balance;
}
.lp-radar__count em { font-style: inherit; color: var(--sc-accent); }
@media (max-width: 860px) {
  .lp-radar__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: var(--sc-5); }
  .lp-radar__scope { width: min(86vw, 52vh); }
  .lp-radar__copy { justify-self: start; text-align: start; justify-items: start; }
  .lp-radar__count { font-size: var(--sc-t-2xl); }
}

/* ── Act 4 · close ───────────────────────────────────────────────────────── */
.lp-close {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--sc-10) var(--sc-gutter) var(--sc-9);
  position: relative; z-index: 2;
}
.lp-close__inner { width: min(34rem, 100%); display: grid; justify-items: center; text-align: center; }
.lp-close__mark { width: min(260px, 60vw); margin-bottom: var(--sc-7); }
.lp-close__mark img { width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgb(1 6 14 / 0.7)); }
.lp-close__title { font-size: var(--sc-t-3xl); }
.lp-close__text { margin-top: var(--sc-4); }
.lp-close__error {
  margin: var(--sc-5) 0 0; padding: var(--sc-3) var(--sc-4);
  border-radius: var(--sc-r-sm);
  background: rgb(255 92 99 / 0.1); color: #ffb3b6;
  box-shadow: inset 0 0 0 1px rgb(255 92 99 / 0.28);
  font-size: var(--sc-t-sm);
}
.lp-close__actions { margin-top: var(--sc-7); display: flex; flex-wrap: wrap; gap: var(--sc-3); justify-content: center; }