/* Studio: tło i animacje (fx.php). Warstwa efektu to ::before (i ::after dla ziarna) z z-index:-1 w izolowanym bloku,
   więc leży nad tłem bloku i tłem sekcji Kubio (.background-wrapper), a pod treścią. */
.studio-fx-bg,.studio-fx-grain{position:relative;isolation:isolate}.studio-fx-bg>.background-wrapper,.studio-fx-grain>.background-wrapper{z-index:-2}
.studio-fx-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:var(--sfx-opacity,1)}
.studio-fx-grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:var(--sfx-grain,.12);mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}

.studio-fx-bg-gradient::before{background:linear-gradient(var(--sfx-angle,120deg),var(--sfx-c1),var(--sfx-c2),var(--sfx-c3),var(--sfx-c1));background-size:300% 300%;animation:sfx-gradient var(--sfx-speed,12s) ease-in-out infinite}
.studio-fx-bg-aurora::before{background:radial-gradient(closest-side,var(--sfx-c1) 25%,transparent) 0 0/80% 90% no-repeat,radial-gradient(closest-side,var(--sfx-c2) 25%,transparent) 100% 0/70% 85% no-repeat,radial-gradient(closest-side,var(--sfx-c3) 25%,transparent) 50% 100%/90% 80% no-repeat;filter:blur(32px) saturate(1.2);clip-path:inset(0);animation:sfx-aurora var(--sfx-speed,12s) ease-in-out infinite alternate}
.studio-fx-bg-mesh::before{background:radial-gradient(at 0% 0%,var(--sfx-c1) 0,transparent 55%),radial-gradient(at 100% 0%,var(--sfx-c2) 0,transparent 55%),radial-gradient(at 100% 100%,var(--sfx-c3) 0,transparent 55%),radial-gradient(at 0% 100%,var(--sfx-c2) 0,transparent 55%)}
.studio-fx-bg-grid::before{background-image:linear-gradient(color-mix(in srgb,var(--sfx-c1) 40%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--sfx-c1) 40%,transparent) 1px,transparent 1px);background-size:var(--sfx-size,32px) var(--sfx-size,32px);-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);animation:sfx-drift var(--sfx-speed,12s) linear infinite}
.studio-fx-bg-dots::before,.studio-fx-bg-particles::before{background-image:radial-gradient(color-mix(in srgb,var(--sfx-c1) 55%,transparent) 1.4px,transparent 1.9px);background-size:var(--sfx-size,32px) var(--sfx-size,32px);-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 80%);animation:sfx-drift var(--sfx-speed,12s) linear infinite}
.studio-fx-bg-waves::before{top:auto;height:min(160px,45%);background:var(--sfx-c1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 0 300 60T600 60T900 60T1200 60V120H0Z'/%3E%3C/svg%3E") 0 100%/1200px 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60Q150 0 300 60T600 60T900 60T1200 60V120H0Z'/%3E%3C/svg%3E") 0 100%/1200px 100% repeat-x;animation:sfx-waves var(--sfx-speed,12s) linear infinite}
.studio-fx-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;border-radius:inherit;opacity:var(--sfx-opacity,1)}
.studio-fx-active .studio-fx-bg-particles::before{display:none}

@keyframes sfx-gradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sfx-aurora{0%{background-position:0% 0%,100% 0%,50% 100%}33%{background-position:60% 30%,20% 60%,90% 40%}66%{background-position:30% 90%,70% 20%,10% 30%}100%{background-position:100% 50%,0% 100%,60% 0%}}
@keyframes sfx-drift{to{background-position:var(--sfx-size,32px) var(--sfx-size,32px)}}
@keyframes sfx-waves{to{-webkit-mask-position:1200px 100%;mask-position:1200px 100%}}

/* Pojawianie przy przewijaniu: ukryte tylko gdy działa skrypt (klasa z wp_head), stan końcowy = zwykły wygląd bloku. */
.studio-fx-js .studio-fx-reveal:not(.is-revealed){opacity:0}
.studio-fx-reveal.is-revealed{animation-duration:var(--sfx-duration,900ms);animation-delay:var(--sfx-delay,0ms);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:backwards}
.studio-fx-reveal-fade-up.is-revealed{animation-name:sfx-fade-up}.studio-fx-reveal-fade-down.is-revealed{animation-name:sfx-fade-down}.studio-fx-reveal-fade-left.is-revealed{animation-name:sfx-fade-left}.studio-fx-reveal-fade-right.is-revealed{animation-name:sfx-fade-right}.studio-fx-reveal-zoom-in.is-revealed{animation-name:sfx-zoom-in}.studio-fx-reveal-zoom-out.is-revealed{animation-name:sfx-zoom-out}.studio-fx-reveal-blur-in.is-revealed{animation-name:sfx-blur-in}.studio-fx-reveal-clip-up.is-revealed{animation-name:sfx-clip-up}.studio-fx-reveal-flip-up.is-revealed{animation-name:sfx-flip-up}
@keyframes sfx-fade-up{from{opacity:0;transform:translateY(42px)}}@keyframes sfx-fade-down{from{opacity:0;transform:translateY(-42px)}}@keyframes sfx-fade-left{from{opacity:0;transform:translateX(42px)}}@keyframes sfx-fade-right{from{opacity:0;transform:translateX(-42px)}}@keyframes sfx-zoom-in{from{opacity:0;transform:scale(.88)}}@keyframes sfx-zoom-out{from{opacity:0;transform:scale(1.12)}}@keyframes sfx-blur-in{from{opacity:0;filter:blur(16px)}}@keyframes sfx-clip-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes sfx-flip-up{from{opacity:0;transform:perspective(900px) rotateX(22deg) translateY(30px)}}

/* Ruch przy przewijaniu: osobne właściwości translate/rotate/scale, żeby nie gryzły się z transform z innych efektów. */
.studio-fx-scroll{translate:0 var(--sfx-ty,0px);rotate:var(--sfx-rot,0deg);scale:var(--sfx-sc,1)}

.studio-fx-js .studio-fx-loop-float{animation:sfx-float var(--sfx-loop,6s) ease-in-out infinite}.studio-fx-js .studio-fx-loop-pulse{animation:sfx-pulse var(--sfx-loop,6s) ease-in-out infinite}.studio-fx-js .studio-fx-loop-sway{animation:sfx-sway var(--sfx-loop,6s) ease-in-out infinite}.studio-fx-js .studio-fx-loop-spin{animation:sfx-spin var(--sfx-loop,6s) linear infinite}
@keyframes sfx-float{50%{translate:0 -14px}}@keyframes sfx-pulse{50%{scale:1.045}}@keyframes sfx-sway{25%{rotate:2.5deg}75%{rotate:-2.5deg}}@keyframes sfx-spin{to{rotate:360deg}}

.studio-fx-js [class*="studio-fx-hover-"]{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.studio-fx-js .studio-fx-hover-lift:hover{transform:translateY(-8px);box-shadow:0 24px 54px rgba(15,23,42,.18)}
.studio-fx-js .studio-fx-hover-grow:hover{transform:scale(1.035)}
.studio-fx-js .studio-fx-hover-glow:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--sfx-c1) 60%,transparent),0 18px 60px color-mix(in srgb,var(--sfx-c1) 45%,transparent)}
.studio-fx-js .studio-fx-hover-tilt{transform:perspective(900px) rotateX(var(--sfx-tilt-x,0deg)) rotateY(var(--sfx-tilt-y,0deg));transition:transform .18s ease-out}

@media(prefers-reduced-motion:reduce){.studio-fx-bg::before{animation:none!important}.studio-fx-reveal{animation:none!important;opacity:1!important}.studio-fx-scroll{translate:none!important;rotate:none!important;scale:none!important}[class*="studio-fx-loop-"]{animation:none!important}.studio-fx-js .studio-fx-hover-tilt{transform:none!important}}