/* Анимации сайта. Это украшение: без этого файла и без motion.js всё работает так же.
   Движение включается, только если посетитель не просил его убавить (prefers-reduced-motion),
   а скрытые до появления блоки — только когда motion.js запустился (класс motion-on на <html>). */

/* ── Переходы между страницами: плавная смена, шапка стоит на месте. Chrome, Edge, Safari; в остальных — как раньше.
   Само включение (@view-transition) стоит в <head> страницы (base.html): из внешнего файла браузер его не успевает учесть ── */
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
/* фото из карточки раскрывается в большое фото товара */
::view-transition-group(product-photo) { animation-duration: .46s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); mix-blend-mode: multiply; }
::view-transition-old(product-photo), ::view-transition-new(product-photo) { height: 100%; object-fit: cover; object-position: 50% 14%; }
.product-page #detail-product-photo { view-transition-name: product-photo; }

/* ── Карточка товара: слои ракурсов ── */
/* смешение с фоном карточки — у всего блока фото, чтобы ракурсы сменяли друг друга, а не накладывались */
.product-card .product-photo { mix-blend-mode: multiply; }
.product-card .product-photo img { mix-blend-mode: normal; }
.product-card .product-photo .photo-alt { opacity: 0; transition: opacity .55s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.product-card .product-photo .photo-alt.is-on { opacity: 1; }
.product-card .photo-steps { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 12px; display: flex; gap: 4px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.product-card.is-cycling .photo-steps { opacity: 1; }
.product-card .photo-steps i { flex: 1; height: 2px; background: #0b151838; transition: background .3s; }
.product-card .photo-steps i.is-on { background: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* ── Карточки ── */
  .product-card .product-photo img { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .55s ease; }
  .product-card .product-detail span { display: inline-block; transition: transform .25s; }
  .product-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }

  @media (hover: hover) and (pointer: fine) {
    .product-card:hover .product-photo img { transform: scale(1.045); }
    .product-card:hover .product-detail span { transform: translate(3px, -3px); }
    .product-card:hover::after { transform: scaleX(1); }
    /* «прицельные» уголки вокруг фото */
    .product-card .product-photo::before, .product-card .product-photo::after { content: ''; position: absolute; z-index: 2; width: 15px; height: 15px; border: 0 solid var(--copper); opacity: 0; transform: none; pointer-events: none; transition: opacity .3s, inset .45s cubic-bezier(.2, .7, .2, 1); }
    .product-card .product-photo::before { inset: 50px auto auto 30px; border-width: 1.5px 0 0 1.5px; }
    .product-card .product-photo::after { inset: auto 30px 34px auto; border-width: 0 1.5px 1.5px 0; }
    .product-card:hover .product-photo::before { opacity: 1; inset: 38px auto auto 16px; }
    .product-card:hover .product-photo::after { opacity: 1; inset: auto 16px 24px auto; }
    .catalog-window { cursor: grab; }
    .catalog-window.is-dragging { cursor: grabbing; user-select: none; }
    .catalog-window.is-dragging a { pointer-events: none; }
  }

  /* карточки витрины выезжают по очереди, когда витрина появляется на экране */
  .motion-on .catalog:not(.is-in) .product-track .product-card { opacity: 0; transform: translateY(38px); }
  .motion-on .catalog.is-in:not(.is-settled) .product-track .product-card { animation: card-in .85s cubic-bezier(.2, .7, .2, 1) both; }
  .motion-on .catalog.is-in .product-track .product-card:nth-child(2) { animation-delay: .09s; }
  .motion-on .catalog.is-in .product-track .product-card:nth-child(3) { animation-delay: .18s; }
  .motion-on .catalog.is-in .product-track .product-card:nth-child(4) { animation-delay: .27s; }
  .motion-on .catalog.is-in .product-track .product-card:nth-child(5) { animation-delay: .36s; }
  @keyframes card-in { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
  /* сетка каталога: карточки проявляются при прокрутке */
  .motion-on .catalog-full-grid .product-card.will-rise { opacity: 0; transform: translateY(26px); }
  .motion-on .catalog-full-grid .product-card { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }

  /* ── Звонок ── */
  .header-phone svg { transform-origin: 50% 55%; animation: phone-ring 7s ease-in-out 3.5s infinite; }
  .header-phone:hover svg { animation: none; }
  @keyframes phone-ring { 0%, 84%, 100% { transform: rotate(0); } 86% { transform: rotate(-15deg); } 88% { transform: rotate(13deg); } 90% { transform: rotate(-11deg); } 92% { transform: rotate(9deg); } 94% { transform: rotate(-5deg); } 96% { transform: rotate(2deg); } }
  @media (max-width: 700px) {
    .header-phone { position: relative; }
    .header-phone::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--copper); opacity: 0; animation: phone-ping 4.2s ease-out 2.5s infinite; pointer-events: none; }
    @keyframes phone-ping { 0% { transform: scale(1); opacity: .8; } 38%, 100% { transform: scale(1.7); opacity: 0; } }
  }

  /* ── Заголовки разделов поднимаются из-под «шторки» ── */
  .motion-on .reveal h2 { clip-path: inset(0 -4% 100% -4%); transform: translateY(.22em); transition: clip-path .95s cubic-bezier(.2, .7, .2, 1) .08s, transform .95s cubic-bezier(.2, .7, .2, 1) .08s; }
  .motion-on .reveal.is-visible h2 { clip-path: inset(-12% -4% -18% -4%); transform: none; }

  /* ── Кнопки: стрелка уходит по диагонали ── */
  .button > span:last-child:not(:first-child), .button-header > span[aria-hidden] { display: inline-block; transition: transform .25s; }
  .button:not(#add-to-cart):hover > span:last-child:not(:first-child) { transform: translate(3px, -3px); }

  /* ── Подсказка «прокрутите»: стрелка покачивается ── */
  .story-scroll > span { display: inline-block; animation: scroll-cue 1.9s ease-in-out infinite; }
  @keyframes scroll-cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

  /* ── Полоска прокрутки страницы под шапкой ── */
  @supports (animation-timeline: scroll()) {
    .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform-origin: 0 50%; transform: scaleX(0); animation: page-progress auto linear both; animation-timeline: scroll(root block); pointer-events: none; }
    @keyframes page-progress { to { transform: scaleX(1); } }
  }

  /* ── Вопросы и вкладки товара раскрываются плавно (Chrome; в остальных — мгновенно, как раньше) ── */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content, .product-tab::details-content { block-size: 0; overflow: clip; transition: block-size .38s cubic-bezier(.2, .7, .2, 1), content-visibility .38s allow-discrete; }
    .faq details[open]::details-content, .product-tab[open]::details-content { block-size: auto; }
  }

  /* ── Отзывы и документы: лёгкий подъём при наведении ── */
  @media (hover: hover) and (pointer: fine) {
    .review-card, .documents-list > button { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s, background .2s; }
    .review-card:hover { transform: translateY(-4px); }
  }
}