/* ============================================================
   MOTION — animacje „premium" (styl rysunku technicznego)
   Działa tylko, gdy <html> ma klasę .motion (ustawiana w <head>;
   brak przy „ograniczeniu ruchu" w systemie). Bez niej strona
   wygląda dokładnie jak wcześniej — cała treść widoczna.
   Sterowanie: js/motion.js (klasy .is-in, .is-lit, zmienne --p, --py, --sp)
   ============================================================ */

:root {
  --m-out: cubic-bezier(.16, 1, .3, 1);     /* szybki start, miękkie lądowanie */
  --m-io: cubic-bezier(.65, 0, .35, 1);     /* rysowanie linii */
}

@keyframes m-draw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes m-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-up      { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes m-rise    { from { clip-path: inset(100% -5% -25% -5%); transform: translateY(45%); }
                       to   { clip-path: inset(-25% -5% -25% -5%); transform: none; } }
@keyframes m-curtain { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-zoom    { from { transform: scale(1.14); } to { transform: scale(1); } }

/* ---------- 1. HERO — wejście po otwarciu strony ---------- */
.motion .hero__meta { position: relative; border-bottom-color: transparent; }
.motion .hero__meta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--line-dark); transform-origin: left;
  animation: m-draw 1.2s var(--m-io) .1s both;
}
.motion .hero__meta > span { animation: m-fade .8s ease .55s both; }
.motion .hero__line { animation: m-rise 1.1s var(--m-out) both; }
.motion .hero__line:nth-child(1) { animation-delay: .3s; }
.motion .hero__line:nth-child(2) { animation-delay: .45s; }
.motion .hero__foot { animation: m-up 1s var(--m-out) .8s both; }
.motion .hero__photo { overflow: hidden; animation: m-curtain 1.5s var(--m-io) .55s both; }
.motion .hero__photo img { animation: m-zoom 2.4s var(--m-out) .55s both; }
.motion .hero__dim { animation: m-fade .8s ease 1.5s both; }

/* liczby pod zdjęciem */
.motion .hero__stats li {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform 1s var(--m-out);
}
.motion .hero__stats.is-in li { opacity: 1; transform: none; }
.motion .hero__stats.is-in li:nth-child(2) { transition-delay: .12s; }
.motion .hero__stats.is-in li:nth-child(3) { transition-delay: .24s; }

/* ---------- 2. PRZEJŚCIA MIĘDZY SEKCJAMI ---------- */
/* linia nad nagłówkiem rysuje się jak linia wymiarowa, potem numer → tytuł → podtytuł */
.motion .section__head { position: relative; border-top-color: transparent; }
.motion .section__head::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-dark); transform: scaleX(0); transform-origin: left;
  transition: transform 1.3s var(--m-io);
}
.motion .section__head.is-in::before { transform: scaleX(1); }
.motion .section__head > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s ease, transform 1s var(--m-out);
}
.motion .section__head.is-in > * { opacity: 1; transform: none; }
.motion .section__head.is-in > :nth-child(1) { transition-delay: .2s; }
.motion .section__head.is-in > :nth-child(3) { transition-delay: .55s; }
/* tytuł wysuwa się spod niewidocznej krawędzi */
.motion .section__head > .section__title {
  opacity: 1; clip-path: inset(100% -5% -25% -5%); transform: translateY(45%);
  transition: clip-path 1.1s var(--m-out) .3s, transform 1.1s var(--m-out) .3s;
}
.motion .section__head.is-in > .section__title { clip-path: inset(-25% -5% -25% -5%); transform: none; }

/* tło płynnie przechodzi biel ↔ jasna szarość zamiast twardej granicy sekcji */
.motion body { transition: background-color .9s ease; }
.motion .section--alt { background: transparent; }
.motion body.tone-alt { background: var(--bg-alt); }

/* ---------- 3. OFERTA — zdjęcia odsłaniane kurtyną + głębia ---------- */
.motion .offer__photo {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s var(--m-io);
}
.motion .offer__row--flip .offer__photo { clip-path: inset(0 0 0 100%); }
.motion .offer__row.is-in .offer__photo { clip-path: inset(0 0 0 0); }
.motion.parallax .offer__photo img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.1);
  will-change: transform;
}
.motion .offer__body > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform 1s var(--m-out);
}
.motion .offer__row.is-in .offer__body > * { opacity: 1; transform: none; }
.motion .offer__row.is-in .offer__body > :nth-child(1) { transition-delay: .35s; }
.motion .offer__row.is-in .offer__body > :nth-child(2) { transition-delay: .45s; }
.motion .offer__row.is-in .offer__body > :nth-child(3) { transition-delay: .55s; }
.motion .offer__row.is-in .offer__body > :nth-child(4) { transition-delay: .65s; }
.motion .offer__row.is-in .offer__body > :nth-child(5) { transition-delay: .75s; }
.motion .offer__row.is-in .offer__body > :nth-child(6) { transition-delay: .85s; }

/* ---------- 5. REALIZACJE — karty wjeżdżają kaskadą (także po zmianie filtra) ---------- */
.motion .gallery__card {
  opacity: 0; transform: translateX(56px);
  transition: opacity .7s ease, transform 1s var(--m-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .gallery.is-in .gallery__card { opacity: 1; transform: none; }
.motion .gallery.is-dragging .gallery__card { transition: none; }
/* głębia: zdjęcie lekko „pływa" w karcie przy przesuwaniu rzędu (--gx z motion.js) */
.motion .gallery__view img {
  transform: translate3d(var(--gx, 0px), 0, 0) scale(1.1);
  will-change: transform;
}
.motion .filters, .motion .gallery-bar {
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s ease .2s, transform 1s var(--m-out) .2s;
}
.motion .gallery-in .filters, .motion .gallery-in .gallery-bar { opacity: 1; transform: none; }

/* ---------- 6. PROCES — linia rysuje się przy przewijaniu, kroki „zapalają się" ---------- */
.motion .steps { position: relative; border-top-color: transparent; }
.motion .steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--line-dark); transform: scaleX(var(--p, 0)); transform-origin: left;
}
.motion .steps__item {
  opacity: .22; transform: translateY(14px);
  transition: opacity .7s ease, transform .9s var(--m-out);
}
.motion .steps__item.is-lit { opacity: 1; transform: none; }

/* ---------- KONTAKT ---------- */
.motion .contact__list li,
.motion .contact__map {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform 1s var(--m-out);
}
.motion .contact.is-in .contact__list li,
.motion .contact.is-in .contact__map { opacity: 1; transform: none; }
.motion .contact.is-in .contact__list li:nth-child(2) { transition-delay: .1s; }
.motion .contact.is-in .contact__list li:nth-child(3) { transition-delay: .2s; }
.motion .contact.is-in .contact__map { transition-delay: .3s; }

/* ---------- 7. MENU — pasek postępu, chowanie przy przewijaniu w dół ---------- */
.motion .nav { transition: transform .5s var(--m-out); }
.motion .nav.is-hidden { transform: translateY(-101%); }
.motion .nav::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  background: var(--ink); transform: scaleX(var(--sp, 0)); transform-origin: left;
  pointer-events: none;
}