/* ========================================================= FX — nowoczesna warstwa animacji (scroll, hover, intro) Wszystko działa tylko gdy ma klasę .fx (dodaje ją JS) i gdy użytkownik nie prosił o ograniczenie ruchu. ========================================================= */ /* ---------- pasek postępu przewijania ---------- */ .fx-progress{ position:fixed;top:0;left:0;height:2px;z-index:200;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--orange),var(--orange-soft)); will-change:transform;pointer-events:none; } /* ---------- nagłówek chowany przy scrollu w dół ---------- */ .fx .hdr{transition:.45s var(--ease),transform .5s var(--ease)} .fx .hdr.hide{transform:translateY(-115%)} /* ---------- sekcje: przejmujemy reveal na poziom elementów ---------- */ .fx .rv{opacity:1;transform:none;transition:none} /* ---------- bazowe stany odsłaniania ---------- */ .fx [data-fx]{ opacity:0;will-change:opacity,transform; transition:opacity .85s var(--ease),transform .95s var(--ease),filter .95s var(--ease); transition-delay:calc(var(--fx-d,0) * 75ms); } .fx [data-fx="up"] {transform:translateY(34px)} .fx [data-fx="fade"] {transform:none} .fx [data-fx="left"] {transform:translateX(-38px)} .fx [data-fx="right"] {transform:translateX(38px)} .fx [data-fx="zoom"] {transform:scale(.94)} .fx [data-fx="blur"] {transform:translateY(22px);filter:blur(9px)} .fx [data-fx].fx-in{opacity:1;transform:none;filter:none} /* nagłówki — odsłanianie zza maski, wiersz po wierszu. padding/margin chroni przed obcięciem ogonków liter (ą, ę, y). */ .fx .fx-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em} .fx .fx-line > span{ display:block;transform:translateY(110%); transition:transform 1s var(--ease); transition-delay:calc(var(--fx-d,0) * 90ms); } .fx .fx-in .fx-line > span, .fx .fx-line.fx-in > span{transform:none} /* ---------- intro strony (hero) ---------- */ .fx .hero__bg{transform:scale(1.16);transition:transform 1.8s cubic-bezier(.16,1,.3,1),opacity 1.4s ease;opacity:0} .fx .hero h1 .eyebrow{opacity:1;transform:none;transition:none} .fx .hero .eyebrow, .fx .hero .lead, .fx .hero__cta, .fx .hero .crumbs, .fx .hero__stats .stat, .fx .scrollcue{opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease),transform 1s var(--ease)} .fx .hero h1 .fx-line > span{transform:translateY(115%)} .fx.fx-ready .hero__bg{opacity:.9;transform:scale(1.04)} .fx.fx-ready .hero h1 .fx-line > span{transform:none} .fx.fx-ready .hero .eyebrow, .fx.fx-ready .hero .crumbs, .fx.fx-ready .hero .lead, .fx.fx-ready .hero__cta, .fx.fx-ready .hero__stats .stat, .fx.fx-ready .scrollcue{opacity:1;transform:none} .fx.fx-ready .hero .eyebrow {transition-delay:.15s} .fx.fx-ready .hero .crumbs {transition-delay:.15s} .fx.fx-ready .hero h1 .fx-line:nth-child(1) > span{transition-delay:.15s} .fx.fx-ready .hero h1 .fx-line:nth-child(2) > span{transition-delay:.24s} .fx.fx-ready .hero h1 .fx-line:nth-child(3) > span{transition-delay:.34s} .fx.fx-ready .hero h1 .fx-line:nth-child(4) > span{transition-delay:.44s} .fx.fx-ready .hero .lead {transition-delay:.55s} .fx.fx-ready .hero__cta {transition-delay:.68s} .fx.fx-ready .hero__stats .stat:nth-child(1){transition-delay:.78s} .fx.fx-ready .hero__stats .stat:nth-child(2){transition-delay:.86s} .fx.fx-ready .hero__stats .stat:nth-child(3){transition-delay:.94s} .fx.fx-ready .scrollcue {transition-delay:1.1s} /* delikatna kurtyna na wejściu */ .fx-curtain{ position:fixed;inset:0;z-index:300;background:var(--ink);pointer-events:none; transform-origin:50% 0; transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .8s ease; } .fx.fx-ready .fx-curtain{transform:translateY(-100%);opacity:0} /* ---------- parallax ---------- */ .fx .hero__bg, .fx .sec-num, .fx .wmark, .fx .frame{will-change:transform} /* ---------- kafle: reflektor podążający za kursorem ---------- */ .fx .value, .fx .xlink, .fx .svc{position:relative;overflow:hidden} .fx .value::after, .fx .xlink::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; transition:opacity .5s var(--ease); background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(212,168,75,.14),transparent 70%); } .fx .value:hover::after, .fx .xlink:hover::after{opacity:1} /* mgiełka w kaflach usług podąża za kursorem zamiast tkwić w rogu */ .fx .svc::after{ right:auto;bottom:auto;inset:0;width:auto;height:auto;border-radius:0; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(212,168,75,.16),transparent 68%); } /* ---------- magnetyczne przyciski ---------- */ .fx .btn{will-change:transform} .fx .btn--fill i,.fx .btn--ghost i{will-change:transform} /* ---------- licznik w statystykach ---------- */ .fx .stat b{font-variant-numeric:tabular-nums} /* ---------- powrót na górę ---------- */ .fx-top{ position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:150; width:48px;height:48px;border:1px solid rgba(212,168,75,.45);background:rgba(20,20,20,.72); color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px); opacity:0;visibility:hidden;transform:translateY(14px) scale(.9); transition:.45s var(--ease);border-radius:50%; } .fx-top svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none; stroke-linecap:round;stroke-linejoin:round} .fx-top:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px) scale(1.04)} .fx-top.show{opacity:1;visibility:visible;transform:none} /* ---------- aktywna pozycja w menu ---------- */ .fx .nav a.active{opacity:1} .fx .nav a.active::after{width:100%} /* ---------- FAQ: płynne rozwijanie ---------- */ .fx .faq details .ans{animation:fxAns .45s var(--ease)} @keyframes fxAns{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---------- pełne poszanowanie preferencji użytkownika ---------- */ @media(prefers-reduced-motion:reduce){ .fx [data-fx], .fx .hero .eyebrow,.fx .hero .lead,.fx .hero__cta,.fx .hero .crumbs, .fx .hero__stats .stat,.fx .scrollcue{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .fx .fx-line > span{transform:none!important;transition:none!important} .fx .hero__bg{opacity:.9!important;transform:scale(1.04)!important;transition:none!important} .fx-curtain{display:none} .fx .faq details .ans{animation:none} }