/* ps-portfolio-fx.css — warstwa efektow portfolio WWW (Pixel Studio, 12.09.2026, Claude). Ladowana przez ps-portfolio-fx.js.
   Specyficznosc jak bazowy arkusz: :is(#ps-pf-specificity,[data-px-portfolio]) ... */
:is(#ps-pf-specificity,[data-px-portfolio="hero"]){overflow:hidden}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-hero-art{position:absolute;inset:-6% -2% -10% -2%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;will-change:transform}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-hero-art img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block;filter:saturate(1.05) contrast(1.05);transform:scale(1.04);animation:pxArtBreath 26s ease-in-out infinite alternate}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-hero-art::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#060608f2 0%,#060608cc 22%,#06060866 50%,#06060833 76%,#06060873 100%),linear-gradient(180deg,#06060880 0%,transparent 26%,transparent 60%,#060608 100%)}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-hero-art::after{content:'';position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 30% 40%,#e5202026,transparent 55%);mix-blend-mode:screen;pointer-events:none}
:is(#ps-pf-specificity,[data-px-portfolio="hero"].px-art-ready) .px-hero-art{opacity:1}
:is(#ps-pf-specificity,[data-px-portfolio="hero"].px-art-ready) .px-hero-bg{opacity:.55}
:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-inner{position:relative;z-index:2}
@keyframes pxArtBreath{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.5%,-1%,0)}}

/* --- kadr hero: tilt + polysk + swiatlo pod kursorem --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-image-frame.px-tilt{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d;will-change:transform}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-image-frame.px-tilt:hover{box-shadow:0 40px 90px #000c,0 0 90px #e5202045,0 0 0 7px #ffffff05}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-image-frame.px-tilt::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff1f,transparent 42%);opacity:0;transition:opacity .35s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-image-frame.px-tilt:hover::after{opacity:1}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-shine{position:relative;overflow:hidden}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-shine::before{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:38%;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent,#ffffff14 45%,#ffffff26 50%,#ffffff14 55%,transparent);transform:skewX(-18deg);animation:pxShineSweep 9s ease-in-out infinite}
@keyframes pxShineSweep{0%,72%{left:-60%}94%,100%{left:160%}}

/* --- ikony w kartach "Jak dziala" --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico,:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico:last-child{padding:28px 30px 28px 92px;overflow:hidden}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-ico-wrap{position:absolute;left:24px;top:26px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#ff5a5a;background:linear-gradient(150deg,#e5202029,#e520200d);border:1px solid #e5202040;box-shadow:inset 0 1px 0 #ffffff14,0 8px 22px #e520201a;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,color .3s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-ico{width:26px;height:26px;display:block}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-ico path{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .15s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-in .px-ico path,html:not(.px-fx-on) .px-ico path,:is(#ps-pf-specificity,[data-px-portfolio]) :not(.px-rv) .px-ico path{stroke-dashoffset:0}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico:hover .px-ico-wrap{transform:translateY(-3px) rotate(-6deg) scale(1.06);box-shadow:0 12px 30px #e5202038,0 0 0 1px #e5202066;color:#ff7a7a}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico::after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#e5202022,transparent 62%);opacity:0;transition:opacity .5s;pointer-events:none}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico:hover::after{opacity:1}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico{transition:border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico:hover{border-color:#e5202055;transform:translateX(4px);box-shadow:inset 0 1px 0 #ffffff10,0 18px 40px #0005,0 0 32px #e520201c}
@media (max-width:700px){:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico,:is(#ps-pf-specificity,[data-px-portfolio]) .px-story-item.px-has-ico:last-child{padding:84px 25px 25px}:is(#ps-pf-specificity,[data-px-portfolio]) .px-ico-wrap{left:25px;top:24px}}

/* --- lista 01/02/03 z ikona --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-feat-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:#fde047;background:#fde04714;border:1px solid #fde04733}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-feat-ico .px-ico{width:22px;height:22px}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-feature-list li{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-feature-list li:hover{transform:translateY(-4px);border-color:#fde04740;box-shadow:inset 0 1px 0 #ffffff14,0 18px 40px #0005,0 0 28px #fde04714}

/* --- reveal on scroll --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-rv.px-in{opacity:1;transform:none}
:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-grid-hero > div.px-rv{transform:translate3d(0,18px,0)}
:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-grid-hero > div:last-child.px-rv{transform:translate3d(18px,0,0) scale(.98)}
:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-grid-hero > div.px-rv.px-in,:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-grid-hero > div:last-child.px-rv.px-in{transform:none}
@media (max-width:900px){:is(#ps-pf-specificity,[data-px-portfolio="hero"]) .px-grid-hero > div:last-child.px-rv{transform:translate3d(0,18px,0)}}

/* --- badge z pulsem, przyciski z polyskiem --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-badge{position:relative;padding-left:22px}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-badge::before{content:'';position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#e52020;box-shadow:0 0 0 0 #e5202099;animation:pxPulse 1.8s ease-out infinite}
@keyframes pxPulse{0%{box-shadow:0 0 0 0 #e5202099}100%{box-shadow:0 0 0 9px #e5202000}}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-btn{position:relative;overflow:hidden}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-btn::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:40%;background:linear-gradient(105deg,transparent,#ffffff33,transparent);transform:skewX(-20deg);transition:left .6s ease}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-btn:hover::after{left:130%}

/* --- karty "Inne realizacje" i CTA --- */
:is(#ps-pf-specificity,[data-px-portfolio]) .px-card{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px #0007,0 0 40px #e5202022;border-color:#e5202055}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-card-image{overflow:hidden}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-card-image img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-card:hover .px-card-image img{transform:scale(1.06)}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-contact-box h2{background:linear-gradient(100deg,#fff 0%,#fff 55%,#ffd1d1 70%,#fff 85%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:pxSheen 6s linear infinite}
:is(#ps-pf-specificity,[data-px-portfolio]) .px-contact-box h2 .px-red{-webkit-text-fill-color:#e52020}
@keyframes pxSheen{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  :is(#ps-pf-specificity,[data-px-portfolio]) .px-hero-art img,:is(#ps-pf-specificity,[data-px-portfolio]) .px-shine::before,:is(#ps-pf-specificity,[data-px-portfolio]) .px-badge::before,:is(#ps-pf-specificity,[data-px-portfolio]) .px-contact-box h2{animation:none}
  :is(#ps-pf-specificity,[data-px-portfolio]) .px-rv{opacity:1;transform:none;transition:none}
  :is(#ps-pf-specificity,[data-px-portfolio]) .px-ico path{stroke-dashoffset:0;transition:none}
}