/* ═══════════════════════════════════════════════════════════
   SHARED STYLES — robot-lending
   Подключается на всех 4 страницах.
   ═══════════════════════════════════════════════════════════ */

/* Modern CSS reset + tokens */
:root {
  --bg:      #060606;
  --surface: #0d0d0d;
  --surface-2: #111;
  --text:    #ede9e3;
  --muted:   color-mix(in srgb, var(--text) 35%, transparent);
  --line:    color-mix(in srgb, var(--text) 6%, transparent);
  --border:  color-mix(in srgb, var(--green) 12%, transparent);

  --green:   #00ff41;
  --green-2: #0a8c2a;
  --green-deep: #003318;

  --accent:  var(--green);
  --err:     #ff2d00;

  --font-display: 'IBM Plex Mono', 'Courier New', monospace;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* View Transition tokens */
  --vt-dur: .45s;

  /* ── Type scale ──────────────────────────── */
  --fs-sm:    15px;                          /* labels, tags, captions */
  --fs-base:  16px;                          /* body paragraphs */
  --fs-ui:    19px;                          /* nav, buttons */

  --fs-d0: clamp(22px, 2.5vw, 32px);        /* between ui and d1 */
  --fs-d1: clamp(28px, 3.5vw, 48px);        /* card headings */
  --fs-d2: clamp(40px, 5.5vw, 80px);        /* sub-section metrics, accents */
  --fs-d3: clamp(48px, 8vw, 108px);         /* section titles */
  --fs-d4: clamp(72px, 11vw, 148px);        /* major/hero headings */
  --fs-ghost: clamp(100px, 16vw, 260px);    /* decorative background text */
}

@property --beam-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -50%;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  min-height: 100dvh;
  overflow-x: hidden;
  text-wrap: pretty;
}

/* Hide all native cursors only on devices with hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  body, a, button, input, select, textarea, label,
  [role="button"], [onclick], .card, .option, .task,
  .check-row, .step-card {
    cursor: none !important;
  }
}

img, svg, canvas { display: block; max-width: 100%; }

/* Headings get balanced wrapping */
h1, h2, h3, .balance { text-wrap: balance; }

/* Monospace word-spacing fix for display sizes */
h1, h2, h3 { word-spacing: -.2em; letter-spacing: -.03em; }

/* ─── Visual atmosphere ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 200;
  opacity: .6;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.04) 3px 4px);
  pointer-events: none;
  z-index: 199;
}

/* ─── Custom cursor (desktop only) ───────────────────────── */
#cur, #cur-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#cur {
  width: 8px; height: 8px;
  background: var(--green);
  z-index: 9999;
  transition: opacity .2s, width .2s, height .2s, background .15s;
}
#cur-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--green);
  border-radius: 50%;
  z-index: 9998;
  transition:
    opacity .2s,
    width .2s,
    height .2s,
    border-color .15s,
    left .18s var(--ease-out),
    top  .18s var(--ease-out);
}
@media (hover: none), (pointer: coarse) {
  #cur, #cur-ring { display: none; }
}

body.cursor-ready #cur      { opacity: 1; }
body.cursor-ready #cur-ring { opacity: .45; }

body.cursor-ready:has(a:hover) #cur,
body.cursor-ready:has(button:hover) #cur,
body.cursor-ready:has(.card:hover) #cur,
body.cursor-ready:has(.option:hover) #cur { width: 14px; height: 14px; }

body.cursor-ready:has(a:hover) #cur-ring,
body.cursor-ready:has(button:hover) #cur-ring,
body.cursor-ready:has(.card:hover) #cur-ring,
body.cursor-ready:has(.option:hover) #cur-ring { width: 52px; height: 52px; opacity: .2; }

/* dark cursor on green-button hover (so it doesn't blend) */
body.cursor-ready:has(.btn-primary:hover) #cur,
body.cursor-ready:has(.btn-nav:hover) #cur,
body.cursor-ready:has(.btn-submit:hover) #cur,
body.cursor-ready:has(.btn-next:hover) #cur,
body.cursor-ready:has(.btn-finish:hover) #cur,
body.cursor-ready:has(.btn-back-tests.primary:hover) #cur { background: #000; }

body.cursor-ready:has(.btn-primary:hover) #cur-ring,
body.cursor-ready:has(.btn-nav:hover) #cur-ring,
body.cursor-ready:has(.btn-submit:hover) #cur-ring,
body.cursor-ready:has(.btn-next:hover) #cur-ring,
body.cursor-ready:has(.btn-finish:hover) #cur-ring,
body.cursor-ready:has(.btn-back-tests.primary:hover) #cur-ring { border-color: rgba(0,0,0,.5); }

/* ─── Selection ───────────────────────────────────────────── */
::selection { background: var(--green); color: #000; }

/* ─── Focus ring (keyboard only) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

/* ─── Skip link (accessibility) ───────────────────────────── */
.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--green); color: #000;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-weight: 700;
  z-index: 9999;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ─── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body::before, body::after { display: none; }
  #hero-canvas, #cluster-canvas { opacity: .15; }
}

/* ─── View Transitions API ────────────────────────────────── */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--vt-dur);
  animation-timing-function: var(--ease-out);
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
}
::view-transition-new(root) {
  animation-name: vt-fade-up;
}
@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-12px) scale(.985); }
}
@keyframes vt-fade-up {
  from { opacity: 0; transform: translateY(16px); }
}

/* persistent CTA across pages */
.btn-primary { view-transition-name: cta-button; }

/* ─── Marquee ticker ──────────────────────────────────────── */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  background: color-mix(in srgb, var(--green) 4%, var(--bg));
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  letter-spacing: .2em;
  white-space: nowrap;
  position: relative;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}
.ticker-track > * {
  display: inline-flex;
  align-items: center;
  padding: 0 32px;
  color: var(--text);
}
.ticker-track > *::after {
  content: '·';
  margin-left: 32px;
  color: var(--green);
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}