/* =============================================================================
   motion.css — warstwa ruchu
   -----------------------------------------------------------------------------
   Osobny plik, bo cała reszta CSS jest przeniesiona z mockupu 1:1 i chcemy móc
   tę warstwę wyłączyć jednym `wp_dequeue_style('bf-motion')`.

   Trzy zasady:
   1. Ruszamy WYŁĄCZNIE `transform` i `opacity` — nic, co wymusza układ strony.
   2. Wszystko siedzi w `prefers-reduced-motion: no-preference`. Kto wyłączył
      animacje w systemie, dostaje statyczną stronę, nie skróconą animację.
   3. Czasy z instrukcji: mikrointerakcje 180 ms, wejścia ~550 ms,
      easing `--ease`, przy „naklejkowych” odbiciach `--ease-bounce`.
   ========================================================================== */

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

  /* --- Kaskada wejścia -----------------------------------------------------
     Szablony ustawiają `data-delay`, ale base.css zna tylko wartości 1–4 —
     przy ośmiu kartach w siatce piąta i dalsze wchodziły bez opóźnienia.
     `--i` (ustawiane w bf-motion.js, liczone modulo 4) zastępuje tamten
     mechanizm: ta reguła stoi w arkuszu później, więc wygrywa przy równej
     szczegółowości. `data-delay` zostaje jako zapas, gdy JS nie wystartuje. */
  .js-reveal .reveal[style*="--i"] {
    transition-delay: calc(var(--i) * 60ms), calc(var(--i) * 60ms);
  }

  /* Warianty wejścia — na sekcje, które mają wjeżdżać inaczej niż z dołu. */
  .js-reveal .reveal--zoom { transform: translateY(10px) scale(.97); }
  .js-reveal .reveal--zoom.is-in { transform: none; }
  .js-reveal .reveal--left { transform: translateX(-18px); }
  .js-reveal .reveal--right { transform: translateX(18px); }
  .js-reveal .reveal--left.is-in,
  .js-reveal .reveal--right.is-in { transform: none; }

  /* --- Nagłówek ------------------------------------------------------------
     Po zjechaniu w dół pasek się spłaszcza: nieco mniej wysokości i cień.
     Bez chowania paska — wyszukiwarka i koszyk mają być cały czas pod ręką. */
  .header { transition: box-shadow .18s var(--ease), background-color .18s var(--ease); }
  .header__row { transition: padding-block .22s var(--ease); }
  .header.is-scrolled .header__row { padding-block: calc(var(--space-3) * .6); }
  .header .logo { transition: transform .22s var(--ease-bounce); transform-origin: left center; }
  .header.is-scrolled .logo { transform: scale(.92); }

  /* --- Mikrointerakcje ----------------------------------------------------- */
  .btn { transition: transform .18s var(--ease-bounce), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
  .btn:active { transform: translateY(1px) scale(.98); }

  .chip, .format-chip { transition: transform .18s var(--ease-bounce), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
  .chip:hover, .format-chip:hover { transform: translateY(-2px); }
  .chip:active, .format-chip:active { transform: translateY(0) scale(.97); }

  /* Ikona w USP i strzałka w kafelku kategorii — drobne odbicie, nie obrót. */
  .usp__icon { transition: transform .22s var(--ease-bounce); }
  .usp:hover .usp__icon { transform: scale(1.1) translateY(-2px); }

  /* Zaznaczenie filtra — etykieta drgnie, żeby klik był widoczny bez odświeżenia. */
  .check { transition: transform .18s var(--ease-bounce); }
  .check:active { transform: scale(.985); }

  /* Serduszko „ulubione” — odbija po kliknięciu (klasę zdejmuje bf-motion.js). */
  .product-card__fav.is-pop { animation: favPop .32s var(--ease-bounce); }
  @keyframes favPop { 30% { transform: scale(1.3); } 60% { transform: scale(.92); } }

  /* --- Licznik koszyka -----------------------------------------------------
     Osobno od `bump` z components.css: tamto reaguje na zdarzenie Woo,
     to na naszą animację lotu do koszyka. */
  .cart-count.is-bump { animation: cartBump .45s var(--ease-bounce); }
  @keyframes cartBump { 25% { transform: scale(1.45); } 60% { transform: scale(.9); } }

  /* --- Lot zdjęcia do koszyka ---------------------------------------------
     Klon miniatury lecący po łuku. Element jest tworzony i usuwany w JS,
     leży w `position: fixed` poza układem, więc nic nie przesuwa. */
  .fly-to-cart {
    position: fixed; z-index: 200; pointer-events: none;
    width: 76px; height: 76px; border-radius: var(--radius-sm);
    object-fit: cover; box-shadow: var(--shadow-2);
    will-change: transform, opacity;
  }

  /* --- Przycisk w trakcie wysyłania ---------------------------------------
     „Do koszyka” na karcie produktu przeładowuje stronę. Zanim przeglądarka
     pokaże nową, przycisk musi dać znać, że kliknięcie doszło — inaczej
     klienci klikają drugi raz. Napis wygaszamy kolorem, nie szerokością —
     przycisk zostaje dokładnie tak samo duży, więc nic się nie przesuwa.

     Kółko rysujemy `--ink`, a nie `currentColor`: przy przezroczystym tekście
     `currentColor` też byłby przezroczysty. Dotyczy to dwóch przycisków —
     „do koszyka” i „zamawiam i płacę” — oba są żółte z ciemnym napisem. */
  .btn.is-loading, .single_add_to_cart_button.is-loading {
    position: relative; pointer-events: none; color: transparent;
  }
  .btn.is-loading::after, .single_add_to_cart_button.is-loading::after {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: 18px; height: 18px; margin: -9px 0 0 -9px;
    border: 2px solid var(--ink); border-right-color: transparent; border-radius: 50%;
    animation: btnSpin .6s linear infinite;
  }
  @keyframes btnSpin { to { transform: rotate(360deg); } }

  /* --- Konfetti w hero i nagłówkach kategorii -----------------------------
     Kropki dryfują po kilkanaście pikseli i powoli się obracają. Każda
     „rodzina” (nth-child) ma inny czas i ujemne opóźnienie, żeby nie ruszały
     się w takt. Ruch tylko na `transform`, pozycje z inline `left/top`
     zostają. Zakres dryfu jest mniejszy niż odstępy od tekstu w hero. */
  .confetti span { animation: confettiDrift 9s var(--ease) infinite alternate; will-change: transform; }
  .confetti span:nth-child(2n) { animation-duration: 11s; animation-delay: -3s; }
  .confetti span:nth-child(3n) { animation-name: confettiTumble; animation-duration: 13s; animation-delay: -5s; }
  .confetti span:nth-child(4n) { animation-duration: 8s; animation-delay: -6s; animation-direction: alternate-reverse; }
  .confetti span:nth-child(5n) { animation-duration: 7s; animation-delay: -2s; }
  @keyframes confettiDrift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(9px, -14px) rotate(30deg); }
    100% { transform: translate(-7px, 10px) rotate(-20deg); }
  }
  @keyframes confettiTumble {
    0%   { transform: translate(0, 0) rotate(20deg); }
    50%  { transform: translate(-11px, -12px) rotate(200deg); }
    100% { transform: translate(7px, 14px) rotate(380deg); }
  }

  /* --- Pasek górny: tekst okazji w pętli ----------------------------------
     Tor zawiera dwie kopie tekstu (drugą dokłada JS), więc przesunięcie
     o połowę toru daje płynną pętlę bez skoku. Czas ustawia JS z długości
     tekstu (~45 px/s). Najechanie zatrzymuje, żeby dało się doczytać. */
  .ticker.is-scrolling .ticker__track { animation: tickerScroll var(--ticker-duration, 18s) linear infinite; will-change: transform; }
  .ticker.is-scrolling:hover .ticker__track { animation-play-state: paused; }
  @keyframes tickerScroll { to { transform: translateX(-50%); } }

  /* --- Animacje sterowane przewijaniem ------------------------------------
     `animation-timeline` jest w Chrome i Safari 26; gdzie go nie ma,
     `@supports` po prostu nie wchodzi i strona wygląda jak dotąd. */
  @supports (animation-timeline: view()) {
    /* Zdjęcie w hero oddycha razem z przewijaniem — 12 px, nie „parallax”. */
    .hero__stage-wrap {
      animation: heroDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes heroDrift { from { transform: translateY(-6px); } to { transform: translateY(12px); } }

    /* Pasek postępu czytania na stronie produktu i na wpisach. */
    .read-bar {
      position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 90;
      background: var(--brand); transform-origin: 0 50%;
      animation: readGrow linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes readGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }

}

/* --- Przejścia między stronami ---------------------------------------------
   Cross-document View Transitions: zdjęcie z karty produktu przechodzi
   w zdjęcie na stronie produktu, zamiast błysku białego tła.

   `@view-transition` musi stać na najwyższym poziomie arkusza — w bloku
   `@media` przeglądarka go ignoruje. Za wyciszenie ruchu przy
   `prefers-reduced-motion` odpowiada blok niżej: przejście zostaje, ale bez
   animacji, czyli zwykła podmiana kadru.

   Nazwę wspólnego elementu na stronie produktu nadajemy w CSS, nie w JS —
   musi być na miejscu, zanim przeglądarka zrobi pierwszy kadr. Nazwę po
   stronie listingu dopisuje bf-motion.js w chwili kliknięcia.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

#pdp-main { view-transition-name: bf-hero-img; }

::view-transition-old(root) { animation: vtOut .18s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .28s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(8px); } }
::view-transition-group(bf-hero-img) { animation-duration: .34s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Pasek postępu bez `animation-timeline` byłby nieruchomą kreską — chowamy. */
.read-bar { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .read-bar { display: block; } }
}

/* Potwierdzenie na przycisku po dodaniu do koszyka (bf-shop.js). */
.single_add_to_cart_button.is-done { background: var(--success); color: #fff; border-color: var(--success); }