/* GO Push IT — propozycja ruchu B „Seria”: dynamicznie i sportowo.
   Nagłówki odsłania skośne cięcie (motyw ukośnika z logo), kafle wskakują
   seriami, ekrany w telefonach przesuwają się jak relacje z paskami postępu,
   skaner zapala mięśnie od góry do dołu, w tle sunące skosy w turkusie.
   Ładowane po web04.css; bez JS i przy ograniczeniu ruchu = statyczna strona. */

/* Ekrany w telefonach hero: przesunięcie jak w relacjach */
.ruch-screens{position:relative;aspect-ratio:390/844;border-radius:23px;overflow:hidden;background:var(--gpi-bg)}
.wow-phone .ruch-screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0;transform:translateX(102%);transition:transform .65s cubic-bezier(.7,0,.2,1)}
.wow-phone .ruch-screens img.is-on{transform:none}
.wow-phone .ruch-screens img.was-on{transform:translateX(-102%)}
.ruch-story{position:absolute;left:12px;right:12px;top:22px;z-index:4;display:flex;gap:4px;pointer-events:none}
.ruch-story i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--gpi-on-dark) 25%,transparent);overflow:hidden}
.ruch-story i:before{content:'';display:block;height:100%;width:100%;background:var(--gpi-primary);transform:scaleX(0);transform-origin:left}
.ruch-story i.done:before{transform:none}
.ruch-story i.is-on:before{animation:ruch-pasek var(--ruch-takt,3.4s) linear forwards}
@keyframes ruch-pasek{to{transform:none}}

/* Hero: wlot telefonów i przechył za kursorem */
@media(prefers-reduced-motion:no-preference){
  .ruch-on .hero-stage .phone-one{animation:ruch-wlot-a 1.1s cubic-bezier(.2,.9,.25,1.15) both,phone-float-a 7s ease-in-out 1.1s infinite}
  .ruch-on .hero-stage .phone-two{animation:ruch-wlot-b 1.2s cubic-bezier(.2,.9,.25,1.15) .12s both,phone-float-b 8s ease-in-out 1.3s infinite}
  .ruch-on .arena-slash{animation:ruch-ciecie 7s cubic-bezier(.7,0,.3,1) 1.2s infinite}
}
@keyframes ruch-wlot-a{from{opacity:0;transform:rotateY(55deg) rotateZ(-22deg) translateY(160px)}}
@keyframes ruch-wlot-b{from{opacity:0;transform:rotateY(-55deg) rotateZ(24deg) translateY(200px)}}
@keyframes ruch-ciecie{0%{translate:-55vw 0;opacity:0}12%{opacity:.75}30%{translate:55vw 0;opacity:0}100%{translate:55vw 0;opacity:0}}
.ruch-tilt .hero-layout{perspective:1600px}
.ruch-tilt .hero-stage{transition:rotate .5s cubic-bezier(.2,.8,.2,1)}

/* Wejścia sekcji: cięcie po skosie na nagłówkach, kafle wskakują seriami */
.ruch-on .p4-head h2{clip-path:polygon(-2% -15%,-2% -15%,-14% 115%,-14% 115%);transition:clip-path .85s cubic-bezier(.7,0,.2,1) .1s}
.ruch-on .ruch-widoczne .p4-head h2{clip-path:polygon(-2% -15%,115% -15%,103% 115%,-14% 115%)}
.ruch-on .p4-head>div{position:relative}
.ruch-on .p4-head>div:after{content:'';position:absolute;left:0;bottom:6px;width:46px;height:calc(100% - 26px);background:var(--gpi-primary);transform:skewX(-20deg) scaleX(0);transform-origin:left;opacity:0;pointer-events:none}
.ruch-on .ruch-widoczne .p4-head>div:after{animation:ruch-ukosnik .95s cubic-bezier(.7,0,.2,1) .05s}
.p4-light .p4-head>div:after{background:var(--gpi-primary)}
@keyframes ruch-ukosnik{0%{opacity:1;transform:skewX(-20deg) scaleX(0)}45%{opacity:1;transform:skewX(-20deg) scaleX(1);left:0;width:100%}100%{opacity:0;transform:skewX(-20deg) scaleX(1);left:100%;width:0}}
.ruch-on .ruch-item{opacity:0;transform:translateY(30px) scale(.94) rotate(-1.4deg);transition:opacity .45s ease-out,transform .7s cubic-bezier(.34,1.5,.5,1);transition-delay:calc(var(--ruch-i,0) * 45ms + .2s)}
.ruch-on .ruch-widoczne .ruch-item{opacity:1;transform:none}
.ruch-on .p4-num{display:inline-block;transform:translateX(-24px) skewX(-18deg);opacity:0;transition:transform .6s cubic-bezier(.34,1.5,.5,1),opacity .4s;transition-delay:calc(var(--ruch-i,0) * 45ms + .45s)}
.ruch-on .ruch-widoczne .p4-num{transform:none;opacity:1}

/* Tło: sunące skosy w turkusie w ciemnych sekcjach */
body.p4 main>.p4-section:not(.p4-light){position:relative;isolation:isolate;overflow:clip}
body.p4 main>.p4-section:not(.p4-light):before{content:'';position:absolute;inset:-160px;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,transparent 0 46%,color-mix(in srgb,var(--gpi-primary) 5%,transparent) 46% 54%,transparent 54%) 0 0/160px 160px;
  mask-image:radial-gradient(80% 70% at 85% 15%,#000,transparent 75%);
  animation:ruch-skosy 14s linear infinite}
body.p4 main>.p4-section:nth-of-type(even):before{mask-image:radial-gradient(80% 70% at 12% 85%,#000,transparent 75%);animation-direction:reverse}
@keyframes ruch-skosy{to{transform:translate3d(160px,0,0)}}

/* Mapa mięśni: skaner odsłania kolor i zapala partie od góry do dołu */
.p4-atlas{position:relative}
.ruch-cialo{position:relative;display:block;width:min(220px,44%)}
.p4-atlas .ruch-cialo img{width:100%}
.ruch-svg{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1) contrast(.9);clip-path:inset(0 0 0 0)}
.ruch-odslona .ruch-svg{clip-path:inset(100% 0 0 0);transition:clip-path var(--ruch-skan,1.9s) linear}
.ruch-kolor .ruch-svg{filter:none;clip-path:none;transition:none}
.ruch-svg [data-grupa] path{transition:stroke-width .45s ease-out,stroke-opacity .45s ease-out}
.ruch-svg .flash path[stroke]{stroke:var(--gpi-primary);stroke-opacity:1;stroke-width:7;transition-duration:.12s}
.ruch-skan{position:absolute;left:-4%;right:-4%;top:0;height:100%;pointer-events:none;z-index:3;transform:translateY(0);opacity:0}
.ruch-skan:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--gpi-primary);box-shadow:0 0 18px 4px color-mix(in srgb,var(--gpi-primary) 67%,transparent)}
.ruch-skanuje .ruch-skan{opacity:1;transform:translateY(100%);transition:transform var(--ruch-skan,1.9s) linear}
.p4-legend span{transition:transform .5s cubic-bezier(.34,1.6,.5,1),opacity .4s}
.ruch-on .p4-atlas:not(.ruch-kolor) .p4-legend span{opacity:0;transform:translateY(10px) scale(.8)}
.p4-legend span:nth-child(2){transition-delay:.12s}.p4-legend span:nth-child(3){transition-delay:.24s}

.motion-paused .ruch-item,.motion-paused .p4-num,.motion-paused .p4-head h2,.motion-paused .p4-legend span{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
.motion-paused .ruch-svg{filter:none;clip-path:none}
.motion-paused .ruch-skan{display:none}

@media(max-width:600px){.ruch-screens{border-radius:18px}.ruch-story{left:9px;right:9px;top:16px;gap:3px}.ruch-story i{height:2px}}
@media(prefers-reduced-motion:reduce){
  body.p4 main>.p4-section:not(.p4-light):before{animation:none}
  .ruch-item,.p4-num,.p4-head h2,.p4-legend span{opacity:1!important;transform:none!important;clip-path:none!important}
  .ruch-svg{filter:none;clip-path:none}.ruch-skan,.ruch-story{display:none}
}