/* ============================================================
   BRERA MOTION LAYER — 2026
   Слой анимаций поверх существующего дизайна. Ничего не меняет
   в статике: цвета, сетки, шрифты — из main.css. Откат = убрать
   подключение этого файла и motion.js из layout.ejs.
   ============================================================ */

/* ===== 1. Токены движения ===== */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* мягкое «дорогое» торможение */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* лёгкий перелёт для микро-откликов */
  --dur-fast: 0.18s;
  --dur-med: 0.35s;
  --dur-slow: 0.7s;
}

/* ===== 2. View Transitions — плавный переход между страницами ===== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }
/* Шапка не участвует в кросс-фейде — остаётся неподвижной */
.header { view-transition-name: site-header; }
/* Морф картинки товара: имя присваивает motion.js на клике по карточке */
::view-transition-group(product-hero) { animation-duration: 0.32s; animation-timing-function: var(--ease-out); }

/* ===== 3. Общие keyframes ===== */
@keyframes m-fade-in { from { opacity: 0; } }
@keyframes m-fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes m-heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-6deg); }
  65% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes m-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ===== 4. Scroll-reveal (классы вешает только motion.js → без JS всё видно) =====
   Кинематографичный вход: из размытия в резкость + лёгкий масштаб */
html.motion-ok .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    filter 0.8s var(--ease-out);
  transition-delay: calc(var(--ri, 0) * 65ms);
}
html.motion-ok .reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Золотая линия прорисовывается под заголовком секции при появлении */
html.motion-ok .section__title.reveal::after,
html.motion-ok .section__head.reveal .section__title::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--gold), rgba(184, 150, 62, 0));
  transition: width 0.9s var(--ease-out) 0.35s;
}
html.motion-ok .section__title.reveal.in::after,
html.motion-ok .section__head.reveal.in .section__title::after { width: 72px; }
/* В FAQ заголовок по центру — линия тоже */
html.motion-ok .faq-section .section__title.reveal::after {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, rgba(184, 150, 62, 0), var(--gold), rgba(184, 150, 62, 0));
}

/* ===== 5. Hero: вход каскадом + Ken Burns + параллакс ===== */
@media (prefers-reduced-motion: no-preference) {
  .hero__content > * { animation: m-hero-rise 1s var(--ease-out) backwards; }
  .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
  .hero__content > *:nth-child(2) { animation-delay: 0.15s; }
  .hero__content > *:nth-child(3) { animation-delay: 0.27s; }
  .hero__content > *:nth-child(4) { animation-delay: 0.39s; }
  .hero__content > *:nth-child(5) { animation-delay: 0.52s; }
  .hero__dots { animation: m-fade-in 1s 0.8s var(--ease-out) backwards; }

  /* Золотой блик проходит по заголовку hero после входа */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__title {
      color: #fff;
      background-image: linear-gradient(110deg, #fff 40%, var(--gold-light) 50%, #fff 60%);
      background-size: 250% 100%;
      background-position: 130% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation:
        m-hero-rise 1s var(--ease-out) 0.15s backwards,
        m-title-sheen 2.6s ease-in-out 1.5s 1 forwards;
    }
  }

  /* Медленный зум видео (Ken Burns). Анимация висит на всех слоях и лишь
     ставится на паузу у неактивных — без рывка масштаба при смене слайда */
  .hero--video .hero__video { animation: m-hero-zoom 24s linear forwards paused; }
  .hero--video .hero__video.is-active { animation-play-state: running; }

  /* Параллакс контента при уходе hero вверх — только где поддерживается */
  @supports (animation-timeline: view()) {
    .hero__content {
      animation: m-hero-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@keyframes m-hero-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes m-hero-drift { to { transform: translateY(56px); opacity: 0.25; } }
@keyframes m-hero-rise { from { opacity: 0; transform: translateY(30px); filter: blur(12px); } }
@keyframes m-title-sheen { to { background-position: -130% 0; } }

/* ===== 6. Шапка ===== */
/* После начала скролла — тень + эффект матового стекла */
.header { transition: box-shadow var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out); }
.header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09); }
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .header.is-scrolled {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* Золотая полоса прогресса чтения страницы (создаёт motion.js) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light) 55%, #f0dca6);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1200;
  pointer-events: none;
}

/* Дропдауны: fade + сдвиг вместо мгновенного display, с паузой при закрытии.
   Только десктоп: на тач-устройствах hover-меню ломает первый тап. */
@media (min-width: 769px) {
  .nav__dropdown .nav__dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition:
      opacity 0.22s var(--ease-out) 0.14s,
      transform 0.22s var(--ease-out) 0.14s,
      visibility 0s linear 0.36s;
  }
  .nav__dropdown .nav__dropdown-menu--brands { display: grid; }
  .nav__dropdown--mega .nav__dropdown-menu--categories { display: grid; }
  .nav__dropdown:hover .nav__dropdown-menu,
  .nav__dropdown:focus-within .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
}

/* Бейджи корзины/избранного: пульс при изменении числа (класс вешает motion.js) */
.header__cart-badge { transition: transform var(--dur-fast) var(--ease-out); }
.header__cart-badge.bump { animation: m-pop 0.45s var(--ease-spring); }

/* Выпадашка живого поиска */
.search-dropdown.open { animation: m-search-in 0.25s var(--ease-out); }
@keyframes m-search-in { from { opacity: 0; transform: translateY(6px); } }

/* Мобильное меню: панель с плавным выпадением (вместо инлайн-стилей)  */
@media (max-width: 768px) {
  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--white);
    padding: 10px 16px 18px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.10);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity 0.3s var(--ease-out),
      transform 0.3s var(--ease-out),
      visibility 0s linear 0.3s;
  }
  .nav.nav--open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav.nav--open .nav__link { padding: 12px 10px; font-size: 15px; }
}

/* Бургер ⇄ крестик */
.hamburger span { transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== 7. Карточка товара ===== */
/* Уточняем переходы (вместо transition: all) и углубляем подъём */
.product-card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); }

/* Вторая фотография при наведении (рендерится в product-card.ejs) */
.product-card__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.product-card__img-wrap:hover .product-card__img--alt { opacity: 1; }
.product-card__img { transition: transform 0.5s var(--ease-out), opacity 0.45s var(--ease-out); }
.product-card:hover .product-card__img { transform: scale(1.05); }
.product-card__img-wrap:has(.product-card__img--alt):hover .product-card__img:not(.product-card__img--alt) { opacity: 0; transform: none; }

/* Шиммер, пока грузится фото (класс вешает motion.js) */
.product-card__img-wrap.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.9) 50%, transparent 68%);
  animation: m-shimmer 1.15s infinite;
  pointer-events: none;
}

/* Сердечко избранного: pop при добавлении */
.product-card__fav { transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), color var(--dur-fast); }
.product-card__fav:active { transform: scale(0.88); }
.product-card__fav.is-favorite svg,
.link-cta--fav.is-favorite svg { animation: m-heart-pop 0.45s var(--ease-spring); }

/* Появление карточек, догруженных «Показать ещё» (классы вешает motion.js) */
html.motion-ok .card-enter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: calc(var(--ri, 0) * 55ms);
}
html.motion-ok .card-enter.in { opacity: 1; transform: none; }

/* ===== 8. Кнопки: тактильный отклик ===== */
.btn {
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn.is-added { background: #2e7d32 !important; color: #fff !important; pointer-events: none; }

/* Летящая в корзину точка (создаёт motion.js) */
.fly-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 8px rgba(184, 150, 62, 0.5);
  z-index: 2000;
  pointer-events: none;
}

/* ===== 9. Страница товара ===== */
/* Кросс-фейд при смене фото (ghost создаёт motion.js) */
.gallery__ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  background: var(--bg);
  opacity: 1;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.gallery__thumb { transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }

/* Лупа: при наведении фото увеличивается и следует за курсором (только десктоп).
   Точку зума пишет motion.js через transform-origin */
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .gallery__main #galleryMain { transition: transform 0.3s var(--ease-out); }
  html.motion-ok .gallery__main.is-zoomed #galleryMain { transform: scale(1.9); }
}

/* Лайтбокс: вход с fade + scale */
.lightbox.is-open { animation: m-fade-in 0.3s var(--ease-out); }
.lightbox.is-open img { animation: m-lightbox-img 0.35s var(--ease-out); }
@keyframes m-lightbox-img { from { opacity: 0; transform: scale(0.94); } }

/* Табы: подчёркивание скользит (индикатор создаёт motion.js), контент проявляется */
.tabs__nav { position: relative; }
.tabs__indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  transition: left 0.35s var(--ease-out), width 0.35s var(--ease-out);
  pointer-events: none;
}
.tabs__nav.has-indicator .tab-btn.active { border-bottom-color: transparent; }
.tab-content.active { animation: m-fade-up 0.4s var(--ease-out); }

/* ===== 10. FAQ: плавное раскрытие (прогрессивно — Chrome 131+) ===== */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq-item::details-content,
  .designers-faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s var(--ease-out), content-visibility 0.4s allow-discrete;
  }
  .faq-item[open]::details-content,
  .designers-faq details[open]::details-content { height: auto; }
}
.faq-item { transition: box-shadow 0.3s var(--ease-out); }
.faq-item__q::after { transition: transform 0.3s var(--ease-out), color 0.2s; }

/* ===== 11. Модалки: вход с fade + scale + blur фона ===== */
.modal__overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.open .modal__overlay { animation: m-fade-in 0.28s var(--ease-out); }
.modal.open .modal__box { animation: m-modal-in 0.38s var(--ease-out); }
@keyframes m-modal-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }

/* ===== 12. Тосты ===== */
.cart-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 10px;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.cart-toast::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--gold-light);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cart-toast--error::before { background: #e57373; -webkit-mask-image: none; mask-image: none; border-radius: 50%; width: 10px; height: 10px; }
.cart-toast--show { transform: translate(-50%, 0) scale(1); }

/* ===== 13. Корзина ===== */
.cart-item { transition: opacity 0.35s var(--ease-out); }
.cart-item.is-removing {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
}
.qty-btn { transition: background var(--dur-fast); }
.qty-btn:active { transform: scale(0.92); }
.cart-summary__row--total span:last-child { transition: color var(--dur-fast); }
.cart-summary__row--total .sum-flash { color: var(--gold); }

/* Пустые состояния — мягкое появление */
.cart-empty, .favorites-page__state, .empty-state { animation: m-fade-up 0.5s var(--ease-out); }

/* ===== 14. Главная: бренды и категории ===== */
.brand-card { transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.brand-card:hover { transform: translateY(-4px); }
.brand-card__country { position: relative; padding-bottom: 3px; }
.brand-card__country::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.35s var(--ease-out), left 0.35s var(--ease-out);
}
.brand-card:hover .brand-card__country::after { left: 0; width: 100%; }

.cat-card { transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.cat-card:hover { transform: translateY(-4px); }
.cat-card__icon { color: var(--gold); display: flex; align-items: center; justify-content: center; }
.cat-card__icon svg { transition: transform 0.3s var(--ease-spring); }
.cat-card:hover .cat-card__icon { color: var(--gold-light); }
.cat-card:hover .cat-card__icon svg { transform: translateY(-3px) scale(1.08); }
.why-card__icon { color: var(--gold); }

/* ===== 15. Глобальная выделка ===== */
::selection { background: rgba(184, 150, 62, 0.28); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.section__link { transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); display: inline-block; }
.section__link:hover { transform: translateX(3px); }

/* ===== 16. FUTURE-СЛОЙ ===== */

/* 3D-наклон карточек за курсором + золотой блик (только десктоп с мышью).
   Углы --rx/--ry и точку блика --mx/--my пишет motion.js */
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .product-card,
  html.motion-ok .brand-card { position: relative; transform-style: preserve-3d; }
  html.motion-ok .product-card:hover,
  html.motion-ok .brand-card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition: transform 0.12s linear, box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  }
  html.motion-ok .product-card::after,
  html.motion-ok .brand-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 7;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 106, 0.14), transparent 46%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
  }
  html.motion-ok .product-card:hover::after,
  html.motion-ok .brand-card:hover::after { opacity: 1; }
}

/* Световой sweep по тёмным кнопкам при наведении */
html.motion-ok .btn--primary,
html.motion-ok .btn--white { position: relative; overflow: hidden; }
html.motion-ok .btn--primary::after,
html.motion-ok .btn--white::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
html.motion-ok .btn--primary:hover::after,
html.motion-ok .btn--white:hover::after { animation: m-sheen 0.7s var(--ease-out); }
@keyframes m-sheen {
  0% { left: -70%; opacity: 1; }
  100% { left: 140%; opacity: 1; }
}

/* CTA-секция «Хотите подобрать технику?»: живой фон —
   два дрейфующих золотых сияния + медленно всплывающие искры */
.cta-section { position: relative; overflow: hidden; }
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  width: 52vw;
  height: 52vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
}
.cta-section::before {
  background: radial-gradient(circle, rgba(184, 150, 62, 0.5), rgba(184, 150, 62, 0.14) 45%, transparent 65%);
  top: -38%;
  left: -10%;
  animation: m-aurora-a 12s ease-in-out infinite alternate;
}
.cta-section::after {
  background: radial-gradient(circle, rgba(212, 175, 106, 0.38), rgba(212, 175, 106, 0.1) 45%, transparent 65%);
  bottom: -42%;
  right: -12%;
  animation: m-aurora-b 15s ease-in-out infinite alternate;
}
.cta-section .container { position: relative; z-index: 1; }
@keyframes m-aurora-a { to { transform: translate(44%, 28%) scale(1.25); } }
@keyframes m-aurora-b { to { transform: translate(-38%, -24%) scale(1.3); } }

/* Искры: паттерн золотых точек высотой 360px едет вверх на transform
   (композитор, без перерисовок) и бесшовно зацикливается */
.cta-section .container::before {
  content: '';
  position: absolute;
  left: -24px;
  right: -24px;
  top: -360px;
  bottom: -360px;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 2px at 11% 12%, rgba(240, 220, 166, 0.9), transparent 60%),
    radial-gradient(circle 1.3px at 27% 64%, rgba(212, 175, 106, 0.75), transparent 60%),
    radial-gradient(circle 1.7px at 41% 33%, rgba(240, 220, 166, 0.8), transparent 60%),
    radial-gradient(circle 1.2px at 55% 81%, rgba(212, 175, 106, 0.65), transparent 60%),
    radial-gradient(circle 2.2px at 68% 23%, rgba(240, 220, 166, 0.85), transparent 60%),
    radial-gradient(circle 1.3px at 79% 58%, rgba(212, 175, 106, 0.7), transparent 60%),
    radial-gradient(circle 1.6px at 91% 39%, rgba(240, 220, 166, 0.75), transparent 60%),
    radial-gradient(circle 1.2px at 17% 88%, rgba(212, 175, 106, 0.6), transparent 60%);
  background-size: 360px 360px;
  background-repeat: repeat;
  animation: m-sparkle-rise 14s linear infinite;
}
@keyframes m-sparkle-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-360px); }
}

/* Иконки категорий: золотое свечение на тёмном hover-фоне */
.cat-card:hover .cat-card__icon svg { filter: drop-shadow(0 0 9px rgba(212, 175, 106, 0.75)); }

/* Тост — матовое стекло */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .cart-toast {
    background: rgba(20, 20, 20, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* ===== 17. Уважение к prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}