/* Спільні анімації демо-сайтів. Класи вмикає motion.js; без JS контент видно одразу. */

/* Плавний перехід між сторінками одного сайту (View Transitions, Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mtk-vt-out .28s ease both; }
::view-transition-new(root) { animation: mtk-vt-in .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mtk-vt-out { to { opacity: 0; } }
@keyframes mtk-vt-in { from { opacity: 0; translate: 0 14px; } }

/* Поява при скролі. translate/scale — окремі властивості, тож не конфліктують з transform сайту */
.mtk-motion .rv {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity .8s cubic-bezier(.2, .7, .2, 1),
    translate .8s cubic-bezier(.2, .7, .2, 1),
    scale .9s cubic-bezier(.2, .7, .2, 1);
}
.mtk-motion .rv-title { translate: 0 42px; transition-duration: 1s; }
.mtk-motion .rv-img { translate: 0 22px; scale: .96; }
.mtk-motion .rv.in { opacity: 1; translate: none; scale: none; }

/* Характер анімації під кожен сайт: <html data-motion="..."> */
/* fade — спокійна поява без зсуву (журнали, юристи) */
.mtk-motion[data-motion="fade"] .rv { translate: none; scale: none; transition-duration: 1.1s; }
/* clip — розкриття шторкою знизу вгору (афіші, технічні сайти).
   Через mask, а не clip-path: Chrome враховує clip-path у IntersectionObserver і «закритий» елемент ніколи б не з'явився */
.mtk-motion[data-motion="clip"] .rv {
  opacity: 1; translate: none; scale: none;
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% 0% no-repeat;
  mask: linear-gradient(#000, #000) bottom / 100% 0% no-repeat;
  transition: -webkit-mask-size .9s cubic-bezier(.7, 0, .2, 1), mask-size .9s cubic-bezier(.7, 0, .2, 1);
}
.mtk-motion[data-motion="clip"] .rv.in { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* pop — пружинна поява (дружні, ігрові сайти) */
.mtk-motion[data-motion="pop"] .rv { translate: 0 18px; scale: .9; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); transition-duration: .7s; }
/* slide — виїзд збоку (спорт, енергійні сайти) */
.mtk-motion[data-motion="slide"] .rv { translate: -36px 0; transition-duration: .7s; }
/* blur — проявлення з розфокусу (кіно, техніка) */
.mtk-motion[data-motion="blur"] .rv { translate: 0 12px; filter: blur(14px); transition: opacity 1s ease, translate 1s ease, filter 1s ease; }
.mtk-motion[data-motion="blur"] .rv.in { filter: none; }

/* Елементи, що з'являються динамічно (картки після фільтра в магазині) */
.mtk-pop { animation: mtk-pop .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mtk-pop { from { opacity: 0; translate: 0 16px; scale: .98; } }

/* Шапка, що ховається при скролі вниз */
.mtk-header { transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.mtk-header.mtk-up { translate: 0 -110%; }

/* Прогрес прокрутки — колір береться з акцентної змінної конкретного сайту */
.mtk-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  background: var(--accent, var(--gold, var(--mint, var(--orange, var(--yellow, var(--lime, var(--coral, var(--brass, var(--caramel, #3D6B99)))))))));
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .mtk-motion .rv { opacity: 1; translate: none; scale: none; transition: none; filter: none; -webkit-mask: none; mask: none; }
  .mtk-pop { animation: none; }
  .mtk-progress { display: none; }
}