/* ============================================================================
   AleksFurs — слой движения.

   Правила слоя:
   1. Анимируются только transform и opacity. Эти свойства браузер считает
      на композиторе: страница не пересчитывает раскладку, прокрутка не дёргается.
   2. Контент виден без JavaScript. Класс .is-revealed навешивает скрипт —
      если он не отработал, элементы просто показаны, а не спрятаны навсегда.
   3. Движение сдержанное. Мех продают фотографией и спокойствием, а не
      прыгающими блоками: короткие дистанции, мягкие кривые, без отскоков.
   4. prefers-reduced-motion отключает всё до простого показа.
   ========================================================================= */

:root {
  /* Появление длиннее отклика: отклик должен быть мгновенным, появление —
     заметным, иначе его не прочитать как движение. */
  --motion-enter: 620ms;
  --motion-stagger: 70ms;
  --ease-out-soft: cubic-bezier(.22, .68, .28, 1);
  --ease-out-back: cubic-bezier(.34, 1.12, .54, 1);
}

/* ── Появление при прокрутке ──────────────────────────────────────────────
   Готовим элемент к появлению только когда скрипт подтвердил, что умеет
   его показать: атрибут ставится в JS до первой отрисовки. */
[data-reveal-ready] .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--motion-enter) var(--ease-out-soft),
              transform var(--motion-enter) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal-ready] .reveal--left  { transform: translate3d(-22px, 0, 0); }
[data-reveal-ready] .reveal--right { transform: translate3d(22px, 0, 0); }
[data-reveal-ready] .reveal--scale { transform: scale(.965); }
[data-reveal-ready] .reveal--fade  { transform: none; }

.reveal.is-revealed {
  opacity: 1;
  transform: none;
  /* Подсказку композитору снимаем после показа: держать её постоянно —
     значит занимать память слоя без причины. */
  will-change: auto;
}

/* ── Первый экран ─────────────────────────────────────────────────────────
   Подпись и заголовок поднимаются, затем три образа открываются по очереди —
   как занавес, слева направо. Движение короткое и без отскока. */
.hero__eyebrow, .hero__title, .hero__lead, .hero__actions, .hero__stats {
  animation: hero-in var(--motion-enter) var(--ease-out-soft) both;
}
.hero__eyebrow { animation-delay: 40ms; }
.hero__title   { animation-delay: 120ms; }
.hero__lead    { animation-delay: 520ms; }
.hero__actions { animation-delay: 600ms; }
.hero__stats   { animation-delay: 680ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Образ открывается шторкой: маска съезжает вниз, снимок чуть приближен
   и успокаивается. clip-path считается на композиторе, как transform. */
.look { animation: look-in 1100ms var(--ease-out-soft) both; }
.look:nth-child(1) { animation-delay: 220ms; }
.look:nth-child(2) { animation-delay: 340ms; }
.look:nth-child(3) { animation-delay: 460ms; }
.look .look__media img { animation: look-img-in 1400ms var(--ease-out-soft) both; }
.look:nth-child(1) .look__media img { animation-delay: 220ms; }
.look:nth-child(2) .look__media img { animation-delay: 340ms; }
.look:nth-child(3) .look__media img { animation-delay: 460ms; }

@keyframes look-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes look-img-in {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* ── Карточка товара в выдаче ─────────────────────────────────────────────*/
.card {
  transition: transform var(--duration-base, 200ms) var(--ease-out-soft),
              box-shadow var(--duration-base, 200ms) var(--ease-out-soft),
              border-color var(--duration-base, 200ms) var(--ease-out-soft);
}

.card__media img {
  transition: transform 700ms var(--ease-out-soft), opacity var(--duration-base, 200ms) ease;
}
.card:hover .card__media img { transform: scale(1.05); }

/* Метки выезжают вместе с карточкой — мелочь, которая читается как качество. */
.card .tag {
  transition: transform var(--duration-base, 200ms) var(--ease-out-back);
}
.card:hover .tag { transform: translate3d(0, -2px, 0); }

/* Кнопка избранного появляется при наведении, но на сенсорном экране
   видна всегда: там наведения не существует. */
@media (hover: hover) {
  .fav { opacity: 0; transform: scale(.9); transition: opacity var(--duration-fast, 120ms) ease,
                                                        transform var(--duration-fast, 120ms) var(--ease-out-back); }
  .card:hover .fav, .fav:focus-visible, .fav[aria-pressed="true"] { opacity: 1; transform: none; }
}

/* ── Изображения ──────────────────────────────────────────────────────────
   Фотография проявляется, когда действительно загрузилась: резкая подмена
   пустого места картинкой выглядит дёрганьем. */
img[data-fade] { opacity: 0; transition: opacity 420ms ease; }
img[data-fade].is-loaded { opacity: 1; }
/* Страховка: второе фото карточки видно только при наведении, даже если
   к нему прицепилось правило проявления. Специфичность выше, чем у строки выше. */
.card .card__media img.is-alt { opacity: 0; }
.card:hover .card__media img.is-alt { opacity: 1; }

/* ── Плитки, панели, кнопки ───────────────────────────────────────────────*/
.cat { transition: transform var(--duration-base, 200ms) var(--ease-out-soft),
                   border-color var(--duration-base, 200ms) ease,
                   box-shadow var(--duration-base, 200ms) ease; }


.promise-card { transition: transform var(--duration-base, 200ms) var(--ease-out-soft),
                            box-shadow var(--duration-base, 200ms) ease; }


.btn { transition: background-color var(--duration-fast, 120ms) var(--ease, ease),
                   border-color var(--duration-fast, 120ms) var(--ease, ease),
                   color var(--duration-fast, 120ms) var(--ease, ease),
                   box-shadow var(--duration-fast, 120ms) var(--ease, ease),
                   transform 90ms var(--ease, ease); }
.btn:active { transform: translate3d(0, 1px, 0) scale(.99); }

/* ── Галерея товара ───────────────────────────────────────────────────────*/
.gallery__thumb { transition: border-color var(--duration-fast, 120ms) ease,
                              opacity var(--duration-fast, 120ms) ease,
                              transform var(--duration-fast, 120ms) var(--ease-out-back); }
.gallery__thumb:hover { transform: translate3d(0, -2px, 0); }

.lightbox { animation: fade-in var(--duration-base, 200ms) ease both; }
.lightbox img { animation: lightbox-in 320ms var(--ease-out-soft) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ── Оверлеи ──────────────────────────────────────────────────────────────*/
.search-overlay { animation: fade-in var(--duration-fast, 120ms) ease both; }
.search-overlay__box { animation: drop-in 260ms var(--ease-out-soft) both; }
@keyframes drop-in {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to   { opacity: 1; transform: none; }
}

.toast { animation: toast-in 280ms var(--ease-out-back) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Липкая панель покупки на телефоне ────────────────────────────────────
   На узком экране кнопка «В корзину» уезжает вверх вместе с описанием.
   Панель возвращает её под палец, когда исходная кнопка ушла с экрана. */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky, 1100);
  display: none;
  align-items: center; gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  /* Кнопка не должна прятаться под системной полосой iPhone. */
  padding-bottom: calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--color-surface, #fff) 94%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--color-border, #e6ddd2);
  transform: translate3d(0, 110%, 0);
  transition: transform 320ms var(--ease-out-soft);
}
.buy-bar.is-visible { transform: none; }

/* Панель нужна там, где кнопка покупки уезжает за экран: на узких экранах
   и на любом устройстве с сенсорным вводом. На широком мониторе кнопка
   и так видна рядом с фотографией. */
@media (max-width: 1024px) {
  .buy-bar { display: flex; }
  /* Панель перекрывает низ страницы — добавляем место, чтобы подвал
     и последняя кнопка не оказались под ней. */
  body:has(.buy-bar) { padding-bottom: 84px; }
}
.buy-bar__price { display: grid; gap: 2px; flex: none; }
.buy-bar__price b { font-size: var(--text-lg, 20px); line-height: 1.1; }
.buy-bar .btn { flex: 1; }

/* ── Уважение к настройке «меньше движения» ───────────────────────────────
   Полное отключение, а не «чуть короче»: у человека может быть
   вестибулярное расстройство, для которого движение — симптом, а не вкус. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-ready] .reveal,
  [data-reveal-ready] .reveal--left,
  [data-reveal-ready] .reveal--right,
  [data-reveal-ready] .reveal--scale {
    opacity: 1; transform: none; transition: none;
  }
  .hero__eyebrow, .hero__title, .hero__lead, .hero__actions, .hero__stats,
  .look, .look .look__media img, .marquee__track {
    animation: none;
  }
  .card:hover, .cat:hover, .promise-card:hover,
  .card:hover .card__media img, .card:hover .tag, .look:hover .look__media img,
  .cat:hover .cat__media img, .gallery__thumb:hover, .btn:active { transform: none; }
  img[data-fade] { opacity: 1; transition: none; }
  .buy-bar { transition: none; }
  .lightbox, .lightbox img, .search-overlay,
  .search-overlay__box, .toast { animation: none; }
}

/* Печать и сохранение страницы: ничего не должно остаться прозрачным. */
@media print {
  [data-reveal-ready] .reveal { opacity: 1 !important; transform: none !important; }
  .buy-bar { display: none !important; }
}