/* =========================================================================
   MDA MOTION v1.3 (2026-07-14)
   Scroll reveal + abstrakcyjne ksztalty parallax (site-wide, z oferta wlacznie).
   Zasieg: wszystkie strony front-endu (Code Snippet #58).
   - animowane wylacznie transform + opacity (compositor-only)
   - reguly ukrywajace dzialaja TYLKO gdy <html> ma klase .js-motion
   - prefers-reduced-motion: reduce -> pelny statyczny uklad
   UZYCIE NA KOLEJNYCH SEKCJACH:
   - Ksztalty parallax: JS wstrzykuje je do hero home/oferta/kontakt/archiwum;
     dowolna inna sekcja: dodaj klase .mda-parallax-host (position:relative
     i overflow:hidden po stronie sekcji).
   - Ken Burns (nieaktywny, mechanizm zostaje): klasa .mda-kb-bg na sekcji
     z obrazem tla w ::before.
   - Reveal: klasa .mda-reveal TYLKO na sekcjach PONIZEJ pierwszego ekranu.
     NIGDY na hero, pierwszym ekranie ani elemencie LCP.
   ========================================================================= */

/* --- 1. KEN BURNS (od v1.3 bez aktywnych bindingow; hak .mda-kb-bg zostaje) */

@keyframes mdaKenBurns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(1.2%, -0.8%, 0); }
}

/* CELOWO BEZ gate .js-motion: Ken Burns niczego nie ukrywa (pure CSS). */
.mda-kb-bg::before {
  animation: mdaKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* Oferta (page 5377): zdjecie tla hero pochodzi z inline CSS w tresci strony
   (#granat .hero::before: gradient + praca-nad-wnioskiem-...webp). Od v1.3
   wylaczone nadpisaniem (wyzsza specyficznosc); hero zostaje na tle #001326
   z siatka i dryfem, ksztalty parallax wstrzykuje JS jak na innych stronach. */
body.page-id-5377 #granat .hero::before {
  background: none;
  animation: none;
}

/* --- 1b. ABSTRAKCYJNE KSZTALTY (v1.2): parallax w tle hero --------------- */
/* Ksztalty wstrzykuje JS (aria-hidden, z-index:0, pod trescia na z-index:1).
   Ruch: translate3d zalezny od scrollY (requestAnimationFrame, passive).
   Paleta zgodna z systemem granat: zielen rgba(59,220,107,*) + biel. */

.mda-shape {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}
.mda-shape--glow {
  background: radial-gradient(circle, rgba(59,220,107,.16), rgba(59,220,107,0) 65%);
}
.mda-shape--ring {
  border: 1px solid rgba(59,220,107,.22);
  background: radial-gradient(circle, rgba(59,220,107,.05), rgba(59,220,107,0) 60%);
}
.mda-shape--soft {
  background: radial-gradient(circle, rgba(255,255,255,.07), rgba(255,255,255,0) 62%);
}

/* Hero na home nie ma overflow:hidden; ksztalty wystaja poza sekcje bez tego. */
body.home #granat .hero {
  overflow: hidden;
}

/* --- 2. SCROLL REVEAL ----------------------------------------------------- */
/* Ukrycie wylacznie pod .js-motion (anti-FOUC, progressive enhancement).
   JS dodaje .in przy wejsciu w viewport (IntersectionObserver,
   threshold .15, rootMargin -8% dol, unobserve po ujawnieniu).
   Safety net 800 ms w <head> zdejmuje .js-motion, gdy JS sie spozni. */

html.js-motion .mda-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}

html.js-motion .mda-reveal.in {
  opacity: 1;
  transform: none;
}

/* --- 3. DOSTEPNOSC -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mda-kb-bg::before {
    animation: none;
    will-change: auto;
  }
  .mda-shape {
    will-change: auto;
  }
  html.js-motion .mda-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}