/* ═══════════════════════════════════════════
   Даниил Марфин — оператор-постановщик
   ═══════════════════════════════════════════ */

:root{
  --bg:#000;
  --fg:#f2f0ed;
  --dim:#807d79;
  --line:rgba(242,240,237,.13);

  --pad:clamp(20px, 5vw, 84px);

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display:'Playfair Display', 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease:cubic-bezier(.22,1,.36,1);

  /* геометрия кадра в секции «обо мне» */
  --px:5vw; --py:19vh; --pw:31vw; --ph:62vh;
}

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

html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--fg);color:#000}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
li{list-style:none}

.mono{
  font-family:var(--mono);
  font-size:.66rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);
}

.grain{
  position:fixed;inset:-50%;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(4) infinite;will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(3%,1%)}
}

/* ═══ 01 · ШОУРИЛ ═══════════════════════════ */

.reel-track{height:190vh}

.reel{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;background:#000;
}

/* размытая подложка — заполняет поля на узких экранах */
/* размытие и затемнение запечены в сам файл — без filter, чтобы не грузить мобильный GPU */
.reel__bg{
  position:absolute;inset:0;
  background:url('../assets/poster-blur.jpg') center/cover no-repeat;
  opacity:0;
}

.reel__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  opacity:calc(1 - var(--p,0) * .55);
  transform:scale(calc(1 + var(--p,0) * .12));
  filter:saturate(calc(1 - var(--p,0) * .5));
}

.reel__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(125% 100% at 50% 45%, transparent 28%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.65) 0%, transparent 22%, transparent 55%, rgba(0,0,0,.9) 100%);
}
.reel__fade{position:absolute;inset:0;background:#000;opacity:var(--p,0)}

.reel__ui{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--pad);
  opacity:calc(1 - var(--p,0) * 1.6);
}

.reel__head{display:flex;justify-content:space-between;gap:16px}
.reel__title{margin-bottom:auto;padding-top:5vh}

.reel h1{
  font-family:var(--sans);
  font-size:clamp(3rem, 12.5vw, 10.5rem);
  font-weight:800;line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;
}
.reel h1 .line{display:block;overflow:hidden}
.reel h1 .line i{display:block;font-style:normal;animation:rise 1.3s var(--ease) both}
.reel h1 .line:nth-child(2) i{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}to{transform:translateY(0)}}

.reel__role{
  margin-top:clamp(14px,2vw,22px);
  color:#e8e2d6;opacity:0;
  animation:fade 1.2s var(--ease) .55s forwards;
}
@keyframes fade{to{opacity:.8}}

.reel__foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  opacity:0;animation:fade 1.2s var(--ease) .8s forwards;
}
/* крупная кнопка на шоуриле — исчезает вместе с герой-слоем */
.hero-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:clamp(15px,1.5vw,20px) clamp(22px,2.2vw,34px);
  background:var(--fg);color:#000;
  font-size:clamp(.82rem,1.05vw,.98rem);
  font-weight:600;letter-spacing:-.005em;
  box-shadow:0 10px 44px rgba(0,0,0,.55);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.hero-cta__dot{
  width:7px;height:7px;border-radius:50%;background:#000;
  animation:pulse 2.2s ease-in-out infinite;
}
.hero-cta__a{font-size:1.05em;line-height:1;transition:transform .35s var(--ease)}
.hero-cta:hover{background:#fff}
.hero-cta:hover .hero-cta__a{transform:translate(3px,-3px)}
.hero-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}

.cue{display:flex;align-items:center;gap:10px}
.cue i{
  display:block;width:1px;height:34px;transform-origin:top;
  background:linear-gradient(to bottom,var(--dim),transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ═══ ТИПОГРАФИКА СО 2-ГО ЭКРАНА ════════════ */

h2{
  font-family:var(--display);
  font-size:clamp(2.4rem,7vw,5.6rem);
  font-weight:700;line-height:.96;letter-spacing:-.02em;
}
h2 em{font-style:italic;font-weight:400;color:var(--dim)}

.sec-label{display:block}

.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in{opacity:1;transform:none}

/* ═══ 02 · ОБО МНЕ (сцена с переходом) ══════ */

.stage{height:320vh;position:relative}

.stage__sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
}

/* — кадр: панель справа → во весь экран — */
.frame{
  position:absolute;z-index:1;overflow:hidden;background:#080808;
  right:calc(var(--px) * (1 - var(--z,0)));
  top:calc(var(--py) * (1 - var(--z,0)));
  width:calc(var(--pw) + (100% - var(--pw)) * var(--z,0));
  height:calc(var(--ph) + (100% - var(--ph)) * var(--z,0));
  opacity:var(--frame-o,0);
  transform:translate3d(0, calc((1 - var(--frame-o,0)) * 40px), 0);
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  /* лицо остаётся в кадре, когда панель раскрывается в широкий экран */
  object-position:50% 22%;
  transform:scale(calc(1.14 - var(--z,0) * .14));
  filter:brightness(calc(.92 - var(--z,0) * .32)) saturate(calc(1 - var(--z,0) * .25));
}
.frame__dark{
  position:absolute;inset:0;
  background:radial-gradient(100% 90% at 50% 50%, transparent 28%, rgba(0,0,0,.75) 100%);
  opacity:var(--z,0);
}

/* — текст слева — */
/* вертикально центрируется в зоне НАД нижней панелью, а не по экрану */
.copy{
  position:absolute;z-index:2;
  left:var(--pad);
  top:var(--pad);
  bottom:clamp(92px,13vh,132px);
  width:min(55%, 720px);
  display:flex;flex-direction:column;justify-content:center;
  opacity:var(--copy-o,0);
}
.copy .sec-label{margin-bottom:clamp(18px,2.5vw,30px)}

.copy__text{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.1vw,2.85rem);
  font-weight:400;line-height:1.24;letter-spacing:-.012em;
  color:#cfccc7;
}
.copy__text b{font-weight:700;color:var(--fg)}

.copy__meta{
  margin-top:clamp(24px,3.5vw,42px);
  padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--line);
  font-family:var(--display);
  font-style:italic;font-weight:400;
  font-size:clamp(.92rem,1.25vw,1.15rem);
  line-height:1.45;letter-spacing:0;
  color:#78756f;
}

/* — заголовок на полноэкранном кадре — */
.handoff{
  position:absolute;z-index:3;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;text-transform:uppercase;
  font-size:clamp(2.2rem,8vw,7rem);
  line-height:.94;letter-spacing:-.02em;
  pointer-events:none;
  opacity:var(--hand-o,0);
}
.handoff span{display:block;overflow:hidden}
.handoff span+span{margin-top:.04em}
.handoff em{font-style:italic;font-weight:400;color:#cfccc7}

/* ═══ ОБЩИЕ ОТСТУПЫ СЕКЦИЙ ══════════════════ */

.works,.split,.contact{padding:clamp(96px,15vh,200px) var(--pad)}

/* ═══ 03 · КЛИЕНТЫ ══════════════════════════ */

.works{max-width:1680px;margin-inline:auto}
.works .sec-label{margin-bottom:clamp(30px,4vw,52px)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  gap:clamp(14px,1.8vw,24px);
}

.card{display:block}
.card__media{position:relative;aspect-ratio:1;overflow:hidden;background:#0d0d0d}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.76);
  transform:scale(1.02);
  transition:filter .7s var(--ease), transform .7s var(--ease);
}
.card__media::after{
  content:'';position:absolute;inset:0;border:1px solid var(--line);
  transition:border-color .5s;pointer-events:none;
}
.card__meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:13px}
.card__name{font-size:clamp(.9rem,1.3vw,1.08rem);font-weight:500;letter-spacing:-.01em}
.card__go{opacity:0;transform:translateX(-5px);transition:opacity .4s,transform .4s}

.card:not(.card--soon):hover .card__media img{filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.07)}
.card:not(.card--soon):hover .card__media::after{border-color:rgba(242,240,237,.45)}
.card:not(.card--soon):hover .card__go{opacity:1;transform:none}
.card:focus-visible{outline:1px solid var(--fg);outline-offset:6px}
.card--soon{opacity:.4;cursor:default}

/* ═══ 04 · УСЛОВИЯ · 05 · ТЕХНИКА ═══════════ */

.split{
  max-width:1680px;margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(240px,38%) 1fr;
  gap:clamp(40px,7vw,140px);
  align-items:start;
}

.split__head{position:sticky;top:clamp(90px,18vh,180px);padding-right:clamp(16px,2vw,40px)}
.split__head .sec-label{margin-bottom:20px}
.split__head h2{
  font-size:clamp(1.9rem,4vw,3.6rem);
  margin-bottom:clamp(20px,3vw,30px);
}
.split__note{
  font-family:var(--display);
  font-style:italic;font-weight:400;
  font-size:clamp(.92rem,1.2vw,1.1rem);
  line-height:1.5;color:#78756f;
}

.rows{display:flex;flex-direction:column}
.rows li{
  display:grid;
  grid-template-columns:minmax(58px,auto) 1fr;
  gap:clamp(18px,3.5vw,52px);
  padding:clamp(22px,3vw,34px) 0;
  border-top:1px solid var(--line);
}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows__n{padding-top:.55em;color:#5e5b57}

.rows b{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.35rem,2.6vw,2.3rem);
  font-weight:500;line-height:1.12;letter-spacing:-.015em;
}
.rows p{
  margin-top:.5em;
  font-size:clamp(.9rem,1.15vw,1.02rem);
  font-weight:300;line-height:1.5;color:var(--dim);
}

.rows--gear .rows__n{color:var(--dim)}
.rows--gear li{grid-template-columns:minmax(118px,auto) 1fr}

/* ═══ 06 · КОНТАКТЫ ═════════════════════════ */

.contact{max-width:1680px;margin-inline:auto;padding-bottom:clamp(140px,18vh,200px)}

.contact__title{
  font-size:clamp(2.7rem,9.5vw,7.5rem);
  font-weight:700;line-height:.94;letter-spacing:-.025em;
  margin:22px 0 clamp(48px,7vw,84px);
}

.contact__links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(12px,1.6vw,18px);
}
.btn{
  display:flex;align-items:center;gap:14px;
  padding:clamp(20px,2.6vw,28px);
  border:1px solid var(--line);
  transition:background .4s var(--ease), border-color .4s, color .4s;
}
.btn svg{width:21px;height:21px;flex:none}
.btn span{font-size:1.02rem;font-weight:500}
.btn i{
  margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);transition:color .4s;
}
.btn:hover{background:var(--fg);color:#000;border-color:var(--fg)}
.btn:hover i{color:rgba(0,0,0,.55)}

.contact__bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(64px,9vw,120px);padding-top:24px;
  border-top:1px solid var(--line);
}

/* ═══ НИЖНЯЯ ПАНЕЛЬ РАЗДЕЛОВ ════════════════ */

.chapters{
  position:fixed;z-index:90;
  left:var(--pad);bottom:clamp(20px,3vw,34px);
  display:flex;gap:clamp(14px,1.6vw,26px);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.chapters.show{opacity:1;transform:none;pointer-events:auto}

.chapters a{
  display:flex;align-items:baseline;gap:6px;
  opacity:.34;transition:opacity .35s;
  text-shadow:0 1px 14px rgba(0,0,0,.9);
}
.chapters a:hover{opacity:.8}
.chapters a i{font-style:normal;color:var(--fg)}
.chapters a span{color:var(--fg)}
.chapters a.on{opacity:1}
.chapters a.on i{color:var(--fg)}

/* ═══ ПЛАВАЮЩАЯ КНОПКА ══════════════════════ */

.cta{
  position:fixed;z-index:100;
  right:var(--pad);bottom:clamp(20px,3vw,34px);
  display:flex;align-items:center;gap:9px;
  padding:6px 2px;
  color:var(--fg);
  text-shadow:0 1px 16px rgba(0,0,0,.95);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.cta.show{opacity:1;transform:none;pointer-events:auto}
.cta__dot{
  width:6px;height:6px;border-radius:50%;background:var(--fg);
  animation:pulse 2.2s ease-in-out infinite;
}
.cta__t{color:var(--fg);font-weight:500;font-size:.68rem}
.cta__a{font-size:.8rem;line-height:1;opacity:.7;transition:transform .35s var(--ease)}
.cta:hover .cta__a{transform:translate(2px,-2px)}
.cta::after{
  content:'';position:absolute;left:15px;right:14px;bottom:2px;height:1px;
  background:var(--fg);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.cta:hover::after{transform:scaleX(1)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* ═══ ШОУРИЛ НА УЗКИХ / ВЫСОКИХ ЭКРАНАХ ═════ */

@media (max-aspect-ratio:1/1){
  .reel__video{object-fit:contain;object-position:50% 34%}
  .reel__bg{opacity:1}
  .reel__vignette{
    background:
      radial-gradient(140% 80% at 50% 34%, transparent 34%, rgba(0,0,0,.55) 100%),
      linear-gradient(180deg, rgba(0,0,0,.75) 0%, transparent 18%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.95) 100%);
  }
  .reel__title{margin-bottom:0;margin-top:auto;padding-top:0;padding-bottom:2vh}
}

/* ═══ ПЛАНШЕТ ═══════════════════════════════ */

@media (max-width:1024px){
  :root{--px:4vw;--py:16vh;--pw:38vw;--ph:52vh}
  .copy{width:min(62%,560px)}
  .split{grid-template-columns:1fr;gap:clamp(28px,5vw,48px)}
  .split__head{position:static}
  .chapters{gap:12px}
  .chapters a span{display:none}
}

/* ═══ МОБИЛЬНЫЙ ════════════════════════════ */

@media (max-width:680px){
  .reel-track{height:170vh}
  .reel__head span:last-child{display:none}
  .cue span{display:none}

  /* кадр сверху, текст под ним */
  :root{--px:0px;--py:0px;--pw:100%;--ph:40vh}
  .stage{height:300vh}
  .frame{left:0;right:auto}
  /* текст начинается строго под фото, с воздухом — и не доходит до панели */
  .copy{
    top:calc(40vh + clamp(22px,4vh,40px));
    bottom:clamp(96px,14vh,128px);
    left:var(--pad);right:var(--pad);
    width:auto;justify-content:flex-start;
  }
  .copy .sec-label{margin-bottom:14px}
  .copy__text{font-size:clamp(1.05rem,4.6vw,1.4rem)}
  .copy__meta{margin-top:18px;padding-top:14px;font-size:.88rem}

  .grid{grid-template-columns:repeat(2,1fr)}
  .rows li,.rows--gear li{grid-template-columns:1fr;gap:8px}
  .rows__n{padding-top:0}

  .chapters{
    left:var(--pad);right:var(--pad);
    gap:0;justify-content:space-between;
    bottom:clamp(52px,9vh,74px);
  }
  .cta{
    left:var(--pad);right:var(--pad);
    justify-content:center;bottom:clamp(16px,3vw,22px);
    padding:13px 2px;
  }
  .cta::after{left:50%;right:auto;width:0}
}

/* ═══ ПРОИЗВОДИТЕЛЬНОСТЬ НА ТАЧ-УСТРОЙСТВАХ ══ */

@media (hover:none) and (pointer:coarse), (max-width:680px){
  /* зерно — полноэкранный слой, перерисовывающийся 1,4 раза в секунду поверх
     видео и картинки. На телефоне это самый дорогой элемент страницы. */
  .grain{display:none}

  /* filter пересчитывался на каждый тик скролла поверх видео и большого фото —
     на мобильном GPU это и давало рывки. Затемнение берут на себя слои сверху. */
  .reel__video{filter:none;transform:translateZ(0)}
  .frame img{filter:none;transform:translateZ(0)}
  .frame__dark{
    background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.72) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}