/* ============================================================
   KNOTO - samo pocetna (index.html)
   Ucitava se posle scrollcraft.css i style.css.
   Engine objavljuje --sc-p (0..1) na svakom cinu; efekti ispod ga citaju.
   ============================================================ */
:root{
  /* Tokeni engine-a mapirani na paletu sajta */
  --sc-canvas:var(--paper); --sc-surface:var(--card);
  --sc-ink:var(--ink); --sc-ink-soft:var(--muted);
  --sc-accent:var(--thread); --sc-accent-ink:var(--indigo-deep);
  --sc-font-display:var(--font-display); --sc-font-text:var(--font-body);
  --slate:#4F5F78;
}
body.home{background:var(--paper); line-height:1.65;}

/* --- Zlatna nit (potpis) --- */
.nit{
  position:fixed; left:0; top:0; width:44px; height:100vh; z-index:40;
  pointer-events:none; overflow:visible;
}
.nit path{fill:none; stroke-linecap:round; stroke-linejoin:round;}
.nit-trag{stroke:var(--thread); stroke-width:1; opacity:.18;}
.nit-put{stroke:var(--thread); stroke-width:2;}

/* --- 1 · Hero --- */
.hk-stage{background:var(--slate);}
.hk-plate{
  position:absolute; inset:-6% 0; z-index:0;
  background:url(../slike/hero-plate.png) 0 0/100% 100% no-repeat, var(--slate);
  transform:translateY(calc(var(--sc-p, 0) * 5vh)) scale(1.04);
}
.hk-copy{
  position:absolute; z-index:2; left:var(--pad-inline); top:50%;
  translate:0 -42%; max-width:min(36rem, 46vw); color:var(--paper);
}
@media (min-width:1200px){ .hk-copy{left:calc((100vw - 1120px) / 2 + var(--pad-inline));} }
.hk-copy h1{font-size:clamp(2.6rem, 5.6vw, 4.6rem); margin-bottom:1.1rem;}
.hk-copy .lead{color:rgba(250,248,243,.82); margin-bottom:2rem;}
.hk-copy .kicker{color:#E2B864;}
/* Fokus na tamnom hero-u: zlatan, da se vidi */
.hk-stage :focus-visible{outline-color:var(--thread);}
.btn-ghost-light{border-color:rgba(250,248,243,.45); color:var(--paper); background:transparent;}
.btn-ghost-light:hover{border-color:var(--paper);}
.hk-beat{
  position:absolute; z-index:2; left:var(--pad-inline); bottom:16vh; max-width:18em;
  font-family:var(--font-display); font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.25; color:var(--paper);
}
@media (min-width:1200px){ .hk-beat{left:calc((100vw - 1120px) / 2 + var(--pad-inline));} }
/* Ruka izlazi iz donjeg desnog ugla: tu je sidro, odatle se torba primice */
.hk-bag{
  position:absolute; z-index:3; right:0; bottom:0; height:100%; width:auto; max-width:none;
  transform-origin:100% 100%;
  transform:scale(calc(1 + var(--sc-p, 0) * .16));
  pointer-events:none; /* slika je ukras: dodir prolazi do dugmadi ispod */
}
.hk-thread{
  position:absolute; z-index:4; left:0; bottom:9vh; width:100%; height:60px; overflow:visible;
  transform:translateY(calc(var(--sc-p, 0) * -16vh));
}
.hk-thread path{
  fill:none; stroke:var(--thread); stroke-width:2.5;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - min(1, .3 + var(--sc-p, 0) * 1.6));
}

/* --- 2 · Jedan, ne hiljadu --- */
.jedan-grid{display:grid; grid-template-columns:1fr .9fr; gap:clamp(2rem, 6vw, 5rem); align-items:center;}
.jedan-lista{list-style:none; margin-top:2rem;}
.jedan-lista li{border-top:2px solid var(--thread); padding:1rem 0 1.2rem; color:var(--muted);}
.jedan-lista strong{color:var(--ink); font-weight:600;}
.jedan-slika img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius);}

/* --- 3 · Kolekcija (pan) --- */
.kol-stage{display:flex; align-items:center; background:var(--paper); padding-top:var(--nav-height); box-sizing:border-box;} /* sadržaj se centrira ispod menija, ne ispod njega */
.kol-rail{gap:clamp(1.5rem, 3vw, 2.75rem); padding-inline:var(--pad-inline) 12vw; align-items:center;}
.kol-lead{flex:0 0 clamp(17rem, 30vw, 26rem);}
.kol-card{flex:0 0 min(clamp(17rem, 28vw, 24rem), max(14rem, calc((100vh - var(--nav-height) - 15rem) / 1.75)));} /* na nižim ekranima kartica se smanji da cela stane */
.kol-img img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); transition:transform .4s var(--sc-ease-out);}
.kol-img:hover img{transform:scale(1.02);}
.kol-thumbs{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.6rem 0 1rem;}
.kol-thumbs img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius);}
.kol-card h3{font-size:1.6rem; margin-bottom:.3rem;}
.kol-card p{color:var(--muted); font-size:.97rem;}
.kol-cena{margin-top:.6rem; font-weight:600; color:var(--indigo) !important;}
.kol-note{flex:0 0 clamp(15rem, 22vw, 19rem); color:var(--muted);}
/* Kartice stizu redom, kao fioka koja se izvlaci (prva ostaje na mestu) */
@media (prefers-reduced-motion:no-preference){
  .kol .kol-card{
    transform:translateY(calc(max(0, 1 - (var(--sc-p, 0) * 5 - var(--i) * .9)) * 24px));
    will-change:transform; /* kartica dobija svoj sloj, pa animacija ne trza */
  }
  /* Blede samo slike; tekst i cena su odmah puni, da se lako čitaju */
  .kol .kol-card .kol-img, .kol .kol-card .kol-thumbs{
    opacity:max(.55, min(1, calc(var(--sc-p, 0) * 5 - var(--i) * .9)));
    will-change:opacity;
  }
}
.kol-card:nth-of-type(1){--i:0;} .kol-card:nth-of-type(2){--i:1;} .kol-card:nth-of-type(3){--i:2;}

/* Telefon: obican vertikalni niz (home.js skida pan pre pokretanja engine-a) */
.kol--niz .kol-stage{display:block; padding-block:var(--pad-section);}
.kol--niz .kol-rail{display:grid; gap:2.5rem; padding-inline:var(--pad-inline);}
.kol--niz .kol-card{opacity:1 !important; transform:none !important;}
.kol--niz .kol-img, .kol--niz .kol-thumbs{opacity:1 !important;}

.tisina{height:30vh;}

/* --- 4 · Vrhunac: okvir raste do punog ekrana --- */
.cvor{--k:clamp(0, calc((var(--sc-p, 0) - .08) / .55), 1);}
.cvor-stage{background:var(--paper);}
.cvor-okvir{
  position:absolute; inset:0; margin:0; z-index:1;
  clip-path:inset(calc((1 - var(--k)) * 24%) calc((1 - var(--k)) * 36%) round calc((1 - var(--k)) * 14px));
}
.cvor-okvir img{width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  transform:scale(calc(1.18 - var(--k) * .18));}
.cvor-naslov{
  /* Ispod okvira: slika ga prekrije dok raste */
  position:absolute; z-index:0; top:calc(var(--nav-height) + 1vh); left:0; right:0; text-align:center;
  font-size:clamp(2.2rem, 5vw, 3.8rem);
}
.cvor-nit{
  position:absolute; z-index:3; left:50%; top:50%; width:min(70vw, 760px); translate:-50% -50%; overflow:visible;
}
.cvor-nit path{
  fill:none; stroke:var(--thread); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0, (var(--sc-p, 0) - .45) / .35, 1));
  opacity:clamp(0, (var(--sc-p, 0) - .45) * 40, 1);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.cvor-tekst{
  position:absolute; z-index:3; left:var(--pad-inline); bottom:clamp(2.5rem, 10vh, 7rem);
  max-width:28rem; color:var(--paper);
}
.cvor-veliko{font-family:var(--font-display); font-size:clamp(1.8rem, 3.6vw, 3rem); line-height:1.15; margin-bottom:.6rem;}
/* Tamni scrim samo ispod teksta, dole levo */
.cvor-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,24,34,.82) 0%, rgba(20,24,34,.6) 22%, rgba(20,24,34,.2) 42%, transparent 55%);
  opacity:var(--k);
}

/* --- 5 · Boje --- */
.boje-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center;}
.boje-izbor{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem;}
.boja{
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:.5rem 1.1rem .5rem .55rem;
  border:1.5px solid var(--line); border-radius:999px; background:var(--card);
  font:inherit; font-weight:500; cursor:pointer; transition:border-color .2s ease;
}
.boja::before{content:''; width:28px; height:28px; border-radius:50%; background:var(--b); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.boja[aria-pressed="true"]{border-color:var(--thread); box-shadow:0 0 0 1px var(--thread);}
.boje-slike{display:grid; border-radius:var(--radius); overflow:hidden;}
.boje-slike img{grid-area:1/1; width:100%; aspect-ratio:1; object-fit:cover; opacity:0; transition:opacity .45s ease;}
.boje-slike img.on{opacity:1;}

/* --- 6 · Proces --- */
.proces-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center;}
.proces-slike{position:relative; padding-right:18%; padding-bottom:14%;}
.proces-velika{width:100%; border-radius:var(--radius);}
.proces-mala{
  position:absolute; right:0; bottom:0; width:42%; border-radius:var(--radius);
  border:6px solid var(--indigo-deep); box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
}
.proces-koraci{list-style:none; counter-reset:k; margin:2rem 0 1.5rem;}
.proces-koraci li{counter-increment:k; padding:.85rem 0; border-top:1px solid rgba(250,248,243,.15); color:rgba(250,248,243,.72);}
.proces-koraci li::before{content:counter(k); font-family:var(--font-display); color:var(--thread); margin-right:1rem;}
.proces-koraci strong{color:var(--paper); font-weight:600;}
.proces-sati{font-family:var(--font-display); font-size:1.35rem; color:var(--thread);}

/* --- 7 · Prica --- */
.prica-slika{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);}

/* --- 8 · Kraj --- */
.kraj-stage{display:grid; place-items:center; background:var(--paper);}
.kraj-inner{text-align:center; padding-inline:var(--pad-inline);}
.kraj-inner h2{font-size:clamp(2.4rem, 6vw, 4.4rem);}
.kraj-inner .lead{margin:0 auto 3rem;}
.kraj-cta{position:relative; display:inline-block;}
.kraj-cta .btn{position:relative; z-index:1; font-size:1.1rem; padding:1rem 2.2rem;}
.kraj-petlja{position:absolute; left:-36px; top:-26px; width:calc(100% + 72px); height:calc(100% + 52px); overflow:visible;}
.kraj-petlja path{
  fill:none; stroke:var(--thread); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - clamp(0, var(--sc-p, 0) * 1.6, 1));
  opacity:clamp(0, var(--sc-p, 0) * 40, 1);
}
.kraj-footer{position:absolute; left:0; right:0; bottom:0; border-top:1px solid var(--line);}

/* --- Reduced motion: staticna kompozicija, nit vec iscrtana --- */
@media (prefers-reduced-motion:reduce){
  .hk-plate, .hk-bag, .hk-thread, .cvor-okvir img{transform:none;}
  .hk-thread path, .cvor-nit path, .kraj-petlja path{stroke-dashoffset:0; opacity:1;}
  /* Okvir je odmah pun, pa naslov ide preko slike, svetao, sa scrimom odozgo */
  .cvor-naslov{z-index:3; color:var(--paper);}
  .cvor-scrim{opacity:1; background:linear-gradient(to bottom, rgba(20,24,34,.85) 0%, rgba(20,24,34,.6) 22%, transparent 40%), linear-gradient(to top, rgba(20,24,34,.82) 0%, rgba(20,24,34,.6) 22%, rgba(20,24,34,.2) 42%, transparent 55%);}
  .cvor{--k:1;}
  .boje-slike img{transition:none;}
}

/* --- Telefon --- */
@media (max-width:760px){
  .nit{width:22px;}
  .hk-copy{top:calc(var(--nav-height) + 1rem); translate:none; max-width:none; right:var(--pad-inline);}
  .hk-copy h1{font-size:clamp(2.2rem, 10vw, 2.8rem);}
  .hk-copy .lead{font-size:1rem; margin-bottom:1.25rem;}
  .hk-copy .btn{padding:.7rem 1.2rem;}
  .hk-copy .btn-ghost-light{display:none;}
  .hk-beat{bottom:auto; top:calc(var(--nav-height) + 1rem); right:var(--pad-inline);}
  /* Portret kadar: torba dole preko cele sirine, ruka i dalje izlazi desno */
  .hk-bag{width:auto; height:min(144vw, calc((100svh - 400px) * 1.45));} /* na niskim ekranima torba se smanji da ne prekrije dugme */
  .hk-thread{bottom:4vh;}
  .jedan-grid, .boje-grid, .proces-grid{grid-template-columns:1fr;}
  .cvor-okvir{clip-path:inset(calc((1 - var(--k)) * 26%) calc((1 - var(--k)) * 18%) round calc((1 - var(--k)) * 12px));}
  .cvor-nit{width:92vw;}
  .proces-slike{max-width:440px;}
}

/* --- Uspravni tablet (npr. iPad 768x1024): torba ne sme da prekrije tekst --- */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .hk-copy{top:calc(var(--nav-height) + 2rem); translate:none; max-width:34rem;}
  .hk-beat{bottom:auto; top:calc(var(--nav-height) + 2rem); right:var(--pad-inline);}
  .hk-bag{height:min(100%, calc((100svh - 480px) * 1.45));}
}

/* --- Visine pinovanih delova odmah iz CSS-a (iste kao data-sc-span u index.html), da se strana ne pomeri dok se JS učitava --- */
.hk{height:180vh;}
.cvor{height:340vh;}
.kraj{height:120vh;}
.hk > [data-sc-stage], .cvor > [data-sc-stage], .kraj > [data-sc-stage]{position:sticky; top:0; height:100vh; height:100svh; overflow:clip;}
/* Kolekcija je pan samo na širim ekranima; na telefonu je običan niz */
@media (min-width:761px){
  .kol{height:240vh;}
  .kol > [data-sc-stage]{position:sticky; top:0; height:100vh; height:100svh; overflow:clip;}
}