/* =========================================================
   ТСМ — общие стили главной и страниц объектов
   ========================================================= */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255,255,255,.55);
  --line: rgba(255,255,255,.18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --font: "Oswald", "Arial Narrow", sans-serif;
  --gutter: clamp(16px, 4.5vw, 64px);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--bg); color:var(--fg); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img, video { display:block; }
:focus-visible { outline:2px solid var(--fg); outline-offset:4px; }
button { background:none; border:0; color:inherit; cursor:pointer; font:inherit; }
body.menu-open { overflow:hidden; }

/* Lenis: плавная прокрутка (классы ставит сама библиотека) */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

/* ---------- Подчёркивание ссылок при наведении: линия 1px выезжает слева ---------- */
.u { position:relative; display:inline-block; }
.u::after { content:""; position:absolute; left:0; right:0; bottom:-.12em; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease-out); }
.u:hover::after, .u:focus-visible::after, a:hover > .u::after { transform:scaleX(1); transform-origin:left; }

/* ---------- Стопка: кадры «прилипают» к верху, следующий выезжает снизу поверх ---------- */
.stack { position:relative; }
.hero, .panel { position:sticky; top:0; height:100vh; height:100svh; min-height:520px; overflow:hidden; isolation:isolate; background:var(--bg); }
.hero { display:grid; align-items:center; }
/* --shade: насколько кадр уже накрыт следующим (0…1), задаётся из JS */
.hero::before, .panel::before { content:""; position:absolute; inset:0; z-index:5; background:#000; opacity:calc(var(--shade, 0) * .7); pointer-events:none; }
.media { position:absolute; inset:0; transform:scale(var(--scale, 1)); will-change:transform; }
.panel img, .panel video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel video { opacity:0; transition:opacity .8s ease; }
.panel video.is-playing { opacity:1; }
.panel .media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.18)); }

/* подпись — по центру кадра */
.panel figcaption { position:absolute; z-index:2; inset:0; padding:0 var(--gutter);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; }
.cap { display:flex; flex-wrap:wrap; justify-content:center; gap:0 .25em; max-width:18ch;
  font-weight:600; text-transform:uppercase; font-size:clamp(32px,4.6vw,76px); line-height:.95; }
.panel .more, .panel .note { font-weight:400; font-size:15px; letter-spacing:.02em; }
.panel .note { max-width:52ch; font-size:clamp(15px,1.2vw,18px); line-height:1.55; color:rgba(255,255,255,.85); }
.panel .eyebrow { font-weight:400; font-size:15px; color:var(--muted); }
.js .panel .cap .w > span { display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease-out); transition-delay:calc(var(--j) * 80ms); }
.js .panel.is-in .cap .w > span { transform:none; }
.js .panel .fade { opacity:0; transform:translateY(8px); transition:opacity .7s ease .25s, transform .7s var(--ease-out) .25s; }
.js .panel.is-in .fade { opacity:1; transform:none; }

/* ---------- Значки по углам: закреплены на всех экранах ---------- */
.burger { position:fixed; z-index:20; top:clamp(20px,4vh,40px); right:var(--gutter); width:48px; height:32px; }
.burger i { position:absolute; left:2px; right:2px; height:2px; background:currentColor; transition:transform .45s var(--ease-out); }
.burger i:nth-child(1) { top:11px; }
.burger i:nth-child(2) { top:19px; }
.menu-open .burger i:nth-child(1) { transform:translateY(4px) rotate(45deg); }
.menu-open .burger i:nth-child(2) { transform:translateY(-4px) rotate(-45deg); }

.logo { position:fixed; z-index:20; left:var(--gutter); bottom:clamp(20px,5vh,48px); display:block; width:clamp(64px,6vw,92px); }
.logo svg { display:block; width:100%; height:auto; }

/* ---------- Меню ---------- */
.menu { position:fixed; inset:0; z-index:10; background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:0 var(--gutter); clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-out); visibility:hidden; }
.menu-open .menu { clip-path:inset(0 0 0 0); visibility:visible; }
.menu:not(.menu-open *) { transition:clip-path .45s var(--ease-out), visibility 0s .45s; }
.menu > a { width:max-content; text-transform:uppercase; font-weight:600; font-size:clamp(44px,7vw,112px); line-height:1; opacity:.55; transition:opacity .2s; }
.menu > a:hover, .menu > a:focus-visible { opacity:1; }
.menu__contacts { margin-top:40px; display:flex; flex-wrap:wrap; gap:8px 32px; font-size:18px; color:var(--muted); }
.menu__contacts a:hover { color:var(--fg); }

/* ---------- Появление заголовков: слова поднимаются из-под маски ---------- */
.js [data-split] .w, .js .cap .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.js [data-split] .w > span { display:inline-block; transform:translateY(105%); }
.js .reveal { opacity:0; }
.is-ready [data-split] .w > span { transform:none; transition:transform 1.1s var(--ease-out); transition-delay:calc(var(--i) * 90ms + 150ms); }
.is-ready .reveal { opacity:1; transition:opacity .9s ease; transition-delay:var(--d, 0ms); }

/* ---------- Слайдер объектов ---------- */
.projects { position:relative; z-index:1; background:var(--bg); padding:clamp(80px,14vh,140px) 0 clamp(60px,10vh,100px); }
.projects__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 var(--gutter); margin-bottom:clamp(28px,5vh,48px); }
.projects__head h2 { font-weight:600; text-transform:uppercase; font-size:clamp(40px,6vw,96px); line-height:.9; }
.arrows { display:flex; gap:20px; }
.arrows button { width:64px; height:32px; display:grid; place-items:center; transition:opacity .2s; }
.arrows button:disabled { opacity:.2; cursor:default; }
.arrows svg { width:56px; height:16px; }
.slider { display:flex; gap:clamp(10px,1.2vw,18px); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gutter);
  padding:0 var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; }
.slider::-webkit-scrollbar { display:none; }
.slider.is-drag { scroll-snap-type:none; cursor:grabbing; }
.slider.is-drag .card { pointer-events:none; }
.card { position:relative; flex:0 0 clamp(260px,30vw,480px); aspect-ratio:4/5; overflow:hidden; scroll-snap-align:start; background:#111; }
.card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); -webkit-user-drag:none; user-select:none; }
.card:hover img { transform:scale(1.05); }
.card::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.card__body { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; }
.card__title { font-weight:600; text-transform:uppercase; font-size:clamp(24px,2.3vw,36px); line-height:1; }
.card__more { font-weight:400; font-size:14px; }

/* ---------- Подвал ---------- */
.footer { position:relative; z-index:1; background:var(--bg); border-top:1px solid var(--line);
  padding:clamp(60px,10vh,100px) var(--gutter) calc(clamp(20px,5vh,48px) + 80px); display:grid; gap:40px; }
.footer__name { font-weight:600; text-transform:uppercase; font-size:clamp(48px,9vw,140px); line-height:.88; }
.footer__links { display:flex; flex-wrap:wrap; gap:12px 40px; font-size:clamp(18px,1.8vw,24px); text-transform:uppercase; }
.footer__copy { font-weight:400; font-size:14px; color:var(--muted); }

/* ---------- Отладка режима скорости (?debug) ---------- */
.badge { position:fixed; z-index:30; right:12px; top:72px; font:12px/1.3 ui-monospace,monospace; background:rgba(0,0,0,.6); padding:6px 10px; border-radius:6px; display:none; }
.debug .badge { display:block; }

@media (prefers-reduced-motion: reduce) {
  .js [data-split] .w > span, .js .panel .cap .w > span, .js .panel .fade { transform:none !important; }
  .media { transform:none !important; }
  .is-ready [data-split] .w > span { transition:none !important; }
  .menu, .burger i, .card img { transition:none !important; }
}