/* ==========================================================================
   Pokret: učitavanje stranice, zaglavlje, otkrivanje pri skrolu, hover.
   Sve je transform/opacity, uključuje se samo uz JS (html.js) i samo kada
   korisnik nije tražio smanjen pokret. Završno stanje je uvek isto kao u dizajnu.
   ========================================================================== */

:root {
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-io: cubic-bezier(.65, 0, .25, 1);
	--hh: 83px;
}

/* ---- zaglavlje: fiksno, menja stanje pri skrolu (uvek aktivno) ---- */
.site-header { position: fixed; height: var(--hh); transition: height .3s var(--ease-out), transform .4s var(--ease-io); }
.site-header::before { content: ''; position: absolute; inset: 0; background: #fff; box-shadow: 0 1px 0 rgba(30, 30, 30, .06), 0 10px 28px rgba(30, 30, 30, .07); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.site-header__in { z-index: 1; }
.site-header.is-stuck { --hh: 68px; }
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }
.site-logo { transform-origin: left center; transition: transform .3s var(--ease-out); }
.site-header.is-stuck .site-logo { transform: scale(.82); }
.mega { top: calc(var(--hh) - 20px); }
.search-panel { z-index: 3; }

/* podvlaka u meniju klizi sa leve strane na hover */
.nav__list > li > a { position: relative; }
.nav__list > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-out); }
.nav__list > li > a:hover::after, .nav__list > li > a:focus-visible::after { transform: scaleX(1); }

/* hover: blago podizanje kartica i dugmadi */
.btn { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s var(--ease-out), box-shadow .25s ease; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(94, 150, 32, .32); }
.btn--outline:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: none; }
.pcard__link { transition: border-color .25s ease, box-shadow .3s ease, transform .35s var(--ease-out); }
.pcard__link:hover { transform: translateY(-5px); }
.subcat { transition: border-color .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
.subcat:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(50, 50, 50, .08); }
.doc { transition: border-color .25s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
.doc:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(50, 50, 50, .07); }
.card-cat { transition: box-shadow .6s var(--ease-out); }
.card-cat:hover { box-shadow: 0 10px 22px rgba(30, 30, 30, .12); }
.card-cat img { transition: transform 1.2s var(--ease-out); }
.card-cat:hover img { transform: scale(1.025); }
.card-cat__title { transition: transform .6s var(--ease-out); }
.card-cat:hover .card-cat__title { transform: translateY(-2px); }
.site-footer__nav a, .site-footer__tel a { transition: color .2s ease, transform .25s var(--ease-out); display: inline-block; }
.site-footer__nav a:hover, .site-footer__tel a:hover { transform: translateX(3px); }

/* traka napretka (učitavanje i prelazak na novu stranicu) */
.top-progress { position: fixed; z-index: 1000; left: 0; top: 0; height: 3px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; }
.top-progress.is-load { animation: fl-progress-load .9s var(--ease-out) forwards; }
.top-progress.is-go { opacity: 1; transform: scaleX(.86); transition: transform 7s cubic-bezier(.1, .6, .3, 1); }

@keyframes fl-progress-load { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fl-header-in { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fl-main-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes fl-rise { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: none; } }
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fl-clip-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes fl-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fl-pop { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes fl-mega-in { from { opacity: 0; transform: translate3d(-50%, -10px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }
@keyframes fl-mega-col { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes fl-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fl-shimmer { to { transform: translateX(100%); } }

/* hero: traka sa vremenom do sledećeg slajda (zeleno punjenje) */
.hero__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left center; z-index: 1; }
.hero__bar.is-active::before { transform: scaleX(1); }
.hero__bar::after { background: #9a9a9a !important; }

@media (prefers-reduced-motion: no-preference) {
	/* učitavanje stranice */
	html.js .site-header { animation: fl-header-in .75s var(--ease-out) backwards; }
	html.js .site-main { animation: fl-main-in .65s .05s var(--ease-out) backwards; }
	html.js.is-leaving .site-main, html.js.is-leaving .site-footer { opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .22s ease, transform .22s ease; }

	/* hero: tekst ulazi redom, fotografija se otkriva, oznaka iskakuje */
	html.js .hero__slide.is-active .h-hero { animation: fl-rise .95s .12s var(--ease-out) backwards; }
	html.js .hero__slide.is-active .hero__lead { animation: fl-rise .95s .28s var(--ease-out) backwards; }
	html.js .hero__slide.is-active .hero__btns { animation: fl-rise .95s .42s var(--ease-out) backwards; }
	html.js .hero__slide.is-active .hero__media { animation: fl-clip-in 1.15s .05s var(--ease-io) backwards; }
	html.js .hero__slide.is-active .hero__media img { animation: fl-settle 7.5s .05s var(--ease-out) backwards; }
	html.js .hero__badge { animation: fl-pop .9s .85s var(--ease-out) backwards; }
	html.js .hero__pager { animation: fl-fade .8s 1s ease backwards; }
	html.js .hero__bar.is-active.is-run::before { animation: fl-bar-fill var(--hero-ms, 6500ms) linear forwards; }
	html.js .hero__arch--r { animation: fl-fade 1.4s .2s ease backwards; }

	/* mega meni */
	html.js .mega:not([hidden]) { animation: fl-mega-in .28s var(--ease-out) backwards; }
	html.js .mega:not([hidden]) .mega__group { animation: fl-mega-col .4s var(--ease-out) backwards; }
	html.js .mega:not([hidden]) .mega__group:nth-child(2) { animation-delay: .04s; }
	html.js .mega:not([hidden]) .mega__group:nth-child(3) { animation-delay: .08s; }
	html.js .mega:not([hidden]) .mega__group:nth-child(4) { animation-delay: .12s; }
	html.js .mega:not([hidden]) .mega__group:nth-child(5) { animation-delay: .16s; }
	html.js .mega:not([hidden]) .mega__group:nth-child(6) { animation-delay: .2s; }
	html.js .search-panel:not([hidden]) { animation: fl-fade .25s ease backwards; }
	html.js .cases__panel.is-active { animation: fl-fade .5s ease backwards; }

	/* otkrivanje pri skrolu (klase dodaje motion.js) */
	html.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); will-change: opacity, transform; }
	html.js .rv.is-in { opacity: 1; transform: none; will-change: auto; }
	html.js .rv--left { transform: translate3d(-36px, 0, 0); }
	html.js .rv--right { transform: translate3d(36px, 0, 0); }
	/* slike: otkrivanje odsecanjem ide na dete, a ne na element koji posmatra IntersectionObserver
	   (posmatrač elemenat sa clip-path-om vidi kao nevidljiv i nikad ga ne otkrije) */
	html.js .rv--img { opacity: 1; transform: none; }
	html.js .rv--img > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-io); transition-delay: calc(var(--d, 0) * 80ms); }
	html.js .rv--img.is-in > * { clip-path: inset(0 0 0 0); }
	html.js .rv--img img { transform: scale(1.14); transition: transform 1.6s var(--ease-out), opacity .7s ease; transition-delay: calc(var(--d, 0) * 80ms); }
	html.js .rv--img.is-in img { transform: scale(1); }
	html.js .rv--line { transform-origin: left center; transform: scaleX(0); opacity: 1; }
	html.js .rv--line.is-in { transform: scaleX(1); }

	/* slike: sivi zamenik sa treptajem dok se ne učitaju, pa blago pojavljivanje */
	html.js img.lz { opacity: 0; transition: opacity .7s ease; }
	html.js img.lz.is-loaded { opacity: 1; }
	.is-loading { position: relative; overflow: hidden; }
	.is-loading::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-100%); animation: fl-shimmer 1.3s ease-in-out infinite; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .site-logo, .site-header::before { transition: none; }
	.site-header.is-hidden { transform: none; }
	.btn:hover, .pcard__link:hover, .subcat:hover, .doc:hover { transform: none; }
}

/* meni na telefonu: zaglavlje se ne sakriva dok je meni otvoren */
@media (max-width: 1024px) {
	.site-header { position: fixed; }
	.site-header.is-nav-open { transform: none; }
	.site-header.is-nav-open::before { opacity: 1; }
}