/* PREDATOR · motion kit · predator-pokret.css (v1.0, 26.09.2026) Pokret za predator-tools.com po brend kitu: karbon, neon #00FF00 BEZ sjaja, Chakra Petch. Karakter: oštro — udar, brzina, nagli stop. Sve klase počinju sa pp- i ništa postojeće ne menjaju. Ide zajedno sa predator-pokret.js. „Smanji pokret“ na telefonu gasi sve (dole). */ :root{--pp-neon:#00FF00;--pp-karbon:#0A0A0A;--pp-celik:#2C2C2C; --pp-udar:cubic-bezier(.16,1,.3,1); /* brzo pa nagli stop */ --pp-skok:cubic-bezier(.34,1.56,.64,1); /* iskoči sa malim prebačajem */ --pp-prelaz:cubic-bezier(.65,0,.35,1)} /* 1 · ULAZ NA POČETNU (jednom po poseti; klasu pp-intro stavlja mali skript u ) */ html.pp-intro .hero .eyebrow{animation:ppBrisi .5s var(--pp-udar) .05s both} html.pp-intro .hero .eyebrow::before{animation:ppLinija .5s var(--pp-udar) .05s both;transform-origin:left} html.pp-intro .hero h1{animation:ppUdar .55s var(--pp-udar) .12s both} html.pp-intro .hero .lead{animation:ppDizi .45s var(--pp-udar) .42s both} html.pp-intro .hero-actions .btn{animation:ppIskoci .42s var(--pp-skok) both} html.pp-intro .hero-actions .btn:nth-child(1){animation-delay:.55s} html.pp-intro .hero-actions .btn:nth-child(2){animation-delay:.63s} html.pp-intro .hero-plate{animation:ppOtkrij .7s var(--pp-prelaz) .3s both} html.pp-intro .plate-cap{animation:ppDizi .4s var(--pp-udar) .85s both} html.pp-intro .hero-inner{animation:ppTres .26s linear .62s 1} .pp-rez{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:var(--pp-neon);transform:translateX(-160%) skewX(-18deg);animation:ppRez .7s var(--pp-prelaz) .3s both;pointer-events:none;z-index:3} @keyframes ppUdar{0%{opacity:0;transform:translateX(-64px) skewX(-14deg)}55%{opacity:1}100%{opacity:1;transform:none}} @keyframes ppBrisi{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes ppLinija{from{transform:scaleX(0)}to{transform:none}} @keyframes ppDizi{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes ppIskoci{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}} @keyframes ppOtkrij{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes ppRez{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}} @keyframes ppTres{0%,100%{transform:none}20%{transform:translate(3px,-1px)}40%{transform:translate(-3px,1px)}60%{transform:translate(2px,0)}80%{transform:translate(-1px,0)}} /* 4 · TELEFON ZVONI: ikonica u dugmetu Pozovi (pri prelasku mišem / jednom na traci dole) */ a[href^="tel:"]:hover svg,.pp-zvoni svg{animation:ppZvoni .7s linear 1;transform-origin:50% 50%} .pp-zvoni{animation:ppPuls .7s var(--pp-skok) 1} @keyframes ppZvoni{0%,100%{transform:none}10%,30%,50%{transform:rotate(-16deg)}20%,40%,60%{transform:rotate(16deg)}70%{transform:rotate(-6deg)}} @keyframes ppPuls{0%{transform:none}30%{transform:scale(1.04)}100%{transform:none}} @media(prefers-reduced-motion:reduce){ html.pp-intro .hero *,html.pp-intro .hero,.pp-rez,a[href^="tel:"]:hover svg,.pp-zvoni,.pp-zvoni svg{animation:none!important} .pp-rez{display:none} } /* 7 · NASLOV U HEROJU: reči ulaze odozdo i naglo stanu (klase postavlja predator-pokret.js) */ .pp-rec{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em} .pp-rec>i{display:inline-block;font-style:inherit} .pp-reci .pp-rec>i{animation:ppRec .6s var(--pp-udar) var(--pp-d,0s) both} html.pp-intro .hero h1.pp-reci{animation:none} /* reči preuzimaju ulaz umesto celog naslova */ @keyframes ppRec{from{transform:translateY(105%)}to{transform:none}} /* 8 · TRAKA POVERENJA: kvad prođe jednom po neon liniji, stavke se pale za njim */ .trust-strip{position:relative;overflow:hidden} .pp-linija{position:absolute;left:0;bottom:0;height:2px;width:100%;pointer-events:none; background:linear-gradient(90deg,transparent,var(--pp-neon) 45%,var(--pp-neon) 55%,transparent);transform:translateX(-101%)} .pp-traka-kvad{position:absolute;bottom:1px;left:0;width:34px;height:18px;pointer-events:none;opacity:0} .pp-spremna li{opacity:.5} .pp-spremna li::before{transform:scale(.72)} .pp-vozi .pp-linija{animation:ppProdji 1.9s var(--pp-prelaz) both} .pp-vozi .pp-traka-kvad{animation:ppVozi 1.9s var(--pp-prelaz) both} .pp-vozi .pp-traka-kvad .pp-tocak{animation:ppTocak .4s linear 1.9s} .pp-vozi li{animation:ppPali .45s var(--pp-udar) calc(.3s + var(--pp-i,0) * .33s) both} .pp-vozi li::before{animation:ppKvaka .42s var(--pp-skok) calc(.3s + var(--pp-i,0) * .33s) both} @keyframes ppProdji{from{transform:translateX(-101%)}to{transform:translateX(101%)}} @keyframes ppVozi{0%{opacity:0;transform:translateX(-46px)}7%{opacity:1}93%{opacity:1}100%{opacity:1;transform:translateX(calc(100% + 100vw - 34px))}} @keyframes ppPali{from{opacity:.5}to{opacity:1}} @keyframes ppKvaka{0%{transform:scale(.72)}62%{transform:scale(1.14)}100%{transform:none}} @media(prefers-reduced-motion:reduce){ .pp-rec>i,.pp-linija,.pp-traka-kvad{animation:none!important} .pp-spremna li,.pp-vozi li{opacity:1!important;animation:none!important} .pp-spremna li::before,.pp-vozi li::before{transform:none!important;animation:none!important} .pp-traka-kvad,.pp-linija{display:none} } /* 9 · KARTICE PITANJA: ulaze redom, neon linija pređe preko vrha kartice */ .pp-pitanja .faq-card{opacity:0;transform:translateY(22px)} .pp-pitanja.pp-idu .faq-card{opacity:1;transform:none;transition:transform .5s var(--pp-udar) calc(var(--pp-i,0) * .08s),opacity .25s linear calc(var(--pp-i,0) * .08s)} .pp-pitanja.pp-idu .faq-card::before{animation:ppLinija .55s var(--pp-prelaz) calc(.1s + var(--pp-i,0) * .08s) both;transform-origin:left} @media(prefers-reduced-motion:reduce){ .pp-pitanja .faq-card{opacity:1!important;transform:none!important} .pp-pitanja .faq-card::before{animation:none!important} }