/* ============================================================
   Переходы между страницами. Общий слой, префикс: yg-

   Каждая зона уезжает в свою сторону и оттуда же возвращается:
     шапка     — вверх
     контент   — вниз
     подвал    — вниз
     сайдбар   — влево / вправо

   Движение всегда идёт вместе с прозрачностью: элемент не
   «прилетает», а проявляется по дороге.

   Ключевые кадры описаны здесь, а привязка к элементам — в
   src/lib/transitions.ts (объекты для directive transition:animate).
   ============================================================ */
/* --- уход --- */
@keyframes yg-out-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-30px); }
}

@keyframes yg-out-down {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(36px); }
}

@keyframes yg-out-left {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-44px); }
}

@keyframes yg-out-right {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(44px); }
}

@keyframes yg-out-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- появление --- */
@keyframes yg-in-top {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes yg-in-bottom {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes yg-in-left {
  from { opacity: 0; transform: translateX(-44px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes yg-in-right {
  from { opacity: 0; transform: translateX(44px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes yg-in-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Старый и новый кадры лежат друг на друге — иначе страница
   дёргается по высоте, пока идёт переход */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }

/* ============================================================
   Появление блоков при прокрутке — та же логика для элементов
   внутри страницы: <section data-reveal> или data-reveal="left".

   ВАЖНО про порядок классов. Прячет блок не сам атрибут, а класс
   .reveal-armed, который ставит скрипт из layouts/Base.astro и
   сразу берёт блок под наблюдение. Так контент виден по умолчанию:
   если скрипт не выполнился или наблюдатель дал сбой, страница
   просто покажется без анимации, а не останется пустой.
   ============================================================ */
[data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s cubic-bezier(0.33, 0, 0.2, 1),
    transform 1.1s cubic-bezier(0.33, 0, 0.2, 1);
  will-change: opacity, transform;
}

[data-reveal='left'].reveal-armed { transform: translateX(-36px); }

[data-reveal='right'].reveal-armed { transform: translateX(36px); }

[data-reveal='top'].reveal-armed { transform: translateY(-28px); }

/* will-change снимается сразу: пока он висит, блок остаётся containing
   block для position: fixed внутри — а там живут перетаскиваемые
   карточки и строки, и они уезжали на смещение блока. Подсказка нужна
   была только на время самого появления. */
[data-reveal].reveal-armed.is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ============================================================
   Уважение к системной настройке: если человек попросил
   убрать анимации — оставляем только мгновенную смену.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [data-reveal].reveal-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}