/* „Ne biramo dio posla" — a light pass on the existing statement: the same paper the hero ends on and the
   client strip continues, pigment washes in the hero's cobalt, gold and coral that drift slowly against the
   scroll (--sa-progress comes from scroll-atmosphere.js), and the small pictures set like prints, each with
   a soft glow in its own project's colour. Transforms and static gradients only, no filters, so it stays
   cheap while scrolling, in Safari too. */
/* Dark, continuing the hero's night instead of breaking to paper. The hero's mosaic tiles read this colour,
   and the scroll reveal reads the --izj-* colours (index.html), so words go from faint to light. The client
   strip below starts on its own paper with a clean edge (a dark-to-paper fade reads as grey haze). */
#cijeli-posao{--izj-ugaseno:rgba(244,239,228,.14);--izj-tinta:rgb(244,239,228);--izj-naglasak:rgb(255,90,61);color:#f4efe4}
#cijeli-posao.scroll-atmosphere{background-color:#0f0e0c}
#cijeli-posao .izj-t .w{color:var(--izj-tinta)}
#cijeli-posao.izj-scroll .w{color:var(--izj-ugaseno)}
#cijeli-posao .mk::before{background:rgba(255,90,61,.85)}
/* hairline grid and guides in light ink on the dark ground */
#cijeli-posao .ho-grid,.ho-grid--fx{--line:rgba(244,239,228,.09)}
#cijeli-posao .ho-grid i{background:rgba(244,239,228,.12)}
@media (prefers-reduced-motion: reduce){#cijeli-posao.izj-scroll .w{color:var(--izj-tinta)!important}}
#cijeli-posao .izj-lj{overflow:visible;contain:none}
#cijeli-posao .izj-lj::before,
#cijeli-posao .izj-lj::after{content:'';position:absolute;z-index:0;pointer-events:none;border-radius:50%}
/* cobalt rising from the lower left, gold sinking from the upper right */
#cijeli-posao .izj-lj::before{width:min(70vw,980px);aspect-ratio:1.25;left:-18%;bottom:-38%;
  background:radial-gradient(closest-side,rgba(47,86,196,.42),rgba(47,86,196,.14) 45%,transparent);
  transform:translate3d(calc(var(--sa-progress,.5) * 60px),calc((.5 - var(--sa-progress,.5)) * 160px),0)}
#cijeli-posao .izj-lj::after{width:min(62vw,860px);aspect-ratio:1.3;right:-16%;top:-34%;
  background:radial-gradient(closest-side,rgba(200,150,62,.30),rgba(93,42,26,.30) 50%,transparent);
  transform:translate3d(calc(var(--sa-progress,.5) * -60px),calc((var(--sa-progress,.5) - .5) * 140px),0)}
/* a small coral ember under „jedna odgovornost" */
#cijeli-posao .mk{position:relative}
#cijeli-posao .mk::after{content:'';position:absolute;z-index:-1;left:10%;right:10%;top:20%;bottom:-30%;pointer-events:none;
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,90,61,.22),transparent);
  opacity:var(--ci-marker,1)}
#cijeli-posao .izj-lj>.u{position:relative;z-index:1}

/* the site's ring motif, warmed to the paper instead of grey */
#cijeli-posao.scroll-atmosphere::after{border-color:rgba(244,239,228,.08);
  box-shadow:0 0 0 80px rgba(244,239,228,.018),0 0 0 160px rgba(200,150,62,.02)}

/* prints: paper edge, contact shadow, and a glow in the project's own colour */
#cijeli-posao .ci{border-radius:3px;background:transparent;overflow:visible;--ci-sjaj:rgba(18,17,11,.35)}
#cijeli-posao .ci--strategija{--ci-sjaj:rgba(120,72,48,.55)}
#cijeli-posao .ci--identitet{--ci-sjaj:rgba(200,150,62,.65)}
#cijeli-posao .ci--softver{--ci-sjaj:rgba(47,86,196,.55)}
#cijeli-posao .ci--ai{--ci-sjaj:rgba(255,90,61,.50)}
#cijeli-posao .ci--rast{--ci-sjaj:rgba(214,150,40,.60)}
#cijeli-posao .ci-kadar{border-radius:3px;background:transparent;
  box-shadow:0 0 0 3px #fbf8f2,0 0 0 4px rgba(18,17,11,.07),0 12px 24px -12px rgba(18,17,11,.5),0 22px 44px -16px var(--ci-sjaj)}

/* phones: the statement gets nearly a full screen with the sentence centred, instead of a short band with
   empty dark above it; type and prints a size up, with line height to seat the prints inside the line */
@media (max-width: 600px){
  #cijeli-posao.izj{min-height:112svh;display:flex;align-items:center;padding-block:96px}
  #cijeli-posao .izj-lj{width:100%}
  #cijeli-posao .izj-t{font-size:clamp(36px,10.8vw,48px);line-height:1.22;letter-spacing:-.04em}
  #cijeli-posao .ci{width:62px;height:42px;vertical-align:-.12em;margin-inline:3px}
  #cijeli-posao .ci-kadar{border-radius:4px;box-shadow:0 0 0 2px #fbf8f2,0 0 0 3px rgba(18,17,11,.07),0 8px 16px -8px rgba(0,0,0,.6),0 14px 28px -12px var(--ci-sjaj)}
  #cijeli-posao .izj-lj::before{width:150vw;left:-60%;bottom:-20%}
  #cijeli-posao .izj-lj::after{width:140vw;right:-60%;top:-20%}
}

@media (prefers-reduced-motion: reduce){
  #cijeli-posao .izj-lj::before,#cijeli-posao .izj-lj::after{transform:none}
}

/* The pinned hero (z-index 1) stays on screen until it has scrolled a little past its own height. The
   statement and the client strip sit above it at z-index 2; the globe section had none, so the hero's
   mosaic showed through its top on short screens. Same layer as its neighbours. */
#sta-radimo{z-index:2}

/* The nav turns dark while it sits over the dark statement, and while the dark mosaic covers the hero
   (izjava-nav.js sets .izj-tamno; the same inversion urbano-tok.css uses for its dark entrance). */
html.izj-tamno .nav,html.ho-mosaic-nav .nav{filter:invert(1) hue-rotate(180deg)}