/* Сброс */
html,body{margin:0}
body{font-size:14px}
[hidden]{display:none!important}
img{max-width:100%}

/* Layout: full-bleed canvas stage; project caption floats bottom-left, layer index rail on the right, thin top bar */
:root{
  --ink:#000000;
  --panel:rgba(13,15,21,.74);
  --line:rgba(255,255,255,.13);
  --paper:#f2eee7;
  --muted:#a2a6af;
  --accent:#2f8a5f;       /* один акцент — тёмно-зелёный «благородный» (выбор владельца; был салатовый #7cf46f); в JS — window.ACCENT */
  --accent-rgb:47,138,95;
  --accent-ink:#f2eee7;   /* текст на кнопке акцента */
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--body);overflow:hidden;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;background:#000}
#stage:active{cursor:grabbing}

.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
  pointer-events:none;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.top > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 9px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mark{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--accent);position:relative}
.mark::after{content:"";position:absolute;right:2px;bottom:2px;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.brand b{font:600 13px var(--body);letter-spacing:0}
.brand .role{color:var(--muted)}
.top-r{display:flex;gap:8px;align-items:center}
.brand,.tg,.counter{white-space:nowrap}
.tg{display:flex;align-items:center;gap:8px;color:var(--paper);text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s}
.tg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tg:hover{border-color:rgba(var(--accent-rgb),.5)}
/* переключатель языка (js/i18n.js) */
.lang{color:var(--paper);text-decoration:none;font:500 12px var(--mono);letter-spacing:.06em;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 11px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s}
.lang:hover{border-color:rgba(var(--accent-rgb),.5)}
.dbg-only{display:none!important}
body.dbg .dbg-only{display:inline-block!important}
.counter{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-variant-numeric:tabular-nums;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#mech{font:inherit;color:var(--paper);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#mech[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.pill-btn{font:inherit;color:var(--paper);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:560px){ .fx-k{display:none} }
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

#debug{position:fixed;top:calc(58px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));margin:0;
  font:12px/1.6 var(--mono);color:var(--accent);background:rgba(0,0,0,.6);border:1px solid rgba(255,181,71,.35);border-radius:10px;padding:8px 12px;
  white-space:pre;font-variant-numeric:tabular-nums;pointer-events:none;max-width:calc(100vw - 32px);overflow:hidden}

.dots{position:fixed;top:50%;right:max(12px,env(safe-area-inset-right,0px));transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.dots button{position:relative;width:30px;height:30px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.dots .d{width:8px;height:8px;border-radius:2px;border:1.5px solid rgba(242,238,231,.55);transition:all .25s}
.dots button[aria-current="true"] .d{width:12px;height:12px;border-color:var(--accent);background:var(--accent)}
.dots .lbl{position:absolute;right:36px;white-space:nowrap;font:500 13px var(--body);background:var(--panel);border:1px solid var(--line);padding:4px 10px;border-radius:8px;opacity:0;transform:translateX(4px);transition:.18s;pointer-events:none}
.dots button:hover .lbl,.dots button:focus-visible .lbl{opacity:1;transform:none}
/* подсказка по навигации (engine.js): слева от точек, стрелка — на них */
.dots-tip{position:absolute;right:44px;top:50%;width:max-content;max-width:220px;transform:translate(8px,-50%);opacity:0;pointer-events:none;
  font:400 13px/1.4 var(--body);color:var(--paper);background:var(--panel);border:1px solid rgba(var(--accent-rgb),.55);border-radius:12px;padding:10px 14px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.35);transition:opacity .45s,transform .45s}
.dots-tip b{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px;filter:brightness(1.35)}
.dots-tip::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;background:inherit;border:inherit;border-left:0;border-bottom:0;transform:translateY(-50%) rotate(45deg);border-radius:0 2px 0 0}
.dots-tip.show{opacity:1;transform:translate(0,-50%);animation:tipNudge 1.8s ease-in-out .6s 2}
@keyframes tipNudge{50%{transform:translate(-5px,-50%)}}
/* подсказка «работает зум» (engine.js): внизу по центру, с колесом мыши (на сенсорных — двумя пальцами) */
.zoom-tip{position:fixed;left:50%;bottom:max(28px,env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;gap:12px;
  transform:translate(-50%,10px);opacity:0;pointer-events:none;font:500 14px var(--body);color:var(--paper);background:var(--panel);
  border:1px solid rgba(var(--accent-rgb),.55);border-radius:999px;padding:9px 18px 9px 12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.35);transition:opacity .45s,transform .45s;white-space:nowrap}
.zoom-tip.show{opacity:1;transform:translate(-50%,0)}
.zoom-tip .zi{position:relative;width:16px;height:24px;border:1.5px solid var(--paper);border-radius:9px;flex:none}
.zoom-tip .zi i{position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:var(--accent);filter:brightness(1.4);animation:wheelUp 1.1s ease-in-out infinite}
@keyframes wheelUp{0%{transform:translateY(4px);opacity:0}30%{opacity:1}100%{transform:translateY(-2px);opacity:0}}
.zoom-tip .zi.touch{width:22px;height:22px;border:0}
.zoom-tip .zi.touch::before,.zoom-tip .zi.touch::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--paper);animation:pinch 1.4s ease-in-out infinite}
.zoom-tip .zi.touch::before{left:0;top:0}.zoom-tip .zi.touch::after{right:0;bottom:0;animation-name:pinch2}
.zoom-tip .zi.touch i{display:none}
@keyframes pinch{50%{transform:translate(3px,3px)}}
@keyframes pinch2{50%{transform:translate(-3px,-3px)}}
body:not(.lay-side):not(.lay-full) .zoom-tip{font-size:13px;bottom:max(18px,env(safe-area-inset-bottom,0px))}

.card{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  box-sizing:border-box;width:min(360px,calc(100vw - 32px - 44px));background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .35s ease,transform .35s ease;display:flex;flex-direction:column;gap:6px}
.card.off{opacity:0;transform:translateY(12px);pointer-events:none}
.card.tl{top:calc(62px + env(safe-area-inset-top,0px));bottom:auto}
.card.br{left:auto;right:calc(52px + env(safe-area-inset-right,0px))}
/* первый кадр: на широком экране карточка в углу фото, иначе под ним */
/* Вступление: колонка слева от фото (или под ним на телефоне), блоки входят по очереди */
.intro{position:fixed;left:var(--ix);top:var(--iy);bottom:var(--ib);width:var(--iw);display:flex;flex-direction:column;justify-content:center;gap:22px;pointer-events:none}
body:not(.lay-side) .intro{justify-content:flex-start;gap:14px;overflow-y:auto}
.intro .blk{opacity:0;transform:translateX(-18px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.intro.show .blk{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 180ms + 120ms)}
.hello{margin:6px 0 0;font:700 clamp(26px,2.4vw,42px)/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.hello em{font-style:normal;color:var(--accent)}
.lead{margin:14px 0 0;color:#cfcac2;font-size:16px;line-height:1.55;max-width:44ch}
.lbl{margin:0 0 8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* кнопки вступления */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acts small{flex-basis:100%;color:var(--muted);font:11px var(--mono);letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font:600 14px var(--body);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.btn.pri{background:var(--accent);color:var(--accent-ink);border:0}
.btn.pri:hover{background:var(--accent);filter:brightness(1.12);transform:translateY(-1px)}
.btn.sec{background:rgba(255,255,255,.03);color:var(--paper);border:1px solid var(--line)}
.btn.sec:hover{border-color:rgba(255,255,255,.35)}
/* «Внутри экрана»: проекты цепочки, клик ведёт зумом прямо в проект */
.inside{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.inside button{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:6px 12px 6px 6px;color:var(--paper);cursor:pointer;text-align:left;font:inherit;transition:border-color .2s,background .2s}
.inside button:hover{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.06)}
.inside img{flex:none;width:64px;height:36px;object-fit:cover;object-position:left top;border-radius:7px;background:#111}
.inside b{display:block;font:600 14px var(--body)}
.inside span{display:block;font-size:12.5px;color:var(--muted)}
.inside i{margin-left:auto;font-style:normal;color:var(--muted);transition:color .2s}
.inside button:hover i{color:var(--accent)}
/* подпись над экраном ноутбука на фото */
.peek-tag{position:fixed;left:0;top:0;transform:translate(-50%,calc(-100% - 12px));display:flex;align-items:center;gap:6px;
  font:500 12px var(--mono);letter-spacing:.03em;color:var(--paper);background:rgba(8,12,9,.72);border:1px solid rgba(var(--accent-rgb),.45);
  border-radius:999px;padding:6px 12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;opacity:0;transition:opacity .4s;white-space:nowrap}
.peek-tag.show{opacity:1;transition-delay:.6s}
.peek-tag.show.hit{opacity:0;transition-delay:0s}   /* подпись легла бы на карточку приветствия */
.peek-tag span{color:var(--accent);display:inline-block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
/* телефон: пока видно вступление, точки навигации прячутся — их заменяет список проектов */
body.intro-on:not(.lay-side):not(.lay-full) .dots{opacity:0;pointer-events:none}
.top-r{transition:opacity .3s}
/* «Powered by FiveonTour ♥» — полупрозрачно в правом нижнем углу первой страницы */
.powered{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:5;
  font:400 11px var(--mono);letter-spacing:.04em;line-height:0;opacity:0;pointer-events:none;transition:opacity .5s;
  padding:5px 11px;border-radius:999px;background:rgba(8,10,14,.5);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.powered text{font:inherit}
.powered .heart{fill:var(--accent)}
body.intro-on .powered{opacity:.6;pointer-events:auto}
body.intro-on .powered:hover{opacity:.95}
/* телефон: внизу экрана — список проектов, поэтому подпись в правом нижнем углу фото */
body:not(.lay-side):not(.lay-full) .powered{bottom:auto;top:calc(var(--iy, 60vh) - 54px);right:max(24px,env(safe-area-inset-right,0px))}
.powered .heart{transform-box:fill-box;transform-origin:center;animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,60%,100%{transform:scale(1)}10%{transform:scale(1.18)}20%{transform:scale(1)}30%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.powered .heart{animation:none}}
body.pass-on:not(.lay-side):not(.lay-full) .top-r{opacity:0;pointer-events:none}   /* проходной слой: иконка корзины в шапке сайта */
/* телефон: карточка проекта свёрнута до названия, «Подробнее» раскрывает текст; cardPhone:'top' — карточка сверху */
.more-btn{display:none}
body:not(.lay-side):not(.lay-full) .card{padding:12px 16px;gap:4px}
body:not(.lay-side):not(.lay-full) .card:not(.more) .text,body:not(.lay-side):not(.lay-full) .card:not(.more) .meta{display:none}
body:not(.lay-side):not(.lay-full) .card h1{font-size:20px}
body:not(.lay-side):not(.lay-full) .more-btn{display:block;position:absolute;right:12px;top:12px;font:500 12px var(--body);color:var(--paper);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer}
body:not(.lay-side):not(.lay-full) .card.ph-top{top:calc(58px + env(safe-area-inset-top,0px));bottom:auto}
body:not(.lay-side):not(.lay-full) .card .kind{padding-right:96px}   /* место под «Подробнее» */
body:not(.lay-side) .hello{font-size:26px}
body:not(.lay-side) .lead{font-size:14px;margin-top:8px}
body:not(.lay-side) .inside img{width:48px;height:27px}
body:not(.lay-side) .inside button{padding:5px 10px 5px 5px}
body:not(.lay-side) .btn{padding:9px 15px;font-size:13px}
body:not(.lay-side) .peek-tag{font-size:11px;padding:5px 10px}
@media (prefers-reduced-motion:reduce){
  .intro .blk,.intro.show .blk{transform:none;transition:opacity .2s;transition-delay:0s}
  .peek-tag span{animation:none}
}
.kind{margin:0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h1{margin:0;font:700 clamp(20px,2.2vw,24px)/1.1 var(--display);letter-spacing:-.01em;text-wrap:balance}
.text{margin:0;color:#d4d0c9;font-size:14px;line-height:1.45;max-width:60ch;text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:2px}
.chip{font:500 11px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 7px}
.open{margin-left:auto;font:600 12px var(--body);color:var(--ink);background:var(--paper);border:0;border-radius:999px;padding:7px 12px;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
a.open:hover{background:#fff;transform:translateY(-1px)}
a.open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.open:disabled{cursor:not-allowed;opacity:.85}
.keys{margin:2px 0 0;font:12px var(--mono);color:var(--muted)}
.keys kbd{font:inherit;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--paper)}

.loader{position:fixed;inset:0;display:grid;place-items:center;font:500 13px var(--mono);color:var(--muted);background:var(--ink);letter-spacing:.06em;transition:opacity .4s}
.loader.done{opacity:0;pointer-events:none}

@media (max-width:560px){
  .brand .role,.counter{display:none}
  .text{font-size:14px}
}
/* обычный экран: приветствие компактной карточкой поверх фото, на стене */
body.lay-full .intro{bottom:auto;max-height:calc(100vh - 88px);box-sizing:border-box;padding:20px 22px;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transition:opacity .35s ease}
body.lay-full .intro.show{opacity:1}
/* компактная карточка: без подзаголовка и списка (проекты — в точках справа), чтобы не закрывать ноутбук */
body.lay-full .intro .opt,body.lay-full .intro .lead,body.lay-full .acts small{display:none}
body.lay-full .acts{gap:8px;flex-wrap:nowrap}
body.lay-full .btn{padding:8px 13px;font-size:12.5px}
body.lay-full .btn .long{display:none}
body.lay-full .hello{font-size:clamp(22px,2vw,28px)}