/* ─────────────────────────────────────────────
   ORBITA — Base Design System v2
   Display: Unbounded · Body: Manrope · Tech: JetBrains Mono
   ───────────────────────────────────────────── */

/* ── TOKENS ── */
:root {
  /* Core surfaces — глубокий космический чёрный с холодным подтоном */
  --c-black:    #050507;
  --c-surface:  #0a0a10;
  --c-surface-2:#0e0e16;
  --c-white:    #ffffff;
  --c-grey-100: #f5f5f7;
  --c-grey-400: #9b9ba8;
  --c-grey-600: #5c5c6b;

  /* Accent — электрический индиго (ядро орбиты) + спектр */
  --c-accent:       #6E5CFF;
  --c-accent-hover: #8878ff;
  --c-accent-2:     #a78bfa;   /* violet */
  --c-accent-3:     #22d3ee;   /* cyan — вторичный спектральный акцент */
  --c-accent-dim:   #4B3FB8;
  --c-accent-soft:  rgba(110, 92, 255, 0.13);
  --c-accent-glow:  rgba(110, 92, 255, 0.45);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, #6E5CFF 0%, #9d7bff 55%, #c4b5fd 100%);
  --grad-text:   linear-gradient(100deg, #ffffff 20%, #b8b3ff 60%, #6E5CFF 100%);
  --grad-card:   linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 100%);
  --grad-border: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03) 40%, rgba(110,92,255,0.25));

  /* Semantic */
  --bg:         var(--c-black);
  --fg:         var(--c-white);
  --fg-muted:   var(--c-grey-400);
  --fg-dim:     rgba(255,255,255,0.5);
  --border:     rgba(255,255,255,0.08);
  --border-mid: rgba(255,255,255,0.16);
  --accent:     var(--c-accent);

  /* Typography Scale */
  --text-2xs:   0.625rem;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;

  /* Font Families */
  --font-display: 'Unbounded', 'Manrope', -apple-system, sans-serif;
  --font-body:    'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;    --sp-40: 10rem;  --sp-48: 12rem;

  /* Layout */
  --container: 1320px;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --col-gap:   clamp(1rem, 2vw, 2rem);

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;
  --dur-enter:   900ms;

  /* Z-index */
  --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-modal: 30; --z-nav: 40; --z-cursor: 50;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html:not(.lenis) { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Film-grain noise поверх всей страницы — глушит «плоскость» чистого чёрного */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--c-accent); color: #fff; }

/* Custom cursor only on precise pointers */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ── TYPOGRAPHY UTILITIES ── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.text-muted   { color: var(--fg-muted); }

/* Градиентное слово внутри заголовков */
.grad-word {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── DIVIDER ── */
.hr { width: 100%; height: 1px; background: var(--border); }

/* ── SCROLL REVEAL (CSS fallback + JS-driven) ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="left"].is-visible  { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}
[data-stagger].is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 70ms; }
[data-stagger].is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 140ms; }
[data-stagger].is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 210ms; }
[data-stagger].is-visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 280ms; }
[data-stagger].is-visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 350ms; }
[data-stagger].is-visible > *:nth-child(7) { opacity:1; transform:none; transition-delay: 420ms; }
[data-stagger].is-visible > *:nth-child(8) { opacity:1; transform:none; transition-delay: 490ms; }

/* Заголовки с line-mask reveal (JS вешает .split-line) */
.split-line { display: block; overflow: hidden; }
.split-line > .split-line__inner { display: block; }

/* ── ORBITAL DECOR ── */
.section-orbit-decor {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: clamp(160px, 22vw, 320px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}
.section-orbit-decor--left { right: auto; left: -40px; }
@media (max-width: 860px) { .section-orbit-decor { display: none; } }

/* ── CUSTOM CURSOR v2 — точка + инерционное кольцо со свечением ── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
}
.cursor__dot {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--c-white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.cursor__ring {
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition:
    transform var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    background var(--dur-mid) var(--ease-out);
}
body.cursor-hover .cursor__ring {
  transform: translate(-50%, -50%) scale(1.7);
  border-color: var(--c-accent-glow);
  background: rgba(110, 92, 255, 0.08);
}
body.cursor-press .cursor__ring {
  transform: translate(-50%, -50%) scale(0.85);
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ── SECTION SEPARATOR — тонкая градиентная линия ── */
.section-sep {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 30%, rgba(110,92,255,0.35) 50%, rgba(255,255,255,0.14) 70%, transparent);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .cursor { display: none; }
  html { scroll-behavior: auto; }
}