@import "tailwindcss";

/* Шрифт Unbounded подключается через Google Fonts (см. index.html) —
   локальные .ttf в public/fonts больше не нужны. */

@theme {
  --color-paper: #ffffff;
  --color-paper-soft: #f2f2ee;
  --color-ink: #1c1c1c;
  --color-ink-soft: #8f8f8c;
  --color-panel: #282828;
  --color-panel-soft: #2f2f2f;
  --color-line: rgba(28, 28, 28, 0.16);
  --color-line-dark: rgba(255, 255, 255, 0.22);
  --color-green: #23c00c;
  --color-green-dark: #1c9b09;
  --color-green-ink: #0a2b03;
  --color-green-soft: rgba(35, 192, 12, 0.14);

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-label: "Unbounded", system-ui, sans-serif;
  --font-mono: "Unbounded", system-ui, sans-serif;
  --font-body: "Unbounded", system-ui, sans-serif;

  --radius-card: 20px;
  --radius-btn: 14px;
  --shadow-card: 0 18px 40px rgba(16, 16, 16, 0.14);
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

html {
  scroll-padding-top: 90px;
}

/* Section kicker: //ТЕКСТ — Unbounded, bold, caps */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow::before {
  content: "//";
  margin-right: 1px;
}

/* Блок "Единая система": текст проявляется с лёгким подъёмом из блюра,
   а иконка под ним дорисовывается штрихом — фигура за фигурой. */
@keyframes text-sprout {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.text-sprout {
  animation: text-sprout 640ms ease-out both;
}

@keyframes line-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.draw-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: line-draw 700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .draw-line,
  .text-sprout {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}