/* =====================================================================
 * HGV Motion Layer — płynny, kompozytowany ruch (transform/opacity).
 * Ładowane mu-pluginem hgv-motion.php PO style.css (override wygrywa kolejnością).
 * Zasady: animujemy tylko transform/opacity/box-shadow (GPU), nigdy width/height/flex.
 * Wszystko pod prefers-reduced-motion: no-preference + twardy kill-switch niżej.
 * ===================================================================== */

/* Rejestracja zmiennej skali, by hover-zoom obrazu (tiles-6) dał się PŁYNNIE
 * animować, podczas gdy parallax zmienia translate w tym samym transformie
 * bez tranzycji. Brak wsparcia @property = zoom po prostu skacze (graceful). */
@property --hgv-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* ---------- 1. Reveal on scroll (fade-up) — ZAWSZE aktywny (poza bramką reduced).
 *  Ukrywamy dopiero gdy JS doda html.hgv-motion (brak FOUC gdy JS padnie).
 *  Przy html.hgv-reduced ruch degraduje się do samego zanikania (bez przesunięcia). */
@keyframes hgv-reveal-up {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Stan ukryty do czasu wejścia w kadr. */
html.hgv-motion .hgv-anim,
html.hgv-motion .hgv-rise { opacity: 0; }
/* Wejście = CSS animation (odgrywa się ZAWSZE od 1. klatki — niewrażliwe na timing,
   działa też nad foldem podczas ładowania). Stagger sterowany animation-delay z JS. */
html.hgv-motion .hgv-anim.hgv-in,
html.hgv-motion .hgv-rise.hgv-in {
  animation: hgv-reveal-up .75s cubic-bezier(.22, .61, .36, 1) both;
}

/* Na WYRAŹNE życzenie klientki: animacje wejścia (wjazd od dołu) grają ZAWSZE,
 * także przy włączonym „Zmniejsz ruch" (Reduce Motion). Dlatego BEZ degradacji
 * do samego zanikania — klasa html.hgv-reduced nie zmienia już transformu.
 * (Efekty hover/parallax nadal respektują reduced-motion — patrz niżej.) */

/* ---------- Buttony — lift + cień + press (ZAWSZE, także przy Reduce Motion) ----------
 * Płynne podniesienie na hover (transform, kompozytowane), tekst bez zmian, wciśnięcie na klik.
 * Poza bramką reduced-motion — na życzenie klientki ma działać wszędzie. */
.btn, .btn-primary, .btn-outline,
.button, .woocommerce-Button, button.button, .wc-backward,
.single_add_to_cart_button, .checkout-button,
button[type="submit"].alt, .hgv-buy-in-shop-btn,
.add_to_cart_button, .hgv-shop-product-card__cta {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease,
              filter .25s ease, transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}
.btn:hover, .btn-primary:hover, .btn-outline:hover,
.button:hover, .woocommerce-Button:hover, button.button:hover, .wc-backward:hover,
.single_add_to_cart_button:hover, .checkout-button:hover,
button[type="submit"].alt:hover, .hgv-buy-in-shop-btn:hover,
.add_to_cart_button:hover, .hgv-shop-product-card__cta:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  will-change: transform;
}
.btn:active, .btn-primary:active, .btn-outline:active,
.button:active, .woocommerce-Button:active, button.button:active, .wc-backward:active,
.single_add_to_cart_button:active, .checkout-button:active,
button[type="submit"].alt:active, .hgv-buy-in-shop-btn:active,
.add_to_cart_button:active, .hgv-shop-product-card__cta:active {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
  transition-duration: .06s;
}

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

  /* (Lift przycisków przeniesiony POZA reduced-motion — blok „Buttony (zawsze)" na górze pliku,
     żeby działał także przy włączonym „Zmniejsz ruch". Na życzenie klientki.) */

  /* Kropki karuzeli na home — delikatne powiększenie aktywnej/hover */
  .tiles-6-carousel-dots button {
    transition: background .2s ease, border-radius .2s ease, transform .2s ease;
  }
  .tiles-6-carousel-dots button:hover { transform: scale(1.25); }
  .tiles-6-carousel-dots button.is-active { transform: scale(1.15); }

  /* ---------- 3. NAPRAWA JANKU: karuzela kafli tiles-6 (desktop) ----------
   * Stary efekt animował flex-basis i rozpychał sąsiadów → reflow całego rzędu
   * co klatkę (+ repaint backdrop-filter w etykietach). Podmieniamy na lift
   * przez transform (czysto kompozytowy, zero reflow), sąsiedzi się nie ruszają. */
  @media (hover: hover) and (pointer: fine) {
    /* Rozsuwanie: najechany kafel szerszy, sąsiad węższy (na życzenie klientki).
       Płynna tranzycja flex-basis; box-shadow podkreśla aktywny kafel. */
    .tiles-6-slide {
      transition: flex-basis .4s cubic-bezier(.22, .61, .36, 1),
                  flex-grow .4s cubic-bezier(.22, .61, .36, 1),
                  box-shadow .35s ease;
    }
    .tiles-6-slide:hover {
      flex: 1 1 calc((100% - 4rem) / 2 + 8rem);   /* SZERSZY */
      z-index: 2;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    }
    .tiles-6-slide:hover + .tiles-6-slide,
    .tiles-6-slide:has(+ .tiles-6-slide:hover) {
      flex: 1 1 calc((100% - 4rem) / 2 - 8rem);   /* SĄSIAD węższy */
      min-width: 12rem;
    }
  }

  /* ---------- 4. Płynne przewijanie karuzel ---------- */
  .tiles-6 { scroll-behavior: smooth; }

  /* ---------- 5. MODUŁ PORSCHE dla sekcji „Palety" (.tiles-6) ----------
   *  (Reveal .hgv-rise przeniesiony wyżej, poza bramkę reduced — działa zawsze.) */

  /* 5b. Parallax obrazu w ramce + płynny zoom na hover (tylko desktop z kursorem).
   *     Obraz wyższy niż kafel → JS przesuwa go pionowo (var --hgv-par) przy scrollu;
   *     hover zmienia --hgv-scale (tranzycja @property), oba składają się w transform. */
  @media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .tiles-6 .tile img {
      position: absolute;
      top: -8%;
      left: 0;
      width: 100%;
      height: 116%;
      object-fit: cover;
      transform: translate3d(0, var(--hgv-par, 0px), 0) scale(var(--hgv-scale, 1));
      transition: --hgv-scale .7s cubic-bezier(.22, .61, .36, 1);
      will-change: transform;
      backface-visibility: hidden;
    }
    .tiles-6 .tile:hover img { --hgv-scale: 1.06; }
  }

  /* 5c. Strzałka kafla — delikatny „nudge" po najechaniu (Porsche detail). */
  .tiles-6 .tile-overlay::after {
    transition: opacity .5s ease-in-out, transform .45s cubic-bezier(.22, .61, .36, 1);
  }
  .tiles-6 .tile:hover .tile-overlay::after {
    transform: translate3d(3px, -3px, 0);
  }
}

/* (Kill-switch usunięty — reduced-motion obsługiwane przez html.hgv-reduced wyżej:
 *  wejście zostaje, degraduje się do samego zanikania zamiast pełnego znikania.) */

/* =====================================================================
 * LAYOUT (nie animacja) — sekcja „Palety" (.tiles-6): szersza niż sekcja wyżej
 * ORAZ idealnie wyśrodkowana. Klasa .hgv-wide-section (dodawana JS-em do sekcji-
 * rodzica) zeruje jej padding, a wrap dostaje width w % + margin:auto. Bazowanie
 * na % (a nie vw) wyklucza pasek przewijania → brak przesunięcia w lewo.
 * Bez JS: wrap i tak centruje się w spaddingowanej sekcji (trochę węziej) — graceful.
 * ===================================================================== */
/* Konfigurator palet — ukryty PÓKI CO (funkcja „wkrótce", kafel linkował w 404).
 * Rewersja = usunąć tę jedną regułę. Zostaje kafel „Sklep internetowy" obok. */
.tiles-horizontal a.tile[href*="konfigurator"] { display: none !important; }

@media (min-width: 769px) {
  section.section-tiles-3.hgv-wide-section {
    padding-left: 0 !important;   /* bije motywowy section.section-tiles-3 { padding: … 8% } */
    padding-right: 0 !important;
  }
  .tiles-6-wrap {
    width: min(1600px, 92%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}