/* Motion: split-line wrappers, will-change hints, reduced-motion safety net. */

/* Split-line wrapper — clip TYLKO osi Y żeby reveal działał,
 * ale długie wyrazy nie były ucinane poziomo (problem "automatyzacja Alleg"). */
.line {
  display: block;
  overflow-y: clip;
  overflow-x: visible;
  position: relative;
  /* Fallback dla starych Safari: padding-bottom by zarezerwować trochę miejsca na italic descender */
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}
.line__inner {
  display: inline-block;
  max-width: 100%;
  will-change: transform;
}
[data-cta-heading] .line__inner {
  max-width: none;
}

/* Hero word stagger */
.word {
  display: inline-block;
  margin-right: 0.18em;
  will-change: transform, opacity;
}

/* Bento card initial state — JS poustawia animacje */
[data-bento-card] { will-change: transform, opacity; }
[data-step] { will-change: transform, opacity; }
[data-plan] { will-change: transform, opacity; }
[data-trust] { will-change: transform, opacity; }
[data-faq-item] { will-change: transform, opacity; }
[data-hero-el] { will-change: transform, opacity; }
.hero__stat { will-change: transform, opacity; opacity: 0; }
[data-magnetic] { will-change: transform; }

/* Hero stage ready */
body[data-state="loading"] [data-hero-el] {
  opacity: 0;
  transform: translateY(28px);
}

/* Reduced motion — wszystko statyczne, zero animacji */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none !important; transform: none !important; }
  [data-hero-el], [data-bento-card], [data-step], [data-plan], [data-trust], [data-faq-item], .line__inner, .word {
    opacity: 1 !important;
    transform: none !important;
  }
  body[data-state="loading"] [data-hero-el] {
    opacity: 1 !important;
    transform: none !important;
  }
  .grain { display: none; }
}

/* ── Fallback „bez efektów" — gdy GSAP/ScrollTrigger (CDN) lub moduł 3D nie wstaną
   (częste w in-app browserach: Messenger, Facebook, Instagram). Bez tego elementy
   zostają w stanie sprzed animacji → tekst nachodzi na siebie, a 3D na tekst.
   Wymuszamy statyczny, czytelny układ (jak reduced-motion) i chowamy dekoracyjne 3D. */
body.no-fx { opacity: 1 !important; }
body.no-fx [data-hero-el],
body.no-fx [data-bento-card],
body.no-fx [data-step],
body.no-fx [data-plan],
body.no-fx [data-trust],
body.no-fx [data-faq-item],
body.no-fx [data-pro-reveal],
body.no-fx .line__inner,
body.no-fx .word,
body.no-fx .hero__stat {
  opacity: 1 !important;
  transform: none !important;
}
body.no-fx[data-state="loading"] [data-hero-el] { opacity: 1 !important; transform: none !important; }
body.no-fx #stage,
body.no-fx .grain { display: none !important; }