/* ============================================================================
   landing.css — лендинг catamoron.ru (T-009) по DESIGN_SPEC §3/§4.1/§5.1.
   Токены — assets/tokens.css (подключается до этого файла).
   Внешних ресурсов нет. Инлайн-стилей в разметке нет (CSP style-src 'self').
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--c-text-hi);
  font-family:var(--font-sans);
  font-size:var(--fs-15);
  line-height:var(--lh-body); /* 1.45 — DESIGN_SPEC §2.6 */
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70vw 60vh at 78% 6%, rgba(123,77,255,.14) 0%, rgba(123,77,255,0) 62%),
    radial-gradient(60vw 55vh at 10% 90%, rgba(61,123,255,.12) 0%, rgba(61,123,255,0) 60%),
    var(--c-bg-800);
}

/* ============================================================================
   AURORA — статичный градиент body + 2 анимированных слоя (A, B) + 1 статичный (C).
   Анимируются только transform/opacity; filter: blur() задан на слое и во времени
   не меняется (растеризуется один раз). will-change — только на A и B.
   ============================================================================ */
.aurora{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.aurora__layer{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.7;
  transform:translateZ(0);
}

.aurora__layer--a{
  width:95vmax;
  height:95vmax;
  top:-40vmax;
  left:-25vmax;
  background:radial-gradient(closest-side,var(--aurora-a) 0%,transparent 68%);
  will-change:transform,opacity;
  animation:aurora-a var(--dur-aurora-a) var(--ease-soft) infinite alternate;
}

.aurora__layer--b{
  width:85vmax;
  height:85vmax;
  right:-30vmax;
  bottom:-45vmax;
  filter:blur(90px);
  background:radial-gradient(closest-side,var(--aurora-b) 0%,transparent 70%);
  will-change:transform,opacity;
  animation:aurora-b var(--dur-aurora-b) var(--ease-soft) infinite alternate;
}

.aurora__layer--c{
  width:55vmax;
  height:55vmax;
  left:38%;
  top:52%;
  filter:blur(80px);
  opacity:.26;
  background:radial-gradient(closest-side,var(--aurora-c) 0%,transparent 72%);
  animation:none; /* статичный акцент — без will-change */
}

@keyframes aurora-a{
  from{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.55}
  to{transform:translate3d(12vw,8vh,0) scale(1.18) rotate(18deg);opacity:.85}
}

@keyframes aurora-b{
  from{transform:translate3d(0,0,0) scale(1.1) rotate(0deg);opacity:.80}
  to{transform:translate3d(-10vw,-7vh,0) scale(.92) rotate(-14deg);opacity:.50}
}

/* ---------- каркас страницы ---------- */
.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:var(--sp-4);
}

@media (min-width:768px){
  .topbar{padding:var(--sp-6) var(--sp-8) 0}
}

/* ---------- кнопка «Войти» (DESIGN_SPEC §4.1, §10) ---------- */
.btn-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-min);
  min-width:var(--tap-min);
  padding:0 var(--sp-5);
  border-radius:var(--r-pill);
  background:var(--grad-accent);
  color:#ffffff;
  font-size:var(--fs-14);
  font-weight:var(--fw-bold);
  letter-spacing:.01em;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:var(--sh-glow);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

.btn-login:hover{
  box-shadow:var(--sh-glow-hover);
  transform:translateY(-1px);
}

.btn-login:active{
  transform:translateY(0) scale(.99);
}

.btn-login:focus-visible{
  outline:2px solid var(--focus-dark);
  outline-offset:3px;
}

/* ---------- сцена ---------- */
.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding:var(--sp-8) var(--sp-5) var(--sp-12);
}

/* Вуаль под текстом: держит контраст на самом светлом кадре анимации (§3.5). */
.stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(62% 55% at 50% 48%,var(--c-veil) 0%,rgba(7,9,18,0) 72%);
}

.stage > *{
  position:relative;
  z-index:1;
}

.kicker{
  margin:0 0 var(--sp-4);
  font-family:var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-text-low);
  animation:rise 460ms var(--ease-out) 60ms both;
}

.hero{
  margin:0;
  max-width:100%;
  font-size:var(--fs-hero);
  font-weight:var(--fw-black);
  line-height:var(--lh-tight); /* 1.05 — токен §2.6 (в макете было литералом 1.02) */
  letter-spacing:-.02em;
  color:var(--c-text-hi);
  text-shadow:0 0 64px rgba(61,123,255,.35);
  animation:rise 520ms var(--ease-out) 120ms both;
}

.tagline{
  margin:var(--sp-4) 0 0;
  font-size:var(--fs-14);
  letter-spacing:.02em;
  color:var(--c-text-mid);
  animation:rise 460ms var(--ease-out) 200ms both;
}

/* Вуаль под подписью (DESIGN_SPEC §3.5, ТЗ п.33): на самом светлом кадре aurora
   слой B заходит под футер и роняет контраст --c-text-low до 4.35:1 на 375px.
   Мягкое локальное затемнение возвращает ≥ 4.5:1, не меняя токены. */
.foot{
  padding:var(--sp-6) var(--sp-5);
  text-align:center;
  font-size:var(--fs-11);
  color:var(--c-text-low);
  background:radial-gradient(52% 78% at 50% 50%,rgba(7,9,18,.42) 0%,rgba(7,9,18,0) 100%);
}

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================================
   prefers-reduced-motion: движение выключается, оформление и градиент остаются.
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .aurora__layer{
    animation:none;
    will-change:auto;
    transform:none;
    opacity:.7;
  }
  .aurora__layer--c{opacity:.26}
  .kicker,.hero,.tagline{
    animation:none;
    opacity:1;
    transform:none;
  }
  .btn-login{transition:none}
  .btn-login:hover{transform:none}
}