/* ============================================================
   Рух — BUREAU
   Тільки transform / opacity / clip-path. Без бібліотек.
   Scroll-driven: animation-timeline: view() — рахується на композиторі.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Поява секцій ---------- */
  @supports (animation-timeline: view()) {
    .section > .container > .section-head,
    .section > .container > .diag__intro,
    .oneteam__statement,
    .seam-grid,
    .price__grid,
    .sig__rows,
    .cycproc,
    .faq,
    .apecon,
    .plat,
    .retn {
      animation: bm-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes bm-rise {
      from { opacity: 0; transform: translate3d(0, 14px, 0); }
      to   { opacity: 1; transform: none; }
    }
  }

  /* ---------- 2. Паралакс усередині рамки ---------- */
  @supports (animation-timeline: view()) {
    img.direction__media,
    img.oneteam__statement-media {
      animation: bm-pan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes bm-pan {
      from { object-position: 50% 38%; }
      to   { object-position: 50% 62%; }
    }
  }

  /* ---------- 3. Прогрес ланцюжка кроків ---------- */
  .dpath { position: relative; }
  .dpath::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--c-red);
    transform: scaleX(0); transform-origin: left center;
  }
  @supports (animation-timeline: view()) {
    .dpath::after {
      animation: bm-progress linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
    @keyframes bm-progress { to { transform: scaleX(1); } }
  }

  /* ---------- 4. Розкриття великих цифр ---------- */
  @supports (animation-timeline: view()) {
    .apecon__num,
    .retn__v,
    .facts__num,
    .price-card__num {
      animation: bm-reveal linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes bm-reveal {
      from { clip-path: inset(100% 0 0 0); }
      to   { clip-path: inset(0 0 0 0); }
    }
  }

  /* ---------- 5. Кнопки: заливка знизу вгору ---------- */
  @media (pointer: fine) {
    .btn, .mega__cta {
      position: relative; overflow: hidden; isolation: isolate;
      transition: color var(--t-fast), border-color var(--t-fast);
    }
    .btn::before, .mega__cta::before {
      content: "";
      position: absolute; inset: 0; z-index: -1;
      transform: scaleY(0); transform-origin: bottom center;
      transition: transform .32s cubic-bezier(.16, .84, .28, 1);
    }
    .btn:hover::before, .mega__cta:hover::before { transform: scaleY(1); }

    .btn--primary { background: var(--c-red); }
    .btn--primary::before { background: var(--c-black); }
    .btn--primary:hover { background: var(--c-red); color: var(--c-white); }

    .btn--secondary::before { background: var(--c-black); }
    .btn--secondary:hover { background: transparent; color: var(--c-white); border-color: var(--c-black); }
    .theme-dark .btn--secondary::before { background: var(--c-white); }
    .theme-dark .btn--secondary:hover { background: transparent; color: var(--c-black); border-color: var(--c-white); }

    .btn span[aria-hidden] { transition: transform .28s cubic-bezier(.2, .7, .3, 1); }
    .btn:hover span[aria-hidden] { transform: translateX(4px); }
  }

  /* ---------- 6. Теги: обвід по периметру ---------- */
  @media (pointer: fine) {
    .tag, .svccat__links > a, .b2b-rel a {
      position: relative;
      transition: color var(--t-fast);
    }
    .tag::before, .tag::after,
    .svccat__links > a::before, .svccat__links > a::after,
    .b2b-rel a::before, .b2b-rel a::after {
      content: "";
      position: absolute; inset: -1px;
      pointer-events: none;
      border: 1px solid var(--c-red);
      clip-path: inset(0 100% 100% 0);
    }
    .tag::before,
    .svccat__links > a::before,
    .b2b-rel a::before { transition: clip-path .22s linear; }
    .tag::after,
    .svccat__links > a::after,
    .b2b-rel a::after { transition: clip-path .22s linear .22s; }

    .tag:hover, .svccat__links > a:hover, .b2b-rel a:hover {
      background: transparent; color: var(--c-red); border-color: var(--c-line);
    }
    .tag:hover::before,
    .svccat__links > a:hover::before,
    .b2b-rel a:hover::before { clip-path: inset(0 0 100% 0); }
    .tag:hover::after,
    .svccat__links > a:hover::after,
    .b2b-rel a:hover::after { clip-path: inset(0 0 0 0); }
  }

  /* ---------- 7. Реакція швів на наведення ---------- */
  @media (pointer: fine) {
    .seam-grid > *,
    .apecon__cell,
    .plat__col,
    .sitx-card {
      position: relative;
      transition: color .2s ease;
    }
    .seam-grid > *::after,
    .apecon__cell::after,
    .plat__col::after,
    .sitx-card::after {
      content: "";
      position: absolute; inset: -1px;
      pointer-events: none;
      box-shadow: 0 0 0 1px var(--c-red) inset;
      opacity: 0;
      transition: opacity .2s ease;
    }
    .seam-grid > *:hover::after,
    .apecon__cell:hover::after,
    .plat__col:hover::after,
    .sitx-card:hover::after { opacity: 1; }
  }
}



/* ---------- Хлібні крихти: позиція й контраст ---------- */
.uxhero { padding-top: 13px; }

.uxhero .crumbs { margin-bottom: clamp(28px, 3.6vw, 48px); }
.crumbs--dark { margin-bottom: clamp(28px, 3.6vw, 48px); }
.dvh, .shop-hero { padding-top: 13px; }
.crumbs, .crumbs--dark { padding-top: 13px; }

/* посилання приглушені, поточна сторінка контрастна */
.crumbs a, .crumbs--dark a { color: var(--c-text-2); }
.crumbs a:hover, .crumbs--dark a:hover { color: var(--c-red); }
.crumbs [aria-current], .crumbs--dark [aria-current] { color: var(--c-black); }

.uxhero--dark .crumbs a, .crumbs--dark a { color: var(--c-text-2-inv); }
.uxhero--dark .crumbs a:hover, .crumbs--dark a:hover { color: var(--c-red); }
.uxhero--dark .crumbs [aria-current], .crumbs--dark [aria-current] { color: var(--c-white); }

.uxhero--red .crumbs a { color: rgba(255,255,255,.62); }
.uxhero--red .crumbs a:hover { color: var(--c-black); }
.uxhero--red .crumbs [aria-current] { color: var(--c-white); }
.uxhero--dark .crumbs li + li::before,
.crumbs--dark li + li::before { color: var(--c-disabled-inv); }

/* SEO content must remain fully legible while the section enters the viewport.
   Other seam-grid sections keep the approved scroll-reveal motion. */
.section.seo .seo__grid {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}