/* ==========================================================================
   Bloom — animacije (samo CSS; transform i opacity, bez skokova sadržaja)
   Pravilo: ne animirati opacity na roditeljima staklenih elemenata,
   jer onda staklo gubi zamućenje pozadine.
   ========================================================================== */

@keyframes bl-fade{from{opacity:0}to{opacity:1}}
@keyframes bl-item{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bl-live{0%{box-shadow:0 0 0 0 rgba(159,179,165,.6)}70%,100%{box-shadow:0 0 0 8px rgba(159,179,165,0)}}
@keyframes bl-rise{from{transform:translateY(56px)}to{transform:none}}
@keyframes bl-card{from{opacity:.4;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes bl-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bl-mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes bl-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bl-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes bl-drop{from{opacity:0;transform:translateY(-130%)}to{opacity:1;transform:none}}
@keyframes bl-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes bl-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* rokovnik na početnoj: promenjeni red bljesne, oznaka iskoči, kvačica se nacrta, telefon pored zameni sadržaj */
@keyframes bl-row-flash{0%{background:rgba(var(--c-accent-rgb),.38)}100%{background:rgba(var(--ov-rgb),.15)}}
@keyframes bl-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:none;opacity:1}}
@keyframes bl-draw{to{stroke-dashoffset:0}}
@keyframes bl-swap{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
/* oznaka „Probajte“: tačka pulsira; nagoveštaj dodira: prsten i blago pulsiranje glavne kontrole */
@keyframes bl-try-dot{0%{box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),.6)}70%,100%{box-shadow:0 0 0 8px rgba(var(--c-accent-rgb),0)}}
@keyframes bl-try-ring{0%{box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),.9)}75%{box-shadow:0 0 0 13px rgba(var(--c-accent-rgb),0)}100%{box-shadow:0 0 0 13px rgba(var(--c-accent-rgb),0)}}
@keyframes bl-try-pulse{0%,100%{transform:none}35%{transform:scale(1.05)}}

/* tura kroz funkcije: scena aktivne funkcije (.tour__scene.is-on) ide u petlji; jedna petlja = var(--T) (7,5 s),
   koraci: 1 = 0–33 %, 2 = 33–66 %, 3 = 66–100 % */
@keyframes fs-step{0%,32%{background:rgba(var(--c-accent-rgb),.16);opacity:1}33%,100%{background:transparent;opacity:.6}} /* providnost umesto boje slova: bez ponovnog crtanja teksta */
@keyframes fs-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* nedolazak */
@keyframes fs-ns-a{0%,64%{opacity:1}72%,100%{opacity:.4}}
@keyframes fs-ns-b{0%,36%{box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),0);background:transparent}38%{box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),.85);background:rgba(var(--c-accent-rgb),.35)}50%{box-shadow:0 0 0 14px rgba(var(--c-accent-rgb),0)}58%,100%{box-shadow:0 0 0 14px rgba(var(--c-accent-rgb),0);background:transparent}}
@keyframes fs-ns-tap{0%,32%{opacity:0;transform:scale(.6)}36%{opacity:1;transform:scale(1)}40%{transform:scale(.75)}46%{opacity:0;transform:scale(1)}100%{opacity:0}}
@keyframes fs-ns-arrow{0%,60%{opacity:.3}68%,100%{opacity:1;color:var(--c-sage)}}
@keyframes fs-ns-c{0%,64%{opacity:0;transform:translateY(8px) scale(.98)}72%,100%{opacity:1;transform:none}}
@keyframes fs-ns-push{0%,76%{opacity:0;transform:translateY(-14px)}84%,96%{opacity:1;transform:none}100%{opacity:0}}
.fs-ns-c,.fs-ns-push{opacity:0}
.fs-ns-arrow{opacity:.3}
.tour__scene.is-on .fs-ns-a{animation:fs-ns-a var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-ns-b{animation:fs-ns-b var(--T,7.5s) ease-out infinite}
.tour__scene.is-on .fs-ns-tap{animation:fs-ns-tap var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-ns-arrow{animation:fs-ns-arrow var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-ns-c{animation:fs-ns-c var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-ns-push{animation:fs-ns-push var(--T,7.5s) var(--ease) infinite}
/* uređaji */
@keyframes fs-sy-tap{0%,8%{box-shadow:0 0 0 0 rgba(var(--t-rgb),0)}10%{box-shadow:0 0 0 0 rgba(var(--t-rgb),.85)}22%{box-shadow:0 0 0 10px rgba(var(--t-rgb),0)}100%{box-shadow:0 0 0 10px rgba(var(--t-rgb),0)}}
@keyframes fs-sy-c1{0%,14%{opacity:0;transform:translateY(5px)}20%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fs-sy-travel{0%,34%{left:6%;opacity:0}38%{opacity:1}62%{left:92%;opacity:1}66%,100%{left:92%;opacity:0}}
@keyframes fs-sy-c2{0%,46%{opacity:0;transform:translateY(5px)}52%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fs-sy-c3{0%,58%{opacity:0;transform:translateY(5px)}64%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes fs-sy-live{0%,66%{opacity:.4}72%,94%{opacity:1}100%{opacity:.4}}
.fs-sy-c1,.fs-sy-c2,.fs-sy-c3,.fs-sy-travel{opacity:0}
.fs-sy-live{opacity:.4}
.tour__scene.is-on .fs-sy-tap{animation:fs-sy-tap var(--T,7.5s) ease-out infinite}
.tour__scene.is-on .fs-sy-c1{animation:fs-sy-c1 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sy-travel{animation:fs-sy-travel var(--T,7.5s) ease-in-out infinite}
.tour__scene.is-on .fs-sy-c2{animation:fs-sy-c2 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sy-c3{animation:fs-sy-c3 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sy-live{animation:fs-sy-live var(--T,7.5s) ease infinite}
/* smene */
@keyframes fs-sg-finger{0%{left:14%;opacity:0}3%{opacity:1}28%{left:95%;opacity:1}32%,100%{left:95%;opacity:0}}
@keyframes fs-sg-cell{0%,2%{opacity:.18;transform:scaleX(.3)}7%,96%{opacity:1;transform:none}100%{opacity:.18;transform:scaleX(.3)}}
@keyframes fs-sg-req{0%,36%{opacity:0;transform:translateY(8px)}42%,100%{opacity:1;transform:none}}
@keyframes fs-sg-tap{0%,66%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1)}74%{transform:scale(.75)}80%{opacity:0;transform:scale(1)}100%{opacity:0}}
@keyframes fs-sg-ok1{0%,74%{opacity:1}78%,100%{opacity:0}}
@keyframes fs-sg-ok2{0%,74%{opacity:0}78%,100%{opacity:1}}
@keyframes fs-sg-off{0%,76%{background:var(--c-wheat);box-shadow:inset 0 0 0 0 var(--c-sage)}82%,100%{background:rgba(159,179,165,.15);box-shadow:inset 0 0 0 1.5px var(--c-sage)}}
@keyframes fs-sg-copy{0%,86%{transform:none;box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),0)}89%{transform:scale(1.04);box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),.7)}97%,100%{transform:none;box-shadow:0 0 0 12px rgba(var(--c-accent-rgb),0)}}
.fs-sg-cell{transform-origin:left center}
.fs-sg-req,.fs-sg-ok2{opacity:0}
.tour__scene.is-on .fs-sg-finger{animation:fs-sg-finger var(--T,7.5s) ease-in-out infinite}
.tour__scene.is-on .fs-sg-cell{animation:fs-sg-cell var(--T,7.5s) ease-out infinite backwards;animation-delay:calc(var(--i,0) * .042 * var(--T,7.5s))}
.tour__scene.is-on .fs-sg-req{animation:fs-sg-req var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-sg-tap{animation:fs-sg-tap var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sg-ok1{animation:fs-sg-ok1 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sg-ok2{animation:fs-sg-ok2 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sg-off{animation:fs-sg-off var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-sg-copy{animation:fs-sg-copy var(--T,7.5s) ease-out infinite}
/* karton */
@keyframes fs-kt-who{0%,2%{opacity:0;transform:translateY(8px)}10%,100%{opacity:1;transform:none}}
@keyframes fs-kt-tag{0%,36%{opacity:0;transform:scale(.7)}42%,100%{opacity:1;transform:none}}
@keyframes fs-kt-flash{0%,68%{background:transparent}70%{background:rgba(255,255,255,.95)}76%,100%{background:transparent}}
@keyframes fs-kt-thumb{0%,72%{opacity:0;transform:scale(.6)}78%,100%{opacity:1;transform:none}}
@keyframes fs-kt-memo{0%,80%{clip-path:inset(0 100% 0 0)}97%,100%{clip-path:inset(0 0 0 0)}}
.fs-kt-tag,.fs-kt-thumb{opacity:0}
.tour__scene.is-on .fs-kt-who{animation:fs-kt-who var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-kt-tag{animation:fs-kt-tag var(--T,7.5s) var(--ease) infinite backwards;animation-delay:calc(var(--i,0) * .045 * var(--T,7.5s))}
.tour__scene.is-on .fs-kt-flash{animation:fs-kt-flash var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-kt-thumb{animation:fs-kt-thumb var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-kt-memo{animation:fs-kt-memo var(--T,7.5s) linear infinite}
/* materijal */
@keyframes fs-st-bar{0%,8%{width:40%}22%,82%{width:14%}90%,100%{width:40%}}
@keyframes fs-st-float{0%,8%{opacity:0;transform:translateY(0)}14%{opacity:1}30%{opacity:0;transform:translateY(-22px)}100%{opacity:0}}
@keyframes fs-st-n1{0%,18%{opacity:1}24%,84%{opacity:0}90%,100%{opacity:1}}
@keyframes fs-st-n2{0%,18%{opacity:0}24%,84%{opacity:1}90%,100%{opacity:0}}
@keyframes fs-st-low{0%,38%{opacity:0;transform:translateY(6px)}44%,84%{opacity:1;transform:none}90%,100%{opacity:0}}
@keyframes fs-st-undo{0%,62%{opacity:0;transform:translateY(10px)}68%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes fs-st-tap{0%,76%{opacity:0;transform:scale(.6)}80%{opacity:1;transform:scale(1)}84%{transform:scale(.75)}90%{opacity:0;transform:scale(1)}100%{opacity:0}}
.fs-st-bar{width:40%}
.fs-st-n2,.fs-st-low,.fs-st-undo{opacity:0}
.tour__scene.is-on .fs-st-bar{animation:fs-st-bar var(--T,7.5s) ease-in-out infinite}
.tour__scene.is-on .fs-st-float{animation:fs-st-float var(--T,7.5s) ease-out infinite}
.tour__scene.is-on .fs-st-n1{animation:fs-st-n1 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-st-n2{animation:fs-st-n2 var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-st-low{animation:fs-st-low var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-st-undo{animation:fs-st-undo var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-st-tap{animation:fs-st-tap var(--T,7.5s) ease infinite}
/* uloge */
@keyframes fs-rl-bar{0%,3%{transform:scaleX(0)}14%,100%{transform:none}}
@keyframes fs-rl-day{0%,36%{transform:scaleX(0)}46%,100%{transform:none}}
@keyframes fs-rl-lock{0%,44%{opacity:0}50%,100%{opacity:1}}
@keyframes fs-rl-lock-out{0%,44%{opacity:0}50%,84%{opacity:1}90%,100%{opacity:0}}
@keyframes fs-rl-sw{0%,64%{opacity:0;transform:translateY(8px)}70%,100%{opacity:1;transform:none}}
@keyframes fs-rl-tap{0%,74%{opacity:0;transform:scale(.6)}78%{opacity:1;transform:scale(1)}82%{transform:scale(.75)}88%{opacity:0;transform:scale(1)}100%{opacity:0}}
@keyframes fs-rl-knob{0%,80%{background:rgba(var(--ov-rgb),.22)}84%,100%{background:var(--c-accent)}}
@keyframes fs-rl-knob2{0%,80%{transform:none}84%,100%{transform:translateX(19px)}}
@keyframes fs-rl-unlock{0%,84%{opacity:0;transform:scaleX(0)}92%,100%{opacity:1;transform:none}}
.fs-rl-bar,.fs-rl-day,.fs-rl-unlock{transform-origin:left center}
.fs-rl-lock,.fs-rl-sw,.fs-rl-unlock{opacity:0}
.tour__scene.is-on .fs-rl-bar{animation:fs-rl-bar var(--T,7.5s) var(--ease) infinite backwards;animation-delay:calc(var(--i,0) * .03 * var(--T,7.5s))}
.tour__scene.is-on .fs-rl-day{animation:fs-rl-day var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-rl-lock{animation:fs-rl-lock var(--T,7.5s) ease infinite;animation-delay:calc(var(--i,0) * .03 * var(--T,7.5s))}
.tour__scene.is-on .fs-rl-lock--out{animation-name:fs-rl-lock-out}
.tour__scene.is-on .fs-rl-sw{animation:fs-rl-sw var(--T,7.5s) var(--ease) infinite}
.tour__scene.is-on .fs-rl-tap{animation:fs-rl-tap var(--T,7.5s) ease infinite}
.tour__scene.is-on .fs-rl-knob{animation:fs-rl-knob var(--T,7.5s) ease infinite}
.tour__scene.is-on .sc-switch__k::after{animation:fs-rl-knob2 var(--T,7.5s) linear infinite}
.tour__scene.is-on .fs-rl-unlock{animation:fs-rl-unlock var(--T,7.5s) var(--ease) infinite}
/* traka „za koga“ */
.mq{animation:bl-mq 46s linear infinite}
.mq--r{animation:bl-mq-r 54s linear infinite}
.marquee:hover .mq{animation-play-state:paused}

/* otkrivanje pri skrolovanju (samo gde browser podržava, bez JS-a) */
@supports (animation-timeline: view()){
  .rv{animation:bl-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .reel>li>*{animation:bl-card linear both;animation-timeline:view(inline);animation-range:entry 0% entry 90%}
}
@media (max-width:640px){
  .reel>li>*{animation:none}
}

/* slikanje cenovnika: blic, okidač, linija skeniranja, redovi tabele (8 s) */
@keyframes bl-flash{0%,17%{opacity:0}19%{opacity:.9}25%,100%{opacity:0}}
@keyframes bl-press{0%,15%{transform:scale(1)}18%{transform:scale(.8)}22%,100%{transform:scale(1)}}
@keyframes bl-scan{0%,25%{top:16%;opacity:0}27%{opacity:1}46%{top:74%;opacity:1}48%,100%{top:74%;opacity:0}}
@keyframes bl-r1{0%,34%{opacity:0;transform:translateX(-10px)}38%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes bl-r2{0%,39%{opacity:0;transform:translateX(-10px)}43%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes bl-r3{0%,44%{opacity:0;transform:translateX(-10px)}48%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes bl-r4{0%,49%{opacity:0;transform:translateX(-10px)}53%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes bl-r5{0%,54%{opacity:0;transform:translateX(-10px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes bl-s1{0%,23%{opacity:1}26%,97%{opacity:0}100%{opacity:1}}
@keyframes bl-s2{0%,23%{opacity:0}26%,60%{opacity:1}63%,100%{opacity:0}}
@keyframes bl-s3{0%,60%{opacity:0;transform:translateY(4px)}64%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
.a-flash{opacity:0;animation:bl-flash 8s linear infinite}
.a-press{animation:bl-press 8s ease infinite}
.a-scan{opacity:0;animation:bl-scan 8s ease-in-out infinite}
.a-r1{opacity:0;animation:bl-r1 8s ease infinite}
.a-r2{opacity:0;animation:bl-r2 8s ease infinite}
.a-r3{opacity:0;animation:bl-r3 8s ease infinite}
.a-r4{opacity:0;animation:bl-r4 8s ease infinite}
.a-r5{opacity:0;animation:bl-r5 8s ease infinite}
.a-s1{animation:bl-s1 8s ease infinite}
.a-s2{opacity:0;animation:bl-s2 8s ease infinite}
.a-s3{opacity:0;animation:bl-s3 8s ease infinite}

/* sinhronizacija uređaja: dodir na telefonu, termin stiže na tablet i laptop (6 s) */
@keyframes bl-tap{0%{box-shadow:0 0 0 0 rgba(var(--t-rgb),.75)}12%{box-shadow:0 0 0 7px rgba(var(--t-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--t-rgb),0)}}
@keyframes bl-c1{0%,10%{opacity:0;transform:translateY(5px)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes bl-c2{0%,24%{opacity:0;transform:translateY(5px)}30%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes bl-c3{0%,36%{opacity:0;transform:translateY(5px)}42%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes bl-travel{0%,12%{left:6%;opacity:0}16%{opacity:1}40%{left:92%;opacity:1}46%,100%{left:92%;opacity:0}}
.a-tap{animation:bl-tap 6s ease-out infinite}
.a-c1{opacity:0;animation:bl-c1 6s ease infinite}
.a-c2{opacity:0;animation:bl-c2 6s ease infinite}
.a-c3{opacity:0;animation:bl-c3 6s ease infinite}
.a-travel{opacity:0;animation:bl-travel 6s ease-in-out infinite}

/* ikonica salona se menja: svaki salon dobija svoju (9 s) */
@keyframes bl-b1{0%,30%{opacity:1}35%,95%{opacity:0}100%{opacity:1}}
@keyframes bl-b2{0%,30%{opacity:0}35%,63%{opacity:1}68%,100%{opacity:0}}
@keyframes bl-b3{0%,63%{opacity:0}68%,95%{opacity:1}100%{opacity:0}}
.a-b1{animation:bl-b1 9s ease infinite}
.a-b2{opacity:0;animation:bl-b2 9s ease infinite}
.a-b3{opacity:0;animation:bl-b3 9s ease infinite}

/* koraci podešavanja: linija raste, koraci ulaze redom kad se sekcija pojavi */
html.js .steps:not(.is-in) li{opacity:0}
html.js .steps:not(.is-in)::after{transform:scaleX(0)}
.steps.is-in li{animation:bl-item .52s var(--ease) both;animation-delay:calc(200ms + var(--i,0) * 400ms)}
.steps.is-in::after{animation:bl-grow 2.6s .3s cubic-bezier(.4,0,.2,1) both}

/* prelaz između strana (main.js, pageTransitions). Ulazak: elementi heroja ulaze jedan za drugim (oznaka, naslov,
   tekst, dugme po dugme, traka), ostale sekcije i futer se samo podignu. Odlazak (html.pt-leave): hero izbledi,
   ostatak ode nagore, pa tek onda ide na drugu stranu. Zaglavlje i fotografija ostaju na mestu.
   Fade (opacity) ide SAMO na elemente koji nemaju staklene potomke, ili na samo staklo; roditelji staklenih
   elemenata dobijaju samo transform, inače staklo izgubi zamućenje (pravilo sa vrha fajla). */
@keyframes bl-pt-up{from{opacity:0;transform:translateY(18px)}}
@keyframes bl-pt-rise{from{transform:translateY(28px)}}
@keyframes bl-pt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes bl-pt-lift{to{transform:translateY(-24px)}}
@keyframes bl-pt-fade{to{opacity:0}}
/* hero: deca unutrašnjeg omotača; redovi sa dugmadima (.cta-row, .subnav) se preskaču, animiraju im se deca */
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:not(.cta-row,.subnav),
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text) :is(.cta-row,.subnav)>*,
html.js .crumbs>*{animation:bl-pt-up .7s var(--ease) backwards;animation-delay:calc(60ms + var(--pt-i,0) * 90ms + var(--pt-j,0) * 60ms)}
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:nth-child(2){--pt-i:1}
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:nth-child(3){--pt-i:2}
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:nth-child(4){--pt-i:3}
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:nth-child(5){--pt-i:4}
html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:nth-child(n+6){--pt-i:5}
html.js :is(.cta-row,.subnav)>:nth-child(2){--pt-j:1}
html.js :is(.cta-row,.subnav)>:nth-child(3){--pt-j:2}
html.js :is(.cta-row,.subnav)>:nth-child(4){--pt-j:3}
html.js :is(.cta-row,.subnav)>:nth-child(n+5){--pt-j:4}
/* ostatak strane: samo podizanje, bez providnosti */
html.js main>section~section{animation:bl-pt-rise .8s var(--ease) 140ms backwards}
html.js body>footer{animation:bl-pt-rise .8s var(--ease) 200ms backwards}
html.js main>h1.sr-only+section{animation:bl-pt-rise .8s var(--ease) 60ms backwards} /* strane bez hero teksta: prva sekcija se podigne pri ulasku */
/* prvi ekran ispod heroja: Cene (kartica sa cenom pa bočne kartice), Šegrt (razgovor), Kontakt (forma),
   Za koga (naslov panela, pa kartice jedna za drugom, pa traka sa tačkicama). Fade samo na samom staklu,
   li u nizu i traka sa dugmadima dobijaju samo podizanje. */
html.js :is(.price-grid>.price,.price-side>.side-card,.split--hero>.chat,.contact__card,.reel-sec--types .section-head>*){animation:bl-pt-up .7s var(--ease) backwards;animation-delay:calc(60ms + var(--pt-i,0) * 90ms)}
html.js .price-grid>.price{--pt-i:2}
html.js .price-side>.side-card:nth-child(1){--pt-i:3}
html.js .price-side>.side-card:nth-child(2){--pt-i:4}
html.js .price-side>.side-card:nth-child(3){--pt-i:5}
html.js :is(.split--hero>.chat,.contact__card){--pt-i:2}
html.js .reel-sec--types .section-head>*{--pt-i:2}
html.js :is(.reel--types>li,.reel-sec--types .reel-nav){animation:bl-pt-rise .8s var(--ease) backwards;animation-delay:calc(140ms + var(--pt-i,0) * 90ms)}
html.js .reel--types>li{--pt-i:2}
html.js .reel--types>li:nth-child(2){--pt-i:3}
html.js .reel--types>li:nth-child(n+3){--pt-i:4}
html.js .reel-sec--types .reel-nav{--pt-i:5}
/* odlazak */
html.pt-leave :is(.hero__inner,.page-hero__inner,.split__text,.contact__text)>:not(.cta-row,.subnav),
html.pt-leave :is(.hero__inner,.page-hero__inner,.split__text,.contact__text) :is(.cta-row,.subnav)>*,
html.pt-leave .crumbs>*{animation:bl-pt-out .22s ease-in forwards}
html.pt-leave body>main,html.pt-leave body>footer{animation:bl-pt-lift .26s cubic-bezier(.4,0,.7,1) forwards}
html.pt-leave .menu[open]{animation:bl-pt-fade .22s ease-out forwards}

/* bez animacija za one koji su to podesili u sistemu */
@media (prefers-reduced-motion:reduce){
  .mq,.mq--r,.rv,.reel>li>*,.a-press,.a-tap,.dot--live{animation:none !important}
  .a-flash,.a-scan,.a-s1,.a-s2,.a-travel,.chat__typing{display:none !important}
  .a-r1,.a-r2,.a-r3,.a-r4,.a-r5,.a-s3,.a-c1,.a-c2,.a-c3,.a-b1{animation:none !important;opacity:1 !important;transform:none !important}
  .a-b2,.a-b3{animation:none !important;opacity:0 !important}
  html.js .steps li,.steps li,.steps::after{animation:none !important;opacity:1 !important;transform:none !important}
  .drop{animation-delay:0s !important}
  .tour__scene [class*="fs-"],.tour__steps li,.sc-prog span,.tour__scene .sc-switch__k::after{animation:none !important;opacity:1 !important;transform:none !important}
  .car__track,.slide{transition:none !important}
  .tour .sc-tap{display:none !important}
  .try .dot,.try-nudge,.appt.is-changed,.appt.is-changed .chip,.appt.is-changed .check path,.detail__body.is-swap,.detail__head.is-swap{animation:none !important}
  html.js :is(.hero__inner,.page-hero__inner,.split__text,.contact__text) *,html.js .crumbs>*,html.js main>section,html.js body>footer,html.js :is(.price-grid>.price,.price-side>.side-card,.split--hero>.chat,.contact__card,.reel-sec--types .section-head>*,.reel--types>li,.reel-sec--types .reel-nav),html.pt-leave *{animation:none !important}
}