/* ==========================================================================
   Cloud Delight — Motion Layer  (грузится ПОСЛЕ site.css, только дополняет)
   1. Cross-document View Transitions — плавное открытие/морф между страницами
   2. Вход внутренних страниц (page-hero + секции)
   3. Апгрейд scroll-reveal: варианты направления + stagger
   4. Микро-взаимодействия (навбар, кнопки, карточки, бейдж)
   5. Коммерс-UI: спиннер кнопки «Купить», тосты, pop бейджа
   Всё уважает prefers-reduced-motion (блок в самом низу выключает тяжёлое).
   ========================================================================== */

/* ==========================================================================
   1. VIEW TRANSITIONS — межстраничные переходы (Chromium 126+, Safari 18.2+)
   Не поддерживается (Firefox и т.п.) → обычная загрузка, без поломок.
   ========================================================================== */
@view-transition { navigation: auto; }

:root {
  --vt-dur: 480ms;
  --vt-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Общий корневой морф: уходящая — мягко тонет и уменьшается,
   входящая — всплывает снизу с лёгким приближением. */
::view-transition-old(root) {
  animation: cd-vt-out 320ms var(--vt-ease) both;
}
::view-transition-new(root) {
  animation: cd-vt-in var(--vt-dur) var(--vt-ease) both;
}
@keyframes cd-vt-out {
  to { opacity: 0; transform: translateY(-8px) scale(0.985); filter: blur(4px); }
}
@keyframes cd-vt-in {
  from { opacity: 0; transform: translateY(22px) scale(0.992); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Навбар и футер — «якорные»: не участвуют в общем морфе, живут поверх.
   Даёт ощущение, что каркас стоит, а меняется только «холст». */
.navbar  { view-transition-name: cd-navbar; }
.site-footer { view-transition-name: cd-footer; }
::view-transition-group(cd-navbar),
::view-transition-group(cd-footer) { animation-duration: 260ms; }
::view-transition-old(cd-navbar), ::view-transition-new(cd-navbar),
::view-transition-old(cd-footer), ::view-transition-new(cd-footer) {
  height: 100%; /* избегаем «сплющивания» при снапшоте */
}

/* Shared-element морф: главное фото товара на детальной странице.
   На странице категории JS ставит такое же имя кликнутой картинке —
   и Chromium «перелетает» миниатюрой в героя карточки. Элитно. */
#gallery-main { view-transition-name: cd-product-hero; }
::view-transition-group(cd-product-hero) {
  animation-duration: 520ms;
  animation-timing-function: var(--vt-ease);
}

/* ==========================================================================
   2. ВХОД ВНУТРЕННИХ СТРАНИЦ — каскад появления «сверху вниз»
   Чистый CSS-animation: работает и без JS, играет один раз при загрузке.
   ========================================================================== */
@keyframes cd-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cd-rise-sm {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cd-blur-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.page-hero__crumbs { animation: cd-rise-sm .55s .05s var(--vt-ease) both; }
.page-hero__title  { animation: cd-blur-in .8s .14s var(--vt-ease) both; }
.page-hero__lead   { animation: cd-rise .75s .26s var(--vt-ease) both; }

/* Первый значимый блок контента под hero — мягко подаём следом.
   Ограничиваемся прямыми детьми .section внутри .container первой секции. */
.page-hero + .section .container > *,
.page-hero + section .container > * {
  animation: cd-rise .7s .3s var(--vt-ease) both;
}

/* Сетки товаров/категорий/услуг — плитки «набегают» лесенкой */
.cat-grid > *,
.product-grid > *,
.services-grid > *,
.cart-items > * {
  animation: cd-rise-sm .6s var(--vt-ease) both;
}
.cat-grid > *:nth-child(1),.product-grid > *:nth-child(1),.services-grid > *:nth-child(1),.cart-items > *:nth-child(1){animation-delay:.30s}
.cat-grid > *:nth-child(2),.product-grid > *:nth-child(2),.services-grid > *:nth-child(2),.cart-items > *:nth-child(2){animation-delay:.37s}
.cat-grid > *:nth-child(3),.product-grid > *:nth-child(3),.services-grid > *:nth-child(3),.cart-items > *:nth-child(3){animation-delay:.44s}
.cat-grid > *:nth-child(4),.product-grid > *:nth-child(4),.services-grid > *:nth-child(4),.cart-items > *:nth-child(4){animation-delay:.51s}
.cat-grid > *:nth-child(5),.product-grid > *:nth-child(5),.services-grid > *:nth-child(5),.cart-items > *:nth-child(5){animation-delay:.58s}
.cat-grid > *:nth-child(6),.product-grid > *:nth-child(6),.services-grid > *:nth-child(6),.cart-items > *:nth-child(6){animation-delay:.65s}
.cat-grid > *:nth-child(n+7),.product-grid > *:nth-child(n+7),.services-grid > *:nth-child(n+7),.cart-items > *:nth-child(n+7){animation-delay:.72s}

/* Продуктовая страница: галерея слева, инфо справа — навстречу друг другу */
.product-page__gallery { animation: cd-rise .7s .16s var(--vt-ease) both; }
.product-page__info    { animation: cd-rise .7s .28s var(--vt-ease) both; }

/* ==========================================================================
   3. SCROLL-REVEAL — варианты направления + stagger.
   Базовый .reveal уже описан в site.css; здесь только модификаторы.
   ========================================================================== */
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--zoom  { transform: scale(0.94); }
.reveal--blur  { filter: blur(10px); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible { transform: none; }
.reveal--blur.is-visible { filter: blur(0); }

/* Ступенчатая задержка детей через инлайн --i (motion.js проставит) */
.chunk-reveal.is-visible > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ==========================================================================
   4. МИКРО-ВЗАИМОДЕЙСТВИЯ
   ========================================================================== */
/* Подчёркивание пунктов навбара, растущее из центра */
.navbar__links > li > a { position: relative; }
.navbar__links > li > a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--accent);
  transition: left .28s var(--vt-ease), right .28s var(--vt-ease), opacity .28s;
  opacity: 0;
}
.navbar__links > li > a:hover::after,
.navbar__links > li > a.is-active::after { left: 8px; right: 8px; opacity: 1; }

/* Блик, пробегающий по заполненным кнопкам при наведении */
.btn--fill { position: relative; overflow: hidden; }
.btn--fill::before {
  content: ""; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--vt-ease); pointer-events: none;
}
.btn--fill:hover::before { left: 140%; }

/* Карточка товара: приподнимаем картинку внутри при ховере (site.css двигает саму карту) */
.product-card__image img { transition: transform .5s var(--vt-ease); }
.product-card:hover .product-card__image img { transform: scale(1.06); }

/* ==========================================================================
   5. КОММЕРС-UI (спиннер / тост / pop бейджа / состояния кнопок)
   ========================================================================== */
.cd-spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid rgba(10,10,15,0.35); border-top-color: var(--bg);
  border-radius: 50%; animation: cd-spin .6s linear infinite;
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
.btn.is-loading { opacity: .9; }

/* Пульс-подсветка кнопки покупки — тонко зовёт нажать */
.btn-buying { position: relative; }
.btn-buying:not(.is-loading)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,214,10,0.5); animation: cd-buy-pulse 2.6s var(--vt-ease) infinite;
  pointer-events: none;
}
@keyframes cd-buy-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,214,10,0.42); }
  70%  { box-shadow: 0 0 0 14px rgba(255,214,10,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,214,10,0); }
}

/* «Добавить в корзину» → короткая вспышка-подтверждение */
.add-to-cart.is-done { animation: cd-done .5s var(--vt-ease); }
@keyframes cd-done {
  0% { transform: scale(1); } 40% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.add-to-cart.is-busy { opacity: .7; pointer-events: none; }

/* Pop бейджа корзины при добавлении */
.navbar__cart-badge.is-pop { animation: cd-badge-pop .45s var(--vt-ease); }
@keyframes cd-badge-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); opacity: 1; }
}

/* Строка корзины при удалении — уезжает и схлопывается */
.cart-row { transition: opacity .26s var(--vt-ease), transform .26s var(--vt-ease); }
.cart-row.is-removing { opacity: 0; transform: translateX(24px); }

/* Тост */
.cd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 4000; max-width: 90vw;
  padding: 12px 20px; border-radius: var(--radius-lg, 12px);
  background: var(--panel-3, #1F1F2C); color: var(--light, #F2F2F5);
  border: 1px solid var(--border-mute, rgba(255,255,255,0.08));
  box-shadow: var(--shadow-lg, 0 16px 64px rgba(0,0,0,0.7));
  font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--vt-ease), transform .3s var(--vt-ease);
}
.cd-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cd-toast--ok    { border-color: rgba(61,220,151,0.5); }
.cd-toast--error { border-color: rgba(255,92,92,0.55); }

/* ==========================================================================
   6. REDUCED MOTION — уважаем системную настройку: гасим тяжёлое
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  .page-hero__crumbs, .page-hero__title, .page-hero__lead,
  .page-hero + .section .container > *, .page-hero + section .container > *,
  .cat-grid > *, .product-grid > *, .services-grid > *, .cart-items > *,
  .product-page__gallery, .product-page__info {
    animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important;
  }
  .btn--fill::before,
  .btn-buying:not(.is-loading)::after,
  .product-card__image img { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   7. МОБИЛЬНЫЙ ГРИД — карточки не должны вылезать за экран.
   В site.css медиа-запросы в неверном порядке (широкий 1024px перекрывает
   узкие), из-за чего на телефоне грид оставался 3-колоночным и обрезался.
   Этот блок грузится последним → побеждает в каскаде.
   ========================================================================== */
@media (max-width: 768px) {
  .product-grid  { grid-template-columns: 1fr 1fr; gap: 12px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .product-grid,
  .cat-grid,
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Страховка: никакого горизонтального выезда на узких экранах */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
}