/* Pasek postępu przewijania */
.sp{position:fixed;top:0;left:0;right:0;height:2px;background:var(--fuksja);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* Nagłówek po przewinięciu */
header{transition:box-shadow .35s ease}
header .w{transition:height .35s ease}
header.scrolled{box-shadow:0 8px 28px rgba(28,28,30,.08)}
@media (min-width:621px){header.scrolled .w{height:68px}}

/* Wejście hero */
html.js .hero .in > *{opacity:0;animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) forwards}
html.js .hero .in > *:nth-child(1){animation-delay:.15s}
html.js .hero .in > *:nth-child(2){animation-delay:.3s}
html.js .hero .in > *:nth-child(3){animation-delay:.45s}
html.js .hero .in > *:nth-child(4){animation-delay:.6s}
html.js .hero .in > *:nth-child(5){animation-delay:.75s}
html.js .hero .bg{animation:kb 2.8s cubic-bezier(.2,.7,.2,1) both;will-change:transform}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}

/* Odsłanianie przy przewijaniu */
html.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-bar{opacity:1;transform:none;width:0;transition:width 1s cubic-bezier(.7,0,.2,1) .25s}
html.js .rv-bar.in{width:48px}
html.js .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0ms)}
html.js .rv-img.in{clip-path:inset(0 0 0 0)}

/* Delikatne uniesienie kart po najechaniu */
@media (hover:hover){
 .card,.prob,.gr article,.vals3 > div,.mini > div,.story{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
 .card:hover,.prob:hover,.gr article:hover,.vals3 > div:hover,.mini > div:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(28,28,30,.10)}
 html.js .rv.in.card:hover,html.js .rv.in.prob:hover,html.js .rv.in.gr-a:hover{transform:translateY(-6px)}
 .btn{transition:background .2s,color .2s,transform .25s ease,box-shadow .25s ease}
 .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(28,28,30,.14)}
 .mg figure{overflow:hidden}
 .mg img,.story img,.pic{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
 .mg figure:hover img{transform:scale(1.04)}
}

@media (prefers-reduced-motion:reduce){
 html.js .rv,html.js .rv-img,html.js .rv-bar{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 html.js .rv-bar{width:48px!important}
 html.js .hero .in > *,html.js .hero .bg{animation:none!important;opacity:1!important}
 .sp{display:none}
}