:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
  border-radius: 2px
}

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

html {
  scroll-behavior: auto
}

html,
body {
  overflow-x: hidden
}

html {
  background: var(--bg)
}

body {
  background: transparent
}

body {
  font-family: Manrope, system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision
}

body.locked {
  overflow: hidden
}

.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400
}

::selection {
  background: var(--em);
  color: #250403
}

#loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: var(--bg);
  transition: opacity .6s var(--ease-out)
}

#loader.done {
  opacity: 0;
  pointer-events: none
}

.ld-label {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: var(--label-lg-size);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--label-lg-track);
  opacity: 0;
  transform: translateY(-20px);
  animation: ldIn .6s var(--ease-out) .1s forwards
}

.ld-words {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.ld-word {
  font-size: clamp(var(--fs-4), 7vw, var(--fs-7));
  color: #f5f5f5d1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out)
}

.ld-word.on {
  opacity: 1;
  transform: translateY(0)
}

.ld-word.off {
  opacity: 0;
  transform: translateY(-20px)
}

.ld-count {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: clamp(4rem, 10vw, 8.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
  animation: ldIn .6s var(--ease-out) .1s forwards
}

.ld-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1f1f1f80
}

.ld-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--em-soft) 0%, var(--em) 100%);
  box-shadow: 0 0 8px #e6362d59
}

@keyframes ldIn {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (min-width:768px) {
  .ld-label {
    top: 3rem;
    left: 3rem
  }

  .ld-count {
    bottom: 3rem;
    right: 3rem
  }
}

#root {
  display: contents
}

#smooth-wrapper {
  z-index: 3
}

#cosmos {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none
}

#cosmos .star-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(71vh, 86vw);
  transform: translate(-50%, -50%) scale(.15);
  filter: drop-shadow(0 0 26px rgba(230, 54, 45, .3)) drop-shadow(0 0 80px rgba(230, 54, 45, .16))
}

#cosmos .door-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 62vh;
  width: calc(62vh / 2.6);
  transform: translate(-50%, -50%);
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(245, 245, 245, .18)) drop-shadow(0 0 60px rgba(251, 211, 208, .12))
}

#grain {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

#hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.hero-name {
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 11.5rem);
  letter-spacing: .04em;
  line-height: .95;
  text-align: center;
  color: #ffffff8c;
  white-space: nowrap;
  opacity: 0
}

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(.62rem, 1.4vw, .82rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-soft);
  mix-blend-mode: difference;
  text-shadow: 0 0 12px rgba(10, 10, 10, .8);
  opacity: 0
}

.hero-tag {
  margin-top: 1rem;
  font-size: clamp(var(--fs-1), 2.4vw, var(--fs-2));
  color: var(--text-soft);
  mix-blend-mode: difference;
  text-shadow: 0 0 12px rgba(10, 10, 10, .8);
  opacity: 0
}

h1.hero-name .hv-b {
  color: var(--bordeaux)
}

.hero-arrow {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  mix-blend-mode: difference;
  opacity: 0
}

.hero-arrow svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-faint);
  animation: pulse 2.2s ease-in-out infinite
}

@keyframes pulse {

  0%,
  to {
    opacity: .4
  }

  50% {
    opacity: .9
  }
}

@media (max-width:560px) {
  .hero-name {
    white-space: normal
  }

  .hero-sub {
    letter-spacing: .32em;
    text-align: center
  }

  .hero-sub .sub-dot,
  .hero-sub .sub-sq,
  .hero-sub .sub-brk {
    display: none
  }

  .hero-sub .sub-half {
    display: block;
    padding-left: .32em
  }
}

.hero-name-glow {
  color: transparent;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 12px rgba(230, 54, 45, .5), 0 0 34px rgba(230, 54, 45, .22)
}

.hero-name-glow span {
  opacity: 0
}

.hero-sub-glow,
.hero-tag-glow {
  color: transparent;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 0
}

.hero-sub-glow {
  text-shadow: 0 0 8px rgba(230, 54, 45, .5), 0 0 20px rgba(230, 54, 45, .22)
}

.hero-tag-glow {
  text-shadow: 0 0 10px rgba(230, 54, 45, .5), 0 0 26px rgba(230, 54, 45, .22)
}

body.ready .hero-name-glow,
body.ready .hero-sub-glow,
body.ready .hero-tag-glow {
  animation: none
}

.hero-ghost {
  visibility: hidden;
  pointer-events: none
}

.hero-pin {
  position: fixed;
  margin: 0;
  z-index: 3
}

body.ready .hero-name {
  animation: rise .9s var(--ease-out) .05s forwards
}

body.ready .hero-sub {
  animation: rise .9s var(--ease-out) .16s forwards
}

body.ready .hero-tag {
  animation: rise .9s var(--ease-out) .26s forwards
}

body.ready .hero-arrow {
  animation: fadeIn 1.1s var(--ease-out) .5s forwards
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes fadeIn {
  to {
    opacity: 1
  }
}

#traverse {
  height: 200vh
}

#reveal {
  height: 10vh
}

.constellation-zone {
  height: 330vh;
  position: relative;
  z-index: 3
}

#constellation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none
}

.cword {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  transform: translate(-50%, -50%);
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity, filter
}

.cw-t1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(var(--fs-5), 5.2vw, var(--fs-7));
  line-height: 1.1;
  color: var(--em)
}

.cw-t2 {
  font-size: clamp(var(--fs-3), 2.4vw, var(--fs-4));
  font-weight: 500;
  line-height: 1.3;
  color: var(--text)
}

.cw-logo {
  color: var(--text-soft);
  pointer-events: auto;
  transition: color .3s var(--ease-out)
}

.cw-logo:hover {
  color: var(--em)
}

.cw-logo svg {
  display: block;
  width: 38px;
  height: 38px;
  fill: currentColor
}

@media (max-width:767px),
(orientation:portrait) {
  .cword {
    left: var(--mx);
    top: var(--my)
  }

  .cw-t1 {
    font-size: var(--fs-3)
  }

  .cw-t2 {
    font-size: 1.25rem
  }

  .cw-logo svg {
    width: 28px;
    height: 28px
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

#projHeader {
  position: relative;
  z-index: 3;
  margin-top: 50vh;
  min-height: 40vh
}

.proj-title {
  position: absolute;
  left: 17%;
  top: 23%;
  transform: translate(-50%, -50%);
  opacity: 0;
  white-space: nowrap;
  will-change: opacity, filter
}

.proj-title h2 {
  font-size: clamp(var(--fs-3), 5vw, var(--fs-6))
}

@media (max-width:767px),
(orientation:portrait) {
  .proj-title {
    left: 50%;
    top: 94%
  }

  .proj-title h2 {
    font-family: Manrope, system-ui, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: var(--label-lg-track);
    text-transform: uppercase;
    color: #ffffff8c;
    padding-left: var(--label-lg-track)
  }
}

.proj-seg {
  height: 180vh
}

.proj-tail {
  height: 70vh
}

@media (hover:none),
(pointer:coarse) {
  #traverse {
    height: 360vh
  }

  .constellation-zone {
    height: 594vh
  }

  #projHeader {
    margin-top: 90vh
  }

  .proj-seg {
    height: 324vh
  }

  .proj-tail {
    height: 126vh
  }
}

#projStage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  pointer-events: none
}

.pcard-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: min(85%, 560px);
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(6vh + env(safe-area-inset-bottom))
}

@media (min-width:768px) {
  .pcard-slot {
    transform: none;
    width: 45vw;
    align-items: center;
    padding-bottom: 0
  }

  .pcard-slot.left {
    left: 7vw
  }

  .pcard-slot.right {
    left: auto;
    right: 7vw
  }
}

.pcard-anim {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity
}

.pcard {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit
}

.pframe {
  position: relative;
  overflow: hidden
}

.pvisual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, rgba(230, 54, 45, .08), transparent 60%), #0c0c0c;
  transition: transform .5s var(--ease-out);
  will-change: transform
}

.pvisual img,
.pvisual video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover
}

.pcard:hover .pvisual {
  transform: scale(1.04)
}

.pveil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, #050505d9 0, #050505d9 104px, #05050500 152px)
}

.ptext {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px
}

.ptext h3 {
  font-size: clamp(var(--fs-3), 2.4vw, var(--fs-4));
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .5rem
}

.pdesc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-0);
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 300
}

.pc {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--em);
  pointer-events: none;
  transition: border-color .35s var(--ease-out)
}

.pc.tl {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px
}

.pc.tr {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px
}

.pc.bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px
}

.pc.br {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px
}

.pcard:focus-visible .pc {
  border-color: var(--em-soft)
}

/* Стрелка в зоне карточек скрыта — там работает линза-курсор #cur-visit (body.has-cursor уже прячет стрелку на body/a/button). */
.pcard-static {
  cursor: none
}

.psur {
  display: block;
  font-size: var(--label-sm-size);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #ffffff8c;
  margin-bottom: .35rem
}

.horus-vis img {
  opacity: 0;
  transition: opacity 1.5s ease-in-out
}

.horus-vis img+img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.horus-vis img.on {
  opacity: 1
}

@media (max-width:767px) {
  .pveil {
    display: none
  }

  .ptext {
    position: static;
    padding: 18px 0 0
  }

  .ptext h3 {
    font-size: 1.9rem
  }

  .pdesc {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    font-size: 1rem;
    line-height: 1.6
  }
}

.card-mag {
  will-change: transform
}

#outro {
  height: 140vh
}

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

/* ===== LIQUID GLASS CARDS v2 (движок @ybouane/liquidglass) ===== */
/* Радиус угла эффекта стекла = радиус границы карточки (data-config в glass-cards.js).
   overflow:hidden!important — движок инлайн-ставит .pcard
{overflow:visible}
;
 клип нужен,
   чтобы край стекла совпадал с границей. Зеркало .pglass-src (первый ребёнок .card-mag)
   лежит ПОД панелью;
 canvas вывода инжектит сам движок как первый ребёнок .pcard (z:-1). */
/* Без бордер-линии по контуру — стекло читается чистым, преломление в углах не «обрезает» hairline */
.pcard {
  border-radius: 28px;
  padding: 18px;
  overflow: hidden !important;
  background: rgba(13, 13, 15, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25)
}

/* Явное pointer-events:auto — предки (#projStage, .pcard-anim) имеют none и вырезают поддерево из hit-test;

   без этого реальный hover не нацеливается на a.pcard и #cur-visit (лемниската «Посмотреть») не появляется */
.pcard {
  pointer-events: auto
}

.pglass-src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.pframe {
  border-radius: 14px;
  z-index: 1
}

.ptext {
  position: relative;
  padding-top: 22px;
  z-index: 1
}

.pveil {
  display: none
}

/* Красные уголки-скобки .pc скругляем под радиус рамки .pframe — иначе рамка с
   overflow:hidden вырезает их острые концы в «осколки». */
.pc.tl {
  border-top-left-radius: 14px
}

.pc.tr {
  border-top-right-radius: 14px
}

.pc.bl {
  border-bottom-left-radius: 14px
}

.pc.br {
  border-bottom-right-radius: 14px
}

@media (max-width:767px) {
  .pcard {
    padding: 14px;
    border-radius: 24px
  }

  .pframe {
    border-radius: 12px
  }

  .pc.tl {
    border-top-left-radius: 12px
  }

  .pc.tr {
    border-top-right-radius: 12px
  }

  .pc.bl {
    border-bottom-left-radius: 12px
  }

  .pc.br {
    border-bottom-right-radius: 12px
  }
}

/* ===== PCARD FRAME — ПРЯМАЯ (не скруглённая) окантовка по периметру ВСЕЙ карточки кейса (все три)
   + светлые квадратики точно в её углы. Тот же приём, что .box-corners у CTA-карточки на /about (§16.4).
   ВАЖНО: рисуем на .card-mag, а НЕ на .pcard — движок стекла требует .pcard{overflow:hidden!important;
   border-radius:28px} (см. LIQUID GLASS CARDS v2 выше), и псевдоэлементы самой .pcard обрезались бы
   по этому скруглению («уголки режет»). .card-mag = root инстанса движка, конгруентен карточке и не
   клиппован; position:relative ниже нужен как якорь для псевдоэлементов (зеркало .pglass-src от этого
   только садится точно на бокс панели). Фото внутри (.pframe) с красными скобками .pc НЕ трогаем. */
.card-mag {
  position: relative;
}

.card-mag::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #1f1f1f;
  pointer-events: none;
  z-index: 3;
}

.card-mag::after {
  content: "";
  position: absolute;
  inset: -4px; /* квадрат 8px центрирован на точке угла рамки — как margin:-4px у .box-corners */
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(var(--text), var(--text)) left top / 8px 8px no-repeat,
    linear-gradient(var(--text), var(--text)) right top / 8px 8px no-repeat,
    linear-gradient(var(--text), var(--text)) left bottom / 8px 8px no-repeat,
    linear-gradient(var(--text), var(--text)) right bottom / 8px 8px no-repeat;
}

/* ===== HERO-SUB BRACKETS — sub-строка главного экрана приведена к стилистике about-героя (§16):
   [Design ■ Motion ■ Front-end ■ Back-end] — одна пара квадратных скобок по внешним краям и
   квадратные разделители вместо «·». Структура span'ов синхронно правлена во фрагменте bc бандла
   (~12005) и в статическом #boot index.html. Квадрат = inline-block currentColor, как
   .hero__title-square на /about, но в em (масштаб от clamp-размера hero-sub). В glow-слое
   (.hero-sub-glow) цвет прозрачный — квадрат там не виден, это только размытая тень. */
.hero-sub .sub-sq,
.hero-sub .sub-dot {
  display: inline-block;
  width: .5em;
  height: .5em;
  /* Детерминированные зазоры ровно 8px с обеих сторон:
     · после атомного inline разряд добавляет letter-spacing САМОГО квадрата → обнуляем его;
     · перед квадратом в конец предыдущего span'а входит «хвост» разряда .42em родителя →
       вычитаем его из левого margin'а. Итого: текст→■ = .42em + (8px − .42em) = 8px, ■→текст = 8px. */
  letter-spacing: 0;
  margin-left: calc(8px - .42em);
  margin-right: 8px;
  background: currentColor;
  /* центр квадрата на середину высоты капители (~.36em от базовой линии), квадрат .5em → низ на ~.11em */
  vertical-align: .11em
}

@media (max-width:560px) {
  /* sub-half становятся блоками — внутренние квадраты между словами скрываем,
     скобки и средний разделитель уже скрыты выше */
  .hero-sub .sub-sq {
    display: none
  }
}