/* ==========================================================================
   MOTION — scroll reveals, hover states, decorative animations
   Все reveal-эффекты используют opacity/clip-path (без CLS)
   ========================================================================== */

/* ── Fade-in при скролле ─────────────────────────────────────────────────
   Используем IntersectionObserver (в main.js) как основной механизм —
   он надёжен, работает во всех браузерах и не ломает статичные скриншоты.
   Элементы по умолчанию ВИДИМЫ (opacity: 1) — если JS не сработает,
   контент останется читаемым. Класс .js-reveal добавляется скриптом. */
.reveal { opacity: 1; }
.reveal-clip { opacity: 1; }

.js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.js-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Clip-reveal — визуальная маска, безопасен для CLS.
   По умолчанию маска раскрывается снизу вверх (inset top). Модификаторы
   задают направление маски для крупных фото — используем разные на
   соседних секциях, чтобы движение не было монотонным. */
.js-reveal-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease-out);
}
.js-reveal-clip.is-in {
  clip-path: inset(0 0 0 0);
}
.reveal-clip--left.js-reveal-clip { clip-path: inset(0 100% 0 0); }
.reveal-clip--left.js-reveal-clip.is-in { clip-path: inset(0 0 0 0); }
.reveal-clip--top.js-reveal-clip { clip-path: inset(0 0 100% 0); }
.reveal-clip--top.js-reveal-clip.is-in { clip-path: inset(0 0 0 0); }

/* ── Плавный "магнетический" hover для больших CTA ────────────────────── */
.magnetic {
  transition: transform 400ms var(--ease-out);
}

/* ── Hero заголовок — плавное появление букв ────────────────────────── */
.hero-title .line {
  display: block;
  overflow: hidden;
}
.hero-title .line span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise-in 900ms var(--ease-out) forwards;
}
.hero-title .line:nth-child(2) span { animation-delay: 150ms; }
.hero-title .line:nth-child(3) span { animation-delay: 300ms; }

@keyframes rise-in {
  to { transform: translateY(0); }
}

/* ── Марка / прокручивающиеся логотипы клиентов ───────────────────── */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--space-16);
  animation: marquee 40s linear infinite;
  width: max-content;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ── Skeleton shimmer ────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-surface-offset) 0%,
    var(--color-surface-offset-2) 50%,
    var(--color-surface-offset) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* ── Плавная смена текста (для калькулятора/конструктора) ────────────── */
.value-flow {
  display: inline-block;
  transition: color 200ms var(--ease-out);
}

/* ── Декоративная линия-разделитель, рисующаяся при скролле ────────── */
.draw-line,
.rule {
  height: 1px;
  background: var(--color-primary);
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .draw-line,
  .rule {
    animation: draw-line linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}
@keyframes draw-line {
  to { transform: scaleX(1); }
}

/* ── Specimen hover — мягкое приближение фото-образца, не «взлёт» ───── */
.specimen img,
.catalog-list__thumb img {
  transition: transform 600ms var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════════════
   ПРИЁМ 1 — Чернильный оттиск в hero главной (js/motion.js: initInkHero)
   Канвас лежит в стеке ПОД всем контентом .home-hero (отрицательный
   z-index внутри локального стек-контекста, который создаёт сама секция),
   поэтому текст и фото-образец никогда не перекрываются каплями.
   На (hover:none) и prefers-reduced-motion канвас не запускается JS-ом и
   остаётся пустым — деградация безопасна (просто пустой <canvas>).
   ══════════════════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  isolation: isolate; /* создаёт локальный стек-контекст: z-index:-1 канваса
                          не проваливается ниже секции (под шапку/фон) */
}
.home-hero .ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.85;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ПРИЁМ 2 — Курсор-крест «метка реза» + бирка координат над .specimen
   ══════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .specimen {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><g stroke='%23241610' stroke-width='1'><line x1='12' y1='2' x2='12' y2='10'/><line x1='12' y1='14' x2='12' y2='22'/><line x1='2' y1='12' x2='10' y2='12'/><line x1='14' y1='12' x2='22' y2='12'/></g></svg>") 12 12, crosshair;
  }
}
.specimen__coord {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  padding: 3px 7px;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  text-transform: none; /* формат X 0412 · Y 0208 мм — «мм» строчными, не .caption uppercase */
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.specimen__coord[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   ПРИЁМ 3 — Линза над фото в галереях (не в hero)
   ══════════════════════════════════════════════════════════════════════ */
.gallery-mix .specimen.has-lens,
.masonry .specimen.has-lens,
.shop-gallery .specimen.has-lens {
  position: relative;
}
.gallery-mix .specimen.has-lens::after,
.masonry .specimen.has-lens::after,
.shop-gallery .specimen.has-lens::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: var(--lens-src, none);
  background-size: 260%;
  background-position: var(--lens-px, 50%) var(--lens-py, 50%);
  clip-path: circle(70px at var(--lens-x, 50%) var(--lens-y, 50%));
  box-shadow: inset 0 0 0 1px var(--color-ink);
  transition: opacity 120ms var(--ease-out);
}
.gallery-mix .specimen.has-lens.is-lens-active::after,
.masonry .specimen.has-lens.is-lens-active::after,
.shop-gallery .specimen.has-lens.is-lens-active::after {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════
   ПРИЁМ 4 — View Transitions между страницами (js/motion.js: initViewTransitions)
   Без поддержки браузером ничего не подключается — обычная навигация.
   ══════════════════════════════════════════════════════════════════════ */
@view-transition {
  navigation: auto;
}
.vt-hero {
  view-transition-name: specimen;
}
::view-transition-old(specimen),
::view-transition-new(specimen) {
  animation-duration: 420ms;
  animation-timing-function: var(--ease-out);
}