/* AluPro - ruch na stronie glownej. Wylaczone przy prefers-reduced-motion (klasa ax-js nie jest wtedy nadawana). */

/* Hero: powolny, "majestatyczny" wjazd od lewej. Litery wylaniaja sie z tla przez gradient
   (kolor tla -> biel) przesuwajacy sie od lewej do prawej; na koncu delikatne dojechanie z odbiciem.
   Ten sam efekt co na altruss.com. Naglowek ma w edytorze klase ax-hero-title. */
@keyframes ax-hero-slide {
	0%   { transform: translateX(-180px); }
	70%  { transform: translateX(10px); }
	86%  { transform: translateX(-3px); }
	100% { transform: none; }
}
@keyframes ax-hero-reveal {
	from { background-position: 100% 0; }
	to   { background-position: 0 0; }
}
html.ax-js .ax-hero-title {
	background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 38%, var(--wp--preset--color--secondary, #0E151F) 62%, var(--wp--preset--color--secondary, #0E151F) 100%);
	background-size: 300% 100%;
	background-position: 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation:
		ax-hero-slide 3.4s cubic-bezier(.16, .84, .3, 1) .3s both,
		ax-hero-reveal 3.6s cubic-bezier(.45, .05, .35, 1) .3s both;
}

/* Elementy sterowane przewijaniem - wartosci ustawia assets/ax-motion.js */
html.ax-js .ax-scroll { will-change: transform, opacity, filter; }

/* Jestesmy specjalistami: ikony SVG rysowane po pojawieniu sie karty (jak na altruss.com) */
.ax-icon { display: block; margin: 0 auto; width: 100px; height: 100px; overflow: visible; }
.ax-icon .ax-s { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
html.ax-js .ax-icon .ax-d { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); }
html.ax-js .ax-on .ax-icon .ax-d { transition: stroke-dashoffset .6s cubic-bezier(.6, .05, .3, 1); transition-delay: var(--dl, 0s); stroke-dashoffset: 0; }
html.ax-js .ax-icon .ax-climber { transform: translate(-6px, -22px); opacity: 0; }
html.ax-js .ax-on .ax-icon .ax-climber { animation: ax-rappel 1.3s cubic-bezier(.3, .7, .4, 1) .35s both; }
@keyframes ax-rappel {
	0%   { transform: translate(-6px, -22px); opacity: 0; }
	15%  { opacity: 1; }
	60%  { transform: translate(1px, 3px); }
	80%  { transform: translate(-1px, -1px); }
	100% { transform: none; opacity: 1; }
}
html.ax-js .ax-icon .ax-light { opacity: 0; }
html.ax-js .ax-on .ax-icon .ax-light { animation: ax-light 1.2s ease-out both; animation-delay: var(--dl, 1s); }
@keyframes ax-light { 0% { opacity: 0; } 30% { opacity: 1; } 50% { opacity: .35; } 70%, 100% { opacity: 1; } }
html.ax-js .ax-icon .ax-pencil { transform: translate(10px, -10px); opacity: 0; }
html.ax-js .ax-on .ax-icon .ax-pencil { animation: ax-write 1.1s cubic-bezier(.3, .7, .4, 1) .5s both; }
@keyframes ax-write {
	0%   { transform: translate(10px, -10px); opacity: 0; }
	25%  { opacity: 1; }
	60%  { transform: translate(-3px, 3px); }
	100% { transform: none; opacity: 1; }
}

/* Co o nas mowia: karta pulsuje skala jak wygasajaca sinusoida - startuje z 85%, rosnie do ~123%,
   zapada do ~83%, potem 113%, 90% ... i lagodnie wygasa do 100%.
   s(t) = 1 + e^(-1.2t) * (0.23 sin(2pi*2.1t) - 0.15 cos(2pi*2.1t)); klatki co 2,5% = plynny ruch. */
@keyframes ax-drop {
	0.0% { transform: scale(0.8500); opacity: 0.00; }
	2.5% { transform: scale(0.9346); opacity: 0.21; }
	5.0% { transform: scale(1.0211); opacity: 0.42; }
	7.5% { transform: scale(1.1004); opacity: 0.62; }
	10.0% { transform: scale(1.1645); opacity: 0.83; }
	12.5% { transform: scale(1.2075); }
	15.0% { transform: scale(1.2261); }
	17.5% { transform: scale(1.2197); }
	20.0% { transform: scale(1.1906); }
	22.5% { transform: scale(1.1430); }
	25.0% { transform: scale(1.0831); }
	27.5% { transform: scale(1.0179); }
	30.0% { transform: scale(0.9547); }
	32.5% { transform: scale(0.8999); }
	35.0% { transform: scale(0.8588); }
	37.5% { transform: scale(0.8351); }
	40.0% { transform: scale(0.8301); }
	42.5% { transform: scale(0.8433); }
	45.0% { transform: scale(0.8724); }
	47.5% { transform: scale(0.9131); }
	50.0% { transform: scale(0.9607); }
	52.5% { transform: scale(1.0097); }
	55.0% { transform: scale(1.0547); }
	57.5% { transform: scale(1.0914); }
	60.0% { transform: scale(1.1163); }
	62.5% { transform: scale(1.1275); }
	65.0% { transform: scale(1.1246); }
	67.5% { transform: scale(1.1087); }
	70.0% { transform: scale(1.0822); }
	72.5% { transform: scale(1.0486); }
	75.0% { transform: scale(1.0119); }
	77.5% { transform: scale(0.9760); }
	80.0% { transform: scale(0.9448); }
	82.5% { transform: scale(0.9212); }
	85.0% { transform: scale(0.9073); }
	87.5% { transform: scale(0.9039); }
	90.0% { transform: scale(0.9110); }
	92.5% { transform: scale(0.9270); }
	95.0% { transform: scale(0.9497); }
	97.5% { transform: scale(0.9765); }
	100.0% { transform: scale(1.0000); }
}
html.ax-js .ax-drop { opacity: 0; transform-origin: center center; }
html.ax-js .ax-drop.ax-on { opacity: 1; animation: ax-drop 2.4s linear both; }  /* opacity:1 = wartosc po animacji (klatki ustawiaja ja tylko na starcie) */
/* Nasze najnowsze instalacje: zaokraglone zdjecia z cieniem (zawsze) + obrot po przekatnej (assets/ax-motion.js) */
.home .ax-spin,
.home .tlp-portfolio img {
	border-radius: 16px;
	box-shadow: 0 24px 48px -6px rgba(14, 21, 31, .32), 0 8px 16px rgba(14, 21, 31, .16);
}
@keyframes ax-spin-in {
	0%   { transform: rotate3d(1, -1, 0, -360deg) scale(.82); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: none; opacity: 1; }
}
html.ax-js .ax-spin { transform-style: preserve-3d; backface-visibility: visible; opacity: 0; }
html.ax-js .ax-spin.ax-on { opacity: 1; animation: ax-spin-in 1.6s cubic-bezier(.16, .8, .3, 1) var(--axd, 0s) both; }
/* Oto Klienci: logotypy w ruchu (assets/ax-logos.js). Oryginalny obrazek zostaje w ukladzie (rezerwuje miejsce). */
.ax-logos { position: absolute; left: 0; top: 0; touch-action: pan-y; cursor: crosshair; }
.ax-logos-ink { position: absolute; inset: 0; pointer-events: none; }
.ax-logo { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
.ax-logos-on img[src*="Logotypy-klientow"] { visibility: hidden; }
/* Rosnij z AluPro na pelna szerokosc: owijka zwijania sekcji (inc/snippets/099, .fp-collapse) stala miedzy grupa
   a blokiem alignfull i dostawala limit 1200 px - blok pelnej szerokosci nie mogl wyjsc na krawedzie ekranu. */
.home .has-global-padding > .fp-collapse:has(> .alignfull) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Nasze najnowsze teksty i Q&A: babel z glebiny widziany z gory.
   Zdjecie zaczyna jako punkt w srodku, rosnie okragla maska z rozmyta krawedzia, lekko przestrzeliwuje
   rozmiar i osiada; na koniec po "tafli" rozchodzi sie delikatny krag. */
@property --axr { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes ax-bubble-rise {
	0%   { --axr: 0%;   transform: scale(.55); filter: blur(10px) brightness(1.35) saturate(.6); }
	55%  { --axr: 62%;  transform: scale(1.035); filter: blur(2px) brightness(1.1) saturate(.9); }
	75%  { --axr: 95%;  transform: scale(.99); filter: blur(0) brightness(1.02); }
	100% { --axr: 160%; transform: none; filter: none; }
}
@keyframes ax-bubble-ripple {
	0%   { transform: translate(-50%, -50%) scale(.2); opacity: .55; }
	100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
html.ax-js .ax-bubble { position: relative; overflow: hidden; border-radius: 20px; }
html.ax-js .ax-bubble img {
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--axr) - 14%), transparent var(--axr));
	        mask-image: radial-gradient(circle at 50% 50%, #000 calc(var(--axr) - 14%), transparent var(--axr));
	--axr: 0%;
}
html.ax-js .ax-bubble.ax-on img { animation: ax-bubble-rise 1.25s cubic-bezier(.2, .75, .25, 1) var(--axd, 0s) both; }
html.ax-js .ax-bubble::after {
	content: ''; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .7); box-shadow: 0 0 24px rgba(13, 110, 253, .25);
	opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.2);
}
html.ax-js .ax-bubble.ax-on::after { animation: ax-bubble-ripple 1.1s cubic-bezier(.2, .7, .3, 1) calc(var(--axd, 0s) + .75s) both; }

/* Pasek katalogu (czesc footer-call-to-action): napis odbija jak gasnaca sprezyna.
   Klatki wyliczone z s(t) = 1 + 0.47 * e^(-3.4t) * sin(2*pi*1.9t): wychylenia ok. +30%, -12%, +5%, -2%,
   koncowka dlugo i lagodnie zwalnia (bez skokow). */
@keyframes ax-spring {
	0.0% { transform: scale(1.0000); }
	2.5% { transform: scale(1.1269); }
	5.0% { transform: scale(1.2229); }
	7.5% { transform: scale(1.2842); }
	10.0% { transform: scale(1.3110); }
	12.5% { transform: scale(1.3063); }
	15.0% { transform: scale(1.2754); }
	17.5% { transform: scale(1.2252); }
	20.0% { transform: scale(1.1630); }
	22.5% { transform: scale(1.0962); }
	25.0% { transform: scale(1.0314); }
	27.5% { transform: scale(0.9740); }
	30.0% { transform: scale(0.9278); }
	32.5% { transform: scale(0.8952); }
	35.0% { transform: scale(0.8769); }
	37.5% { transform: scale(0.8723); }
	40.0% { transform: scale(0.8796); }
	42.5% { transform: scale(0.8964); }
	45.0% { transform: scale(0.9196); }
	47.5% { transform: scale(0.9462); }
	50.0% { transform: scale(0.9735); }
	52.5% { transform: scale(0.9988); }
	55.0% { transform: scale(1.0202); }
	57.5% { transform: scale(1.0365); }
	60.0% { transform: scale(1.0471); }
	62.5% { transform: scale(1.0519); }
	65.0% { transform: scale(1.0513); }
	67.5% { transform: scale(1.0464); }
	70.0% { transform: scale(1.0381); }
	72.5% { transform: scale(1.0278); }
	75.0% { transform: scale(1.0167); }
	77.5% { transform: scale(1.0058); }
	80.0% { transform: scale(0.9961); }
	82.5% { transform: scale(0.9883); }
	85.0% { transform: scale(0.9827); }
	87.5% { transform: scale(0.9795); }
	90.0% { transform: scale(0.9787); }
	92.5% { transform: scale(0.9798); }
	95.0% { transform: scale(0.9825); }
	97.5% { transform: scale(0.9863); }
	100% { transform: scale(1); }
}
html.ax-js .ax-spring { transform-origin: left center; }
html.ax-js .ax-spring.ax-on { animation: ax-spring 2.6s linear both; }

/* Czytaj wiecej: wyostrzenie z rozmycia - wejscie w ekran tylko wyzwala, tempo stale */
html.ax-js .ax-focus { filter: blur(10px); opacity: .35; transform: scale(.96); }
html.ax-js .ax-focus.ax-on { filter: none; opacity: 1; transform: none; transition: filter .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.2,1); }

/* Kontakt: zdjecie zespolu pojawia sie z przezroczystosci sekunde PO WCZYTANIU zdjecia (skrypt dodaje .ax-in).
   Zabezpieczenie: gdyby skrypt sie nie wczytal, animacja CSS pokaze zdjecie po 3 s. */
@keyframes ax-fade-in { from { opacity: 0; } to { opacity: 1; } }
html.ax-js body.page-id-7965 .entry-content img[src*="Darius-and-Michal"] {
	opacity: 0;
	animation: ax-fade-in 1.6s cubic-bezier(.4, 0, .2, 1) 3s forwards;
}
html.ax-js body.page-id-7965 .entry-content img[src*="Darius-and-Michal"].ax-in {
	animation: none;
	opacity: 1;
	transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
}
/* Instalacje: opakowanie zdjecia z wtyczki portfolio (tlp) mialo szare tlo i overflow:hidden -
   szary prostokat w zaokraglonych rogach i uciety cien. Opakowanie przezroczyste, bez przycinania. */
.home .tlp-portfolio-thum.tlp-item {
	background: transparent !important;
	overflow: visible !important;
	border-radius: 16px;
}
.home .tlp-portfolio-thum .tlp-overlay { border-radius: 16px; }