/* Nemiget: стили страницы «Проекты» (тестовая). Основа скопирована из nemiget-hero.html */
:root {
  --bg: #08090b;
  --ink: #ece8e1;
  --dim: #8b877f;
  --faint: rgba(236, 232, 225, .12);
  --ember: #ff5b2e;
  --amber: #ffb23e;
  --crimson: #ff2e55;
  --gold: #f5b83d;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 Onest, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}
a { color: inherit; text-decoration: none; }

/* зерно неподвижное: анимированный слой на весь экран поверх WebGL заставлял браузер перерисовывать его каждый кадр */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 60% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* каркас страницы: тонкая линия под шапкой и у нижнего края, жёлтые метки там, где их пересекают поля.
   Общий для всех сцен и неподвижный — меняется только то, что между линиями. Линии прорисовываются один раз при загрузке */
.frame { position: fixed; inset: 0; z-index: 1; pointer-events: none; --top: 70px; --bottom: 52px; }
.frame i { position: absolute; left: 0; right: 0; height: 1px; background: var(--faint); transform-origin: 0 50%; animation: draw-x 1.4s var(--ease) both; }
.frame i.t { top: var(--top); }
.frame i.b { bottom: var(--bottom); animation-delay: .15s; }
.frame b { position: absolute; width: 7px; height: 7px; margin: -3px 0 0 -3px; background: var(--gold); animation: fade-in .5s 1.1s both; }
.frame b.l { left: var(--gutter); } .frame b.r { left: calc(100% - var(--gutter)); }
.frame b.t { top: var(--top); } .frame b.b { top: calc(100% - var(--bottom)); }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes fade-in { from { opacity: 0; } }
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
}
.mark { font: 500 19px/1 Unbounded, sans-serif; letter-spacing: -.02em; }
.mark i { font-style: normal; color: var(--ember); }
.top nav { display: flex; gap: 34px; font: 400 12px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.top nav a { opacity: .72; transition: opacity .2s; }
.top nav a:hover { opacity: 1; }
/* построчное появление: строка выезжает из-под маски; уходящая сцена уезжает вверх */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .5s, transform .5s var(--ease); }
.sc.on .rv { opacity: 1; transform: none; transition: opacity .8s calc(var(--base, 520ms) + var(--d, 0) * 70ms), transform 1s var(--ease) calc(var(--base, 520ms) + var(--d, 0) * 70ms); }
.sc.out .rv { opacity: 0; transform: translateY(-22px); transition: opacity .4s calc(var(--d, 0) * 30ms), transform .5s var(--ease) calc(var(--d, 0) * 30ms); }
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask > span { display: block; transform: translateY(108%); transition: transform .5s var(--ease); }
.sc.on .mask > span { transform: none; transition: transform 1.05s var(--ease) calc(var(--base, 520ms) + var(--d, 0) * 85ms); }
.sc.out .mask > span { transform: translateY(-108%); transition: transform .55s cubic-bezier(.6, 0, .8, .4) calc(var(--d, 0) * 40ms); }

.hero {
  display: flex; flex-direction: column; justify-content: flex-end;
}
.eyebrow, .sec-label {
  font: 400 12px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow { margin-bottom: 28px; }
.eyebrow::before, .sec-label::before { content: ""; width: 28px; height: 1px; background: var(--dim); }
h1 { font: 500 clamp(32px, 4.9vw, 76px)/1.04 Unbounded, sans-serif; letter-spacing: -.035em; max-width: 12.5em; }
h1 em { font-style: normal; color: var(--ember); }
.lead { max-width: 34em; margin-top: 28px; color: #bdb8af; font-size: clamp(15px, 1.15vw, 18px); }
.actions { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 26px; background: var(--ink); color: var(--bg);
  font: 500 14px/1 Onest, sans-serif; letter-spacing: .01em;
  border-radius: 2px; transition: background .25s, color .25s;
}
.btn span { display: inline-block; transition: transform .25s; }
.btn:hover { background: var(--ember); color: var(--bg); }
.btn:hover span { transform: translateX(4px); }
.link { font: 400 12px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: none; border: 0; cursor: pointer; }
.proj { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); }
.proj .sec-label { position: absolute; top: 84px; left: var(--gutter); }
.passport { width: min(500px, 100%); border: 1px solid var(--faint); background: rgba(8, 9, 11, .82); }
.passport .side { padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--faint); }
/* верх паспорта: статус слева, номер справа */
.ptop { display: flex; justify-content: space-between; align-items: center; font: 400 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--dim); }
.ptop .st { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(95, 211, 141, .1); color: #8fe0b0; text-transform: uppercase; letter-spacing: .1em; }
.ptop .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 8px rgba(95, 211, 141, .8); }
/* знак проекта и название */
.pname { display: flex; align-items: center; gap: 16px; }
.pmark { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: #17181c; border: 1px solid var(--faint); overflow: hidden; }
.pmark img { width: 70%; height: 70%; object-fit: contain; }
.pmark.lv { background: #f2f2f2; color: #0f0f10; font: 800 30px/1 Manrope, sans-serif; letter-spacing: -.06em; padding-bottom: 4px; }   /* знак Levroc «l.» — шрифт логотипа */
.pmark.lv { display: flex; align-items: center; justify-content: center; }
.pmark.lv i { font-style: normal; color: #b9801f; }
/* две главные цифры проекта */
.pnums { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--faint); }
.pnums > div { padding: 16px 28px 15px; }
.pnums > div + div { border-left: 1px solid var(--faint); }
.pnums b { display: block; font: 500 26px/1.05 Unbounded, sans-serif; letter-spacing: -.03em; color: var(--ink); }
.pnums b small { font-size: 15px; color: var(--dim); letter-spacing: 0; }
.pnums span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: #a9a49b; }
/* кейс: задача → что сделали */
.pk { font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.ptask { display: flex; flex-direction: column; gap: 8px; }
.ptask p { color: var(--ink) !important; font-size: 16.5px !important; line-height: 1.5; }
.pdone { padding: 16px 28px 14px; border-bottom: 1px solid var(--faint); display: flex; flex-direction: column; gap: 10px; }
.pdone ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.pdone li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: #d4d0c8; }
.pdone li::before { content: ""; position: absolute; left: 0; top: .7em; width: 9px; height: 1px; background: var(--gold); }
.pstackrow { padding: 12px 28px; }
/* стек — метками */
.pstack { display: flex; flex-wrap: wrap; gap: 6px; }
.pstack span { padding: 5px 9px; border: 1px solid var(--faint); border-radius: 4px; font: 400 11.5px/1 "JetBrains Mono", monospace; color: #c9c5bd; }
/* низ: кнопка на сайт проекта и подсказка про схему */
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-top: 1px solid var(--faint); }
.pgo { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ink); color: var(--bg); font: 500 14px/1 Onest, sans-serif; border-radius: 2px; transition: background .25s; }
.pgo:hover { background: var(--gold); }
.pgo b { font-weight: 500; transition: transform .25s; }
.pgo:hover b { transform: translate(2px, -2px); }
.pfoot small { font: 400 11px/1.4 "JetBrains Mono", monospace; color: #77736c; text-align: right; }
.pid { font: 400 12px/1 "JetBrains Mono", monospace; color: var(--dim); letter-spacing: .08em; display: flex; justify-content: space-between; align-items: center; }
.pid .live { display: inline-flex; align-items: center; gap: 7px; }
.pid em { font-style: normal; }
.pid .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 8px rgba(95, 211, 141, .7); }
.pid a { color: var(--ink); opacity: .8; transition: opacity .2s; }
.pid a:hover { opacity: 1; }
.passport h2 { font: 500 clamp(30px, 3vw, 42px)/1.05 Unbounded, sans-serif; letter-spacing: -.03em; }
.passport h2 i { font-style: normal; color: var(--ember); }
.passport p { color: #d4d0c8; font-size: 15.5px; }
.passport p.what { color: var(--ink); font-size: 17.5px; line-height: 1.45; }
.facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 11px 28px; border-bottom: 1px solid var(--faint); align-items: baseline; }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font: 400 11.5px/1.6 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.facts dd { font-size: 15px; line-height: 1.5; color: var(--ink); }
.facts dd.mono { font: 400 12.5px/1.75 "JetBrains Mono", monospace; color: #a9a49b; }
.passport .shot-note { padding: 12px 30px; font: 400 10.5px/1.5 "JetBrains Mono", monospace; color: #6f6b64; letter-spacing: .03em; border-top: 1px solid var(--faint); display: flex; gap: 10px; align-items: center; }
.shot-note::before { content: ""; flex: none; width: 6px; height: 6px; border: 1px solid var(--ember); transform: rotate(45deg); }
.shot-fallback { display: none; width: 100%; border-bottom: 1px solid var(--faint); }
/* рамка паспорта прорисовывается линией, пока внутри выезжает текст */
.passport { position: relative; border-color: transparent; }
.passport::before {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--faint); pointer-events: none;
  clip-path: inset(0 100% 100% 0); transition: clip-path .5s var(--ease);
}
.sc.on .passport::before { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) 380ms; }
/* фон паспорта — сплошной: сетка точек под текстом мешала читать, а сквозь полупрозрачный фон просвечивала сцена */
.passport .bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: #0b0c0e; }
/* жёлтые метки на углах рамки и короткая жёлтая черта сверху — как на чертеже */
.passport::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 100% 0 / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 100% 100% / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 34px 3px / 56px 1px;
  background-repeat: no-repeat;
}
.sc.on .passport::after { opacity: 1; transition: opacity .5s 1.2s; }
.sc.on .passport .bg { opacity: 1; transition: opacity .9s 450ms; }
.passport { background: none; isolation: isolate; }


/* ---- страница «Проекты» ---- */
body { touch-action: auto; }
/* всё содержимое страницы — в #page: при переходе его целиком затягивает в разлом */
#page { position: fixed; inset: 0; z-index: 2; overflow: hidden; }
/* прокрутка — во внутреннем слое, а #page только сжимается при переходе */
.scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2b30 transparent; }
.grain, .vignette, .frame { z-index: 0; }
:root { --z: 1; }
.top, .wrap { zoom: var(--z); }
.top { z-index: 6; background: linear-gradient(var(--bg) 40%, transparent); }
.top nav a.on { opacity: 1; color: var(--gold); }

/* полотно перехода и чёрная заслонка, пока новая страница грузится */
.warp-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; }
html.warp-in::after { content: ""; position: fixed; inset: 0; z-index: 60; background: #000; }
html.warping body { pointer-events: none; }

.wrap { padding: 132px var(--gutter) 96px; max-width: 1700px; }
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding-bottom: 30px; border-bottom: 1px solid var(--faint); }
.work-head .sec-label { margin-bottom: 26px; }
.work-head h1 { font: 500 clamp(48px, 6.6vw, 108px)/.96 Unbounded, sans-serif; letter-spacing: -.05em; }
.work-head h1 i { font-style: normal; color: var(--ember); }
.wcount { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.wcount b { font: 500 clamp(40px, 4.2vw, 68px)/1 Unbounded, sans-serif; letter-spacing: -.04em; color: var(--gold); }
.wcount p { max-width: 25em; color: #bdb8af; font-size: 15px; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 28px; }
.chips button { padding: 9px 14px; border: 1px solid var(--faint); border-radius: 999px; background: none; color: #c9c5bd; cursor: pointer;
  font: 400 11.5px/1 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s, color .2s, background .2s; }
.chips button:hover { border-color: rgba(245, 184, 61, .5); color: var(--ink); }
.chips button.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* карточка проекта: схема из 3D-сцены, при наведении — скриншот сайта */
.wc { position: relative; display: flex; flex-direction: column; border: 1px solid var(--faint); background: #0b0c0e; transition: border-color .3s, transform .5s var(--ease); }
.wc[hidden] { display: none; }
.wc:hover { border-color: rgba(245, 184, 61, .45); }
.wc::after { content: ""; position: absolute; inset: -4px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 7px 7px, linear-gradient(var(--gold), var(--gold)) 100% 0 / 7px 7px,
    linear-gradient(var(--gold), var(--gold)) 0 100% / 7px 7px, linear-gradient(var(--gold), var(--gold)) 100% 100% / 7px 7px;
  background-repeat: no-repeat; }
.wc:hover::after { opacity: 1; }
.wc .media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-bottom: 1px solid var(--faint);
  background: radial-gradient(70% 70% at 50% 55%, #15161a, #0d0e11); }
.wc .media img { position: absolute; transition: opacity .55s, transform .9s var(--ease); }
.wc .diag { inset: 7% 6%; width: 88%; height: 86%; object-fit: contain; }
.wc .shot { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.05); }
.wc:hover .diag { opacity: 0; transform: scale(.93); }
.wc:hover .shot { opacity: 1; transform: none; }
.wc .meta { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--dim); }
.wc .meta .st { display: inline-flex; align-items: center; gap: 7px; color: #8fe0b0; text-transform: uppercase; }
.wc .meta .st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5fd38d; box-shadow: 0 0 8px rgba(95, 211, 141, .8); }
.wc h3 { padding: 12px 20px 0; font: 500 28px/1.05 Unbounded, sans-serif; letter-spacing: -.03em; }
.wc h3 i { font-style: normal; color: var(--ember); }
.wc p { padding: 9px 20px 0; color: #bdb8af; font-size: 14.5px; line-height: 1.5; }
.wc .tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px 20px; margin-top: auto; }
.wc .tags span { padding: 5px 9px; border: 1px solid var(--faint); border-radius: 4px; font: 400 11px/1 "JetBrains Mono", monospace; color: #c9c5bd; }
.wc .open { position: absolute; top: 14px; right: 14px; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 16px; opacity: 0; transform: scale(.7) rotate(-45deg); transition: opacity .3s, transform .45s var(--ease); }
.wc:hover .open { opacity: 1; transform: none; }
/* место под будущие проекты — пунктиром, чтобы было видно сетку */
.wc.ph { border-style: dashed; background: none; }
.wc.ph .media { background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(236, 232, 225, .035) 11px 12px); display: grid; place-items: center; }
.wc.ph .media span { font: 400 11px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #5d5a54; }
.wc.ph h3 { color: #4d4a45; }
.wc.ph p { color: #5d5a54; }

/* ---- телефон: одна колонка, в шапке — логотип и языки ---- */
@media (max-width: 640px) {
  .top { padding: 16px 20px; }
  .top nav { gap: 0; }
  .top nav > a { display: none; }
  .top nav .lng { padding-left: 0; border-left: 0; }
  .wrap { padding: 96px 20px 64px; }
  .work-head { grid-template-columns: 1fr; gap: 22px; }
  .work-head h1 { font-size: clamp(40px, 13vw, 56px); }
  .wcount { align-items: flex-start; text-align: left; }
  .wcount p { font-size: 14.5px; }
  .chips { margin: 20px 0 22px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .wc h3 { font-size: 26px; }
  .wc .open { opacity: 1; transform: none; }
}