/* Презентація, а не сторінка: слайди на весь екран із прилипанням.
   Слайд «Тираж» навмисно може бути вищим за екран — там форма, і обрізати її
   заради красивого прилипання не можна. */
.deck{height:100svh;overflow-y:auto;overflow-x:clip;scroll-snap-type:y proximity;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}}

.slide{
  min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;align-content:center;
  padding:clamp(74px,10vh,110px) 0 clamp(58px,8vh,88px);
  position:relative;border-top:1px solid var(--line-2);
}
.slide:first-child{border-top:0}
.slide--tall{min-height:auto;scroll-snap-align:start;padding-block:clamp(74px,10vh,110px)}

/* Номер слайда — дрібна редакційна мітка в кутку */
.slide__no{position:absolute;left:max(20px,calc(50vw - var(--w)/2));bottom:26px;font-size:11px;letter-spacing:.2em;color:var(--ink-4)}
@media (max-width:760px){.slide__no{left:16px;bottom:14px}}

/* Смуга прогресу зверху */
.bar{position:fixed;inset:0 0 auto 0;height:2px;background:var(--line-2);z-index:60}
.bar__i{height:100%;width:0;background:var(--ink-2);transition:width .35s ease}

/* Крапки праворуч — карта презентації */
.dots{position:fixed;right:14px;top:50%;translate:0 -50%;z-index:55;display:grid;gap:11px}
@media (max-width:760px){.dots{display:none}}
.dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--ink-4);background:transparent;cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.dots button[aria-current="true"]{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}

/* Підказка «гортайте» лише на першому слайді */
.cue{position:absolute;left:50%;bottom:30px;translate:-50% 0;display:grid;justify-items:center;gap:8px;color:var(--ink-4);font-size:11px;letter-spacing:.2em}
.cue i{display:block;width:1px;height:26px;background:var(--line);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){.cue i{animation:none}}

/* Вміст слайда з'являється, коли слайд став активним, а не при завантаженні. */
.slide .up{opacity:0;transform:translate3d(0,var(--path),0)}
/* Кінцевий стан і затримки живуть в одному місці нижче: два блоки на той самий
   селектор і затримки по nth-child уже сперечалися між собою за порядок. */
@media (prefers-reduced-motion:reduce){.slide .up,.slide.on .up{opacity:1;transform:none;transition:none}}

/* Титул */
.title{display:grid;gap:clamp(20px,4vw,40px);justify-items:center;text-align:center}
.title__fan{position:relative;width:min(560px,86vw);height:clamp(230px,34vh,340px);perspective:1500px}
.title__fan .cover{position:absolute;bottom:0;left:50%;width:clamp(126px,21vw,190px);aspect-ratio:760/1070;transform-origin:50% 100%}
.title__fan .cover:nth-child(1){transform:translateX(-50%) rotate(-15deg) translateX(-70%)}
.title__fan .cover:nth-child(2){transform:translateX(-50%) rotate(-5deg) translateX(-23%)}
.title__fan .cover:nth-child(3){transform:translateX(-50%) rotate(5deg) translateX(29%);z-index:2}
.title__fan .cover:nth-child(4){transform:translateX(-50%) rotate(15deg) translateX(78%)}
.title__mark{font-size:clamp(30px,6.6vw,88px);letter-spacing:.1em;line-height:1}
.title__tag{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}

/* Полиця обкладинок на весь слайд */
/* Обкладинки — головний доказ у презентації, тому полиця ширша за текстову
   колонку: у сітці на 1160 кожна обкладинка виходила завбільшки з ніготь. */
.rack{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(6px,.9vw,16px);align-items:end;
  width:min(100% - 96px,1560px);margin-inline:auto}
@media (max-width:1000px){.rack{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:620px){.rack{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rack .cover{aspect-ratio:760/1070;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.rack .cover:nth-child(even){transform:translateY(-16px)}
.rack .cover:hover,.rack .cover.is-touch{transform:translateY(-30px) scale(1.04)}

/* Виїзд із боків усередині слайда. Шлях той самий --path: він менший за
   відступ, тому в польоті блок не заходить на сусідній. */
.slide .fx-l{opacity:0;transform:translate3d(calc(var(--path) * -1),0,0)}
.slide .fx-r{opacity:0;transform:translate3d(var(--path),0,0)}
.slide .fx-z{opacity:0;transform:scale(.975)}
.slide.on .up,
.slide.on .fx-l,
.slide.on .fx-r,
.slide.on .fx-z{opacity:1;transform:none;
  transition:opacity .6s ease, transform .75s cubic-bezier(.22,1,.36,1)}
.slide.on [data-d="1"]{transition-delay:.08s}
.slide.on [data-d="2"]{transition-delay:.16s}
.slide.on [data-d="3"]{transition-delay:.24s}
.slide.on [data-d="4"]{transition-delay:.32s}
.slide.on [data-d="5"]{transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  .slide .fx-l,.slide .fx-r,.slide .fx-z{opacity:1;transform:none;transition:none}
}