/* Animations 2026-05-23 — wyciagniete z inline <style> w index.html */

/* ─── nj-hover-tabs-2026-05-23 ─── */
/* Warstwy canvas/video w .tech-visual-wrap — cross-fade */
.tech-visual-wrap{position:relative;overflow:hidden}
.tech-visual-wrap .tv-layer{
 position:absolute;inset:0;width:100%;height:100%;
 opacity:0;transform:scale(1.02);
 transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
 pointer-events:none;display:block;
}
.tech-visual-wrap .tv-layer.tv-layer-active{opacity:1;transform:scale(1)}
#nj-video{object-fit:cover;background:#060A0E}

/* OVERRIDE .me-overlay-badge — pozycja po korektach (1cm w dol, 0.5cm w prawo wzgledem v2) */
.me-overlay-badge{
 top:-19px !important;
 left:-76px !important;
}
.me-overlay-logo{height:48px !important}

/* Klon .me-overlay-badge dla NinjaOne — pozycja po korektach (1cm w dol, 0.5cm w lewo wzgledem v2) */
.nj-overlay-badge{
 position:absolute;top:-19px;right:-76px;
 background:rgba(6,6,6,0.95);backdrop-filter:blur(10px);
 border:1px solid rgba(255,255,255,0.12);border-radius:var(--r12);
 padding:12px 16px;
 z-index:4;pointer-events:auto;cursor:pointer;
 box-shadow:0 8px 32px rgba(0,0,0,0.4);
 transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease,background .35s ease;
 will-change:transform;
}
.nj-overlay-badge:hover{
 background:#ffffff;
 border-color:rgba(0,154,89,0.70);
 box-shadow:0 12px 40px rgba(0,0,0,0.55),0 0 22px rgba(0,154,89,0.32),0 0 48px rgba(0,154,89,0.18);
 transform:translateY(-2px);
}
.nj-overlay-logo{
 height:48px;width:auto;display:block;
 filter:brightness(0) invert(1);
 transition:filter .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.nj-overlay-badge:hover .nj-overlay-logo{filter:none;transform:scale(1.08)}

/* MOBILE — na mniejszych ekranach mniejsze przesunięcia, żeby loga nie wypadały poza viewport */
@media (max-width:768px){
 .me-overlay-badge{top:-12px !important;left:-10px !important}
 .nj-overlay-badge{top:-12px;right:-10px}
 .me-overlay-logo,.nj-overlay-logo{height:40px !important}
}

@media (prefers-reduced-motion: reduce){
 .tech-visual-wrap .tv-layer{transition:opacity .15s linear;transform:none!important}
 .nj-overlay-badge,.nj-overlay-logo{transition:none}
}

/* ─── breaks-bg-static-2026-05-23 ─── */
/* STATYCZNE TLO sekcji "Co sie psuje" — slide-5-team (zlote linie) + Ken Burns parallax + hue-rotate */
.breaks-section.has-bg-static{position:relative;overflow:hidden;isolation:isolate}
.breaks-section.has-bg-static .section-inner{position:relative;z-index:2}
.breaks-bg-static{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.breaks-bg-image{
 position:absolute;inset:-15%;
 background:url('/assets/images/home-slide-5-team.webp') center center/cover no-repeat;
 will-change:transform,filter;
 transform-origin:center;
 animation:breaksWaveMove 22s ease-in-out infinite, breaksWaveScale 14s ease-in-out infinite alternate, breaksWaveRotate 38s ease-in-out infinite, breaksHueShift 18s linear infinite;
}
@keyframes breaksWaveMove{
 0%{translate:0 0}
 12%{translate:3% -2%}
 25%{translate:5% 1.5%}
 37%{translate:2% 4%}
 50%{translate:-2% 3%}
 62%{translate:-5% -1%}
 75%{translate:-3% -4%}
 87%{translate:1% -3%}
 100%{translate:0 0}
}
@keyframes breaksWaveScale{
 0%{scale:1.08}
 100%{scale:1.22}
}
@keyframes breaksWaveRotate{
 0%{rotate:0deg}
 50%{rotate:1.5deg}
 100%{rotate:0deg}
}
@keyframes breaksHueShift{
 0%{filter:hue-rotate(0deg) saturate(1.05)}
 50%{filter:hue-rotate(50deg) saturate(1.15)}
 100%{filter:hue-rotate(0deg) saturate(1.05)}
}
.breaks-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(6,6,6,0.78) 0%,rgba(6,6,6,0.55) 50%,rgba(6,6,6,0.88) 100%)}
@media(prefers-reduced-motion:reduce){
 .breaks-bg-image{animation:none}
}

/* ─── breaks-bg-slider-OLD-DISABLED-2026-05-23 ─── */
/* BG SLIDER w sekcji "Co sie psuje" — tło animowane + ciemna nakładka + zielony akcent */
.breaks-section.has-bg-slider{position:relative;overflow:hidden}
.breaks-section.has-bg-slider .section-inner{position:relative;z-index:2}
.breaks-bg-slider{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.breaks-bg-slide{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease;background-size:cover;background-position:center;will-change:opacity}
.breaks-bg-slide.active{opacity:1}
.breaks-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,0.86) 0%,rgba(6,6,6,0.78) 50%,rgba(6,6,6,0.92) 100%);z-index:1}
.breaks-bg-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;pointer-events:auto}
.breaks-bg-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.22);border:none;cursor:pointer;transition:background .3s,transform .3s;padding:0}
.breaks-bg-dot.active{background:#02C173;transform:scale(1.35);box-shadow:0 0 12px rgba(2,193,115,0.5)}
.breaks-bg-dot:hover{background:rgba(2,193,115,0.6)}
@media(prefers-reduced-motion:reduce){
 .breaks-bg-slide{transition:opacity .2s linear}
}

/* ─── failures-marquee-2026-05-23 ─── */
/* MARQUEE jako TŁO sekcji failures (Rotech brand green) — teksty/karty na wierzchu */
.failures.has-marquee-bg{position:relative;overflow:hidden}
.failures.has-marquee-bg .section-inner{position:relative;z-index:2}
.failures-marquee{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:24px 0}
.failures-marquee-rows{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;gap:0}
.failures-marquee-container{overflow:hidden;height:80px;display:flex;align-items:center;position:relative;flex-shrink:0}
.failures-marquee-container::before,.failures-marquee-container::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none}
.failures-marquee-container::before{left:0;background:linear-gradient(to right,#060606,transparent)}
.failures-marquee-container::after{right:0;background:linear-gradient(to left,#060606,transparent)}
.failures-marquee-track{display:flex;gap:10px;align-items:center;will-change:transform}
.failures-marquee-track.go-left{animation:famLeft 35s linear infinite}
.failures-marquee-track.go-right{animation:famRight 42s linear infinite}
.failures-marquee-track.go-left-slow{animation:famLeft 52s linear infinite}
.failures-marquee-track.go-right-slow{animation:famRight 58s linear infinite}
/* Rzedy 4-8 ukryte gdy sekcja zwinieta. Pokazuje sie gdy .failures-marquee.expanded */
.failures-marquee-rows > .failures-marquee-container:nth-child(n+4){display:none}
.failures-marquee.expanded .failures-marquee-rows > .failures-marquee-container:nth-child(n+4){display:flex}
@keyframes famLeft{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes famRight{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
.failures-marquee .icon-box{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:110px;height:68px;border-radius:12px;background:#0d0d0d;border:1px solid rgba(255,255,255,0.08);font-size:10px;font-weight:700;color:rgba(255,255,255,0.65);position:relative;overflow:hidden;transition:border-color .3s,color .3s}
.failures-marquee .icon-box svg{transition:stroke .3s}
.failures-marquee .icon-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(2,193,115,0.20) 0%,transparent 70%);opacity:0;transition:opacity .3s}
.failures-marquee .icon-box.active{border-color:rgba(2,193,115,0.4);color:#fff}
.failures-marquee .icon-box.active::before{opacity:1}
.failures-marquee .icon-box.active svg{stroke:#7EFFD4}
.failures-marquee-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to bottom,rgba(6,6,6,0.82) 0%,rgba(6,6,6,0.65) 50%,rgba(6,6,6,0.85) 100%);backdrop-filter:blur(0.5px)}
@media(prefers-reduced-motion:reduce){
 .failures-marquee-track{animation:none}
}

/* ─── roi-marquee-2026-05-23 ─── */
/* MARQUEE jako TŁO sekcji ROI Kalkulator — ikony pieniedzy/SLA/VIP */
.roi.has-marquee-bg-roi{position:relative;overflow:hidden}
.roi.has-marquee-bg-roi .section-inner{position:relative;z-index:2}
.roi-marquee{position:absolute;inset:0;z-index:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.roi-marquee-rows{display:flex;flex-direction:column;gap:32px;width:100%}
.roi-marquee-container{overflow:hidden;height:80px;display:flex;align-items:center;position:relative}
.roi-marquee-container::before,.roi-marquee-container::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none}
.roi-marquee-container::before{left:0;background:linear-gradient(to right,#060606,transparent)}
.roi-marquee-container::after{right:0;background:linear-gradient(to left,#060606,transparent)}
.roi-marquee-track{display:flex;gap:10px;align-items:center;will-change:transform}
.roi-marquee-track.go-left{animation:roiMarqLeft 38s linear infinite}
.roi-marquee-track.go-right{animation:roiMarqRight 45s linear infinite}
.roi-marquee-track.go-left-slow{animation:roiMarqLeft 56s linear infinite}
.roi-marquee-track.go-right-slow{animation:roiMarqRight 62s linear infinite}
@keyframes roiMarqLeft{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes roiMarqRight{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
.roi-marquee .icon-box{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:110px;height:68px;border-radius:12px;background:#0d0d0d;border:1px solid rgba(255,255,255,0.08);font-size:10px;font-weight:700;color:rgba(255,255,255,0.65);position:relative;overflow:hidden;transition:border-color .3s,color .3s}
.roi-marquee .icon-box svg{transition:stroke .3s}
.roi-marquee .icon-box::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(2,193,115,0.20) 0%,transparent 70%);opacity:0;transition:opacity .3s}
.roi-marquee .icon-box.active{border-color:rgba(2,193,115,0.4);color:#fff}
.roi-marquee .icon-box.active::before{opacity:1}
.roi-marquee .icon-box.active svg{stroke:#7EFFD4}
.roi-marquee-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to bottom,rgba(6,6,6,0.82) 0%,rgba(6,6,6,0.65) 50%,rgba(6,6,6,0.85) 100%)}
@media(prefers-reduced-motion:reduce){
 .roi-marquee-track{animation:none}
}

/* ─── svc-card-clickable-2026-05-23 ─── */
.svc-card{cursor:pointer}
.svc-card:focus-visible{outline:2px solid #02C173;outline-offset:4px}

/* ─── svc-card-mateusz-hover-2026-05-23 ─── */
/* Motyw karty Mateusza (o-nas.html) zaadaptowany na .svc-card w sekcji "Nasze uslugi" — aktywuje sie na HOVER */
@property --svc-shimmer-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.svc-card{--svc-c1:#02C173;--svc-c2:#00d4ff;--svc-c-glow:rgba(2,193,115,.35);position:relative;isolation:isolate;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}
.svc-card::before{content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:10;pointer-events:none;background:conic-gradient(from var(--svc-shimmer-angle,0deg),transparent 0deg,var(--svc-c1) 60deg,var(--svc-c2) 120deg,transparent 180deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;opacity:0;transition:opacity .35s ease}
.svc-card:hover::before,.svc-card:focus-visible::before{opacity:1;animation:svcBorderSpin 4s linear infinite}
.svc-card::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:9;pointer-events:none;background:linear-gradient(110deg,transparent 18%,rgba(2,193,115,.07) 38%,rgba(0,212,255,.24) 50%,rgba(2,193,115,.07) 62%,transparent 82%);background-size:300% 100%;background-position:-150% center;opacity:0;transition:opacity .35s ease}
.svc-card:hover::after{opacity:1;animation:svcShimmerSweep 2.2s ease-in-out infinite}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 60px var(--svc-c-glow);border-color:rgba(2,193,115,.45)}
.svc-card:hover .svc-icon{background:rgba(2,193,115,.12);border-color:rgba(2,193,115,.30);color:var(--svc-c1);transition:background .35s ease,border-color .35s ease,color .35s ease}
.svc-card:hover .svc-icon svg{stroke:var(--svc-c1);transition:stroke .35s ease}
.svc-card:hover .svc-num{color:var(--svc-c1);text-shadow:0 0 24px var(--svc-c-glow);transition:color .35s ease,text-shadow .35s ease}
.svc-card:hover .svc-title{background:linear-gradient(90deg,#02C173 0%,#00d4ff 50%,#02C173 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:svcTitleShimmer 4s linear infinite}
.svc-card:hover .svc-link{color:var(--svc-c1);gap:14px;transition:color .35s ease,gap .35s ease}
.svc-card:hover .svc-link svg{stroke:var(--svc-c1)}
@keyframes svcBorderSpin{to{--svc-shimmer-angle:360deg}}
@keyframes svcShimmerSweep{0%{background-position:-150% center}100%{background-position:250% center}}
@keyframes svcTitleShimmer{to{background-position:200% center}}
@media(prefers-reduced-motion:reduce){
 .svc-card::before,.svc-card::after,.svc-card .svc-title{animation:none!important}
 .svc-card:hover{transform:none}
}