/* Раскладка. Значения — только из tokens.css. */
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); }
body {
  font: 400 var(--body-size) / var(--line) var(--font);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- сцена 1920×1080, вписанная в окно ---------- */
.stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--stage-w) * 1px); height: calc(var(--stage-h) * 1px);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center;
  pointer-events: none;
}
.stage > * { pointer-events: auto; }

/* ---------- слои ---------- */
#deck, #film { position: fixed; inset: 0; }
#deck { z-index: 1; background: var(--bg); }
#film { z-index: 2; will-change: transform; }
#film.masked {
  /* видимая область плёнки: эллипс с мягким краем; радиусы анимирует GSAP */
  -webkit-mask-image: radial-gradient(ellipse var(--ox, 75%) var(--oy, 75%) at 50% 50%, #000 88%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--ox, 75%) var(--oy, 75%) at 50% 50%, #000 88%, transparent 100%);
}
#filmCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* слайд 1: размытие всего кадра во всё окно, поверх — лотти и подпись */
#blur {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(217, 217, 217, 0.01);
  backdrop-filter: blur(var(--blur-start));
  -webkit-backdrop-filter: blur(var(--blur-start));
}
#lottie { position: absolute; inset: 0; }
#lottie svg { display: block; width: 100%; height: 100%; }

/* ---------- подписи к кадрам плёнки ---------- */
#captions { position: absolute; inset: 0; }
.caption {
  position: absolute; left: var(--pad-x); top: var(--caption-top);
  font-size: var(--caption-size); letter-spacing: var(--caption-track); line-height: var(--line);
  white-space: nowrap; color: var(--fg);
  /* --fill 0 → только контур, 1 → сплошная заливка; анимирует GSAP */
  --fill: 1;
  -webkit-text-fill-color: rgba(255, 255, 255, var(--fill));
  -webkit-text-stroke: 1px rgba(255, 255, 255, calc(0.6 * (1 - var(--fill))));
  will-change: transform, opacity;
}
.caption.wrap { white-space: normal; }

/* ---------- обычные слайды ---------- */
.slide { position: absolute; inset: 0; }
.slide[hidden] { display: none; }

/* слайд 13 — титул */
.s-title { background: var(--bg); }
.s-title .heading {
  position: absolute; left: var(--pad-x); top: 100px; width: 798px;
  display: flex; flex-direction: column; gap: 20px;
}
.s-title h1 { font-size: var(--h1-size); font-weight: 600; letter-spacing: var(--h1-track); line-height: var(--line); }
.s-title h2 { font-size: var(--h2-size); font-weight: 400; letter-spacing: var(--h2-track); line-height: var(--line); }
.s-title ul { position: absolute; left: var(--pad-x); top: 433px; width: 602px; padding-left: 42px; font-size: var(--body-size); }
.s-title li { padding-left: 0; }

.card {
  position: absolute; left: var(--pad-x); bottom: 96px;
  display: flex; gap: 8px; align-items: flex-start;
  padding: 16px; border-radius: 16px; background: var(--card); color: var(--ink);
}
.card img { width: 88px; height: 88px; border-radius: 50%; }
.card .who { display: flex; flex-direction: column; gap: 24px; white-space: nowrap; }
.card .name { font-size: 28px; font-weight: 600; line-height: 27px; }
.card .role { font-size: var(--small-size); color: var(--ink-muted); line-height: 20px; margin-top: 8px; }
.card .links { display: flex; gap: 16px; font-size: var(--small-size); font-weight: 600; color: var(--ink-muted); line-height: 20px; }

/* живое 3D во всю сцену; карточка лежит выше и остаётся кликабельной */
canvas.live3d { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
/* окно плёнки на слайде 24 — выше холста 3D, чтобы ловить колесо */
.filmbox { position: absolute; display: block; z-index: 2; cursor: ns-resize; background: #000; }
.card { z-index: 2; }

.s-title .pic[hidden] { display: none; }
/* запасные картинки: рамка = габарит повёрнутого блока из Figma, внутри повёрнутая обрезка */
.s-title .pic { position: absolute; display: flex; align-items: center; justify-content: center; }
.s-title .pic .crop { position: relative; overflow: hidden; border-radius: 12px; flex: none; }
.s-title .pic .crop img { position: absolute; max-width: none; }

/* ---------- светлые слайды раздела «путь работы» (14–20) ---------- */
.s-light { background: var(--bg-light); color: var(--ink-light); overflow: hidden; }
.s-light .kicker { position: absolute; left: var(--pad-x); top: 100px; font-size: var(--kicker-size); color: var(--ink-muted); white-space: nowrap; }
.s-light .copy { position: absolute; left: var(--pad-x); top: 176px; width: 810px; display: flex; flex-direction: column; gap: 20px; }
.s-light .copy.narrow { width: 698px; }
.s-light .copy h1 { font-size: var(--h1-size); font-weight: 600; letter-spacing: var(--h1-track); line-height: 1; }
.s-light .copy h1.loose { line-height: var(--line); white-space: nowrap; }
.s-light .copy p { font-size: var(--body-size); line-height: var(--line); }

.s-light .thumbs { position: absolute; display: flex; gap: 20px; align-items: center; }
.s-light .thumb { border-radius: var(--radius); overflow: hidden; flex: none; }
.s-light .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* обрезка как в Figma: рамка + картинка с процентными размерами и смещением */
.s-light .crop { position: absolute; overflow: hidden; }
.s-light .crop.r { border-radius: var(--radius); }
.s-light .crop img { position: absolute; max-width: none; }
.s-light .fit { position: absolute; }
.s-light .fit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-light .rot { position: absolute; display: flex; align-items: center; justify-content: center; }
.s-light .rot > img { flex: none; object-fit: cover; }

/* слайд 17: четыре карточки с подписями */
.s-light .grid4 { position: absolute; left: 880px; top: 103px; width: 920px; display: grid; grid-template-columns: repeat(2, 444px); column-gap: 32px; row-gap: 38px; }
.s-light .grid4 figure { display: flex; flex-direction: column; gap: 8px; }
.s-light .grid4 .ph { width: 444px; height: 384px; border-radius: var(--radius); overflow: hidden; }
.s-light .grid4 .ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s-light .grid4 figcaption { font-size: var(--kicker-size); line-height: var(--line); color: var(--caption-muted); }

/* слайд 18: ряд экранов телефона */
.s-light .phones { position: absolute; left: 115.57px; top: 333.59px; display: flex; gap: 12px; align-items: center; }
.s-light .phones img { height: 600px; width: auto; display: block; }

/* списки «заголовок пункта + пояснение» (слайды 21–23) */
.s-light .list { position: absolute; left: 1000px; top: 176px; width: 800px; display: flex; flex-direction: column; gap: 32px; }
.s-light .list.under { left: var(--pad-x); top: 336px; }
.s-light .list.in { position: static; }
.s-light .list > div { display: flex; flex-direction: column; gap: 6px; }
.s-light .list b { font-size: var(--body-size); font-weight: 600; line-height: 1.2; }
.s-light .list span { font-size: 24px; line-height: var(--line); color: var(--caption-muted); }
.s-light .copy.wide { width: 1200px; }

/* слайд 27: дерево папок проекта */
.s-light .tree { position: absolute; left: var(--pad-x); top: 330px; width: 810px; display: flex; flex-direction: column; gap: 9px; }
.s-light .tree > div { display: flex; flex-direction: column; gap: 2px; }
.s-light .tree .d1 { padding-left: 40px; }
.s-light .tree .d2 { padding-left: 80px; }
.s-light .tree b { font-size: 24px; font-weight: 600; line-height: 1.2; }
.s-light .tree span { font-size: 20px; line-height: 1.25; color: var(--caption-muted); }
.s-light .tree em { font-style: normal; font-weight: 600; }

/* слайд 26: карточки-мелочи */
.s-light .cards { position: absolute; left: var(--pad-x); top: 300px; display: flex; flex-direction: column; gap: 20px; }
.s-light .cards .row { display: flex; gap: 20px; }
.s-light .cards .c { width: 400px; height: 240px; padding: 24px; border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.s-light .cards b { font-size: var(--body-size); font-weight: 600; line-height: 1.2; }
.s-light .cards span { font-size: 22px; line-height: var(--line); color: var(--caption-muted); }

/* слайд 28: финал, тёмный как титул */
.s-final { background: var(--bg); color: var(--fg); }
.s-final .quote { position: absolute; z-index: 1; pointer-events: none; left: var(--pad-x); top: 360px; width: 1240px; display: flex; flex-direction: column; gap: 32px; }
.s-final .quote h1 { font-size: var(--h1-size); font-weight: 600; letter-spacing: var(--h1-track); line-height: 1.2; }
.s-final .quote p { font-size: var(--h2-size); letter-spacing: var(--h2-track); line-height: var(--line); }

/* слайды 19–20, 24: видео по центру или в рамке */
.s-light video.boxed { left: auto; top: auto; transform: none; }
.s-light video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; }

/* ---------- навигация у левого края ---------- */
#navHot { position: fixed; left: 0; top: 0; width: 28px; height: 100%; z-index: 6; }
#nav {
  position: fixed; left: 0; top: 0; height: 100%; z-index: 7;
  display: flex; align-items: center;
  padding: 0 40px 0 28px;
  background: var(--nav-bg); color: var(--fg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transform: translateX(-100%); opacity: 0; pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}
#nav.open { transform: none; opacity: 1; pointer-events: auto; }
#navList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--nav-gap); }
#navList li {
  --s: 1;                                   /* множитель размера: 1 — обычный, до --nav-grow под курсором; анимирует GSAP */
  display: flex; align-items: baseline; gap: 0.6em; cursor: pointer; white-space: nowrap;
  font-size: calc(var(--nav-size) * var(--s)); line-height: 1.15;
  color: var(--nav-muted); transform-origin: left center; will-change: font-size;
}
#navList li b { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 1.6em; color: var(--nav-num); }
#navList li.on { color: var(--fg); }
#navList li.on b { color: var(--accent); }
#navList li:hover { color: var(--fg); }

/* ---------- служебное ---------- */
#hud {
  position: fixed; right: 24px; bottom: 20px; z-index: 5;
  font-size: 14px; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); transition: opacity var(--t-fast);
}
#hud.hidden { opacity: 0; }
#black { position: fixed; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
#black.on { opacity: 1; pointer-events: auto; }

/* ---------- возврат на сайт (как NavPill в шапке сайта) ---------- */
#toSite {
  position: fixed; left: 40px; top: 20px; z-index: 6; /* под панелью слайдов #nav (z 7) */
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: rgba(17, 18, 20, 0.72); color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font: 500 15px/1 var(--font); text-decoration: none;
  transition: background 0.16s, border-color 0.16s, opacity 0.2s; /* --t-fast в deck.css не объявлена */
}
/* пока открыта панель слайдов, кнопка не перекрывает её пункты */
body:has(#nav.open) #toSite { opacity: 0; pointer-events: none; }
#toSite:hover { background: rgba(38, 40, 44, 0.88); border-color: rgba(255, 255, 255, 0.24); }
#toSite:focus-visible { outline: 2px solid #f4f4f5; outline-offset: 2px; }
@media (max-width: 768px) { #toSite { left: 16px; top: 12px; } }
@media print { #toSite { display: none; } }