/* ═══════════════════════════════════════════════════════════
   POZIN
   ═══════════════════════════════════════════════════════════ */

:root{
  --cream:#F8F6EB;
  --bg:#000;
  --paper:#fff;

  /* масштаб меню: 1 «единица» исходного png в px экрана */
  --mk: clamp(.26px, .02375vw, .55px);
  --gap: calc(189 * var(--mk));
  --arrow: clamp(38px, 5.2vw, 104px);
  --edge: clamp(18px, 2.6vw, 54px);

  /* плавность */
  --e:   cubic-bezier(.16,1,.3,1);       /* expo out  */
  --eio: cubic-bezier(.76,0,.24,1);      /* expo in-out */
  --es:  cubic-bezier(.33,1,.68,1);      /* cubic out */

  --t-fast: .45s;
  --t-mid:  .9s;
  --t-slow: 1.4s;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
img{-webkit-user-drag:none; user-drag:none; pointer-events:none}
.tile img,.tile video,.slides img{pointer-events:none}
html,body{margin:0;padding:0}
html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;              /* скроллим сами, с плавной кривой */
}
body{
  background:var(--bg);
  color:var(--cream);
  font:400 16px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden;height:100%}
body.no-scroll{position:fixed; left:0; right:0; width:100%; overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
::selection{background:var(--cream);color:#000}

/* ── прелоадер ─────────────────────────────────────────── */
#loader{
  position:fixed; inset:0; z-index:200;
  background:var(--paper);
  display:grid; place-items:center;
  transition:opacity 1.15s var(--e), visibility 0s linear 1.15s;
}
#loader video{
  width:clamp(120px, 21vw, 240px); height:auto;
  opacity:0; transform:scale(.965);
  transition:opacity .9s var(--e), transform 1.6s var(--e);
}
#loader.ready video{opacity:1; transform:none}
#loader.done{opacity:0; visibility:hidden; pointer-events:none}

/* ── меню ──────────────────────────────────────────────── */
#menu{
  position:fixed; z-index:120;
  top:0; left:0; right:0;
  height:calc(11vh + 1rem);
  padding:0 var(--edge);
  display:flex; align-items:center; justify-content:flex-end;
  pointer-events:none;
}
.menu-row{
  display:flex; align-items:center;
  gap:var(--gap);
  /* ряд заканчивается ровно на один просвет левее стрелки */
  margin-right:calc(var(--arrow) + var(--gap));
  pointer-events:none;
  opacity:0; transform:translateY(-10px);
  transition:opacity .75s var(--e), transform .95s var(--e);
}
#menu.reveal .menu-row{
  opacity:1; transform:none; pointer-events:auto;
}
.mi{
  display:block; line-height:0;
  opacity:.94;
  transition:opacity var(--t-mid) var(--e), transform var(--t-mid) var(--e), filter var(--t-mid) var(--e);
}
.mi img{
  width:calc(var(--w) * var(--mk));
  height:auto;
  filter:drop-shadow(0 1px 14px rgba(0,0,0,.32));
}
.mi:hover,.mi:focus-visible{opacity:1; transform:translateY(-2px) scale(1.035)}
.mi:active{transform:translateY(0) scale(.99); transition-duration:.18s}

/* @ и выпадающие контакты */
.at-wrap{position:relative; display:flex; align-items:center}
.at-menu{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,6px);
  padding-top:calc(64 * var(--mk) - 3px);
  width:max-content;                      /* иначе иконки жмёт шириной @ */
  display:flex; flex-direction:column; align-items:center;
  gap:calc(64 * var(--mk) + 1px);
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--e), transform .9s var(--e), visibility 0s linear .9s;
}
.at-wrap.open .at-menu,.at-wrap:hover .at-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
  transition:opacity .55s var(--e), transform .8s var(--e), visibility 0s;
}
.at-link{
  display:flex; flex-direction:column; align-items:center; gap:.45em;
  opacity:0; transform:translateY(-10px);
  transition:opacity .7s var(--e), transform .8s var(--e);
}
.at-wrap.open .at-link,.at-wrap:hover .at-link{opacity:.92; transform:none}
.at-wrap.open .at-link:nth-child(2),.at-wrap:hover .at-link:nth-child(2){transition-delay:.09s}
.at-link:hover{opacity:1}
.at-ico{display:block; line-height:0}
.at-ico img{
  width:calc(var(--w) * var(--mk)); height:auto; max-width:none;
  filter:drop-shadow(0 1px 12px rgba(0,0,0,.4));
  transition:transform .8s var(--e);
}
.at-link:hover .at-ico img{transform:translateY(-3px) rotate(-2deg)}


/* стрелка «наверх» */
#toTop{
  position:absolute; right:var(--edge);
  top:50%; translate:0 -50%;
  pointer-events:auto;
  opacity:.94;
  transition:opacity var(--t-mid) var(--e), transform var(--t-mid) var(--e);
}
#toTop i{
  display:block;
  width:var(--arrow); aspect-ratio:425/487;
  background:var(--cream);
  -webkit-mask:url(../assets/ui/right.png) center/contain no-repeat;
  mask:url(../assets/ui/right.png) center/contain no-repeat;
  rotate:-90deg;
  filter:drop-shadow(0 1px 14px rgba(0,0,0,.32));
}
#toTop:hover{transform:translateY(-4px)}
#toTop:active{transform:translateY(0); transition-duration:.18s}

/* пункты выезжают по очереди, когда полоса раскрыта */
#menu.reveal .menu-row .mi:nth-child(1){transition-delay:.02s}
#menu.reveal .menu-row .mi:nth-child(2){transition-delay:.08s}
#menu.reveal .at-wrap .mi{transition-delay:.14s}
.menu-row .mi{
  opacity:0; transform:translateY(-8px);
  transition:opacity .7s var(--e), transform .85s var(--e);
}
#menu.reveal .menu-row .mi{opacity:.94; transform:none}

/* появление стрелки после загрузки */
#toTop{opacity:0; transform:translateY(-14px)}
body.ready #toTop{
  opacity:.94; transform:none;
  transition:opacity 1.2s var(--e) .35s, transform 1.3s var(--e) .35s;
}

/* крестик на полотнах «мы кто» / «мы что»: закреплён в углу и
   остаётся на месте при прокрутке — как стрелка на главном экране */
#paneClose{
  position:fixed; z-index:300;
  right:var(--edge);
  top:calc((11vh + 1rem) / 2);
  translate:0 -50%;
  width:clamp(26px, 2.96vw, 58px); aspect-ratio:123/122;
  background:#111;
  -webkit-mask:url(../assets/ui/black_cross.png) center/contain no-repeat;
  mask:url(../assets/ui/black_cross.png) center/contain no-repeat;
  opacity:0;
  transition:opacity .6s var(--e), transform .7s var(--e);
}
body.pane #paneClose{opacity:.9}
#paneClose:hover{opacity:1; transform:scale(1.08)}
#paneClose:active{transform:scale(.97); transition-duration:.15s}

/* ── главный экран ─────────────────────────────────────── */
#hero{
  position:relative;
  height:100svh; min-height:520px;
  overflow:hidden;
  background:#0a0a0a;
}
.hero-video{position:absolute; inset:0; overflow:hidden}
.hero-video video,.hero-video img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  opacity:0;
  transition:opacity 1.8s var(--es), transform 9s var(--e);
}
body.ready .hero-video video{opacity:1; transform:scale(1)}
#hero::after{                       /* лёгкая виньетка под текст */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 26%,
                                     rgba(0,0,0,0) 62%,rgba(0,0,0,.34) 100%);
}

.hero-logo{
  position:absolute; left:50%; top:46%;
  translate:-50% -50%;
  width:53.5vw; height:32svh;
  display:grid; place-items:center;
  z-index:3; pointer-events:none;
}
.hero-logo img{
  grid-area:1/1;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  opacity:0;
  transform:scale(1.035);
  filter:drop-shadow(0 4px 40px rgba(0,0,0,.35));
  transition:opacity .85s var(--es), transform 1.4s var(--e);
}
.hero-logo img.on{
  opacity:1; transform:none;
  transition:opacity 1.25s var(--es), transform 2s var(--e);
}

.hero-note{
  position:absolute; left:clamp(18px,3vw,64px); bottom:clamp(22px,4.2vh,58px);
  z-index:3; width:min(42vw,780px);
  opacity:0; transform:translateY(14px);
  transition:opacity 1.4s var(--e) .5s, transform 1.6s var(--e) .5s;
}
body.ready .hero-note{opacity:1; transform:none}
.note-img{width:100%; height:auto; opacity:.94}
.note-txt{display:none}

/* ── портфолио ─────────────────────────────────────────── */
#work{background:var(--bg)}
.row{display:flex; width:100%}
.row.h540{aspect-ratio:1920/540}
.row.h675{aspect-ratio:1920/675}

.tile{
  position:relative; overflow:hidden;
  flex:0 0 auto;
  background:#0d0d0d;
  opacity:0; transform:translateY(34px) scale(.985);
  transition:opacity 1.15s var(--e), transform 1.25s var(--e);
}
.tile.u1{width:25%} .tile.u2{width:50%} .tile.u3{width:75%}
.tile.in{opacity:1; transform:none}

.tile .shot{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transform:scale(1.001);
  transition:opacity 1.5s var(--es), transform 1.6s var(--e);
  backface-visibility:hidden;
}
.tile .shot.on{opacity:1; z-index:2}
.tile .shot.fading{z-index:1}
.tile video.shot{object-fit:cover}          /* уходящий кадр держит непрозрачность
                                          под входящим — фон не просвечивает */
.tile.link{cursor:pointer}
.tile.link:hover .shot.on{transform:scale(1.045)}
.tile.link::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.16);
  opacity:0; transition:opacity var(--t-mid) var(--e);
  pointer-events:none;
}
.tile.link:hover::after{opacity:1}
.tile.link:active .shot.on{transform:scale(1.02); transition-duration:.25s}

/* ── общие оверлеи ─────────────────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:150;
  opacity:0; visibility:hidden;
  transition:opacity .8s var(--e), visibility 0s linear .8s;
}
.overlay.open{opacity:1; visibility:visible; transition:opacity .7s var(--e), visibility 0s}

/* ── мы кто ────────────────────────────────────────────── */
#about,#what{background:var(--paper)}
.about-scroll{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.about-inner{
  position:relative;
  width:100%;
  transform:translateY(26px);
  opacity:0;
  transition:transform 1.2s var(--e), opacity 1s var(--e);
}
.overlay.open .about-inner{transform:none; opacity:1}
.about-inner video{width:100%; height:auto; display:block}
#what .about-close{left:95.7%; top:2.8%; width:5%}
.about-close{
  position:absolute; left:96.4%; top:29.4%;
  translate:-50% -50%;
  width:6.6%; aspect-ratio:1;
  border-radius:50%;
}

/* ── слайды ────────────────────────────────────────────── */
#deck{background:#000}
.deck-stage{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:0;
}
.deck-box{
  position:relative;
  width:100%; max-width:calc(100svh * 16/9);
  aspect-ratio:16/9;
  overflow:hidden;
  transform:scale(.985); opacity:0;
  transition:transform 1s var(--e), opacity .8s var(--e);
}
#deck.open .deck-box{transform:none; opacity:1}

.deck-zoom{position:absolute; inset:0; transform-origin:0 0; touch-action:none}
.slides{position:absolute; inset:0}
.slides .sl{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  background:#000;
  pointer-events:none;
  /* короткое затухание без трансформаций: полноэкранный кадр 1920×1080
     двигать дорого, а листать надо часто */
  opacity:0; visibility:hidden;
  transition:opacity .2s linear;
}
.slides .sl.on{opacity:1; visibility:visible; z-index:2}
.slides .sl.on.fading{z-index:1; transition:none}
.slides video.sl{object-fit:contain}

/* слайд из четырёх вертикальных роликов */
.sl-cards{background:#141414}
.sl-cards .cardsv{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain; display:block;
}
.sl-cards .ov{
  position:absolute; translate:-50% -50%;
  background:var(--cream);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-position:center;  mask-position:center;
  pointer-events:none; z-index:3;
}
/* размеры и точки сняты с настоящих слайдов деки */
.ov-prev {left:4.08%;  top:5.60%;  width:4.20%; aspect-ratio:169/122}
.ov-close{left:96.90%; top:5.50%;  width:2.96%; aspect-ratio:123/122}
.ov-next {left:91.73%; top:91.78%; width:6.04%; aspect-ratio:487/425}
.ov-coza {left:95.76%; top:96.19%; width:3.87%; aspect-ratio:156/90}
.ov-mark {left:50.15%; top:96.39%; width:3.43%; aspect-ratio:130/76}
.ov-copy {left:5.23%;  top:96.54%; width:6.43%; aspect-ratio:250/21}

.zone{position:absolute; z-index:5; background:transparent}
.z-prev {left:0;   top:0;    width:11%; height:13%}
.z-close{right:0;  top:0;    width:11%; height:13%}
.z-next {right:0;  bottom:0; width:16%; height:17%}
.deck-box{cursor:pointer}
.z-close{cursor:pointer}

.own-cross{
  position:absolute; left:96.90%; top:5.50%;
  translate:-50% -50%;
  width:2.96%; aspect-ratio:1;
  z-index:6; pointer-events:none;
  opacity:0; transition:opacity .6s var(--e);
  -webkit-mask:url(../assets/ui/black_cross.png) center/contain no-repeat;
  mask:url(../assets/ui/black_cross.png) center/contain no-repeat;
}
.own-cross.show{opacity:1}
.own-cross.black{background:#111}
.own-cross.white{background:#fff}

/* тонкая стрелка «назад» на последних слайдах — своей у них нет */
.own-back{
  position:absolute; left:4.08%; top:5.60%;
  translate:-50% -50%;
  width:4.20%; aspect-ratio:169/122;
  z-index:6; pointer-events:none;
  opacity:0; transition:opacity .6s var(--e);
  -webkit-mask:url(../assets/ui/light_strelka_black.png) center/contain no-repeat;
  mask:url(../assets/ui/light_strelka_black.png) center/contain no-repeat;
}
.own-back.show{opacity:1}
.own-back.black{background:#111}
.own-back.white{background:#fff}

.deck-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(255,255,255,.13);
}
.deck-hint{
  position:absolute; left:0; right:0; bottom:26px;
  text-align:center;
  font-size:11px; letter-spacing:.08em; color:var(--cream);
  opacity:0; pointer-events:none;
  transition:opacity 1.1s var(--e);
  display:none;
}
.deck-hint.show{opacity:.55}
.deck-progress span{
  display:block; height:100%; width:0;
  background:var(--cream);
  transition:width .9s var(--e);
}

/* ── адаптив ───────────────────────────────────────────── */
@media (max-width:900px){
  /* ширина ряда меню = (533+514+132 + 2·150)·mk  →  вписываем в экран */
  :root{
    --mk: min(.30px, calc((100vw - 96px) / 1197));
    --gap: calc(150 * var(--mk));
  }

  #menu{
    height:auto; align-items:flex-start;
    padding:max(13px,env(safe-area-inset-top)) 12px 12px;
    justify-content:flex-start;
  }
  .menu-row{
    margin-left:2px;
    margin-right:calc(var(--arrow) + 12px);
    flex-wrap:wrap;
    max-width:calc(100vw - 74px);
    row-gap:calc(70 * var(--mk));
  }
  :root{--arrow: clamp(24px, 7vw, 38px)}
  #toTop{right:12px; top:max(11px,env(safe-area-inset-top)); translate:0 0}
  .at-menu{gap:14px; padding-top:14px}
  .at-ico img{width:38px}

  .hero-logo{width:78vw; height:26svh; top:44%}
  .hero-note{
    left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom));
    width:auto; padding:0 18px;
  }
  .note-img{display:none}
  .note-txt{
    display:block; margin:0;
    font-size:11.5px; line-height:1.5;
    color:var(--cream); opacity:.9;
    text-shadow:0 1px 12px rgba(0,0,0,.55);
  }
  .note-txt em{font-style:italic; opacity:.85}

  /* сетка разворачивается в поток */
  .row{display:block; aspect-ratio:auto}
  .tile{width:100% !important; aspect-ratio:var(--ar)}
  .about-close{width:11%}
  .deck-box{max-width:100%}
  .deck-hint{display:block}
  .z-prev,.z-close{height:16%; width:15%}
  .z-next{height:20%; width:22%}
}

@media (max-width:900px) and (orientation:landscape){
  .hero-logo{width:56vw; height:34svh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}