/* Дакар — страница входа. Всегда тёмная: ночной шоурум, свет, стекло. */
:root {
  --blue: #1830F8; --blue-2: #4c60ff; --lime: #D4FF2A; --black: #000;
  --ink: #fff; --mute: rgba(255,255,255,.56); --hair: rgba(255,255,255,.10);
  --display: "Fira Sans", system-ui, sans-serif; --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: var(--ink); }
body.lg { font: 400 16px/1.4 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------- сцена ---------- */
.lg-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; --mx: 0; --my: 0; }
.lg-spot { position: absolute; left: 50%; top: -38vh; width: 120vw; height: 95vh; transform: translateX(calc(-50% + var(--mx) * 60px));
  background: radial-gradient(50% 50% at 50% 50%, rgba(24,48,248,.55) 0%, rgba(24,48,248,.18) 38%, transparent 70%);
  filter: blur(10px); animation: breathe 9s ease-in-out infinite; transition: transform 1.2s var(--ease); }
.lg-spot.two { top: auto; bottom: -55vh; height: 80vh; width: 90vw; opacity: .55;
  transform: translateX(calc(-50% + var(--mx) * -40px));
  background: radial-gradient(50% 50% at 50% 50%, rgba(76,96,255,.35) 0%, transparent 70%); animation-delay: -4s; }
@keyframes breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* глянцевый пол шоурума с перспективной сеткой */
.lg-floor { position: absolute; left: -20%; right: -20%; top: 62%; bottom: -30%; transform-origin: top; transform: perspective(600px) rotateX(62deg);
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 70%); opacity: 0; animation: fadeIn 2s .5s var(--ease) forwards; }

/* линия горизонта — как световая полоса фар */
.lg-horizon { position: absolute; left: 0; right: 0; top: 62%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76,96,255,.9) 30%, #fff 50%, rgba(212,255,42,.9) 70%, transparent);
  transform: scaleX(0); animation: draw 1.6s .2s var(--ease) forwards; box-shadow: 0 0 24px 2px rgba(76,96,255,.55); }
.lg-horizon::after { content: ""; position: absolute; left: 20%; right: 20%; top: -60px; height: 120px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(76,96,255,.28), transparent 70%); }
.lg-horizon i { position: absolute; top: -1px; height: 3px; width: 22%; left: -25%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--lime), #fff, transparent); filter: blur(.5px);
  box-shadow: 0 0 18px 4px rgba(212,255,42,.55); animation: sweep 7s 2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes sweep { 0% { left: -25%; opacity: 0; } 8% { opacity: 1; } 42% { left: 103%; opacity: 1; } 45%, 100% { left: 103%; opacity: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

.lg-grain { position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- контент ---------- */
.lg-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 6vh, 64px); padding: clamp(32px, 7vh, 72px) 16px 24px; }

.lg-brand { position: relative; width: min(560px, 82vw); }
.lg-logo .logo { display: block; width: 100%; height: auto; overflow: visible; }
.lg-logo .logo .da { fill: var(--blue); filter: drop-shadow(0 0 22px rgba(24,48,248,.55)); }
.lg-logo .logo .kar { fill: #fff; }
.lg-logo:not(.mirror) { animation: logoIn 1.4s var(--ease) both; }
.lg-logo.mirror { position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; transform: scaleY(-1); opacity: .16;
  mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 55%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 55%);
  filter: blur(1.5px); animation: fadeIn 1.6s .6s var(--ease) backwards; }
.lg-logo.mirror .logo .da { filter: none; }
@keyframes logoIn { from { opacity: 0; filter: blur(14px); transform: translateY(14px) scale(.97); letter-spacing: .1em; } }

/* стеклянная карточка */
.lg-card { position: relative; width: min(400px, 100%); padding: 30px 26px 26px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  display: grid; gap: 12px; animation: cardIn 1.1s .35s var(--ease) backwards; }
.lg-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%, rgba(76,96,255,0) 65%, rgba(76,96,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(8px); } }
.lg-card h1 { margin: 0 0 6px 4px; font: 800 30px/1 var(--display); letter-spacing: -.03em; }

/* поля в стиле iOS: подпись уезжает вверх */
.lg-field { position: relative; display: block; }
.lg-field input { width: 100%; height: 60px; padding: 24px 18px 8px; border-radius: 18px; border: 0; outline: 0;
  background: rgba(255,255,255,.07); color: #fff; font: 500 17px var(--text); caret-color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: box-shadow .25s, background .25s; }
.lg-field.pw input { padding-right: 56px; letter-spacing: .02em; }
.lg-field input:hover { background: rgba(255,255,255,.09); }
.lg-field input:focus { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--blue-2), 0 0 0 5px rgba(24,48,248,.22); }
.lg-field span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 16px;
  pointer-events: none; transition: all .22s var(--ease); }
.lg-field input:focus + span, .lg-field input:not(:placeholder-shown) + span { top: 17px; font-size: 12px; color: rgba(255,255,255,.7); }
.lg-field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 1000px #1b1d2a; transition: background-color 9999s; }
.lg-field input:-webkit-autofill + span { top: 17px; font-size: 12px; }
.lg-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: transparent; color: var(--mute); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.lg-eye:hover { background: rgba(255,255,255,.08); color: #fff; }
.lg-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-eye.on { color: var(--lime); }
.lg-eye.on svg path { stroke-dasharray: 2.5 2.5; }

.lg-note { min-height: 18px; padding: 0 4px; font-size: 13px; display: flex; gap: 12px; }
.lg-note b { font-weight: 500; }
.lg-note .err { color: #ff6b5f; }
.lg-note .caps { color: var(--lime); }

/* кнопка */
.lg-btn { position: relative; overflow: hidden; height: 58px; margin-top: 2px; border: 0; border-radius: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font: 600 17px var(--text); letter-spacing: .01em;
  background: radial-gradient(140% 180% at 100% 0%, #5468ff 0%, #1830F8 48%, #0c1cb0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 36px rgba(24,48,248,.45); transition: transform .2s var(--ease), box-shadow .3s; }
.lg-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .8s var(--ease); }
.lg-btn:hover::after { left: 130%; }
.lg-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 18px 44px rgba(24,48,248,.6); }
.lg-btn:active { transform: scale(.98); }
.lg-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.lg-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.lg-btn:hover svg { transform: translateX(3px); }
.lg-btn .spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.lg-card.busy .lg-btn { pointer-events: none; }
.lg-card.busy .lg-btn svg { display: none; } .lg-card.busy .lg-btn .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.lg-card.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

.lg-foot { position: relative; z-index: 1; text-align: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.32); }

@media (max-width: 560px) {
  .lg-main { justify-content: flex-start; padding-top: 12vh; }
  .lg-card { padding: 24px 18px 18px; border-radius: 26px; }
  .lg-horizon, .lg-floor { top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .lg-horizon { transform: none; } .lg-floor { opacity: 1; } .lg-horizon i { display: none; }
}