/* ============ BASE ============ */
:root {
  --dark: #0b0b0e;
  --dark-2: #121218;
  --light: #f4f3ee;
  --ink: #14141a;
  --accent: #b8ff3c;
  --accent-dim: rgba(184, 255, 60, .14);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Unbounded', system-ui, sans-serif;
  --text: #e8e8ec;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--mono);
  background: var(--dark);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: var(--dark); }

/* Метка-болванка для недоделанных блоков (потом уберём) */
.block { min-height: 60vh; padding: 4rem 5vw; }

.block-label {
  display: flex;
  gap: 1.5rem;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .45;
}

.block-label span:first-child { color: var(--accent); }


/* ============ АНИМАЦИИ ПОЯВЛЕНИЯ ПРИ СКРОЛЛЕ ============ */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* поэлементная задержка внутри revealed-блока */
.reveal .reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.reveal.is-visible .reveal-item {
  opacity: 1;
  transform: none;
}

.reveal.is-visible .reveal-item:nth-child(1) { transition-delay: .05s; }
.reveal.is-visible .reveal-item:nth-child(2) { transition-delay: .15s; }
.reveal.is-visible .reveal-item:nth-child(3) { transition-delay: .25s; }
.reveal.is-visible .reveal-item:nth-child(4) { transition-delay: .35s; }
.reveal.is-visible .reveal-item:nth-child(5) { transition-delay: .45s; }
.reveal.is-visible .reveal-item:nth-child(6) { transition-delay: .55s; }

/* уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}