/* ═══════════════════════════════════════════════════════════════════════
   Radovi — lanac.

   Sekcija se otvara kao i ostale: naslov .d2 i uvodni tekst .vod uz lijevu
   marginu. Prsten stoji desno od naslova; kad se odmota u lanac, naslov se
   povlači, a natpisi projekta tek tada izlaze. Na kraju se prsten zatvori i
   naslov vrati.

   Bez skripte (ili uz reduced-motion) ostaje naslov i postojeća mreža .wk.
   Scena se pali klasom .zivo koju dodaje skripta.

   Prefiks ln- / --lk jer sekcija dijeli dokument sa ostatkom stranice.
   ═══════════════════════════════════════════════════════════════════════ */
.lanac{
  --lk:calc(100vw / 1440);
  --ln-n:7;
  --ln-prsten:290;   /* poluprečnik prstena spolja, u dizajnerskim px */
}

/* ── bez skripte: obična sekcija ── */
.ln-ekran{position:relative}
.ln-uvod{
  max-width:var(--max,1560px);margin:0 auto clamp(40px,5vw,72px);padding-inline:var(--pad,24px);
  display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;
}
.ln-uvod .d2{margin:0}
.ln-uvod .vod{margin:0;max-width:38ch}
.ln-scena,.ln-natpis,.ln-putokaz{display:none}

/* ── živa scena ── */
.lanac.zivo{height:calc(100svh * (var(--ln-n) + 3));padding-block:0}
.lanac.zivo .ln-ekran{position:sticky;top:0;height:100svh;overflow:hidden}
.lanac.zivo .wk{display:none}

.lanac.zivo .ln-uvod{
  position:absolute;z-index:2;left:var(--pad,66px);top:50%;transform:translateY(-50%);
  width:min(39vw,560px);max-width:none;margin:0;padding:0;display:block;pointer-events:none;
}
.lanac.zivo .ln-uvod .vod{margin-top:clamp(20px,2.4vw,30px);max-width:34ch}

/* Platno, SVG i kartice se gase kao jedna grupa, pa nit ispod kartica ne
   proviri kroz poluprovidne kartice dok scena ulazi. */
.lanac.zivo .ln-pozornica{position:absolute;inset:0;opacity:0}
.lanac.zivo .ln-scena{display:block;position:absolute;inset:0;width:100%;height:100%}
/* Kartice su HTML iznad SVG-a, ne slike u njemu. Slika u SVG-u se na svaki
   pomak iznova slika i rasterizuje zajedno sa cijelim SVG-om; ovako je svaka
   kartica svoj sloj na kompozitoru i skrol joj mijenja samo transform. Kartica
   je velika koliko u fokusu lanca, a u prstenu se samo smanjuje (scale <= 1),
   pa ostaje oštra. Mjere i transform piše radovi-lanac.js. */
/* Metaball (zamućenje + prag) crta se na platnu u pola rezolucije, a ne kao
   SVG filter preko cijelog ekrana. Kompozitor platno samo razvuče; oštra nit
   ostaje u SVG-u iznad njega. */
.ln-platno{display:none}
.lanac.zivo .ln-platno{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.ln-karte{display:none}
.lanac.zivo .ln-karte{display:block;position:absolute;inset:0;pointer-events:none}
.ln-k{position:absolute;left:0;top:0;display:block;overflow:hidden;pointer-events:auto;cursor:pointer;
  width:calc(420px * var(--ln-sb,1));height:calc(525px * var(--ln-sb,1));border-radius:calc(20px * var(--ln-sb,1));
  transform-origin:50% 50%;backface-visibility:hidden}
.ln-k img{display:block;width:100%;height:100%;object-fit:cover}
/* Svoj sloj kartica dobija samo dok je sekcija blizu ekrana (translate3d u
   skripti ga drži na kompozitoru). Namjerno bez will-change: uz njega Chrome
   zaključa rezoluciju sloja na onu iz prstena, pa je kartica u fokusu mutna. */
.ln-karte:not(.ln-sloj) .ln-k{transform:none!important}
/* SVG (nit i metaball) se mijenja svaki kadar; kao svoj sloj ne povlači
   ponovno slikanje ostatka prikovanog ekrana. */
.lanac.zivo .ln-scena{will-change:transform;pointer-events:none}
/* Nit i metaball nisu klikabilni; bez ovoga svaki hit test pri skrolu (hover
   ispod miša) ide kroz geometriju SVG-a. */
.ln-k:focus-visible{outline:2px solid var(--zar,#ff4f31);outline-offset:4px}

/* natpisi projekta — pale se tek kad se prsten odmota */
.lanac.zivo .ln-natpis{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;color:var(--tinta,#12110b);opacity:0}
.ln-indeks,.ln-ime,.ln-vrsta{
  position:absolute;top:calc(411 * var(--lk));transform:translateY(-100%);white-space:nowrap;
}
.ln-indeks{left:var(--pad,80px);font-size:clamp(13px,calc(16 * var(--lk)),16px);font-weight:500;font-variant-numeric:tabular-nums}
.ln-ime{left:calc(var(--pad,80px) + clamp(46px,calc(83 * var(--lk)),83px));font-size:clamp(19px,calc(26 * var(--lk)),26px);font-weight:500}
.ln-vrsta{right:var(--pad,80px);font-size:clamp(13px,calc(16 * var(--lk)),16px);font-weight:500;color:var(--siva,rgba(18,17,11,.58))}
.ln-popis{
  position:absolute;right:var(--pad,80px);top:calc(22 * var(--lk));margin:0;padding:0;list-style:none;
  font-size:clamp(12.5px,calc(14.5 * var(--lk)),14.5px);line-height:1.35;
  color:var(--siva-2,rgba(18,17,11,.42));text-align:right;
}
.ln-popis li{transition:color .18s}
.ln-popis li.aktivan{color:var(--tinta,#12110b)}

.lanac.zivo .ln-putokaz{
  display:flex;position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  align-items:center;gap:9px;pointer-events:none;margin:0;
  font-size:12px;color:var(--siva,rgba(18,17,11,.58));transition:opacity .4s;
}
.ln-putokaz i{display:block;width:1px;height:20px;background:currentColor;opacity:.5;
  animation:ln-kap 1.8s ease-in-out infinite;transform-origin:top}
@keyframes ln-kap{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.lanac.krenuo .ln-putokaz{opacity:0}
/* Ugašen putokaz ne vrti animaciju dok se skrola kroz sekciju. */
.lanac.krenuo .ln-putokaz i{animation:none}

@media(max-width:900px){
  .lanac{--ln-prsten:600}
  .lanac.zivo .ln-uvod{top:clamp(80px,11vh,104px);transform:none;right:var(--pad,24px);width:auto}
  .lanac.zivo .ln-uvod .vod{font-size:16px;margin-top:12px;max-width:34ch}
  .ln-vrsta,.ln-popis{display:none}
  .ln-indeks,.ln-ime{top:clamp(92px,12vh,112px);transform:none}
  /* Na uskom ekranu kartice iznad fokusa prolaze kroz visinu natpisa. Traka
     papira ispod natpisa ih prekriva, pa lanac klizi ispod naslova projekta. */
  .lanac.zivo .ln-natpis::before{
    content:'';position:absolute;left:0;right:0;top:0;height:clamp(150px,21vh,180px);
    background:linear-gradient(var(--papir,#f5f2ed) 64%, rgba(245,242,237,0));
  }
}
@media(prefers-reduced-motion:reduce){
  .ln-putokaz i{animation:none}
}

/* Project navigation stays readable beside the moving work. */
.ln-popis{top:auto;bottom:70px;text-align:left;min-width:180px;pointer-events:auto}
.ln-popis button{font:inherit;color:inherit;background:none;border:0;padding:7px 0;cursor:pointer;text-align:left;min-height:32px}
.ln-popis li.aktivan button{color:var(--zar);padding-left:14px}
.ln-popis button:hover{color:var(--tinta)}
.ln-popis button:focus-visible{outline:2px solid var(--zar);outline-offset:4px}
.ln-indeks,.ln-ime,.ln-vrsta{top:110px;transform:none}
.lanac.zivo .ln-uvod .d2{font-size:clamp(40px,5vw,72px)}
@media(max-width:900px){
 .lanac.zivo{height:760svh}
 .lanac.zivo .ln-uvod{width:auto}
 .lanac.zivo .ln-uvod .d2{font-size:clamp(34px,7.6vw,58px)}
 .ln-indeks,.ln-ime{top:90px}
}

/* Naslov dolazi prije prstena: stoji sam po sredini ekrana, pa se digne i ugasi
   dok veliki prsten raste. U sredini prstena ostaje kratak tekst. Kad se prsten
   odmota, raspored lanca je isti kao ranije. */
.lanac.zivo .ln-uvod{left:50%;right:auto;top:50%;
  transform:translate(-50%,calc(-50% + var(--ln-dizanje,0px)));width:min(92vw,980px);text-align:center}
.lanac.zivo .ln-uvod .d2{font-size:clamp(40px,6vw,96px)}
.lanac.zivo .ln-uvod .vod{display:none}
.ln-srediste{display:none}
.lanac.zivo .ln-srediste{display:block;position:absolute;z-index:2;left:50%;top:calc(50% + 35px);
  transform:translate(-50%,-50%);width:min(30ch,52vw);margin:0;text-align:center;pointer-events:none;opacity:0;
  font-size:clamp(14px,1.15vw,17px);line-height:1.55;color:var(--siva,rgba(18,17,11,.58));text-wrap:balance}
@media(max-width:900px){
  .lanac.zivo .ln-uvod{width:calc(100% - 2 * var(--pad,24px))}
  .lanac.zivo .ln-uvod .d2{font-size:clamp(34px,9vw,52px)}
  .lanac.zivo .ln-srediste{font-size:13px;width:min(24ch,50vw)}
}

/* Otvoren lanac na desktopu ima tri zone: kartica lijevo od sredine, desno od
   nje kolona sa podacima o projektu, a spisak projekata uz desnu ivicu. */
.ln-opis,.ln-veza{display:none}
@media(min-width:901px){
  .ln-info{position:absolute;left:calc(790 * var(--lk));top:50%;transform:translateY(-50%);
    width:max(270px,calc(340 * var(--lk)));display:flex;flex-direction:column;align-items:flex-start}
  .ln-info .ln-indeks,.ln-info .ln-ime,.ln-info .ln-vrsta{position:static;transform:none;white-space:normal}
  .ln-info .ln-ime{margin-top:14px;font-size:clamp(34px,calc(54 * var(--lk)),64px);line-height:1.02;letter-spacing:-.03em}
  .ln-info .ln-vrsta{margin-top:12px}
  .ln-opis{display:block;margin:22px 0 0;max-width:34ch;font-size:clamp(15px,calc(17 * var(--lk)),18px);
    line-height:1.55;color:var(--siva,rgba(18,17,11,.58))}
  .ln-veza{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding-bottom:3px;pointer-events:auto;
    font-size:15px;color:var(--tinta,#12110b);text-decoration:none;border-bottom:1px solid currentColor;
    transition:color .2s}
  .ln-veza:hover{color:var(--zar,#ff4f31)}
  .ln-veza:focus-visible{outline:2px solid var(--zar,#ff4f31);outline-offset:4px}
  .ln-popis{top:50%;bottom:auto;transform:translateY(-50%);min-width:160px}
}

/* Dok je sekcija prikovana, zaglavlje je sklonjeno; klasu pali radovi-lanac.js. */
.nav.nav--radovi{transform:translateY(-105%);pointer-events:none}