/* „Šta radimo" as a globe of work. Speaks the hero's language: the hero's dark ground and grain, its
   cobalt pigment disc and engraved orbit, its italic serif accent and its blink. Prefixed sd-. */
#sta-radimo.sd{--sd-noc:#0f0e0c;--sd-svjetlo:#f4efe4;--sd-papir:#f5f2ed;--sd-poslije:#e5e8e4;--sd-akcent:#ff5a3d;
  position:relative;height:720vh;background:var(--sd-papir);color:var(--sd-svjetlo);overflow:visible;isolation:auto}
#sta-radimo.sd.scroll-atmosphere::after{display:none}
#sta-radimo.sd.scroll-atmosphere{background:var(--sd-papir)}
.sd-ekran{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sd-noc);--zatv:0;--kriv:42%;--negativ:0}
.sd-platno{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.sd-platno.vuce{cursor:grabbing}.sd-platno.pokazuje{cursor:pointer}

/* a soft vignette over the scene. The grain lives in the globe's shader: an animated full-screen SVG
   noise layer here cost Safari two thirds of its frame rate */
.sd-zrno{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(8,7,5,.5) 100%)}
.sd-vidljiv .sd-vidljiv [data-faza="papir"] .sd-orb{animation-play-state:running}

/* Paper drawn as cells on a canvas (see the script): it breaks up around the globe on the way in
   and closes in the next section's colour on the way out. */
.sd-papir{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;display:block;background:var(--sd-papir)}
/* until the script draws the first cells, the canvas is plain paper */
.sd-papir.crta{background:none}
/* the hero's cobalt disc behind the globe and its engraved orbit around it, on paper */
.sd-disk,.sd-orb{position:absolute;z-index:3;pointer-events:none;left:var(--cx,50%);top:var(--cy,60%);height:auto;}
.sd-disk{width:calc(var(--r,100px)*3);transform:translate(-66%,-56%);
  -webkit-mask:radial-gradient(circle at 66% 56%,transparent calc(var(--r,0px)*1.02),#000 calc(var(--r,0px)*1.02 + 1px));
  mask:radial-gradient(circle at 66% 56%,transparent calc(var(--r,0px)*1.02),#000 calc(var(--r,0px)*1.02 + 1px))}
/* rotate runs on the compositor; animating a custom property would restyle the page every frame */
.sd-orb{width:calc(var(--r,100px)*2.7);transform:translate(-50%,-50%);animation:sd-orb 60s linear infinite paused}
@keyframes sd-orb{from{rotate:0deg}to{rotate:360deg}}
.sd-disk,.sd-orb{opacity:clamp(0,calc(1 - var(--ulaz,0)*1.8),1)}
.sd-ekran[data-faza="izlaz"] .sd-disk,.sd-ekran[data-faza="izlaz"] .sd-orb{opacity:0}

/* title: ink on paper, light in the dark, the hero's italic serif accent */
.sd-naslov{position:absolute;inset:0;z-index:6;display:flex;justify-content:center;align-items:flex-start;text-align:center;pointer-events:none;
  padding-top:clamp(84px,13vh,140px);color:var(--sd-svjetlo);transition:color .01s}
.sd-ekran[data-faza="papir"] .sd-naslov{color:var(--tinta,#12110b)}
.sd-ekran[data-faza="izlaz"] .sd-naslov{opacity:0!important}
.sd-naslov .d2{font-size:clamp(40px,6.4vw,104px);line-height:.98;color:inherit}
.sd-naslov .d2 em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.045em;color:var(--sd-akcent)}
.sd-naslov .vod{color:inherit;opacity:.66;margin:22px auto 0;font-size:16px;max-width:40ch}

/* chrome */
.sd-vrh{position:absolute;inset:0 0 auto;z-index:5;pointer-events:none;padding-top:calc(101px + 14px)}
.sd-vrh .u{display:flex;justify-content:space-between;align-items:center}
.sd-vrh .oz,.sd-brojac{color:rgba(244,239,228,.55)}
.sd-brojac{font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.sd-ekran[data-faza="papir"] .sd-vrh .oz,.sd-ekran[data-faza="papir"] .sd-brojac{color:rgba(18,17,11,.5)}
.sd-ekran[data-faza="izlaz"] .sd-vrh{opacity:0}

/* chapter block on frosted glass, accent in the chapter's pigment */
.sd-pog{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;padding:140px 0 clamp(24px,4vh,48px);
  background:linear-gradient(transparent,rgba(15,14,12,.72) 55%,rgba(15,14,12,.9));transition:opacity .4s}
.sd-pog .u{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.sd-pog-l{max-width:560px;opacity:0}
.sd-pog-l{max-width:540px;opacity:0}
.sd-pog-l>*{will-change:transform,opacity}
.sd-br{margin:0;font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--d,var(--sd-akcent))}
.sd-ime{font:italic 400 clamp(52px,6.4vw,104px)/.95 "Newsreader",Georgia,serif;letter-spacing:-.04em;margin:10px 0 0;color:var(--d,var(--sd-svjetlo))}
.sd-tvrdnja{font-size:clamp(17px,1.35vw,21px);line-height:1.4;color:var(--sd-svjetlo);margin:14px 0 0;max-width:34ch}
/* how: three steps, each a name and what it means */
.sd-koraci{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:k}
.sd-koraci li{counter-increment:k;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--d,#f4efe4) 55%,transparent)}
.sd-koraci b{display:block;font:600 14.5px/1.25 var(--sans);color:var(--sd-svjetlo)}
.sd-koraci b::before{content:counter(k,decimal-leading-zero) ' ';font:400 11px var(--mono);color:var(--d);margin-right:4px}
.sd-koraci span{display:block;font-size:13.5px;line-height:1.45;color:rgba(244,239,228,.66);margin-top:6px}
.sd-djelo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;pointer-events:auto}
.sd-djelo span{font:400 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(244,239,228,.5);margin-right:6px}
.sd-djelo a{padding:10px 16px;border-radius:999px;background:var(--sd-svjetlo);color:#12110b;font:600 13.5px/1 var(--sans);text-decoration:none;transition:background .3s,color .3s}
.sd-djelo a:hover{background:var(--d);color:#fff}
.sd-pog-d{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.sd-tacke{display:flex;gap:8px}
.sd-tacke i{width:22px;height:3px;border-radius:2px;background:rgba(244,239,228,.18);overflow:hidden;position:relative}
.sd-tacke i b{position:absolute;inset:0;background:var(--sd-svjetlo);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s}
.sd-uputa{font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(244,239,228,.45)}
.sd-ekran:not([data-faza="svijet"]) .sd-pog{opacity:0}

/* no WebGL or reduced motion */
.sd-rezerva{display:none}
#sta-radimo.sd.bez-gl{height:auto;background:var(--sd-noc)}
.sd.bez-gl .sd-ekran{position:static;height:auto;padding-block:88px}
.sd.bez-gl .sd-ekran>*:not(.sd-rezerva){display:none}
.sd.bez-gl .sd-rezerva{display:block}
.sd-rezerva .d2{color:var(--sd-svjetlo)}
.sd-rezerva .d2 em{font-family:"Newsreader",Georgia,serif;font-style:italic;color:var(--sd-akcent)}
.sd-rezerva .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:40px}
.sd-rezerva a img{border-radius:10px;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;width:100%}
.sd-rezerva a b{display:block;font:500 14px/1.2 var(--sans);margin-top:10px;color:var(--sd-svjetlo)}
.sd-rezerva a span{font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,228,.5)}

@media (max-width:820px){
  #sta-radimo.sd{height:640vh}
  .sd-pog .u{flex-direction:column;align-items:flex-start;gap:14px}
  .sd-pog-d{align-items:flex-start}
  .sd-koraci{grid-template-columns:1fr;gap:8px;margin-top:14px}
  .sd-koraci span{display:none}
  .sd-koraci li{padding-top:8px}
  .sd-ime{font-size:52px}
  .sd-naslov .vod{display:none}
  .sd-vrh{padding-top:calc(72px + 10px)}
}
@media (prefers-reduced-motion:reduce){.sd-orb{animation:none}}