/* ============================================================
   innietwin — портфолио
   Структура по мотивам брутально-минималистичных видео-портфолио:
   крупная типографика, номера секций, список работ строками.
   Палитра — пресет innietwin из premium-pdf-guide: тёплый почти-чёрный,
   кремовый текст, золото → бирюза → зелень. Оранжевый — только в градиентах.
   ============================================================ */

:root{
  /* один чёрный на весь сайт: любой оттенок светлее выдаёт себя полосой
     на стыке двух тёмных роликов */
  --bg:            #000000;
  --surface:       #191510;
  --surface-2:     #1F1A13;
  --line:          rgba(244,236,216,.12);
  --line-soft:     rgba(244,236,216,.07);
  --line-strong:   rgba(244,236,216,.24);

  --fg:            #F4ECD8;
  --fg-mid:        rgba(244,236,216,.62);
  --fg-dim:        rgba(244,236,216,.38);

  --gold:          #E8B04B;
  --teal:          #73D6C6;
  --green:         #83C167;
  --ember:         #E0683A;   /* только в градиентах */
  --grad: linear-gradient(96deg, var(--ember), var(--gold) 46%, var(--teal) 76%, var(--green));

  --pad:           clamp(18px, 4.4vw, 64px);
  --maxw:          1600px;
  --r-md:          14px;
  --r-lg:          20px;

  --e-out:         cubic-bezier(.22,.61,.36,1);
  --e-soft:        cubic-bezier(.4,0,.2,1);
  --t-fast:        .18s;
  --t-mid:         .32s;

  /* цветные блоки секций: экран-акцент и светлый разворот */
  --screen:        #E8B04B;   /* золотой экран вместо кислотно-зелёного */
  --screen-ink:    #14110C;
  --paper:         #EDE4D0;   /* светлый разворот вместо #D8D8D8 */
  --paper-ink:     #14110C;

  --z-grain: 2; --z-nav: 60; --z-cursor: 200; --z-lb: 120; --z-load: 300;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Manrope', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size:17px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
body.is-loading{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
/* заголовок для поисковиков и скринридеров, на экране не виден */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; white-space:nowrap;
  clip-path:inset(50%);
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(232,176,75,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* моношрифт для служебных строк — как в интерфейсах монтажек */
.mono, .sec-num, .nav-place, .nav-year, .ld-count, .rc-meta, .sec-tc,
.wk-year, .wk-cat, .pt-hud, .foot, .ct-mail-hint, .wn-btn{
  font-family:'JetBrains Mono', ui-monospace, monospace;
}

/* ─── ЗЕРНО ──────────────────────────────────────────────────
   То же зерно, что в PDF-гайдах: крупинка в один пиксель, альфа зашита
   в саму текстуру (до 24/255). Тайл кладётся 1:1, без масштабирования —
   иначе на стыках проступает сетка. Ничего не анимируется.
   ───────────────────────────────────────────────────────────── */
.film{ position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none; }
.film span{ position:absolute; inset:0; display:block; }
.film-grain{
  background-image:url('../assets/img/grain.png');
  background-size:512px 512px;
  background-repeat:repeat;
  opacity:.25;                /* вчетверо тише базовой альфы текстуры */
}

/* ─── ПОЯВЛЕНИЕ ТЕКСТА ───────────────────────────────────────
   Буквы проступают глитчем: прозрачность каждой мигает в своём ритме,
   пока не сядет на единицу. Само мигание считает reveal.js.
   ───────────────────────────────────────────────────────────── */
.rv-ch{ display:inline-block; opacity:0; }
.is-rv .rv-ch{ opacity:1; }

/* ─── ЛОАДЕР ─────────────────────────────────────────────────
   Бакет-рендер: кадр первого экрана дорисовывается тайлами, по которым
   бежит рамка-сканер, как в V-Ray или Redshift. Внизу служебная строка
   со счётчиком сэмплов. По завершении экран уезжает вверх.
   ───────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:var(--z-load);
  background:var(--bg); color:var(--gold); overflow:hidden;
  transition:opacity .6s ease, visibility .6s;
}
/* под лоадером тот же кадр, что он собрал, поэтому уходит он не шторкой,
   а простым затуханием — первый экран открывается на том же месте */
.loader.is-done{ opacity:0; visibility:hidden; }
.loader.is-done .ld-status{ opacity:0; transition:opacity .25s ease; }
/* общий плёночный слой лежит ниже лоадера и им перекрыт, поэтому здесь своя
   плёнка: потёртости под контентом, зерно поверх всего */
.loader::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 42% at 22% 16%, rgba(232,176,75,.055), transparent 72%),
    radial-gradient(46% 34% at 80% 74%, rgba(232,176,75,.04), transparent 70%),
    repeating-linear-gradient(93deg, transparent 0 34px, rgba(232,176,75,.03) 34px 35px, transparent 35px 88px);
}
/* одна текстура на весь экран, без плитки — иначе видно сетку повторов */
.loader::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background-image:url('../assets/img/grain.png');
  background-size:cover; background-repeat:no-repeat; background-position:center;
  opacity:.3;
}

.ld-status{
  position:absolute; left:var(--pad); right:var(--pad); bottom:26px; z-index:4;
  margin:0; display:flex; justify-content:space-between; gap:16px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em;
  color:rgba(232,176,75,.55); text-transform:uppercase;
}

/* сетка тайлов: под каждым лежит свой кусок кадра, вырезанный
   сдвигом фона — картинка собирается по частям, как в бакет-рендере */
.ld-render{
  position:absolute; inset:0; z-index:2; display:grid;
  /* тот же кадр и то же кадрирование, что у видео первого экрана */
  background:url('../assets/img/hero-head-wide-v3.jpg') center/cover no-repeat;
}
/* сырой кадр поверх картинки: пиксельный сэмпл с шумом, который проходами
   садится в чистое изображение — как последние пассы в Redshift */
.ld-final{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .25s linear;
  image-rendering:pixelated;
}
.ld-final.is-on{ opacity:1; }
/* шторка поверх кадра: гаснет — открывает свой кусок картинки */
.ld-tile{ position:relative; z-index:1; background:var(--bg); transition:opacity .5s linear; }
.ld-tile.is-on{ opacity:0; }
/* рамка-сканер бежит по тайлу, пока он «считается» */
.ld-tile.is-scan::after{
  content:''; position:absolute; inset:0;
  border:1px solid var(--gold);
  box-shadow:0 0 14px rgba(232,176,75,.45), inset 0 0 14px rgba(232,176,75,.2);
}

/* ─── КУРСОР ──────────────────────────────────────────────── */
.cursor{ position:fixed; inset:0; z-index:var(--z-cursor); pointer-events:none; display:none; }
body.has-cursor .cursor{ display:block; }
.cursor-dot{
  position:absolute; top:0; left:0; width:4px; height:4px; margin:-2px 0 0 -2px;
  background:var(--gold); border-radius:50%; transition:opacity var(--t-fast);
}
/* рамка видоискателя. Положение и размер пишет cursor() покадрово:
   за мышью она ходит маленьким кадром, к ссылке и строке работы — прилипает */
.cursor-frame{ position:absolute; top:0; left:0; width:28px; height:28px; will-change:transform; }
.cf-box{ position:absolute; inset:0; transition:transform .2s var(--e-out); }
.cursor.is-down .cf-box{ transform:scale(.92); }
.cf-c{
  position:absolute; width:8px; height:8px;
  border:0 solid rgba(244,236,216,.62);
  transition:width .3s var(--e-out), height .3s var(--e-out), border-color .3s var(--e-out);
}
.cf-tl{ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.cf-tr{ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.cf-bl{ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.cf-br{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.cursor.is-link .cf-c{ border-color:var(--gold); }
.cursor.is-media .cf-c{ width:16px; height:16px; border-color:var(--gold); }
.cursor.is-link .cursor-dot, .cursor.is-row .cursor-dot{ opacity:0; }
/* плашка записи над кадром: мигающая точка и тикающий таймкод */
.cf-rec{
  position:absolute; left:0; bottom:calc(100% + 8px);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  font:500 10px/1 'JetBrains Mono',monospace; letter-spacing:.12em; color:var(--fg);
  text-shadow:0 0 6px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.6);   /* читается и на светлом кадре */
  opacity:0; transform:translateY(4px); transition:opacity .2s var(--e-out), transform .2s var(--e-out);
}
.cf-rec b{ width:6px; height:6px; border-radius:50%; background:#ff3b30; animation:rec-blink 1s steps(2, start) infinite; }
.cf-rec em{ font-style:normal; color:var(--fg-mid); }
.cursor-label{
  position:absolute; right:0; top:calc(100% + 8px); white-space:nowrap;
  font:500 10px/1 'JetBrains Mono',monospace; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); text-shadow:0 0 6px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-4px); transition:opacity .2s var(--e-out), transform .2s var(--e-out);
}
.cursor.is-media .cf-rec, .cursor.is-media .cursor-label{ opacity:1; transform:none; }
@keyframes rec-blink{ to{ visibility:hidden; } }

/* ─── ШАПКА ───────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  color:var(--fg);
  display:flex; align-items:center; gap:clamp(14px,2vw,34px);
  padding:18px var(--pad); border-bottom:1px solid transparent;
  transition:padding var(--t-mid) var(--e-out), background-color var(--t-mid),
             backdrop-filter var(--t-mid), border-color var(--t-mid);
}
.nav.is-stuck{
  padding:11px var(--pad); background:rgba(16,13,9,.82); color:var(--fg);
  backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line);
}
.nav.is-stuck .nav-links a{ color:var(--fg-mid); }
.nav.is-stuck .nav-links a:hover, .nav.is-stuck .nav-links a.is-current{ color:var(--fg); }
.nav.is-stuck .nav-links a i{ color:var(--fg-dim); }
.nav.is-stuck .nav-place{ color:var(--fg-dim); }
.nav.is-stuck .nav-place b{ color:var(--fg); background:rgba(244,236,216,.1); }
.nav.is-stuck .nav-year{ color:var(--fg-dim); }
.nav.is-stuck .logo-dot{ background:var(--gold); }
.nav-logo{
  display:flex; align-items:center; gap:9px;
  font-family:'Oswald',sans-serif; font-weight:500; font-size:15px;
  letter-spacing:.2em; text-transform:lowercase;
}
/* точка дышит тем же тёплым свечением, что и кольцо за фигурой */
.logo-dot{
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  animation:dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%, 100%{ box-shadow:0 0 4px 1px rgba(232,176,75,.35); }
  50%     { box-shadow:0 0 12px 3px rgba(232,176,75,.85), 0 0 22px 7px rgba(232,176,75,.3); }
}
.nav-place{ font-size:11px; letter-spacing:.18em; color:var(--fg-dim); }
.nav-place b{ font-weight:400; color:var(--fg); padding:2px 6px; background:rgba(244,236,216,.1); border-radius:3px; }
.nav-links{ display:flex; gap:clamp(16px,2.4vw,34px); margin-left:auto; }
.nav-links a{
  position:relative; display:flex; align-items:baseline; gap:7px;
  font-family:'Oswald',sans-serif; font-size:13.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mid); transition:color var(--t-fast);
}
.nav-links a i{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:9.5px; color:var(--fg-dim); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:currentColor; transition:right var(--t-mid) var(--e-out);
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a:hover::after, .nav-links a.is-current::after{ right:0; }
.nav-links a.is-current{ color:var(--fg); }
.nav-links a.is-current i{ color:var(--gold); }
.nav-year{ font-size:11px; letter-spacing:.14em; color:var(--fg-dim); margin-left:clamp(10px,2vw,28px); }
/* переключатель языка: активный язык светлый с золотой чертой снизу */
.nav-lang{
  position:relative; z-index:1; display:flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:var(--fg-dim);
}
.nav-lang button{
  position:relative; padding:4px 2px; letter-spacing:inherit;
  color:var(--fg-dim); transition:color var(--t-fast);
}
.nav-lang button::after{
  content:''; position:absolute; left:2px; right:2px; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transition:transform var(--t-mid) var(--e-out);
}
.nav-lang button:hover{ color:var(--fg-mid); }
.nav-lang button.is-on{ color:var(--fg); }
.nav-lang button.is-on::after{ transform:none; }
.nav-lang .nl-sep{ opacity:.5; }
.nav-burger{ display:none; width:34px; height:34px; position:relative; margin-left:auto; }
.nav-burger span{
  position:absolute; left:7px; right:7px; height:1.5px; background:var(--fg);
  transition:transform var(--t-mid) var(--e-out);
}
.nav-burger span:nth-child(1){ top:14px; }
.nav-burger span:nth-child(2){ top:20px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ─── ОБЩЕЕ ДЛЯ СЕКЦИЙ ────────────────────────────────────── */
.reel, .info, .works, .clients, .contact{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:clamp(70px,9vw,140px) var(--pad);
}
.sec-head{
  display:flex; align-items:baseline; gap:clamp(14px,2vw,28px);
  padding-bottom:18px; margin-bottom:clamp(24px,3vw,44px);
  border-bottom:1px solid var(--line);
}
.sec-head--slim{ border-bottom:0; margin-bottom:22px; }
.sec-num{ font-size:11px; letter-spacing:.2em; color:var(--gold); }
.sec-title{
  font-family:'Anton', Impact, 'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,6.4vw,86px); line-height:.9; letter-spacing:0; margin:0;
  white-space:nowrap;
  transform:scaleX(.72); transform-origin:left center;
}
.sec-title--sm{ font-size:clamp(18px,2.2vw,26px); letter-spacing:.08em; color:var(--fg-mid); }
.sec-tc{ margin-left:auto; font-size:12px; color:var(--teal); letter-spacing:.1em; }

/* ─── 01 · HERO: имя во всю ширину, обрезанное краями ─────── */
/* первый экран на всю высоту: облёт до крупного плана запускает первый
   жест прокрутки (heroScrub), страница в это время стоит */
.hero{
  position:relative; z-index:1; height:100svh;
  background:var(--bg); color:var(--fg);
}
/* обрезку держит липкий слой: overflow на самой секции сломал бы sticky */
.hero-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:70px 0 26px; overflow:hidden;
}
/* имя и «AI / 3D ARTIST» поверх финального кадра: --outro пишет heroScrub(),
   к концу ролика заголовок поднимается и проявляется */
/* кегль заголовка здесь подбирает heroScrub(): так, чтобы буквы стояли ниже
   подбородка в финальном кадре на любой пропорции экрана */
.hero-copy{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(16px,2.6vh,28px);
  z-index:2; pointer-events:none;
  opacity:var(--outro,0);
  transform:translate3d(0, calc((1 - var(--outro,0)) * 40px), 0);
}
/* ролик на весь экран за текстом. Время в нём ведёт прокрутка — heroScrub() */
.hero-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  /* --shift ставит heroScrub() на коротких телефонах: опускает кадр, чтобы
     лампа не упиралась в бегущую строку; к началу прокрутки уходит в ноль */
  transform:translate3d(0, calc(var(--shift,0px) * (1 - var(--exit,0))), 0);
}
/* полоса над опущенным кадром затягивается фоном без ступеньки */
.hero-sticky::before{
  content:''; position:absolute; left:0; right:0; top:0; z-index:1; pointer-events:none;
  height:calc((var(--shift,0px) + var(--shift-fade,0px)) * (1 - var(--exit,0)));
  background:linear-gradient(180deg, var(--bg) calc(var(--shift,0px) * (1 - var(--exit,0))), transparent);
}
/* нижняя кромка кадра уходит в фон — иначе на стыке со следующим экраном
   видно ступеньку: низ ролика тёплый, а подложка чёрная */
.hero-sticky::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:13vh;
  z-index:1; pointer-events:none;
  background:linear-gradient(0deg, var(--bg), transparent);
}
/* кольцо-эхо поверх запечённого: разгорается по мере приближения курсора.
   Позиция и размер подогнаны под кадр ролика, правятся этими переменными */
.hero-ring{ display:none;   /* подогнано под кольцо прежнего ролика, на новом не нужно */
  position:absolute; z-index:1; pointer-events:none;
  left:var(--ring-x,45%); top:var(--ring-y,43%);
  width:var(--ring-size,44vh); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  box-shadow:0 0 8vh 1.5vh rgba(232,176,75,.42), inset 0 0 8vh 1vh rgba(232,176,75,.22);
  mix-blend-mode:screen;
  /* разгорается и от курсора, и на выходе экрана — кольцо догорает вслед */
  opacity:calc(var(--glow,0) * .5 + var(--exit,0) * .4);
  transition:opacity .3s linear;
}
/* зерно поверх видео; тонировка не нужна — ролик уже в тёплой гамме */
/* лента идёт тёмной плашкой в тон кнопки «прокрути вниз» */
.hero-ticker{
  position:relative; z-index:2;
  overflow:hidden; padding:11px 0;
  background:var(--screen-ink); color:var(--screen);
  /* translate3d и will-change держат слой живым: иначе при возврате
     наверх браузер не перерисовывает бегущую строку внутри */
  transform:translate3d(0, calc(var(--exit,0) * -34px), 0);
  opacity:calc(1 - var(--exit,0) * 1.5);
  will-change:transform, opacity;
}
/* ход, въезд справа и отмотка по прокрутке живут в одном transform,
   который пересчитывается покадрово в ticker(). Вложенные слои с
   собственными анимациями Safari на телефоне перестаёт перерисовывать —
   плашка остаётся, а слов в ней нет */
.hero-ticker .ticker-track{ display:flex; width:max-content; will-change:transform; }
.tk-item{
  display:inline-flex; align-items:center; gap:30px;
  padding-left:30px; white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.2em;
  color:inherit; text-transform:uppercase;
}
.tk-item::after{ content:'/'; opacity:.4; }

.hero-name{
  position:relative; z-index:2;
  margin:0; padding:0; overflow:hidden;
  font-family:'Anton', Impact, 'Haettenschweiler', 'Oswald', sans-serif; font-weight:400;
  font-size:40vw; line-height:.78; letter-spacing:0;
  text-transform:uppercase; white-space:nowrap;
  /* матовое стекло: полупрозрачная заливка, светлая кромка и мягкая тень,
     чтобы буквы читались на любом кадре видео под ними */
  color:rgba(255,255,255,.18);
  -webkit-text-stroke:.14vw rgba(255,255,255,.62);
  text-shadow:0 0 .5vw rgba(20,17,12,.5), 0 .6vw 1.8vw rgba(20,17,12,.35);
}
/* имя едет слева направо и повторяется без шва.
   Сжатие применяется ко ВСЕЙ ленте: если сжимать каждую копию,
   ширина в потоке остаётся прежней и между словами появляются дыры. */
.hn-track{
  display:flex; width:max-content;
  transform-origin:left center;
  animation:nameRun 26s linear infinite;
}
.hn-row{ display:block; padding-right:.16em; }
@keyframes nameRun{
  from{ transform:translateX(-50%) scaleX(.52); }
  to{   transform:translateX(0)    scaleX(.52); }
}
.hero-name:hover .hn-track{ animation-play-state:paused; }

.hero-foot{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding:0 var(--pad); flex-wrap:wrap;
  transform:translate3d(0, calc(var(--exit,0) * 46px), 0);
  opacity:calc(1 - var(--exit,0) * 1.7);
  will-change:transform, opacity;
}
.hf-meta{ display:grid; gap:5px; }
.hf-role, .hf-status{
  margin:0; font-family:'Oswald',sans-serif; font-size:12.5px;
  letter-spacing:.2em; text-transform:uppercase;
}
/* строка о доступности мигает зелёным — статус, а не просто подпись */
.hf-status{
  display:flex; align-items:center; gap:9px;
  color:var(--green); animation:statusBlink 2.4s var(--e-soft) infinite;
}
.hero .pulse{
  width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--green);
  animation:pulseRing 2.4s var(--e-soft) infinite;
}
/* текст верхней строки сдвигаем на ширину точки с отступом, чтобы обе
   строки начинались по одной вертикали, а точка висела слева от них */
.hf-role{ padding-left:16px; }
@keyframes statusBlink{
  0%, 100%{ opacity:1; }
  50%{ opacity:.42; }
}
@keyframes pulseRing{
  0%{   box-shadow:0 0 0 0 rgba(131,193,103,.55); }
  70%{  box-shadow:0 0 0 9px rgba(131,193,103,0); }
  100%{ box-shadow:0 0 0 0 rgba(131,193,103,0); }
}

.hf-scroll{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:4px;
  background:var(--screen-ink); color:var(--screen);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  transition:transform var(--t-fast) var(--e-out);
}
.hf-scroll:hover{ transform:translateY(2px); }
.hf-scroll svg{ animation:scrollNudge 2s var(--e-soft) infinite; }
@keyframes scrollNudge{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* карточка шоурила: светлая подложка, подписи над кадром */
.hf-card{
  display:block; width:clamp(230px,25vw,360px); padding:12px;
  border-radius:14px; text-align:left;
  background:var(--paper); color:var(--paper-ink);
  box-shadow:0 20px 46px -26px rgba(20,17,12,.75);
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid);
}
.hf-card:hover{ transform:translateY(-5px); box-shadow:0 26px 56px -26px rgba(20,17,12,.9); }
.hfc-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:2px 4px 10px;
}
.hfc-name{ font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; letter-spacing:.01em; }
.hfc-tc{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.02em; }
.hfc-screen{
  display:block; position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#000; border-radius:2px;
}
.hfc-screen video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ─── 02 · ШОУРИЛ ─────────────────────────────────────────── */
.reel-stage{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line); background:var(--bg); aspect-ratio:16/9;
}
.reel-stage video{ width:100%; height:100%; object-fit:cover; }
.reel-scan{ display:none; }
.reel-ctrl{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:clamp(14px,1.6vw,22px);
  background:linear-gradient(to top, rgba(16,13,9,.9), transparent);
}
.rc-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 17px; border-radius:100px; border:1px solid var(--line-strong);
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(16,13,9,.55); backdrop-filter:blur(6px);
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.rc-btn:hover{ background:var(--gold); color:var(--bg); border-color:transparent; }
.rc-meta{ margin-left:auto; font-size:11px; letter-spacing:.14em; color:var(--fg-dim); }

/* ─── 03 · ПОРТРЕТ ВО ВЕСЬ ЭКРАН ──────────────────────────── */
/* чёрная пауза перед портретом: первый экран успевает догаснуть,
   прежде чем в кадр входит следующий */
.portrait{ position:relative; z-index:1; height:300vh; margin-top:26vh; }
.pr-sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:var(--bg);
}
.pr-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  /* голова уходит в правую половину экрана: слева поле под заголовок и
     подписи. Фон ролика и так почти чёрный, поэтому оголённый край не
     закрываем масштабом, а растворяем левую кромку кадра в фон */
  transform:translateX(24%) scale(1.04);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24%);
}
.pr-scrim{                       /* читаемость текста и растушёвка кромок */
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0, transparent 9%),
    linear-gradient(to top, rgba(0,0,0,.92) 4%, rgba(0,0,0,.25) 46%, rgba(0,0,0,.55)),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.5));
}
.pr-grade{                       /* тёплый свет по кадру, в тон палитре */
  position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.75;
  background:
    radial-gradient(60% 55% at 22% 30%, rgba(232,176,75,.55), transparent 70%),
    radial-gradient(50% 60% at 88% 70%, rgba(115,214,198,.28), transparent 72%);
}
.pr-copy{
  position:absolute; left:var(--pad); right:var(--pad); bottom:clamp(64px,9vh,110px);
  z-index:2;
}
.pr-kicker{
  margin:0 0 14px; font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.24em; color:var(--gold);
}
.pr-title{
  /* в Anton нет кириллицы: русские буквы берутся из Oswald Bold. Жирность 700
     выбирает начертание Oswald, а font-synthesis не даёт браузеру
     дорисовать Anton фальшивым полужирным */
  margin:0; font-family:'Anton', 'Oswald', Impact, sans-serif; font-weight:700; font-synthesis:none;
  /* кегль зависит и от высоты: на широком невысоком окне заголовок иначе
     дорастает до подписей сверху */
  font-size:clamp(64px, min(17vw, 26vh), 260px); line-height:.8;
  letter-spacing:0; text-transform:uppercase;
}
.pr-title > span{ display:block; white-space:nowrap; transform-origin:left center; }
.pr-title > span:nth-child(2){ color:transparent; -webkit-text-stroke:1px rgba(244,236,216,.65); }
/* «I» в AI — чистый белый акцент. Буквы разложены в .rv-ch скриптом
   появления, пробелы остаются текстовыми узлами: в «CG / AI» это пятый
   элемент-потомок первой строки */
.pr-title > span:first-child .rv-ch:nth-child(5){ color:#fff; }
/* роли слева сверху, над заголовком: выходят одна за другой по мере
   поворота головы, лицо справа их не задевает */
.pr-roles{
  position:absolute; left:var(--pad); top:clamp(70px,12vh,170px); z-index:2;
  margin:0; padding:0; list-style:none;
  display:grid; gap:clamp(8px,1.6vh,16px); justify-items:start; text-align:left;
}
.pr-roles li{
  font-family:'Oswald',sans-serif; font-size:clamp(13px, min(1.9vw, 2.8vh), 30px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg);
  padding-bottom:7px; border-bottom:1px solid var(--line-strong);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
}
.pr-roles li.is-on{ opacity:1; transform:none; }
.pr-roles li:nth-child(2){ color:var(--gold); }
.pr-roles li:nth-child(3){ color:var(--teal); }

.pr-hud{
  position:absolute; left:var(--pad); right:var(--pad); bottom:34px; z-index:2;
  display:flex; align-items:center; gap:16px;
  font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.14em; color:var(--fg-dim);
}
.pr-tc{ color:var(--teal); }
.pr-bar{ flex:1; height:1px; background:var(--line); position:relative; overflow:hidden; }
.pr-bar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--grad); }

/* ─── ИНФО ────────────────────────────────────────────────── */
.info-lead{
  margin:0 0 22px; max-width:52ch;
  font-size:clamp(17px,1.5vw,21px); color:var(--fg-mid);
}
/* остальной рассказ мельче лида — чтобы первый абзац держал внимание */
.info-body{ margin:0 0 34px; max-width:52ch; display:grid; gap:18px; }
.info-body p{ margin:0; font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--fg-mid); }
/* слова разгораются прокруткой; переход сглаживает ступеньки при рывках */
.info-lead .w, .info-body .w{ opacity:.08; transition:opacity .18s linear; }
/* последняя фраза — обращение к заказчику, поэтому светлее остального */
.info-close{ color:var(--fg); }
.info-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); }
.ic-head{
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin:0 0 12px;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.ic-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.ic-list li{ font-size:14px; color:var(--fg-mid); }
.info-cta{
  display:inline-flex; align-items:center; gap:14px; margin-top:36px;
  padding:15px 26px; border-radius:100px; border:1px solid transparent;
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box;
  transition:box-shadow var(--t-mid);
}
.info-cta:hover{ box-shadow:0 12px 36px -16px rgba(232,176,75,.7); }
.info-cta svg{ transition:transform var(--t-mid) var(--e-out); }
.info-cta:hover svg{ transform:translateX(4px); }

/* ─── 04 · РАБОТЫ (список строками) ───────────────────────── */
.works-list{ border-top:1px solid var(--line); }
.wk{
  position:relative; display:grid;
  grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(12px,2vw,28px); padding:clamp(18px,2.2vw,30px) 4px;
  border-bottom:1px solid var(--line); cursor:pointer;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out),
             background-color var(--t-mid), padding-left var(--t-mid) var(--e-out);
}
.wk.is-in{ opacity:1; transform:none; }
.wk::before{                       /* заливка, наезжающая слева при наведении */
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(232,176,75,.10), transparent 60%);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--e-out);
}
.wk:hover::before{ transform:scaleX(1); }
.wk:hover{ padding-left:18px; }
.wk-year{ font-size:12px; color:var(--fg-dim); letter-spacing:.1em; }
.wk-main{ min-width:0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.wk-client{
  font-family:'Anton', Impact, 'Oswald', sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.2vw,50px); line-height:1; letter-spacing:0;
  display:inline-block; white-space:nowrap;
  transform:scaleX(.74); transform-origin:left center;
  transition:color var(--t-fast);
}
.wk:hover .wk-client{ color:var(--gold); }
.wk-title{ font-size:14.5px; color:var(--fg-mid); }
.wk-cat{
  font-size:11px; letter-spacing:.14em; color:var(--teal);
  padding:4px 11px; border:1px solid rgba(115,214,198,.28); border-radius:100px;
}
.wk[data-cat="VFX"] .wk-cat{ color:var(--gold); border-color:rgba(232,176,75,.3); }
.wk[data-cat="9:16"] .wk-cat{ color:var(--green); border-color:rgba(131,193,103,.3); }
.wk-arrow{ color:var(--fg-dim); transition:transform var(--t-mid) var(--e-out), color var(--t-fast); }
.wk:hover .wk-arrow{ transform:translate(4px,-4px); color:var(--gold); }
.wk.is-dim{ opacity:.35; }

/* превью, которое едет за курсором */
.works-peek{
  position:fixed; top:0; left:0; z-index:50; width:clamp(200px,20vw,320px);
  aspect-ratio:16/9; border-radius:10px; overflow:hidden; pointer-events:none;
  border:1px solid var(--line-strong); box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .3s var(--e-out), transform .35s var(--e-out);
}
.works-peek.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.works-peek.is-vert{ aspect-ratio:9/16; width:clamp(130px,12vw,200px); }
.works-peek video{ width:100%; height:100%; object-fit:cover; }

.works-nav{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.18em; }
.wn-btn{ color:var(--fg-dim); transition:color var(--t-fast); }
.wn-btn:hover{ color:var(--gold); }
.wn-sep{ color:var(--fg-dim); }

/* ─── КЛИЕНТЫ ─────────────────────────────────────────────── */
/* две ленты идут навстречу друг другу; ход, отмотка по прокрутке и
   зацикливание считаются покадрово в одном transform на строку —
   вложенные анимированные слои Safari на телефоне не перерисовывает */
.clients-marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(14px,2.4vw,26px) 0;
  display:flex; flex-direction:column; gap:clamp(2px,.5vw,8px);
  overflow:hidden;
}
.cm-row{ overflow:hidden; }
.cm-track{ display:flex; width:max-content; will-change:transform; }
.cm-item{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding-right:clamp(20px,3.4vw,52px);
  font-family:'Anton', Impact, 'Oswald', sans-serif; font-weight:400;
  font-size:clamp(30px,5.6vw,78px); line-height:1.12;
  letter-spacing:.01em; text-transform:uppercase; color:var(--fg);
  transition:color var(--t-mid), -webkit-text-stroke-color var(--t-mid);
}
/* через одно название — контурное, как ARTIST в портретной секции */
.cm-item:nth-child(even){ color:transparent; -webkit-text-stroke:1px rgba(244,236,216,.55); }
/* золотая точка вместо запятой между названиями */
.cm-item::after{
  content:'●'; margin-left:clamp(20px,3.4vw,52px);
  font-size:.2em; color:var(--gold); opacity:.8;
  -webkit-text-stroke:0; transform:translateY(-.5em);
}
body.has-cursor .cm-item:hover{ color:var(--gold); -webkit-text-stroke-color:var(--gold); }

/* ─── 05 · КОНТАКТЫ ───────────────────────────────────────── */
.ct-mail{
  display:flex; flex-direction:column; gap:8px; margin:clamp(16px,3vw,36px) 0 0;
  cursor:pointer; width:fit-content; max-width:100%;
}
.ct-mail-text{
  font-family:'Oswald',sans-serif; font-weight:500; text-transform:none;
  font-size:clamp(26px,5.6vw,84px); line-height:1.16; letter-spacing:-.01em;
  /* градиент обрезан по буквам, поэтому хвосты «g» и «y» ниже строки
     остались бы незакрашенными: даём тексту запас снизу */
  padding-bottom:.06em;
  background:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:background-position .6s var(--e-out);
}
.ct-mail:hover .ct-mail-text{ background-position:100% 0; }
.ct-mail-hint{ font-size:11px; letter-spacing:.16em; color:var(--fg-dim); }

.ct-socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px,4vw,54px); }
.ct-socials a{
  padding:13px 24px; border-radius:100px; border:1px solid var(--line);
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:.2em;
  color:var(--fg-mid);
  transition:color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.ct-socials a:hover{ color:var(--fg); border-color:var(--gold); background:rgba(232,176,75,.07); }

/* ─── ФУТЕР ───────────────────────────────────────────────── */
.foot{
  position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:24px var(--pad) 32px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.14em; color:var(--fg-dim);
}
.foot-m{ color:var(--fg-mid); }
.foot-r:hover{ color:var(--gold); }

/* ─── ЛАЙТБОКС ────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-lb);
  background:rgba(10,8,6,.95); backdrop-filter:blur(14px);
  display:grid; place-items:center; padding:clamp(16px,4vw,56px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--e-out), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lb-stage{
  margin:0; max-width:min(1200px,100%); max-height:100%;
  display:flex; flex-direction:column; gap:16px;
  transform:scale(.96) translateY(12px); opacity:0;
  transition:transform .45s var(--e-out), opacity .45s var(--e-out);
}
.lightbox.is-open .lb-stage{ transform:none; opacity:1; }
.lb-stage video{
  width:auto; height:auto; max-width:100%; max-height:74vh; margin:0 auto;
  border-radius:var(--r-md); background:#000; border:1px solid var(--line);
}
.lb-cap{ display:flex; flex-direction:column; gap:6px; }
.lb-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--gold); letter-spacing:.1em; }
.lb-title{ font-family:'Oswald',sans-serif; font-size:22px; text-transform:uppercase; }
.lb-desc{ font-size:14px; color:var(--fg-mid); max-width:70ch; }
.lb-close, .lb-nav{
  position:absolute; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(25,21,16,.7);
  display:grid; place-items:center; color:var(--fg);
  transition:background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.lb-close:hover, .lb-nav:hover{ background:var(--gold); color:var(--bg); border-color:transparent; }
.lb-close{ top:22px; right:22px; }
.lb-nav{ top:50%; margin-top:-23px; }
.lb-prev{ left:18px; } .lb-next{ right:18px; }

/* ─── ТОСТ ────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:calc(var(--z-lb) + 5);
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  padding:12px 22px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line-strong);
  font-size:13.5px; box-shadow:0 16px 40px -18px rgba(0,0,0,.9);
  transition:opacity .3s var(--e-out), transform .3s var(--e-out);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ─── АДАПТИВ ─────────────────────────────────────────────── */
@media (max-width:1100px){
}
@media (max-width:860px){
  body{ font-size:16px; }
  .nav-place, .nav-year{ display:none; }
  .nav-burger{ display:block; margin-left:0; }
  .nav-lang{ margin-left:auto; font-size:12px; }
  .nav-links{
    position:fixed; inset:0 0 auto; top:0; padding:88px var(--pad) 32px;
    flex-direction:column; gap:20px; background:rgba(16,13,9,.97);
    backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
    transform:translateY(-100%); transition:transform .45s var(--e-out);
  }
  .nav-links.is-open{ transform:none; }
  .nav-links a{ font-size:22px; color:var(--fg); }
  .hero-sticky{ padding-top:82px; }
  .info-cols{ grid-template-columns:1fr; gap:18px; }

  /* ── HERO: карточка шоурила плавает по центру поверх ленты имени,
     подписи и «прокрути вниз» разведены по нижним углам ── */
  .hero-name{ font-size:91vw; }
  /* карточка висит в свободной зоне между лентой и нижними подписями.
     Отсчёт от низа во vh, а не в процентах: ближайший позиционированный
     предок — узкая .hero-foot, от её высоты проценты уводят карточку вниз */
  .hf-card{
    /* bottom в процентах от .hero-foot: 100% ставит плашку ровно
       на её верхнюю кромку, ниже уже начинается текст */
    position:absolute; left:50%; bottom:calc(100% + 10px); z-index:3;
    transform:translateX(-50%);
    width:min(62vw,272px); padding:7px;
  }
  .hf-card:hover{ transform:translateX(-50%) translateY(-4px); }
  .hfc-top{ padding:1px 3px 6px; }
  .hfc-name, .hfc-tc{ font-size:10.5px; }
  /* кадр шире 16:9 — так плашка ниже и не наезжает на лицо */
  .hfc-screen{ aspect-ratio:21/9; }
  .hero-foot{
    align-items:flex-end; justify-content:space-between;
    flex-wrap:nowrap; gap:14px;
  }
  .hf-role, .hf-status{ font-size:11px; letter-spacing:.14em; }
  .hf-scroll{ flex:none; padding:8px 12px; font-size:10px; letter-spacing:.14em; }
  /* на узком экране лента имени сжата слабее — иначе за карточкой
     остаются одни вертикальные штрихи вместо букв */
  .hn-track{ animation-name:nameRunM; }
  @keyframes nameRunM{
    from{ transform:translateX(-50%) scaleX(.78); }
    to{   transform:translateX(0)    scaleX(.78); }
  }

  /* ── ПОРТРЕТ: кадр сверху, гигантский заголовок под ним на чёрном ──
     сверху оставлено поле под шапку, иначе макушка упирается в край */
  /* на телефоне пауза уже заложена полем над кадром внутри секции */
  .portrait{ height:220vh; margin-top:0; }
  .pr-sticky{
    --pt:66px;                       /* поле над кадром */
    --pv:42svh;                      /* высота кадра */
    background:var(--bg);
    display:grid; grid-template-rows:var(--pt) var(--pv) 1fr;
  }
  .pr-video{
    grid-row:2;
    position:relative; inset:auto; height:100%;
    object-fit:cover; object-position:32% center;   /* лицо уходит вправо, слева место под подписи */
    transform:none; -webkit-mask-image:none; mask-image:none;
  }
  /* кромки кадра растушёваны в фон: одним плоским цветом стык не закрыть —
     низ верхнего ролика тёплый, верх портретного почти чёрный */
  .pr-scrim{
    inset:var(--pt) 0 auto; height:var(--pv);
    background:
      linear-gradient(180deg, var(--bg) 0, transparent 16%),
      linear-gradient(0deg,   var(--bg) 0, transparent 24%),
      linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 28%, rgba(0,0,0,.35));
  }
  .pr-grade{ inset:var(--pt) 0 auto; height:var(--pv); opacity:.5; }
  /* роли уходят влево: справа в кадре лицо. По высоте — на уровне носа,
     то есть примерно посередине кадра */
  .pr-roles{
    top:calc(var(--pt) + var(--pv) * .5); bottom:auto;
    left:var(--pad); right:auto;
    transform:translateY(-50%);
    justify-items:start; text-align:left;
  }
  /* полоса скрабба на этом экране не нужна */
  .pr-hud{ display:none; }
  .pr-copy{
    grid-row:3;
    position:relative; left:auto; right:auto; bottom:auto;
    align-self:center; padding:0 var(--pad) 24px;
  }
  .pr-roles{ gap:8px; }
  .pr-roles li{ font-size:11px; letter-spacing:.16em; padding-bottom:5px; }
  /* на первом экране фразы стоят под шапкой, над головой в кадре, и крупнее */
  .hero .pr-roles{ top:clamp(76px,11vh,120px); transform:none; gap:10px; }
  .hero .pr-roles li{ font-size:15px; }
  .pr-kicker{ margin-bottom:14px; }
  /* строки должны добивать до краёв экрана, как в референсе */
  .pr-title{ font-size:clamp(74px,44vw,180px); color:var(--fg); }
  /* пробелы вокруг слэша сжаты: без этого «AI / 3D» разъезжается дырами.
     Итоговый масштаб строк подбирает fitPortraitTitle */
  .pr-title > span{ letter-spacing:-.01em; word-spacing:-.08em; }
  /* ARTIST остаётся контурным и на узком экране, только обводка толще —
     на крупном кегле волосяная линия рассыпается */
  .pr-title > span:nth-child(2){ color:transparent; -webkit-text-stroke:1.5px rgba(244,236,216,.7); }
  .wk{ grid-template-columns:auto 1fr auto; }
  .wk-arrow{ display:none; }
  .works-peek{ display:none; }
  .lb-nav{ top:auto; bottom:16px; margin-top:0; }
  .lb-prev{ left:calc(50% - 58px); } .lb-next{ right:calc(50% - 58px); }
}

/* ─── МЕНЬШЕ ДВИЖЕНИЯ ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .wk{ opacity:1 !important; transform:none !important; }

  .cursor{ display:none !important; }
}