/* ============================================================
   VIKENDICE BL — v2.0 visual layer
   Ne mijenja strukturu ni sadržaj; samo vizuelni efekti.
   ============================================================ */
:root{
  --v2-gold:#C98A3E;
  --v2-gold-2:#E0A95A;
  --v2-ink:#121410;
  --v2-cream:#F3EBDD;
  --v2-ease:cubic-bezier(.2,.7,.2,1);
}
html{scroll-behavior:smooth}
body{opacity:0;animation:v2PageIn .7s ease .05s forwards}
@keyframes v2PageIn{to{opacity:1}}


/* ---------- nav polish ---------- */
nav{transition:box-shadow .35s,padding .3s,background .35s!important}
nav.v2-scrolled{box-shadow:0 10px 40px rgba(0,0,0,.35)}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent 0%,var(--v2-gold) 50%,transparent 100%);opacity:0;transition:opacity .4s}
nav.v2-scrolled::after{opacity:.7}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--v2-gold-2);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--v2-ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- reveal on scroll ---------- */
.v2-rv{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s var(--v2-ease);transition-delay:var(--v2-d,0s)}
.v2-rv.v2-in{opacity:1;transform:none}
.v2-rv-l{opacity:0;transform:translateX(-30px);transition:opacity .9s ease,transform .9s var(--v2-ease);transition-delay:var(--v2-d,0s)}
.v2-rv-r{opacity:0;transform:translateX(30px);transition:opacity .9s ease,transform .9s var(--v2-ease);transition-delay:var(--v2-d,0s)}
.v2-rv-l.v2-in,.v2-rv-r.v2-in{opacity:1;transform:none}
.v2-rv-scale{opacity:0;transform:scale(.94);transition:opacity .9s ease,transform .9s var(--v2-ease);transition-delay:var(--v2-d,0s)}
.v2-rv-scale.v2-in{opacity:1;transform:none}

/* section title underline grows when revealed */
.sec-title{position:relative}
.sec-title::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,var(--v2-gold),transparent);transition:width 1.1s var(--v2-ease) .25s}
.sec-title.v2-in::after{width:72px}

/* hero word-by-word reveal */
.v2-w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(1.5deg);transition:opacity .7s ease,transform .8s var(--v2-ease);transition-delay:var(--v2-d,0s)}
.v2-w.v2-in{opacity:1;transform:none}

/* ---------- POČETNA: hero pozadina ---------- */
#landing{position:relative!important;isolation:isolate;overflow:visible;min-height:calc(100vh - 57px)!important;padding:80px 48px!important;justify-content:center!important}
/* Hero kolaž — stabilan sloj: visina zaključana na veliki viewport (lvh) da se slika NE skalira kad se
   adresna traka na telefonu sakrije/pokaže; klizanje ide transformom na GPU-u (bez repaint-a pri skrolu). */
:root{--v2-hh:100vh;--v2-tile:177.78vh}
@supports(height:1lvh){:root{--v2-hh:100lvh;--v2-tile:177.78lvh}}
#landing .v2-hero-bg,#landing .v2-hero-blur{position:fixed;top:0;left:0;width:100%;height:var(--v2-hh);z-index:-2;overflow:hidden;pointer-events:none;contain:strict;transform:translateZ(0);backface-visibility:hidden}
#landing .v2-hero-track{position:absolute;top:0;left:0;height:100%;width:calc(100vw + var(--v2-tile) + 4px);background-image:url('/images/hero_kolaz.jpg');background-size:auto 100%;background-repeat:repeat-x;background-position:0 0;animation:v2Scroll 70s linear infinite;will-change:transform;backface-visibility:hidden}
/* slika 1600×900 → širina pločice = visina × 1.7778; pomak tačno jedne pločice = beskonačna petlja bez šava */
@keyframes v2Scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--v2-tile)),0,0)}}
/* blur po ivicama: unaprijed zamućena kopija (images/hero_kolaz_blur.jpg) + statična maska */
#landing .v2-hero-blur{-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 48%,transparent 0%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 48%,transparent 0%,transparent 55%,#000 100%)}
#landing .v2-hero-blur .v2-hero-track{background-image:url('/images/hero_kolaz_blur.jpg')}
/* pauza kad hero nije na ekranu */
#landing.v2-hero-off .v2-hero-track{animation-play-state:paused}
#landing .v2-hero-vignette{position:fixed;top:0;left:0;width:100%;height:var(--v2-hh);transform:translateZ(0);z-index:-1;pointer-events:none;box-shadow:inset 0 0 180px 60px rgba(18,20,16,.75)}
#landing::before{content:"";position:fixed;top:0;left:0;width:100%;height:var(--v2-hh);transform:translateZ(0);z-index:-1;background:
  radial-gradient(ellipse at 50% 40%,rgba(18,20,16,.15) 0%,rgba(18,20,16,.45) 70%,rgba(18,20,16,.7) 100%),
  linear-gradient(180deg,rgba(18,20,16,.5) 0%,rgba(18,20,16,.15) 40%,rgba(18,20,16,.7) 100%)}
#landing .landing-eyebrow{color:var(--v2-gold-2)!important;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#landing .landing-h1{color:#fff!important;text-shadow:0 6px 30px rgba(0,0,0,.55);font-size:clamp(40px,6.4vw,78px)!important;font-weight:300!important}
#landing .landing-h1 em{color:var(--v2-gold-2)!important}
#landing .landing-sub{color:rgba(243,235,221,.85)!important;text-shadow:0 2px 10px rgba(0,0,0,.6);max-width:520px!important;font-size:17px!important}
#landing .gold-line{background:linear-gradient(90deg,transparent,var(--v2-gold-2),transparent)!important}
#landing .landing-choices{border:none!important;gap:18px!important;background:transparent!important;padding:0;max-width:1060px!important}
#landing .choice-card{border-radius:26px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .5s var(--v2-ease),box-shadow .5s!important}
#landing .choice-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1.5px rgba(224,169,90,.6)}
#landing .choice-card .choice-bg{border-radius:inherit;filter:blur(0)!important;transform:scale(1.02)!important;transition:transform 1.2s var(--v2-ease)!important}
#landing .choice-card:hover .choice-bg{transform:scale(1.1)!important}
#landing .choice-title{color:#fff!important;font-size:24px!important}
#landing .choice-desc{color:rgba(243,235,221,.8)!important}
#landing .choice-arrow{color:var(--v2-gold-2)!important}
#landing .choice-num{color:rgba(224,169,90,.85)!important}
.v2-scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(243,235,221,.7);font-size:10px;letter-spacing:3px;text-transform:uppercase;font-family:"Instrument Sans",sans-serif;z-index:2;pointer-events:none;animation:v2Fade 1s ease 1.6s both}
.v2-scroll-hint span{width:1px;height:38px;background:linear-gradient(180deg,var(--v2-gold-2),transparent);position:relative;overflow:hidden}
.v2-scroll-hint span::after{content:"";position:absolute;left:0;top:0;width:1px;height:40px;background:#fff;transform:translate3d(0,-40px,0);animation:v2Drop 1.8s ease-in-out infinite;will-change:transform}
@keyframes v2Drop{to{transform:translate3d(0,40px,0)}}
@keyframes v2Fade{from{opacity:0}to{opacity:1}}
@media(max-width:768px){
  #landing{padding:70px 20px 80px!important;min-height:calc(100svh - 57px)!important}
  #landing .landing-h1{font-size:40px!important}
  #landing .landing-choices{gap:14px!important}
  #landing .choice-card{border-radius:20px}
  .v2-scroll-hint{display:none}
}

/* oblak iza teksta na početnoj */
#landing .v2-hero-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
#landing .v2-hero-text::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:150%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(18,20,16,.62) 0%,rgba(18,20,16,.42) 40%,rgba(18,20,16,0) 70%);filter:blur(10px);z-index:-1;pointer-events:none}
#landing .landing-choices{position:relative;z-index:1}
@media(max-width:768px){#landing .v2-hero-text::before{width:130%;height:135%}}
/* ---------- ostali heroi: parallax + dublji overlay ---------- */
.hero-banner-bg,.iz-hero-bg,.hero-iz-bg{will-change:transform}
.hero-banner-obj{isolation:isolate}
.hero-banner-overlay{background:linear-gradient(180deg,rgba(20,16,12,.25) 0%,rgba(20,16,12,.55) 60%,rgba(20,16,12,.85) 100%)!important}
.hero-banner-title{text-shadow:0 8px 40px rgba(0,0,0,.6)!important}
/* zemljiste + ranč: dobijaju pozadinsku sliku */
section.hero.v2-hero-img{isolation:isolate;overflow:hidden}
section.hero.v2-hero-img .v2-hero-bg{position:absolute;inset:-10% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform}
section.hero.v2-hero-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,20,16,.72) 0%,rgba(18,20,16,.55) 50%,rgba(18,20,16,.9) 100%)}
section.hero.v2-hero-img h1,section.hero.v2-hero-img .hero-eyebrow,section.hero.v2-hero-img p,section.hero.v2-hero-img .breadcrumb,section.hero.v2-hero-img .breadcrumb a{color:#fff!important;text-shadow:0 4px 24px rgba(0,0,0,.6)}
section.hero.v2-hero-img h1 em{color:var(--v2-gold-2)!important}
section.hero.v2-hero-img p{color:rgba(243,235,221,.85)!important}
section.hero.v2-hero-img .hero-eyebrow{color:var(--v2-gold-2)!important}
section.hero.v2-hero-img{padding-top:120px!important;padding-bottom:110px!important}
section.hero.v2-hero-img::before{display:none}
@media(max-width:768px){section.hero.v2-hero-img{padding-top:70px!important;padding-bottom:60px!important}}

/* ---------- kartice: lift, sjaj, zoom slika ---------- */
.cat-img-wrap,.card-cover,.zemljiste-card .gallery-main-wrap,.katalog-tile,.mat-image,.obj-split-imgs > *,.cat-tile{overflow:hidden}
.cat-img-wrap img,.card-cover img,.katalog-tile img,.mat-image img,.obj-split-imgs img,.thumbs-row img,.zemljiste-card img{transition:transform 1.1s var(--v2-ease),filter .5s!important}
.cat-img-wrap:hover img,.card-cover:hover img,.katalog-tile:hover img,.mat-image:hover img,.obj-split-imgs > *:hover img,.zemljiste-card:hover img{transform:scale(1.07)}
.cat-tile,.zemljiste-card,.kontakt-card,.process-step,.mat-item,.cards-3 > *,.katalog-tile,.obj-faq-item,.iz-slide{transition:transform .5s var(--v2-ease),box-shadow .5s,border-color .4s!important}
.cat-tile:hover,.zemljiste-card:hover,.kontakt-card:hover,.process-step:hover,.mat-item:hover,.cards-3 > *:hover,.katalog-tile:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,14,6,.18),0 0 0 1px rgba(201,138,62,.35)!important}
/* gold corner accent on cards */
.cat-tile,.zemljiste-card,.kontakt-card,.cards-3 > *{position:relative}
.cat-tile::before,.zemljiste-card::before,.kontakt-card::before,.cards-3 > *::before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--v2-gold),var(--v2-gold-2));z-index:3;transition:width .6s var(--v2-ease);pointer-events:none}
.cat-tile:hover::before,.zemljiste-card:hover::before,.kontakt-card:hover::before,.cards-3 > *:hover::before{width:100%}

/* ---------- dugmad: sjaj koji prolazi ---------- */
.btn-primary,.btn-primary-final,.nav-btn,.cat-cta,.zemljiste-card button,.btn-row a,.btn-row button,.kb-a,.kb-b,.modal-contact-badge,.k-badge{position:relative;overflow:hidden;transition:transform .3s var(--v2-ease),box-shadow .3s,filter .3s!important}
.btn-primary::after,.btn-primary-final::after,.nav-btn::after,.cat-cta::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.btn-primary:hover::after,.btn-primary-final:hover::after,.nav-btn:hover::after,.cat-cta:hover::after{left:130%}
.btn-primary:hover,.btn-primary-final:hover,.nav-btn:hover,.cat-cta:hover,.btn-row a:hover,.btn-row button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,138,62,.28)}

/* ---------- statistike: brojač ---------- */
.stat-num{font-variant-numeric:tabular-nums}
.stat-item{transition:background .4s}
.stat-item:hover{background:rgba(201,138,62,.06)}

/* ---------- plutajući kontakt: puls ---------- */
.float-wa{position:relative}
.float-wa::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #25D366;animation:v2Pulse 2.2s ease-out infinite;pointer-events:none}
@keyframes v2Pulse{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* ---------- back to top ---------- */
.v2-top{position:fixed;left:18px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--v2-ink);color:var(--v2-gold-2);border:1px solid rgba(201,138,62,.45);display:grid;place-items:center;cursor:pointer;z-index:500;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s,background .3s;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.v2-top.v2-show{opacity:1;transform:none}
.v2-top:hover{background:var(--v2-gold);color:var(--v2-ink)}
.v2-top svg{width:18px;height:18px}
@media(max-width:768px){.v2-top{left:12px;bottom:14px;width:40px;height:40px}}


/* ---------- fina tekstura ---------- */
.v2-grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");transform:translateZ(0)}

/* ---------- footer ---------- */
footer{position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--v2-gold),transparent);opacity:.6}
footer a{transition:color .25s,padding-left .25s}
footer .footer-col a:hover{padding-left:6px}

/* ---------- galerija / lightbox ---------- */
.lightbox img,.obj-lb img{animation:v2LbIn .45s var(--v2-ease)}
@keyframes v2LbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
.modal{animation:v2ModalIn .5s var(--v2-ease)}
@keyframes v2ModalIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .v2-rv,.v2-rv-l,.v2-rv-r,.v2-rv-scale,.v2-w{opacity:1!important;transform:none!important;transition:none!important}
  #landing .v2-hero-track{animation:none!important}
  body{animation:none;opacity:1}
  .v2-scroll-hint{display:none}
}

/* ---------- kontakt dugmad na mobilnom: 2 kolone ---------- */
@media(max-width:768px){
  .kontakt-card .btn-row{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  .kontakt-card .btn-row .k-badge{width:100%;justify-content:center;margin:0!important}
}

/* ---------- mobilni meni: glatko otvaranje/zatvaranje ---------- */
@media(max-width:768px){
  .nav-links{display:flex!important;flex-direction:column;width:100%;order:3;overflow:hidden;max-height:0;opacity:0;padding:0!important;margin-top:0!important;border-top:1px solid transparent!important;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease,padding .4s ease,margin-top .4s ease,border-color .4s}
  .nav-links.open{max-height:480px;opacity:1;padding:8px 0 4px!important;margin-top:10px!important;border-top-color:var(--border,rgba(201,150,58,.25))!important}
  .nav-links li{opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
  .nav-links.open li{opacity:1;transform:none}
  .nav-links.open li:nth-child(1){transition-delay:.06s}.nav-links.open li:nth-child(2){transition-delay:.11s}.nav-links.open li:nth-child(3){transition-delay:.16s}.nav-links.open li:nth-child(4){transition-delay:.21s}.nav-links.open li:nth-child(5){transition-delay:.26s}.nav-links.open li:nth-child(6){transition-delay:.31s}
  .hamburger span{transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s!important}
}

/* ---------- podstranice objekata: sakrij breadcrumb traku ---------- */
nav.obj-breadcrumb{display:none!important}

/* ---------- FAQ: kartice + glatko otvaranje ---------- */
.obj-faq{max-width:900px!important}
.obj-faq-title{font-size:12px!important;letter-spacing:3.5px!important;margin-bottom:22px!important}
.obj-faq-item{border:1px solid rgba(32,33,29,.08)!important;border-radius:18px!important;background:#fff!important;margin-bottom:12px;overflow:hidden;box-shadow:0 6px 20px rgba(20,14,6,.05);transition:box-shadow .4s,border-color .4s,transform .4s var(--v2-ease)}
.obj-faq-item:last-child{border-bottom:1px solid rgba(32,33,29,.08)!important}
.obj-faq-item:hover{box-shadow:0 14px 36px rgba(20,14,6,.10);border-color:rgba(201,138,62,.35)!important}
.obj-faq-item.open{border-color:rgba(201,138,62,.55)!important;box-shadow:0 18px 44px rgba(20,14,6,.12)}
.obj-faq-q{padding:22px 70px 22px 26px!important;font-size:18px!important;line-height:1.35!important;transition:color .3s,background .3s!important}
.obj-faq-item.open .obj-faq-q{color:var(--ember,#B5602C)!important}
.obj-faq-q::after{content:""!important;right:22px!important;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(201,138,62,.5);background:
  linear-gradient(var(--v2-gold),var(--v2-gold)) center/12px 1.5px no-repeat,
  linear-gradient(var(--v2-gold),var(--v2-gold)) center/1.5px 12px no-repeat;transition:transform .45s var(--v2-ease),background-color .3s,border-color .3s!important}
.obj-faq-item.open .obj-faq-q::after{transform:translateY(-50%) rotate(135deg)!important;background-color:rgba(201,138,62,.12);border-color:var(--v2-gold)}
.obj-faq-a{max-height:none!important;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--v2-ease)!important;overflow:hidden}
.obj-faq-item.open .obj-faq-a{grid-template-rows:1fr}
.obj-faq-a-inner{min-height:0;overflow:hidden;padding:0 26px 0!important;opacity:0;transform:translateY(-6px);transition:opacity .4s ease .1s,transform .45s var(--v2-ease) .05s,padding .4s ease;font-size:15.5px!important;line-height:1.75!important}
.obj-faq-item.open .obj-faq-a-inner{opacity:1;transform:none;padding:0 26px 24px!important}
@media(max-width:768px){
  .obj-faq-q{padding:18px 58px 18px 18px!important;font-size:16px!important}
  .obj-faq-q::after{right:14px!important;width:30px;height:30px}
  .obj-faq-a-inner{padding:0 18px 0!important}
  .obj-faq-item.open .obj-faq-a-inner{padding:0 18px 20px!important}
  .obj-faq-item{border-radius:14px!important}
}

/* ---------- bez horizontalnog pomjeranja na telefonu ---------- */
html,body{overflow-x:hidden;overflow-x:clip}
#landing{overflow-x:clip}
#landing .v2-hero-text{max-width:100%}
@media(max-width:768px){#landing .v2-hero-text::before{width:120%;height:130%}}

/* ---------- lightbox galerije iznad svega ---------- */
#katLightbox{z-index:5000!important}
#katLightbox .lb-close{z-index:2;width:44px;height:44px;font-size:20px;border-radius:50%}
#katLightbox img{animation:v2LbIn .35s var(--v2-ease)}

/* ---------- performanse skrola ---------- */
nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* nav ne mijenja visinu pri skrolu (ranije 16→12px padding = cijela stranica poskoči 8px i sjecka) */
@media(min-width:769px){nav.scrolled{padding-top:16px!important;padding-bottom:16px!important}}
nav{transition:box-shadow .35s,background .35s!important}
