/* =============================================================================
   Орис Паркет — анимации сайта (октябрь 2026)
   1. «Укладка паркета» в первом экране главной   (.oris-hero)
   2. Появление блоков при прокрутке               (.oris-reveal)
   3. Живые карточки товаров                       (div.prod)
   4. Плавный переход каталог → карточка товара    (@view-transition)
   5. Счётчики и «товар летит в корзину»           ([data-oris-count], .oris-flyer)
   Правило: анимируются только transform и opacity — их двигает видеокарта, без микропауз.
   ============================================================================= */

:root { --oris-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- 1. Укладка паркета --------------------------------------------- */
.oris-hero { position: relative; overflow: hidden; background: #1f1a15; }
/* стяжка под паркетом (бесшовная текстура 1024px) */
.oris-hero .oris-floor { position: absolute; inset: 0; overflow: hidden;
  background: #8f8b85 url(/images/oris-anim/screed.webp) 0 0 / 768px 768px repeat; }
/* цельное фото — показывается, когда все плашки легли */
.oris-hero .oris-floor-photo { position: absolute; inset: 0; background: var(--photo) var(--bpos) / var(--bsize) no-repeat;
  opacity: 0; transform-origin: 30% 60%; will-change: transform; }
.oris-hero.laid .oris-floor-photo { opacity: 1; animation: oris-settle 7s var(--oris-ease) both; }
@keyframes oris-settle { from { transform: scale(1); } to { transform: scale(1.04); } }
/* одна настоящая плашка: свой кусок фото, вырез по контуру */
.oris-hero .oris-plank { position: absolute; background: var(--photo) var(--bpos) / var(--bsize) no-repeat;
  clip-path: var(--clip); opacity: 0; transform: translate3d(-14px, 14px, 0) scale(1.03);
  will-change: transform, opacity; backface-visibility: hidden; }
.oris-hero.go .oris-plank { animation: oris-lay .5s var(--oris-ease) forwards; animation-delay: var(--d); }
.oris-hero.laid .oris-plank { display: none; }
@keyframes oris-lay { to { opacity: 1; transform: none; } }
/* блик лака */
.oris-hero .oris-sheen { position: absolute; inset: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(105deg, transparent 35%, rgba(255,235,200,.22) 50%, transparent 65%);
  transform: translate3d(-100%, 0, 0); }
.oris-hero.go .oris-sheen { animation: oris-sheen 1.6s var(--oris-ease) 1.9s forwards; }
@keyframes oris-sheen { to { transform: translate3d(100%, 0, 0); } }
/* затемнение слева под текст */
.oris-hero .oris-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,15,10,.82) 0%, rgba(20,15,10,.45) 45%, rgba(20,15,10,0) 75%); }
/* текст баннера появляется вместе с укладкой */
.oris-hero .oris-hero-content { position: relative; z-index: 2; }
.oris-hero .oris-hero-content > * { opacity: 0; transform: translateY(18px); }
.oris-hero.go .oris-hero-content > * { animation: oris-up .8s var(--oris-ease) forwards; }
.oris-hero .oris-hero-content > :nth-child(1) { animation-delay: 1.2s; }
.oris-hero .oris-hero-content > :nth-child(2) { animation-delay: 1.4s; }
.oris-hero .oris-hero-content > :nth-child(3) { animation-delay: 1.6s; }
.oris-hero .oris-hero-content > :nth-child(n+4) { animation-delay: 1.8s; }
@keyframes oris-up { to { opacity: 1; transform: none; } }

/* ---------- 2. Появление при прокрутке ------------------------------------- */
.oris-reveal { opacity: 0; transform: translateY(40px) scale(.98); }
@supports (animation-timeline: view()) {
  .oris-reveal { animation: oris-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  /* диапазон «пока въезжает»: анимация завершается, когда элемент виден целиком — и у самого низа страницы (раньше cover 28% там не достигался и последний ряд оставался бледным) */
}
@keyframes oris-reveal { to { opacity: 1; transform: none; } }
.oris-reveal.in { transition: opacity .8s var(--oris-ease), transform .8s var(--oris-ease); opacity: 1; transform: none; }

/* ---------- 3. Живые карточки (каталог: div.prod > a.image) ---------------- */
@media (hover: hover) and (min-width: 561px) {
  /* без тени: фон карточки и страницы одинаковый, затемнение по сторонам смотрелось грязно (решение заказчика) */
  div.prod { transition: transform .45s var(--oris-ease); }
  div.prod:hover { transform: translateY(-6px); }
  div.prod a.image { overflow: hidden; }
  div.prod a.image img { transition: transform 1.2s var(--oris-ease), opacity .6s var(--oris-ease); }
  div.prod:hover a.image img { transform: scale(1.05); }
  /* фото в интерьере поверх основного (включается настройкой cardInterior в oris-anim.js) */
  div.prod a.image { position: relative; }
  div.prod a.image .oris-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06); pointer-events: none; }
  div.prod:hover a.image .oris-alt { opacity: 1; transform: scale(1); }
}

/* ---------- 4. Плавный переход каталог → карточка товара ------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(product-photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }

/* ---------- 5. Счётчики и «в корзину» -------------------------------------- */
[data-oris-count] { font-variant-numeric: tabular-nums; }
.oris-flyer { position: fixed; z-index: 9999; border-radius: 8px; object-fit: cover; pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.oris-bump { animation: oris-bump .45s var(--oris-ease); }
@keyframes oris-bump { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }

/* ---------- «Уменьшить движение»: всё сразу на месте ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .oris-hero *, .oris-reveal, div.prod, div.prod * { animation: none !important; transition: none !important; }
  .oris-hero .oris-hero-content > *, .oris-reveal { opacity: 1 !important; transform: none !important; }
  .oris-hero .oris-floor-photo { opacity: 1 !important; } .oris-hero .oris-plank, .oris-hero .oris-sheen { display: none !important; }
  @view-transition { navigation: none; }
}

/* ---------- Интеграция в существующую карусель .promo (слайд 1) ---------- */
/* .oris-hero живёт внутри XSL-обёртки .item > .container — вырываем на всю ширину слайда */
/* отрицательный margin-top гасит padding-top слайда (60px, на телефоне 30px), иначе сверху видна полоса фона */
.promo .item .oris-hero { margin: -60px calc(50% - 50vw) 0; width: 100vw; }
.promo .item .oris-hero .oris-hero-content { padding-top: 60px; }
@media (max-width: 575.98px) {
  .promo .item .oris-hero { margin-top: -30px; }
  .promo .item .oris-hero .oris-hero-content { padding-top: 30px; }
}