/* arsbay.com — тёмная приборная тема.
 * Правило номер один: светится ТОЛЬКО ядро. Всё остальное матовое.
 * Правило номер два: стекло только там, где под ним есть сцена. */

/* ---------- шрифты, локально, без обращений к Google ---------- */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("public/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("public/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("public/fonts/intertight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("public/fonts/intertight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/jbmono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("public/fonts/jbmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- токены ---------- */

:root {
  --void: #07080b;
  --deep: #0e1119;
  --glass: rgba(255, 255, 255, 0.04);
  --edge: rgba(255, 255, 255, 0.1);
  --ice: #e8edf5;
  --mute: #7c8798;
  --core: #4dd6ff;
  --pulse: #7b5cff;

  --display: "Unbounded", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 78rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: inherit;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 99;
  padding: 0.7rem 1rem;
  background: var(--deep);
  border: 1px solid var(--core);
}

:focus-visible {
  outline: 2px solid var(--core);
  outline-offset: 4px;
}

.kicker {
  margin: 0 0 1.1rem;
  color: var(--core);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.lede {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  color: var(--mute);
}

.glass {
  border: 1px solid var(--edge);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

/* ---------- навигация ---------- */

.nav {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem var(--pad);
  background: linear-gradient(to bottom, rgb(7 8 11 / 0.9), transparent);
}

.nav__mark {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  font-size: 0.9rem;
}

.nav__links a {
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms ease;
}

.nav__links a:hover {
  color: var(--ice);
}

.nav__cta {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--edge);
  color: var(--ice) !important;
}

.nav__cta:hover {
  border-color: var(--core);
}

/* ---------- 1. ядро ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 7rem var(--pad) 5rem;
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* единственное свечение на всём сайте */
.hero__glow {
  position: absolute;
  top: 50%;
  left: 62%;
  width: min(70vw, 46rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--core) 26%, transparent) 0%,
    color-mix(in srgb, var(--pulse) 14%, transparent) 38%,
    transparent 68%
  );
  filter: blur(28px);
  pointer-events: none;
}

.hero__panel {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--core), var(--pulse));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 44ch;
  margin: 1.75rem 0 0;
  color: var(--mute);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.hero__hint {
  position: absolute;
  bottom: 1.6rem;
  left: var(--pad);
  margin: 0;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---------- кнопки: у каждой своё поведение ---------- */

.btn-core {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--core) 55%, transparent);
  color: var(--void);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(100deg, var(--core), var(--pulse));
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.btn-core span {
  position: relative;
  z-index: 1;
}

.btn-core:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--core) 40%, transparent),
    0 12px 40px -8px color-mix(in srgb, var(--core) 55%, transparent);
}

.btn-ghost {
  position: relative;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--edge);
  color: var(--ice);
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--core) 45%, transparent);
  background: rgb(255 255 255 / 0.03);
}

/* ---------- 2. модули ---------- */

.modules {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
}

.modules__intro h2,
.registry__intro h2,
.price__intro h2,
.how__intro h2 {
  font-size: clamp(1.9rem, 4vw, 3.25rem);
}

.module {
  position: relative;
  max-width: 34rem;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

.module[data-side="right"] {
  margin-left: auto;
}

.module__no {
  display: block;
  margin-bottom: 0.9rem;
  color: color-mix(in srgb, var(--core) 70%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.module h3 {
  font-size: 1.6rem;
  font-weight: 500;
}

.module p {
  margin: 0.9rem 0 0;
  color: var(--mute);
  font-size: 1rem;
}

.module__proof {
  margin-top: 1.35rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.module__proof a {
  color: var(--core);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--core) 40%, transparent);
}

.module__proof a:hover {
  border-bottom-color: var(--core);
}

.module__proof span {
  display: block;
  margin-top: 0.5rem;
  color: var(--mute);
  font-family: var(--body);
  font-size: 0.9rem;
  letter-spacing: normal;
}

/* ---------- 3. предметка: тишина после 3D ---------- */

.domain {
  padding: clamp(6rem, 16vh, 12rem) var(--pad);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  background: var(--deep);
}

.domain__inner {
  max-width: 52rem;
  margin: 0 auto;
}

.domain h2 {
  font-size: clamp(2.5rem, 7vw, 5rem);
}

.domain__text {
  max-width: 42ch;
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

.domain__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.domain__list li::before {
  content: "/ ";
  color: var(--core);
}

/* ---------- 4. реестр ---------- */

.registry {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
}

.registry__scroll {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  overflow-x: auto;
}

.registry table {
  width: 100%;
  min-width: 50rem;
  border-collapse: collapse;
  text-align: left;
}

.registry th {
  padding: 0 1.5rem 0.9rem 0;
  border-bottom: 1px solid var(--edge);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.registry td {
  padding: 1.1rem 1.5rem 1.1rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
  font-size: 0.95rem;
  vertical-align: baseline;
  color: var(--mute);
}

.registry tr:last-child td {
  border-bottom: 0;
}

.t-name {
  color: var(--ice) !important;
  font-weight: 500;
  white-space: nowrap;
}

.t-stack {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.state {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.state--live {
  border-color: color-mix(in srgb, var(--core) 45%, transparent);
  color: var(--core);
}

.state--wip {
  color: var(--ice);
}

.state--done {
  color: var(--mute);
}

/* ---------- 5. как работаем ---------- */

.how {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  border-top: 1px solid var(--edge);
}

.how__steps {
  display: grid;
  gap: 1px;
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  padding: 0;
  background: var(--edge);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  list-style: none;
}

.how__steps li {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--void);
}

.how__steps span {
  display: block;
  margin-bottom: 1rem;
  color: color-mix(in srgb, var(--core) 65%, transparent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}

.how__steps h3 {
  font-size: 1.15rem;
  font-weight: 500;
}

.how__steps p {
  margin: 0.7rem 0 0;
  color: var(--mute);
  font-size: 0.92rem;
}

.how__note {
  margin: 2.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
  max-width: 52ch;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.7;
}

/* ---------- 6. цены ---------- */

.price {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
}

.tiers {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tier {
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.tier--mid {
  border-color: color-mix(in srgb, var(--core) 32%, transparent);
}

.tier h3 {
  font-size: 1.3rem;
  font-weight: 500;
}

.tier__rate {
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--core);
}

.tier ul {
  margin: 1.5rem 0 0;
  padding: 0;
  color: var(--mute);
  font-size: 0.92rem;
  list-style: none;
}

.tier li {
  padding: 0.35rem 0 0.35rem 1.1rem;
  text-indent: -1.1rem;
}

.tier li::before {
  content: "/ ";
  color: color-mix(in srgb, var(--core) 60%, transparent);
}

/* ---------- 7. контакт ---------- */

.contact {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  overflow: hidden;
}

.contact::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, 44rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--pulse) 16%, transparent) 0%,
    transparent 62%
  );
  filter: blur(30px);
  content: "";
  pointer-events: none;
}

.contact__inner {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  text-align: center;
}

.contact h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.contact .lede {
  margin-inline: auto;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2.25rem;
}

/* ---------- подвал ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--edge);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- появление при скролле ----------
 * Скрываем ТОЛЬКО когда JS работает: без скриптов и на скриншотах
 * страница остаётся полностью видимой. */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Каскад внутри групп: элементы въезжают не хором, а по очереди. */
.js .how__steps li:nth-child(2),
.js .tiers .tier:nth-child(2) {
  transition-delay: 90ms;
}
.js .how__steps li:nth-child(3),
.js .tiers .tier:nth-child(3) {
  transition-delay: 180ms;
}
.js .how__steps li:nth-child(4) {
  transition-delay: 270ms;
}

/* ---------- счётчик ---------- */

.tick {
  display: inline-block;
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--core), var(--pulse));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- шов по кромке модуля при появлении ---------- */

.module {
  overflow: hidden;
}

.module::after {
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--core) 80%, transparent),
    transparent
  );
  content: "";
  pointer-events: none;
}

.js .module.in::after {
  animation: seam 900ms 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes seam {
  from {
    left: -30%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    left: 100%;
    opacity: 0;
  }
}

/* ---------- подсветка строк реестра ---------- */

.registry tbody tr {
  transition: background 180ms ease;
}

.registry tbody tr:hover {
  background: rgb(255 255 255 / 0.025);
}

.registry tbody tr:hover .t-name {
  color: var(--core) !important;
}

/* ---------- живая кромка стекла под курсором ---------- */

.glass {
  transition: border-color 240ms ease, transform 240ms ease;
}

.module:hover,
.tier:hover {
  border-color: color-mix(in srgb, var(--core) 30%, transparent);
  transform: translateY(-3px);
}

@media (max-width: 860px) {
  .nav__links a:not(.nav__cta) {
    display: none;
  }

  .module,
  .module[data-side="right"] {
    max-width: none;
    margin-left: 0;
  }

  .hero__glow {
    left: 50%;
    top: 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-core,
  .btn-ghost,
  .glass,
  .registry tbody tr {
    transition: none;
  }

  .js .module.in::after {
    animation: none;
    opacity: 0;
  }

  .module:hover,
  .tier:hover {
    transform: none;
  }
}

/* ============================================================
   v2: полоса прогресса, студия генерации, фильтры реестра
   ============================================================ */

/* ---------- полоса прочтения ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}

.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--core), var(--pulse));
  box-shadow: 0 0 12px color-mix(in srgb, var(--core) 60%, transparent);
  transform-origin: left center;
}

/* ---------- переключатель языка ---------- */

.lang {
  font: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ice);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 0.5rem;
  /* 44px — минимальная зона нажатия, ширина под две буквы. */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.lang:hover {
  border-color: color-mix(in srgb, var(--core) 45%, transparent);
  color: var(--core);
}

/* ---------- студия генерации ---------- */

.studio {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) var(--pad);
  max-width: var(--maxw);
  margin-inline: auto;
  overflow: hidden;
}

/* Пятно света живёт за карточками и не перехватывает курсор. */
.studio__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(70rem, 120%);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--pulse) 16%, transparent) 0%,
    transparent 62%
  );
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.studio__intro,
.studio__grid,
.studio__note {
  position: relative;
  z-index: 1;
}

.studio__intro {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.studio__intro h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 1rem;
}

.studio__intro h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--core), var(--pulse));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.studio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
  perspective: 1200px;
}

.shot {
  padding: 0.75rem 0.75rem 1.25rem;
  border-radius: 1.1rem;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 320ms ease;
  will-change: transform;
}

.shot:hover,
.shot:focus-within {
  border-color: color-mix(in srgb, var(--core) 34%, transparent);
}

.shot__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--core) 26%, transparent), transparent 58%),
    radial-gradient(120% 120% at 82% 88%, color-mix(in srgb, var(--pulse) 30%, transparent), transparent 58%),
    var(--deep);
  display: grid;
  place-items: center;
  transform: translateZ(24px);
}

.shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Кадры сгенерированы в палитре сайта, но слегка гасим их,
     чтобы заголовок карточки оставался главным. */
  opacity: 0.92;
  transition: opacity 320ms ease, scale 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.shot:hover .shot__media img,
.shot:focus-within .shot__media img {
  opacity: 1;
  scale: 1.04;
}

/* Затемнение снизу: бейдж и стык с карточкой не спорят с картинкой. */
.shot__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0.35) 0%, transparent 38%, rgba(7, 8, 11, 0.4) 100%);
  pointer-events: none;
}

.shot__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(7, 8, 11, 0.72);
  border: 1px solid var(--edge);
  color: var(--ice);
}

.shot h3 {
  font-size: 1rem;
  margin: 1rem 0 0.35rem;
  padding-inline: 0.35rem;
  transform: translateZ(14px);
}

.shot__stack {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 0;
  padding-inline: 0.35rem;
  transform: translateZ(8px);
}

.studio__note {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: 0.86rem;
  color: var(--mute);
  max-width: 42rem;
  border-left: 2px solid color-mix(in srgb, var(--core) 40%, transparent);
  padding-left: 0.9rem;
}

/* ---------- фильтры реестра ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.filter {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ice);
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 44px по вертикали — минимальная зона нажатия на тач. */
  min-height: 44px;
  transition: border-color 200ms ease, background-color 200ms ease,
    color 200ms ease;
}

.filter i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--mute);
  transition: color 200ms ease;
}

.filter:hover {
  border-color: color-mix(in srgb, var(--core) 40%, transparent);
}

.filter.is-on {
  background: color-mix(in srgb, var(--core) 16%, transparent);
  border-color: color-mix(in srgb, var(--core) 55%, transparent);
}

.filter.is-on i {
  color: var(--core);
}

.filters__status {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mute);
  margin: 0.75rem 0 0;
  min-height: 1.2em;
}

/* Скрытие строк фильтром: аккуратное схлопывание, а не резкий пропуск. */
.registry tbody tr {
  transition: opacity 240ms ease;
}

.registry tbody tr[hidden] {
  display: none;
}

/* ---------- каскад появления ---------- */

.js .reveal[data-stagger] {
  transition-delay: calc(var(--d, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  .progress i {
    box-shadow: none;
  }

  .shot,
  .filter,
  .registry tbody tr {
    transition: none;
  }

  .shot:hover,
  .shot:focus-within {
    transform: none;
  }

  .shot__media img {
    transition: none;
  }

  .shot:hover .shot__media img,
  .shot:focus-within .shot__media img {
    scale: 1;
  }

  .js .reveal[data-stagger] {
    transition-delay: 0ms;
  }
}