/* WEB PORTFOLIO — вёрстка по макету Figma (1440) */

:root{
  --sidebar: 385px;          /* ширина левой колонки в макете */
  --bg: #F2F1ED;             /* фон первого экрана */
  --ink: #2A2A2A;            /* текст на светлом */
  --panel: #1B1B1B;          /* левая колонка проектов */
  --rule: rgba(77,77,77,.7); /* разделитель секций: 1 px с прозрачностью 0.7 —
                                браузер округляет 0.7 px до половины пикселя */
  --muted: #757575;          /* теги и год */
  --accent: #F84E4E;         /* showreel */
  --cv: #161616;             /* плашка CV */
  --sec-h: clamp(560px, calc((100vw - var(--sidebar)) * 0.5744), 800px);
  --lh: 27.545px;            /* базовый интерлиньяж макета */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:16px;
  line-height:var(--lh);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

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

/* ─────────────────────────── HERO ─────────────────────────── */

.hero{
  position:relative;
  z-index:2;             /* первый экран всегда поверх: тёмная колонка при параллаксе
                            уезжает под него, а не наползает на светлую подложку */
  min-height:663px;
  background:var(--bg);
}

.hero__greeting{
  position:absolute;
  left:22px; top:14px;
  margin:0;
  font-size:17px;
  line-height:28px;
}

.hero__bio{
  position:absolute;
  left:var(--sidebar); top:22px;
  width:615px;
  max-width:calc(100% - var(--sidebar) - 40px);
}

.hero__bio p{ margin:0 0 var(--lh); white-space:pre-line; }
.hero__bio p:last-child{ margin-bottom:0; }

.hero__photo{
  position:absolute;
  right:0; top:0;
  width:145px; height:220px;   /* размер из макета */
  object-fit:cover;
}

.hero__actions{
  position:absolute;
  left:var(--sidebar); right:0; top:593px;
  height:70px;
  display:flex;
  align-items:stretch;
}

.btn-showreel{
  width:385px;
  border:0;
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-size:18px;
  text-transform:uppercase;
  text-align:left;
  padding:0 0 0 32px;
  cursor:pointer;
  transition:background .2s ease;
}
.btn-showreel:hover{ background:#E63F3F; }

.btn-cv{
  width:70px;
  border:0;
  padding:0;
  font:inherit;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cv);
  color:#fff;
  font-size:18px;
  text-transform:uppercase;
  transition:background .2s ease;
}
.btn-cv:hover{ background:#2A2A2A; }

.hero__links{
  margin-left:auto;
  padding-right:49px;
  display:flex;
  align-items:center;
  gap:162px;
}

.hero__links a{
  font-size:12px;
  text-transform:uppercase;
  color:var(--ink);
  transition:opacity .2s ease;
}
.hero__links a:hover{ opacity:.55; }

/* ────────────────────────── ПРОЕКТЫ ────────────────────────── */

.project{
  display:flex;
  min-height:var(--sec-h);
  background:var(--panel);
}

.project__info{
  position:relative;
  flex:0 0 var(--sidebar);
  width:var(--sidebar);
  background:var(--panel);
  color:#fff;
  padding:22px 22px 16px;
  display:flex;
  flex-direction:column;
}
.project__info::before{        /* мелкое зерно на тёмной подложке */
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:180px 180px;
  opacity:.72;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.project__title,
.project__meta{ position:relative; }

/* разделитель — только по ширине левой колонки, как в макете */
.project + .project .project__info{ border-top:1px solid var(--rule); }

.project__title{
  margin:0;
  font-size:20px;
  line-height:var(--lh);
  font-weight:400;
}

.project__meta{ margin-top:auto; }

.project__desc{
  margin:0 0 35px;
  font-size:14px;         /* размер из макета */
  line-height:23px;
  color:#D7CDB5;
  max-width:278px;        /* ширина текстового блока из макета — по ней и рвутся строки */
  overflow-wrap:break-word;
}

.project__tags,
.project__year{
  margin:0;
  font-size:16px;
  line-height:23px;
  color:var(--muted);
  text-transform:uppercase;
}
.project__year{ margin-top:10px; }

.project__media{
  flex:1 1 auto;
  min-width:0;
  background:var(--media-bg, #000);
  overflow:hidden;
}

.project__media img,
.project__media video{
  width:100%;
  height:100%;
  object-fit:cover;
}



/* ── появление текста: слово выплывает из fade + blur ── */

.reveal-word{
  display:inline-block;
  opacity:0;
  filter:blur(10px);
  transform:translateY(var(--reveal-from, 18px));
  transition-property:opacity, filter, transform;
  transition-duration:var(--rev-dur, .55s);      /* длительность зависит от скорости скролла */
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
  transition-delay:min(calc(var(--i, 0) * var(--stagger, 22ms)), var(--max-delay, 320ms));
  will-change:opacity, filter, transform;
}
.is-revealed .reveal-word{
  opacity:1;
  filter:blur(0);
  transform:none;
}
.no-anim .reveal-word{ transition:none; }   /* подмена копии ленты — без проявления */

@media (prefers-reduced-motion:reduce){
  .reveal-word{
    transition:none;
    opacity:1;
    filter:none;
    transform:none;
  }
}

/* ─────────────────────────── СЛАЙДЕР ─────────────────────────── */

.slider{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
  cursor:grab;
}
.slider--single{ cursor:default; }
.slider.is-dragging{ cursor:grabbing; }

.slider__track{
  position:absolute;
  inset:0;                       /* слайды раскладывает JS: лента закольцована без отката */
}

.slide{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  overflow:hidden;
  will-change:transform;
}
.slide img,
.slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  will-change:transform;         /* параллакс кадра относительно слайда */
}


/* прозрачные зоны клика по краям кадра */
.slider__arrow{
  position:absolute;
  top:0; bottom:0;
  width:22%;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
}
.slider__arrow--prev{ left:0; }
.slider__arrow--next{ right:0; }
.slider__arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }

@media (prefers-reduced-motion:reduce){
  .slider__track{ transition:none; }
}

/* ───────────────────── ПОПАПЫ: SHOWREEL И CV ───────────────────── */
/* подложка из макета: #EDEDED 80% + background blur 60 + шум */

.modal[hidden]{ display:none; }

.modal{
  position:fixed;
  inset:0;
  z-index:50;
}

.modal__veil{
  position:absolute;
  inset:0;
  background:rgba(237,237,237,.8);
  -webkit-backdrop-filter:blur(60px);
  backdrop-filter:blur(60px);
}
.modal__veil::after{             /* тот самый мелкий шум поверх размытия */
  content:'';
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:180px 180px;
  opacity:.5;
  mix-blend-mode:multiply;
}
.modal__veil--clear{             /* у CV размывается только область панели */
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.modal__veil--clear::after{ content:none; }

/* крестик 70×70 в правом верхнем углу — как в макете */
.modal__close{
  position:absolute;
  right:0; top:0;
  z-index:3;
  width:70px; height:70px;
  border:0;
  padding:0;
  background:#6F6F6F;
  cursor:pointer;
}
.modal__close::before,
.modal__close::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:22px; height:1.5px;
  margin:-1px 0 0 -11px;
  background:#fff;
}
.modal__close::before{ transform:rotate(45deg); }
.modal__close::after{ transform:rotate(-45deg); }
.modal__close:hover{ background:#565656; }

/* ── шоурил ── */

.modal__stage{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  padding:69px 82px;            /* поля из макета: 1273×724 внутри 1440×900 */
}
.reel{
  width:100%;
  max-width:1273px;
  height:auto;
  max-height:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  align-self:flex-start;
  outline:none;
  border:0;
  display:block;
}

/* ── CV ── */

.cv{
  position:absolute;
  left:18.54%;                  /* 267 / 1440 */
  top:0; bottom:0;
  width:81.88%;                 /* 1179 / 1440 */
  overflow-y:auto;
  overflow-x:hidden;
  background:rgba(237,237,237,.8);
  -webkit-backdrop-filter:blur(60px);
  backdrop-filter:blur(60px);
  overscroll-behavior:contain;  /* страница под попапом стоит на месте */
}
.cv::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:var(--noise);
  background-size:180px 180px;
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.cv__doc{                /* выгрузка кадра 1440 px: показываем полосу панели */
  position:relative;
  width:100%;
  aspect-ratio:1179 / 3856;
  overflow:hidden;
  z-index:1;
}
.cv__doc img{
  position:absolute;
  left:-22.65%;          /* сдвиг на 267 px влево */
  top:0;
  width:122.14%;         /* 1440 / 1179 — ровно 100vw, 1 px макета = 1 px экрана */
  max-width:none;
  display:block;
}

/* Кнопки лежат на той же подложке, что и текст: они внутри кадра и заданы в vw,
   поэтому масштабируются вместе с ним и точно накрывают нарисованные. */
.cv__bar{
  position:absolute;
  left:0; right:0;
  height:4.861vw;        /* 70 / 1440 */
  z-index:2;
}
.cv__bar--top{ top:0; }
.cv__bar--bottom{ bottom:0; }

.cv__download{
  position:absolute;
  left:8.194vw;          /* 118 / 1440 от левого края панели */
  top:0;
  width:14.653vw;        /* 211 / 1440 */
  height:100%;
  display:flex;
  align-items:center;
  background:var(--cv);
  color:#fff;
  font-size:1.111vw;     /* 16 / 1440 */
  text-transform:uppercase;
  padding-left:1.944vw;  /* 28 / 1440 */
  transition:background .2s ease;
}
.cv__download:hover{ background:#2A2A2A; }

.cv__icon{
  position:absolute;
  left:100%;
  top:0;
  width:4.167vw;         /* 60 / 1440 */
  height:100%;
  background:var(--accent);
}
.cv__icon::before,
.cv__icon::after{
  content:'';
  position:absolute;
  background:#fff;
}
.cv__icon::before{ left:50%; top:34%; width:0.104vw; height:1.528vw; margin-left:-0.05vw; }
.cv__icon::after{
  left:50%; top:54%;
  width:0.625vw; height:0.625vw;
  margin-left:-0.35vw;
  border-left:0.104vw solid #fff;
  border-bottom:0.104vw solid #fff;
  transform:rotate(-45deg);
  background:none;
}

.cv__bar .modal__close--bar{
  position:absolute;
  right:0.417vw;         /* панель шире окна на 6 px — крестик стоит по краю экрана */
  top:0;
  width:4.861vw;
  height:100%;
}
.cv__bar .modal__close--bar::before,
.cv__bar .modal__close--bar::after{
  width:1.528vw;
  height:0.104vw;
  margin:-0.05vw 0 0 -0.764vw;
}

/* ─────────────────────────── КУРСОР ─────────────────────────── */
/* Две независимые fixed-ноды: «чернила» с difference-блендом и цветной слой.
   Обе двигает JS, форму меняют внутренние <i>. */

.cursor-ink,
.cursor-ui{
  position:fixed;
  left:0; top:0;
  z-index:60;
  pointer-events:none;
  visibility:hidden;
  will-change:transform;
}
html.has-cursor .cursor-ink,
html.has-cursor .cursor-ui{ visibility:visible; }

/* белая заливка + difference = инверсия подложки: на светлом фоне курсор чёрный,
   на тёмном светлеет, на цветном меняет цвет */
.cursor-ink{ mix-blend-mode:difference; }

.cursor-ink__box,
.cursor-ui__accent{
  position:absolute;
  left:-8px; top:-8px;
  width:16px; height:16px;
  display:block;
  transform:rotate(0deg) scale(0);
  transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
.cursor-ink__box{ background:#fff; }
.cursor-ui__accent{ background:var(--accent); opacity:0; }

html.c-awake .cursor-ink__box{ transform:rotate(0deg) scale(1); }
html.c-awake.c-drag .cursor-ink__box{ transform:rotate(45deg) scale(.86); }
html.c-awake.c-down .cursor-ink__box{ transform:rotate(45deg) scale(.7); }

/* на ссылке чернила уходят, появляется коралловый ромб */
html.c-awake.c-link .cursor-ink__box{ transform:rotate(45deg) scale(0); }
html.c-awake.c-link .cursor-ui__accent{ opacity:1; transform:rotate(45deg) scale(.92); }
html.c-awake.c-link.c-down .cursor-ui__accent{ transform:rotate(45deg) scale(.78); }

.cursor-ui__arrow{
  position:absolute;
  left:-5px; top:-5px;
  width:10px; height:10px;
  display:block;
  border-top:2px solid var(--accent);
  border-right:2px solid var(--accent);
  opacity:0;
  transition:opacity .3s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.cursor-ui__arrow--prev{ transform:translateX(-6px) rotate(-135deg) scale(.4); }
.cursor-ui__arrow--next{ transform:translateX(6px)  rotate(45deg)   scale(.4); }
html.c-drag .cursor-ui__arrow{ opacity:1; }
html.c-drag .cursor-ui__arrow--prev{ transform:translateX(-26px) rotate(-135deg) scale(1); }
html.c-drag .cursor-ui__arrow--next{ transform:translateX(26px)  rotate(45deg)   scale(1); }
html.c-drag.c-down .cursor-ui__arrow--prev{ transform:translateX(-20px) rotate(-135deg) scale(.9); }
html.c-drag.c-down .cursor-ui__arrow--next{ transform:translateX(20px)  rotate(45deg)   scale(.9); }

/* системный курсор прячем только там, где есть мышь */
html.has-cursor,
html.has-cursor body,
html.has-cursor *{ cursor:none; }

/* ─────────────────── ПРЕВЬЮ ШОУРИЛА ПРИ НАВЕДЕНИИ ─────────────────── */

.preview{
  position:fixed;
  left:0; top:0;
  z-index:55;
  pointer-events:none;
  will-change:transform;        /* позицию ведёт JS */
}
.preview__box{
  width:340px;
  aspect-ratio:16/9;
  margin:-96px 0 0 -170px;      /* по центру курсора, чуть выше */
  background:#0E0E0E;
  overflow:hidden;
  opacity:0;
  transform:scale(.94);
  transform-origin:50% 60%;
  transition:opacity .28s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.preview.is-open .preview__box{ opacity:1; transform:scale(1); }
.preview__video{ width:100%; height:100%; object-fit:cover; display:block; }

@media (prefers-reduced-motion:reduce){
  .cursor-ink__box,
  .cursor-ui__accent,
  .cursor-ui__arrow,
  .preview__box{ transition-duration:.12s; }
}

/* ───────── размытие у нижней кромки экрана + хроматическая аберрация ───────── */

.edge{
  position:fixed;
  left:0; right:0; bottom:0;
  height:130px;
  z-index:45;
  pointer-events:none;
}
.edge i{
  position:absolute;
  left:0; right:0; bottom:0;
  display:block;
  height:100%;
}
.edge__filters{ position:absolute; width:0; height:0; }

/* каждый слой размывает сильнее и начинается ниже предыдущего — размытие копится к низу */
.edge__l1{ -webkit-backdrop-filter:blur(1px);  backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 22%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 22%); }
.edge__l2{ -webkit-backdrop-filter:blur(2px);  backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 14%, #000 36%);
          mask-image:linear-gradient(to bottom, transparent 14%, #000 36%); }
.edge__l3{ -webkit-backdrop-filter:blur(4px);  backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 28%, #000 50%);
          mask-image:linear-gradient(to bottom, transparent 28%, #000 50%); }
.edge__l4{ -webkit-backdrop-filter:blur(9px);  backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 42%, #000 64%);
          mask-image:linear-gradient(to bottom, transparent 42%, #000 64%); }
.edge__l5{ -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 56%, #000 78%);
          mask-image:linear-gradient(to bottom, transparent 56%, #000 78%); }
.edge__l6{ -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);
  -webkit-mask-image:linear-gradient(to bottom, transparent 70%, #000 92%);
          mask-image:linear-gradient(to bottom, transparent 70%, #000 92%); }

/* лёгкая растушёвка в цвет страницы, чтобы кромка не читалась линией */
.edge__tint{
  background:linear-gradient(to bottom, rgba(27,27,27,0) 40%, rgba(27,27,27,.35) 100%);
}

@media (max-width:900px){
  .edge{ height:90px; }
}

/* ───────────────────────── АДАПТИВ ───────────────────────── */

@media (max-width:1100px){
  .hero__links{ gap:clamp(24px, 8vw, 162px); padding-right:24px; }
  .hero__bio{ width:auto; right:249px; max-width:none; }
}

/* Мобильный макет (node 64:4684, ширина 393). Размеры — доли этой ширины,
   поэтому вёрстка одинаково ложится на 360, 393 и 430 px. */
@media (max-width:900px){
  :root{
    --sidebar:100%;
    --pad:5.09%;           /* 20 / 393 */
  }

  .hero{
    min-height:0;
    padding:113px 0 0;     /* приветствие начинается ниже, как в макете */
  }
  .hero__greeting,
  .hero__bio,
  .hero__actions{ position:static; }

  .hero__photo{ display:none; }   /* в мобильном макете портрета нет */

  .hero__greeting{
    font-size:17px;
    line-height:28px;
    padding-left:3.56%;    /* 14 / 393 */
    margin:0 0 71px;
  }

  .hero__bio{
    width:auto;
    right:auto;
    padding:0 var(--pad);
    font-size:17px;
    line-height:29px;
  }
  .hero__bio p{ margin-bottom:29px; white-space:normal; }

  .hero__actions{
    display:block;
    height:auto;
    margin:75px 0 0;
    padding:0;
    clear:both;
  }
  .btn-showreel{
    display:block;
    width:89.06%;          /* 350 / 393 — почти во всю ширину */
    margin-left:5.6%;      /* 22 / 393 */
    height:70px;
    font-size:18px;
    padding-left:18.58%;   /* 73 / 393 */
    line-height:70px;
  }
  .btn-cv{
    width:70px;
    height:70px;
    margin-left:76.85%;    /* 302 / 393 — под правым краем showreel */
    font-size:18px;
  }
  .hero__links{
    margin:47px 0 0;
    padding:0 var(--pad);
    gap:0;
    justify-content:space-between;
  }
  .hero__links a{ font-size:12px; }

  /* проект: сначала текст, под ним кадр — как в макете */
  .project{ flex-direction:column; min-height:0; }
  .project__info{
    flex:0 0 auto;
    width:100%;
    order:1;
    min-height:483px;
    padding:151px var(--pad) 40px;
  }
  .project__media{
    order:2;
    aspect-ratio:auto;
    height:483px;          /* превью крупнее, чем было */
  }

  .project__title{ font-size:20px; }
  .project__meta{ margin-top:0; }
  .project__desc{
    max-width:none;
    font-size:17px;
    line-height:24px;
    margin:32px 0 0;
  }
  .project__tags,
  .project__year{ display:none; }   /* в мобильном макете их нет */

  .cv__download{ font-size:2.4vw; }
  .preview{ display:none; }         /* превью — курсорная история */
  .edge{ display:none; }            /* размытие нижней кромки — только на десктопе */

  .reveal-word{                     /* проявление текста — только на десктопе */
    opacity:1;
    filter:none;
    transform:none;
    transition:none;
    will-change:auto;
  }
}

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