/* ============================================================
   ALLVISIO · SITE CHROME — переиспользуемые компоненты каркаса:
   меню (nav + Trionn-панель), секция контактов, нижний элемент
   (лейбл «Детализация до бесконечности» + копирайт + прогресс скролла).

   Вырезано из assets/index-BMGp7XbG.css основного сайта.
   Подключать ПОСЛЕ css/tokens.css и после CSS страницы:
     <link rel="stylesheet" href="./css/chrome.css">
   Плюс скрипты (см. devcalc.html): i18n.js → gsap(CDN) → site-chrome.js
   → tmenu.js → scroll-progress.js.
   ============================================================ */

/* ---------- Общие классы (.serif, .fade-blur) ---------- */
.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400
}

.fade-blur {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out)
}

.fade-blur.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0)
}

/* ---------- КОМПОНЕНТ: МЕНЮ (nav + RU/EN + MENU-кнопка) ---------- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--nav-pad-x);
  mix-blend-mode: difference
}

.nav-brand {
  font-size: var(--label-lg-size);
  letter-spacing: var(--label-lg-track);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap
}

.nav-links {
  display: none;
  gap: 2rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out)
}

.nav-links a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: var(--fs-0);
  font-weight: 400;
  transition: color .3s var(--ease-out)
}

.nav-links a:hover {
  color: #fff
}

.nav-links a.on {
  color: var(--em)
}

.nav-lang {
  display: flex;
  gap: .15rem;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .08em
}

.nav-lang button {
  background: none;
  border: none;
  color: var(--text-faint);
  font: inherit;
  cursor: pointer;
  padding: .25rem .5rem;
  transition: color .3s var(--ease-out)
}

.nav-lang button.on {
  color: #fff
}

.nav-lang span {
  color: var(--text-faint);
  opacity: .5
}

@media (min-width:768px) {
  nav {
    padding: 1.75rem var(--nav-pad-x)
  }

  .nav-links {
    display: flex
  }
}

#nav-dot {
  position: fixed;
  z-index: 60;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--em);
  box-shadow: 0 0 6px #e6362d80;
  pointer-events: none;
  opacity: 0;
  transition: left .35s var(--ease-out), opacity .25s var(--ease-out)
}

#nav-dot.snap {
  transition: opacity .25s var(--ease-out)
}

@media (max-width:767px) {
  #nav-dot {
    display: none
  }
}

/* ---------- КОМПОНЕНТ: СЕКЦИЯ КОНТАКТОВ (+ копирайт footer внутри) ---------- */
#contact {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw
}

#contact .line {
  font-size: clamp(var(--fs-2), 3.6vw, var(--fs-5));
  color: var(--text-soft);
  margin-bottom: 2rem
}

#contact .mail-wrap {
  position: relative;
  display: inline-block
}

#contact .mail {
  font-weight: 700;
  font-size: clamp(var(--fs-2), 5.4vw, var(--fs-7));
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  transition: color .35s var(--ease-out);
  word-break: break-all
}

#contact .mail:hover {
  color: var(--em)
}

.copy-toast {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 8px);
  margin-bottom: .5rem;
  color: var(--em);
  font-size: var(--fs-0);
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none
}

.copy-toast.on {
  animation: toastUp 1.6s var(--ease-out) forwards
}

@keyframes toastUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px)
  }

  14% {
    opacity: 1;
    transform: translate(-50%)
  }

  72% {
    opacity: 1;
    transform: translate(-50%)
  }

  to {
    opacity: 0;
    transform: translate(-50%)
  }
}

.mail-hint {
  margin-top: .5rem;
  color: var(--text-faint);
  font-size: var(--label-sm-size);
  letter-spacing: .12em
}

#contact .socials {
  margin-top: 1.5rem;
  font-size: var(--label-sm-size);
  letter-spacing: var(--label-sm-track);
  text-transform: uppercase;
  color: #ffffff59
}

#contact .socials a {
  display: inline-block;
  color: #ffffff8c;
  text-decoration: none;
  transition: color .3s var(--ease-out)
}

#contact .socials a:hover {
  color: #ffffffe6
}

#contact footer {
  position: absolute;
  bottom: 1.5rem;
  font-size: var(--label-sm-size);
  letter-spacing: var(--label-sm-track);
  text-transform: uppercase;
  color: var(--text-faint)
}

@media (prefers-reduced-motion:reduce) {
  .hero-arrow svg {
    animation: none;
    opacity: .7
  }

  .fade-blur {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none
  }

  #nav-dot {
    transition: none
  }

  .copy-toast.on {
    animation: none;
    opacity: 1
  }
}

/* ---------- КОМПОНЕНТ: TRIONN-МЕНЮ (панель) ---------- */
/* ===== TRIONN MENU PORT v2 ===== */
nav {
  justify-content: flex-start
}

.nav-lang {
  margin-left: auto;
  margin-right: .7rem
}

.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: .42rem 1.05rem;
  color: #fff;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s var(--ease-out)
}

.nav-menu-btn:hover {
  border-color: rgba(255, 255, 255, .6)
}

.nmb-label {
  position: relative;
  line-height: 1
}

.nmb-burger {
  position: relative;
  width: .78rem;
  height: .62rem;
  display: inline-block;
  flex: none
}

.nmb-burger i {
  position: absolute;
  left: 0;
  top: 50%;
  width: .78rem;
  height: 1px;
  background: #fff;
  border-radius: 1px;
  transform: translateY(-50%);
  transition: all .5s var(--ease-out)
}

.nmb-burger i:first-child {
  transform: translateY(calc(-50% - 2px))
}

.nmb-burger i:last-child {
  transform: translateY(calc(-50% + 2px))
}

body:not(.tmenu-open) .nav-menu-btn:hover .nmb-burger i:first-child {
  transform: translateY(calc(-50% + 2px))
}

body:not(.tmenu-open) .nav-menu-btn:hover .nmb-burger i:last-child {
  transform: translateY(calc(-50% - 2px))
}

.tmenu-open .nav-menu-btn .nmb-burger i:first-child {
  transform: translateY(-50%) rotate(45deg)
}

.tmenu-open .nav-menu-btn .nmb-burger i:last-child {
  transform: translateY(-50%) rotate(-45deg)
}

body.tmenu-open .nav-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out)
}

body:not(.tmenu-open) .nav-links {
  transition: opacity .3s var(--ease-out) 1s, visibility 0s linear 1.3s
}

.tmenu-wrap {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
  z-index: 55;
  pointer-events: none
}

.tmenu-panel {
  max-width: 440px;
  width: 100%;
  height: 100%;
  border-radius: .6rem;
  background: #232529;
  color: #ECEAE6;
  border: 1px solid rgba(255, 255, 255, .09);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  clip-path: circle(0% at 95% 5%);
  opacity: 0;
  visibility: hidden
}

.tmenu-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
  padding: 6.75rem 2rem 2.5rem;
  gap: 3.5rem
}

.tm-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: auto 0
}

.tmenu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%
}

.menu-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.tlink {
  display: block;
  font-size: 1.25rem;
  line-height: 1.18;
  color: #ECEAE6;
  text-decoration: none;
  cursor: pointer;
  position: relative
}

.tl-wrap {
  display: block;
  position: relative
}

.tl-orig,
.tl-clone {
  display: block
}

.tl-clone {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none
}

.tl-orig>span,
.tl-clone>span {
  display: inline-block;
  will-change: transform, opacity, filter
}

.tl-clone>span {
  opacity: 0
}

.menu-arrow {
  flex: none;
  display: flex;
  align-items: center;
  padding-top: .375rem;
  color: #ECEAE6;
  opacity: 0;
  transform: translateX(0);
  transition: all .3s ease-in-out;
  transition-delay: .3s
}

.menu-item:hover .menu-arrow {
  opacity: 1;
  transform: translateX(8px)
}

.tstory-wrap {
  width: 100%
}

.tmenu-story {
  position: relative;
  display: inline-block;
  margin-top: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ECEAE6;
  background: none;
  cursor: pointer;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out)
}

.tmenu-story:hover {
  border-color: rgba(255, 255, 255, .6)
}

.tmenu-story .tvisio {
  color: var(--em)
}

.tm-bottom {
  display: flex;
  flex-direction: column;
  width: 100%
}

.tm-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(236, 234, 230, .5);
  margin-bottom: .9rem
}

[data-slot="social"] {
  margin-top: 2.75rem
}

.tm-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  font-size: .95rem;
  color: #ECEAE6
}

.tm-k {
  width: 1.5rem;
  color: rgba(236, 234, 230, .5);
  text-transform: uppercase
}

.tval {
  position: relative;
  display: inline-block
}

.tmenu-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  width: 100%
}

.tsoc-item {
  color: #ECEAE6;
}

.tsoc-item a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tsoc-item a:hover .tl-orig > span,
.tsoc-item a:hover .tl-clone > span {
  filter: blur(0px);
}

@media (max-width:767px) {
  .nav-menu-btn {
    padding: .35rem .8rem;
    font-size: .72rem
  }

  .tmenu-wrap {
    padding: 0
  }

  .tmenu-panel {
    max-width: none;
    border-radius: 0
  }

  .tmenu-inner {
    padding: 5.5rem 1.4rem 1.6rem;
    gap: 2.2rem
  }

  .tlink {
    font-size: 2rem;
    line-height: 1.08
  }
}

/* Снэк-меню на story-кнопке (вместо ✦) — в обоих слоях HoverBlur, цвет --em */
.tmenu-story .tl-orig::before,
.tmenu-story .tl-clone::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 81 81'%3E%3Cdefs%3E%3CclipPath id='lvStorySign'%3E%3Crect width='59' height='59' transform='translate(0 29.5) rotate(-30)'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath clip-path='url(%23lvStorySign)' fill='%23E6362D' d='M14.75 55.0478C10.6753 47.9902 13.0913 38.9736 20.1489 34.8989C24.1726 32.5758 29.0493 32.2831 33.318 34.1085L37.841 36.0425L38.4275 31.1585C38.981 26.549 41.6729 22.4721 45.6966 20.1489C52.7542 16.0742 61.7708 18.4902 65.8455 25.5478C69.9202 32.6054 67.5042 41.622 60.4466 45.6967C56.4229 48.0198 51.5462 48.3125 47.2775 46.4871L42.7545 44.5531L42.168 49.4371C41.6145 54.0466 38.9226 58.1235 34.8989 60.4467C27.8413 64.5214 18.8247 62.1054 14.75 55.0478ZM37.1043 42.1416L31.0003 39.5342C28.4398 38.4365 25.5099 38.6164 23.0989 40.0085C18.8675 42.4514 17.4166 47.8665 19.8595 52.0978C22.3025 56.3291 27.7175 57.7801 31.9489 55.3371C34.3599 53.9451 35.9808 51.4977 36.3103 48.7314L37.1043 42.1416ZM43.4912 38.4541L49.5952 41.0614C52.1557 42.1591 55.0856 41.9792 57.4966 40.5871C61.728 38.1442 63.1789 32.7291 60.7359 28.4978C58.293 24.2665 52.878 22.8155 48.6466 25.2585C46.2356 26.6505 44.6147 29.0979 44.2852 31.8642L43.4912 38.4541Z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: .5em;
  vertical-align: -.2em
}

/* ПК-версия меню: основные ссылки — шрифт Х2, между ними +20px */
@media (min-width:768px) {
  .tmenu-links {
    gap: 20px
  }

  .tlink {
    font-size: 2.5rem
  }
}

/* ---------- КОМПОНЕНТ: НИЖНИЙ ЭЛЕМЕНТ (лейбл + прогресс скролла) ----------
   Горизонтальные отступы = контейнер меню (--nav-pad-x из tokens.css, §17.3):
   лейбл и бары стоят на одной вертикали с краями nav. На главной (свой CSS)
   элемент остаётся на 2rem — этот блок относится только к статик-страницам. */
#scroll-progress {
  position: fixed;
  bottom: 2rem;
  right: var(--nav-pad-x);
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 9000;
  pointer-events: none;
}

#scroll-progress-label {
  position: fixed;
  bottom: 2rem;
  left: var(--nav-pad-x);
  font-family: Manrope, system-ui, sans-serif;
  font-size: var(--label-lg-size);
  letter-spacing: var(--label-lg-track);
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
  transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out)
}

@media (max-width:767px) {
  body.sp-scrolled #scroll-progress-label {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.tmenu-open #scroll-progress-label {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body:not(.tmenu-open):not(.sp-scrolled) #scroll-progress-label {
    transition: opacity .3s var(--ease-out) 1.5s, visibility 0s linear 1.8s;
  }
}

#scroll-progress-bars {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.sp-bar {
  width: 15px;
  height: 1px;
  background: var(--em);
  opacity: .5;
  transition: width .2s ease, opacity .2s ease;
  align-self: flex-end;
}

.sp-bar.active {
  width: 25px;
  opacity: 1;
}

@keyframes sp-wave {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.6); }
}

.sp-bar.wave {
  animation: sp-wave 2s ease-in-out infinite;
  transform-origin: right center;
}

@media (max-width:767px) {
  #scroll-progress-label {
    white-space: normal;
    font-size: .6rem;
    max-width: 45vw;
    line-height: 1.4;
    bottom: 1.25rem;
    left: var(--nav-pad-x); /* = 2rem на мобильном — так же, как padding nav */
  }

  body.sp-bottom #scroll-progress {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility .3s var(--ease-out);
  }
}

/* ---------- КОМПОНЕНТ: КАСТОМНЫЙ КУРСОР (assets/modules/cursor.js) ----------
   Вырезано из assets/index-BMGp7XbG.css главной (маркер #cur-dot / #cur-visit).
   DOM инжектит сам cursor.js; без подключённого скрипта эти правила ничего не делают.
   Работает только при точном указателе: JS не стартует на touch, а media-query ниже
   дублирует защиту. Линза #cur-visit появляется лишь на hover карточек-мишеней
   (селектор VISIT_SEL в cursor.js, по умолчанию .pcard — на статик-страницах молчит). */
body.has-cursor,
body.has-cursor a,
body.has-cursor button {
  cursor: none
}

body.has-cursor input,
body.has-cursor textarea,
body.has-cursor select,
body.has-cursor [contenteditable] {
  cursor: auto
}

#cur-dot,
#cur-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform
}

#cur-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff;
  transition: opacity .2s var(--ease-out)
}

#cur-ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 1px solid #fff;
  transition: border-color .25s var(--ease-out), opacity .3s var(--ease-out)
}

#cur-ring.mag {
  border-color: var(--em)
}

.cur-trail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  pointer-events: none;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--em);
  opacity: 0;
  will-change: transform, opacity
}

#cur-visit {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  will-change: transform
}

.cv-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transform: translate(-50%, -50%) scale(.55);
  opacity: 0;
  transition: transform .2s var(--ease-out), opacity .2s var(--ease-out)
}

#cur-visit.on .cv-in {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1
}

#cur-visit svg {
  width: 44px;
  height: 44px;
  fill: var(--em);
  filter: drop-shadow(0 0 12px rgba(230, 54, 45, .35))
}

#cur-visit span {
  font-size: var(--label-sm-size);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(10, 10, 10, .7)
}

@media (hover:none),
(pointer:coarse) {

  #cur-dot,
  #cur-ring,
  #cur-visit,
  .cur-trail {
    display: none
  }
}

/* Состояние «звезда» (vortex-режим главной, JS бандла) — на статике не наступает,
   правило общее для идентичности компонента. */
#cur-ring.star {
  border-style: dashed;
  border-color: var(--em-soft)
}

/* ===== CUR-VISIT LIQUID GLASS v3 — круглая стеклянная кнопка «Посмотреть» при hover .pcard.
   Стекло рендерит движок LiquidGlass (glass-cards.js вешает инстанс на #cur-visit;
   зеркало .pglass-src = живой кадр #cosmos). CSS держит только геометрию и состояние show/hide:
   бокс хоста 132x132 центрируется на точке курсора через margin -66px (JS ставит translate3d(vx,vy)
   на сам хост), .cv-in заполняет бокс БЕЗ translate(-50%,-50%) — движку нужно, чтобы glass-элемент
   лежал внутри границ root. overflow:hidden!important клипит canvas движка по кругу (движок
   инлайн-ставит overflow:visible). Перебивает плоскую базу выше — порядок как в бандле главной. */
#cur-visit {
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px
}

/* z-index:0 — стекконтест: canvas движка (z:-1 внутри .cv-in) должен лежать ПОВЕРХ зеркала-брата,
   а не под ним (у карточек это делал backdrop-filter). */
/* justify-content:center — иконка + надпись по центру круга (без него flex-column прижимает их к верху). */
#cur-visit .cv-in {
  position: relative;
  z-index: 0;
  overflow: hidden !important;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  gap: 6px;
  justify-content: center;
  transform: scale(.7) rotate(-8deg);
  opacity: 0;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out)
}

#cur-visit.on .cv-in {
  transform: scale(1) rotate(0deg);
  opacity: 1
}

/* Зеркало НЕВИДИМО (движок читает его битмап независимо от CSS): иначе после ухода курсора на карточке
   остаётся тёмный круг с последним кадром cosmos — «откушенное яблоко». */
#cur-visit .pglass-src {
  opacity: 0
}

#cur-visit svg {
  width: 42px;
  height: 42px;
  fill: var(--em);
  filter: drop-shadow(0 0 10px rgba(230, 54, 45, .5)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  position: relative;
  z-index: 1
}

#cur-visit span {
  font-size: .6rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 1
}
/* ===== ALL-PROJECTS — кнопка «Все проекты» после последней карточки проектов на главной (2026-10-05).
   Размечена в index-BrXXM7NO.js внутри .proj-tail (спейсер после seg-3, все карточки к этому
   моменту уже скрыты анимацией сцены); ведёт на /about/#portfolio — 8 карточек портфолио.
   Токены — css/tokens.css; типографика лейблов как .tmenu-story/nav. ===== */
.proj-tail { display: flex; align-items: center; justify-content: center; }
/* root инстанса жидкого стекла (all-projects-glass.js): glass = a.all-projects — прямой ребёнок */
.all-projects-mag { position: relative; display: inline-block; }
/* зеркало шире кнопки на SHADOW_PAD(20px) движка и скрыто (opacity:0, как у CTA на /about §16.4):
   движок читает его битмап независимо от CSS; буфер нужен из-за фиксированных device-px
   смещений рефракции/CA в шейдере — при dpr<1 без него по краям проступал бы белый фон сцены */
.all-projects-mag > canvas.pglass-src { position: absolute; inset: -20px; z-index: -1; pointer-events: none; opacity: 0; }
.all-projects {
  position: relative;
  z-index: 6; /* поверх #projStage (z:5) — сам стейдж pointer-events:none, клику не мешает */
  display: inline-flex;
  align-items: center;
  padding: 1.05em 2.4em;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  /* полупрозрачная подложка + блюр — как .tmenu-panel в бандле: кнопка остаётся читаемой
     поверх плотных участков WebGL-космоса (констелляция аутро проходит прямо за ней) */
  background: rgba(13, 13, 15, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--text);
  font-family: var(--font-sans);
  /* ×2 от лейбла (.66rem) — по просьбе пользователя (2026-10-05); паддинги/трекинг в em,
     поэтому вся кнопка масштабируется пропорционально */
  font-size: calc(var(--label-sm-size) * 2);
  font-weight: 600;
  letter-spacing: var(--label-sm-track);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.all-projects:hover, .all-projects:focus-visible { border-color: var(--em); color: var(--em); }
/* стекло работает (класс вешает all-projects-glass.js после первого paint) — собственную
   подложку снимаем, преломление cosmos берёт эффект на себя; бордер остаётся тонкой линией контура */
.all-projects-mag.lg-on > .all-projects { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }