/* pb-motion.css: animacje strony głównej (21.10.2026; recenzja 4 person, potem prośba Pawła:
   „wyraźniej, logo ma być widać”). Zasada: raz, bez zapętleń, bez migania.
   Działa tylko przy klasie html.pb-motion (ustawia ją mały skrypt w <head>, gdy użytkownik
   nie wyłączył ruchu w systemie), więc bez JS strona wygląda jak dotąd. */

/* 1. Logo: miękka fala „wpływa” w kanały znaku „B” i w napis, za każdym wejściem na stronę główną */
html.pb-motion .pb-nav__logo.pb-logo-intro img,
html.pb-motion .pb-nav__logo.pb-logo-hover img{
  -webkit-mask-image:linear-gradient(110deg,#000 42%,rgba(0,0,0,.25) 52%,transparent 62%);
          mask-image:linear-gradient(110deg,#000 42%,rgba(0,0,0,.25) 52%,transparent 62%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
html.pb-motion .pb-nav__logo.pb-logo-intro img{animation:pb-logo-flow 1.6s cubic-bezier(.45,0,.2,1) .15s both}
html.pb-motion .pb-nav__logo.pb-logo-hover img{animation:pb-logo-flow 1s cubic-bezier(.45,0,.2,1) both}
@keyframes pb-logo-flow{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to  {-webkit-mask-position:0 0;mask-position:0 0}
}

/* 2. Hero: kolejne wejście. Nagłówek i opis tylko się przesuwają (bez krycia), żeby nie opóźniać LCP */
html.pb-motion .pb-hero__content > *{animation:pb-rise .8s cubic-bezier(.22,1,.36,1) both}
html.pb-motion .pb-hero__content > .pb-hero__h1,
html.pb-motion .pb-hero__content > .pb-hero__sub{animation-name:pb-rise-t}
html.pb-motion .pb-hero__content > :nth-child(1){animation-delay:.25s}
html.pb-motion .pb-hero__content > :nth-child(2){animation-delay:.35s}
html.pb-motion .pb-hero__content > :nth-child(3){animation-delay:.50s}
html.pb-motion .pb-hero__content > :nth-child(4){animation-delay:.65s}
html.pb-motion .pb-hero__content > :nth-child(5){animation-delay:.80s}
html.pb-motion .pb-hero__photo-col{animation:pb-fade 1.4s ease-out .3s both}
@keyframes pb-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pb-rise-t{from{transform:translateY(26px)}to{transform:none}}
@keyframes pb-fade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* 2a. Słowo „przewidywalności”: pomarańczowa kreska dorysowuje się pod nim raz */
html.pb-motion .pb-hero__h1 span{position:relative;display:inline-block}
html.pb-motion .pb-hero__h1 span::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.08em;
  min-height:3px;background:#F36C1A;border-radius:2px;transform:scaleX(0);transform-origin:left center;
  animation:pb-underline .9s cubic-bezier(.65,0,.35,1) 1.05s forwards}
@keyframes pb-underline{to{transform:scaleX(1)}}

/* 2b. Siatka w tle hero powoli się pojawia */
html.pb-motion .pb-hero__grid-lines{animation:pb-grid 2.2s ease-out both}
@keyframes pb-grid{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}

/* 3. Sekcje niżej: wejście przy przewijaniu */
html.pb-motion .pb-fade-in{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
html.pb-motion .pb-fade-in.pb-visible{opacity:1;transform:none}
@media (max-width:768px){html.pb-motion .pb-fade-in{transform:translateY(16px);transition-duration:.55s}}

/* 4. Licznik w hero: cyfry o stałej szerokości */
html.pb-motion .pb-hero__stat-num{font-variant-numeric:tabular-nums}

/* 5. Karty: uniesienie pod kursorem (tylko myszka) */
@media (hover:hover) and (pointer:fine){
  html.pb-motion .pb-service-card,html.pb-motion .pb-problem-card,html.pb-motion .pb-testimonial-card{
    transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
  html.pb-motion .pb-service-card:hover,html.pb-motion .pb-problem-card:hover,html.pb-motion .pb-testimonial-card:hover{
    transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.28);border-color:rgba(243,108,26,.45)}
}

@media print{html.pb-motion .pb-fade-in{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
  html.pb-motion *,html.pb-motion *::after{animation:none!important;transition:none!important}
  html.pb-motion .pb-fade-in{opacity:1;transform:none}
  html.pb-motion .pb-hero__h1 span::after{transform:scaleX(1)}
  html.pb-motion .pb-nav__logo img{opacity:1!important;-webkit-mask:none!important;mask:none!important}
}

/* 6. Logo czeka na intro (klasę ustawia skrypt w <head>); bezpiecznik odsłania je po 1,5 s, gdyby JS nie ruszył */
html.pb-motion.pb-logo-pending .pb-nav__logo img{opacity:0;animation:pb-unhide 0s linear 1.5s forwards}
@keyframes pb-unhide{to{opacity:1}}