/* Главная SnapBox: тёмная, по центру надпись и вход. Надпись следит за
   мышью (web/js/index.js ставит переменные): блик по буквам, наклон, буквы
   отходят от курсора; свечение фона идёт за курсором. Шрифты — системные:
   CSP страниц чужих шрифтов не пускает. */

:root {
  color-scheme: dark;
  --bg: #07090c;
  --ink: #eef2f7;
  --muted: #8a94a3;
  --line: rgb(255 255 255 / 0.11);
  --field: rgb(255 255 255 / 0.045);
  --blue: #4c7dff;
  --brand-blue: #2458c6;
  --brand-grey: #6b7684;
  --tape: #f3d65e;
  --tape-ink: #1c1a10;
  --error: #ff8f85;
  --font: "Inter", "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* за мышью: страница, надпись, наклон, доля смещения от центра */
  --mx: 50vw;
  --my: 38vh;
  --lx: 50%;
  --ly: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --nx: 0;
  --ny: 0;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body.lp {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgb(36 88 198 / 0.16), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgb(243 214 94 / 0.06), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* свечение за курсором */
.lp__glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgb(76 125 255 / 0.13), transparent 65%);
}

/* тонкая сетка — едва видна, уходит в темноту к краям */
.lp__glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: calc(50% + var(--nx) * -18px) calc(50% + var(--ny) * -18px);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

.lp__main {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  width: min(100% - 32px, 760px);
  padding: 32px 0;
}

/* ─── надпись ─────────────────────────────────────────────────────────── */

.lp-word {
  position: relative;
  margin: 0;
  font-size: clamp(64px, 14vw, 172px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  text-align: center;
  perspective: 900px;
  user-select: none;
}

.lp-word__inner {
  position: relative;
  display: inline-block;
  padding: 0 0.06em 0.08em;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  will-change: transform;
}

/* без скрипта — ровный светлый текст; со скриптом буквы получают свой блик */
.lp-word__letter {
  display: inline-block;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--dr, 0deg));
  background-image: radial-gradient(420px circle at calc(var(--lx) - var(--ox, 0px)) calc(var(--ly) - var(--oy, 0px)), #ffffff 0%, #e9eef6 16%, #9aa6b6 42%, #454d59 72%, #262b33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: transform;
}

/* мягкая тень надписи, тоже за мышью */
.lp-word::after {
  content: '';
  position: absolute;
  inset: 20% 10% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(76 125 255 / 0.22), transparent);
  filter: blur(40px);
  transform: translate(calc(var(--nx) * 40px), calc(var(--ny) * 30px));
}

/* три бруска — знак SnapBox: блоки разной ширины */
.lp-bars {
  display: flex;
  gap: 10px;
  margin: 18px 0 56px;
}

.lp-bars span {
  display: block;
  width: 44px;
  height: 6px;
  border-radius: 3px;
  transform: translateX(calc(var(--nx) * var(--k) * 1px));
}

.lp-bars span:nth-child(1) { --k: 18; background: var(--brand-blue); }
.lp-bars span:nth-child(2) { --k: 10; background: var(--brand-grey); }
.lp-bars span:nth-child(3) { --k: 4; background: var(--tape); }

/* ─── вход ────────────────────────────────────────────────────────────── */

.lp-form {
  display: grid;
  gap: 12px;
  width: min(100%, 340px);
}

.lp-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  font: 500 16px/1 var(--font);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.lp-input::placeholder { color: var(--muted); }

.lp-input:hover { border-color: rgb(255 255 255 / 0.2); }

.lp-input:focus {
  border-color: var(--blue);
  background: rgb(76 125 255 / 0.06);
  box-shadow: 0 0 0 4px rgb(76 125 255 / 0.18);
}

.lp-input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #10151d inset;
  caret-color: var(--ink);
}

.lp-button {
  height: 50px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--tape);
  color: var(--tape-ink);
  font: 700 16px/1 var(--font);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgb(243 214 94 / 0.45);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.lp-button:hover { filter: brightness(1.06); box-shadow: 0 14px 36px -10px rgb(243 214 94 / 0.55); }
.lp-button:active { transform: translateY(1px); }
.lp-button:focus-visible { outline: 3px solid rgb(243 214 94 / 0.45); outline-offset: 3px; }
.lp-button:disabled { cursor: progress; filter: saturate(0.6) brightness(0.9); }

.lp-say {
  min-height: 1.4em;
  margin: 2px 0 0;
  color: var(--error);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.lp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .lp-bars { margin-bottom: 40px; }
  .lp-bars span { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-word__inner, .lp-word__letter, .lp-bars span, .lp-word::after { transform: none; }
}