/* ───────── Токены ───────── */
:root {
  --bg:      #111110;
  --panel:   #1d1c1a;
  --panel-2: #24231f;
  --line:    #2e2c27;
  --line-2:  #3a3832;
  --fg:      #f0ead8;
  --fg-2:    #d9d2bd;
  --muted:   #8d887a;
  --muted-2: #6a665b;
  --accent:   oklch(0.82 0.17 85);
  --accent-2: oklch(0.82 0.14 205);

  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:    'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --maxw: 1200px;
  --pad-x: clamp(20px, 4vw, 56px);
  --radius: 6px;
  --radius-lg: 10px;

  color-scheme: dark;
}

/* ───────── Скроллбар ───────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
html { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--bg); }

/* ───────── Ресет ───────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-feature-settings: "ss01", "ss02", "cv11";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ───────── Фоновые эффекты (CRT) ───────── */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 40%),
    radial-gradient(circle at 90% 80%, color-mix(in oklab, var(--accent-2) 8%, transparent), transparent 45%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    color-mix(in oklab, var(--fg) 4%, transparent) 2px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

.page-wrap { position: relative; z-index: 2; }

/* ───────── Анимации ───────── */
@keyframes blink { 50% { opacity: 0; } }
/* ───────── Scroll reveal ───────── */
.sect {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sect.in-view {
  opacity: 1;
  transform: none;
}

/* Секции со stagger: секция появляется мгновенно, дети — каскадом */
.sect.has-stagger {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ───────── Staggered reveal для дочерних элементов ───────── */
/* Используем @keyframes + animation-delay, а не transition-delay.
   Иначе transition-delay применяется ко ВСЕМ transitions элемента,
   включая hover-эффекты на вложенных компонентах — hover чем дальше
   по нумерации, тем сильнее «тормозит».

   Две раздельные анимации:
   • stagger-fade (forwards) — opacity 0→1, остаётся после окончания.
   • stagger-slide (без forwards) — translateY 20px→0, после окончания
     возвращается к static transform из nth-child (нужно для polaroid,
     где у каждой карточки свой rotate). */
.stagger > * { opacity: 0; }
.in-view .stagger > * {
  animation:
    stagger-fade 0.5s ease forwards,
    stagger-slide 0.5s ease;
}
.in-view .stagger > *:nth-child(2) { animation-delay: 0.15s; }
.in-view .stagger > *:nth-child(3) { animation-delay: 0.30s; }
.in-view .stagger > *:nth-child(4) { animation-delay: 0.45s; }
.in-view .stagger > *:nth-child(5) { animation-delay: 0.60s; }
.in-view .stagger > *:nth-child(6) { animation-delay: 0.75s; }
.in-view .stagger > *:nth-child(7) { animation-delay: 0.90s; }
.in-view .stagger > *:nth-child(8) { animation-delay: 1.05s; }
@keyframes stagger-fade {
  to { opacity: 1; }
}
@keyframes stagger-slide {
  from { transform: translateY(20px); }
}