/* ═══ WEB VICTORY — портфолио на бесконечном холсте ═══════════════ */

/* Шрифты лежат локально в fonts/ — сайт не зависит ни от Google Fonts,
   ни от того, установлены ли шрифты у зрителя */

/* Cygre Light — мелкая типографика интерфейса */
@font-face{
  font-family:"Cygre";
  src:url("fonts/Cygre-Light.woff") format("woff"),
      url("fonts/Cygre-Light.ttf")  format("truetype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* Cygre Medium — текст абзацев */
@font-face{
  font-family:"Cygre";
  src:url("fonts/Cygre-Medium.woff") format("woff"),
      url("fonts/Cygre-Medium.ttf")  format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* Angst — вариативный, две оси: wght 0–100 и srff (серифность) 0–100 */
@font-face{
  font-family:"Angst";
  src:url("fonts/AngstVF.ttf") format("truetype-variations");
  font-weight:1 1000;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#0a0a0b;
  --fg:#f2f0ea;
  --dim:#7c828c;
  --line:rgba(242,240,234,.14);
  --accent:#e8c15a;

  /* мелкая типографика интерфейса: Cygre Light, трекинг +5% */
  --mono:"Cygre", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono-weight:300;
  --mono-track:.05em;
  /* текст абзацев: Cygre Light, трекинг 0 */
  --sans:"Cygre", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sans-weight:300;   /* 300 Light · 500 Medium */
  --sans-track:0;
  --sans-leading:1.45; /* межстрочное в абзацах */
  /* заголовки: Angst, кириллица своя — подмены шрифта больше нет */
  --serif:"Angst", Georgia, "Times New Roman", serif;
  --serif-wght:50;   /* 0 тонкий · 100 жирный */
  --serif-srff:100;  /* 0 гротеск · 100 сериф  */

  --pad:clamp(16px, 2.4vw, 34px);
  --ui:11px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:var(--sans-weight);
  letter-spacing:var(--sans-track);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ── холст ───────────────────────────────────────────────────────── */
.stage{
  position:fixed; inset:0;
  z-index:1;
  cursor:grab;
  touch-action:none;
}
.stage.is-dragging{ cursor:grabbing; }

.layer{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
  transform-origin:0 0;
  will-change:transform;
}
.layer--ghost{ z-index:0; }
.layer--front{ z-index:1; }

/* работы-тени: выцветшие, размытые, движутся медленнее — дают глубину */
.tile--ghost{ pointer-events:none; }
.tile--ghost .tile__media{
  border:0;
  background:none;
  transition:none;
}
.tile--ghost .tile__media img{
  filter:grayscale(1) brightness(1.45) contrast(.7) blur(1px);
  transition:none;
}

/* ── плитка работы ───────────────────────────────────────────────── */
.tile{
  position:absolute; left:0; top:0;
  transform:translate(-9999px,-9999px);
}
.tile__media{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  background:#121215;
  border:1px solid var(--line);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.tile__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s;
  filter:grayscale(.35) contrast(1.02);
}
.tile:hover .tile__media{ transform:scale(1.02); border-color:rgba(242,240,234,.4); }
.tile:hover .tile__media img{ transform:scale(1.06); filter:grayscale(0) contrast(1.05); }

/* Телефоны и планшеты: наведения нет, а фильтры дорогие — снимаем.
   Блюр у теней особенно тяжёл для мобильной графики. */
@media (max-width:900px), (hover:none){
  .tile__media img{ filter:none; }
  .tile--ghost .tile__media img{ filter:grayscale(1) brightness(1.4) contrast(.7); }
  .tile__media, .tile__media img{ transition:none; }
}

.tile__meta{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 2px 0;
  font-family:var(--mono);
  font-weight:var(--mono-weight);
  font-size:var(--ui);
  letter-spacing:var(--mono-track);
  color:var(--dim);
}
.tile__title{
  margin:0;
  font-family:var(--mono);
  font-size:var(--ui);
  font-weight:var(--mono-weight);
  letter-spacing:var(--mono-track);
  text-transform:lowercase;
  color:var(--fg);
}
.tile__tag{ margin-left:auto; text-transform:lowercase; }

/* ── центральный заголовок ───────────────────────────────────────── */
.hero{
  position:fixed; inset:0;
  z-index:20;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:clamp(2px,.5vh,7px);
  pointer-events:none;
  mix-blend-mode:difference;
  text-align:center;
  padding:0 var(--pad);
  transition:opacity .45s ease;
}
body.is-dragging .hero{ opacity:.4; }
body.is-open .hero{ opacity:0; }

.hero__title{
  margin:0;
  font-family:var(--serif);
  font-variation-settings:"wght" var(--serif-wght), "srff" var(--serif-srff);
  font-size:clamp(1.6rem, 3.4vw, 3.5rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}
.hero__sub{
  margin:0;
  font-family:var(--mono);
  font-weight:var(--mono-weight);
  font-size:clamp(.72rem, 1vw, .95rem);
  letter-spacing:var(--mono-track);
  text-indent:var(--mono-track);   /* компенсация трекинга при центровке */
  color:#fff;
}

/* ── интерфейс ───────────────────────────────────────────────────── */
.ui{
  position:fixed; left:0; right:0;
  z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:var(--pad);
  font-family:var(--mono);
  font-weight:var(--mono-weight);
  font-size:var(--ui);
  letter-spacing:var(--mono-track);
  text-transform:lowercase;
  color:var(--dim);
  transition:opacity .45s ease;
}
.ui--top{ top:0; }
.ui--bottom{ bottom:0; }
body.is-open .ui{ opacity:0; pointer-events:none; }

.ui p{ margin:0; }

.brand{
  color:var(--fg);
  text-decoration:none;
  letter-spacing:.16em;
}
.brand span{ color:var(--dim); }

.nav{ display:flex; gap:clamp(14px,2vw,28px); }
.nav__item{
  appearance:none; border:0; background:none; padding:0;
  font:inherit; letter-spacing:.1em;
  color:var(--dim);
  cursor:pointer;
  transition:color .25s;
}
.nav__item:hover,.brand:hover{ color:var(--accent); }

.hint{ opacity:.75; transition:opacity .6s ease; }
.hint.is-hidden{ opacity:0; }
.counter{ white-space:nowrap; }

/* ── оверлей ─────────────────────────────────────────────────────── */
.overlay{
  position:fixed; inset:0;
  z-index:60;
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow-y:auto;
  opacity:0;
  transition:opacity .35s ease;
}
.overlay.is-visible{ opacity:1; }

.overlay__close{
  position:fixed; top:var(--pad); right:var(--pad);
  z-index:2;
  appearance:none; border:0; background:none; padding:0;
  font-family:var(--mono); font-weight:var(--mono-weight);
  font-size:clamp(.72rem,.95vw,.85rem); letter-spacing:var(--mono-track);
  text-transform:uppercase;
  color:var(--fg); cursor:pointer;
}
.overlay__close:hover{ color:var(--accent); }

.overlay__inner{
  max-width:1100px;
  margin:0 auto;
  padding:calc(var(--pad) * 3.4) var(--pad) calc(var(--pad) * 3);
}

.doc__num{
  font-family:var(--mono); font-weight:var(--mono-weight);
  font-size:var(--ui); letter-spacing:var(--mono-track); color:var(--dim);
  margin:0 0 14px;
}
.doc__title{
  margin:0 0 22px;
  font-family:var(--serif);
  font-variation-settings:"wght" var(--serif-wght), "srff" var(--serif-srff);
  font-size:clamp(1.7rem,4.4vw,3.2rem);
  font-weight:400; line-height:1.05; letter-spacing:.005em;
}
.doc__facts{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  margin:0 0 30px; padding:0 0 22px;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-weight:var(--mono-weight);
  font-size:var(--ui); letter-spacing:var(--mono-track); color:var(--dim);
  text-transform:lowercase;
}
.doc__text{
  max-width:62ch;
  margin:0 0 28px;
  font-size:clamp(1rem,1.5vw,1.15rem);
  line-height:var(--sans-leading);
  color:#cfcdc7;
}
.doc__figure{
  margin:0 0 30px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#121215;
}
.doc__figure img{ display:block; width:100%; height:auto; }
.doc__link{
  display:inline-block;
  font-family:var(--mono); font-weight:var(--mono-weight);
  font-size:clamp(.78rem,1.05vw,.92rem);
  letter-spacing:var(--mono-track); text-transform:uppercase;
  color:var(--fg); text-decoration:none;
  border:1px solid var(--line);
  padding:17px 30px;
  transition:border-color .25s,color .25s;
}
.doc__link:hover{ color:var(--accent); border-color:var(--accent); }

/* ряд кнопок внизу страницы */
.doc__buttons{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:26px;
}

/* кнопка-заявка: та же кнопка, только залитая */
.doc__link--accent{
  color:var(--bg);
  background:var(--accent);
  border-color:var(--accent);
}
.doc__link--accent:hover{ color:var(--bg); opacity:.85; }

.doc__list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:2px;
  max-width:62ch;
}
.doc__list a,.doc__list span{
  display:flex; justify-content:space-between; gap:20px;
  padding:14px 0;
  font-family:var(--mono); font-weight:var(--mono-weight);
  font-size:12px; letter-spacing:var(--mono-track);
  color:var(--fg); text-decoration:none;
  text-transform:lowercase;
}
.doc__list a:hover{ color:var(--accent); }

/* ── декор ───────────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:40;
  pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}
.vignette{
  position:fixed; inset:0; z-index:10;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(10,10,11,.72) 100%);
}

/* ── появление ───────────────────────────────────────────────────── */
.stage,.hero,.ui{ animation:fade 1.1s .1s ease both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

@media (max-width:700px){
  :root{ --ui:10px; }
  .hint{ display:none; }
  .tile__tag{ display:none; }
}