/* ============================================================
   MOLTISANTI — case study / portfolio v4
   Sve klase su prefiksovane cs- da ne dodiruju stariji CSS.
   ============================================================ */

:root{
  --cs-ease:cubic-bezier(.16,.84,.28,1);
  --cs-line:rgba(13,13,13,.14);
  --cs-soft:rgba(13,13,13,.62);
}
[data-theme=dark]{
  --cs-line:rgba(255,255,255,.16);
  --cs-soft:rgba(255,255,255,.66);
}

/* ---------- progress ---------- */
.cs-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;background:currentColor;opacity:.85;
  pointer-events:none;will-change:transform}

/* ---------- reveal ---------- */
.cs-r{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--cs-ease),transform 1.1s var(--cs-ease)}
.cs-r.is-in{opacity:1;transform:none}
.cs-r[data-d="1"]{transition-delay:.08s}
.cs-r[data-d="2"]{transition-delay:.16s}
.cs-r[data-d="3"]{transition-delay:.24s}
.cs-r[data-d="4"]{transition-delay:.32s}

/* maskirano otkrivanje slike */
.cs-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--cs-ease)}
.cs-mask.is-in{clip-path:inset(0 0 0 0)}

/* linija koja se izvlači */
.cs-rule{height:1px;background:var(--cs-line);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.3s var(--cs-ease)}
.cs-rule.is-in{transform:scaleX(1)}

/* ---------- HERO ---------- */
.cs-hero{position:relative;min-height:88vh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:calc(var(--header-h,72px) + 60px) 0 clamp(38px,5vw,70px)}
.cs-hero__crumb{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.45;
  margin-bottom:auto}
.cs-hero__crumb a{text-decoration:none}
.cs-hero__crumb a:hover{opacity:.6}
.cs-hero__eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.5;margin:0 0 clamp(18px,2.4vw,30px)}
.cs-hero h1{margin:0;font-weight:300;letter-spacing:-.062em;line-height:.85;
  font-size:clamp(58px,11.5vw,190px)}
.cs-hero h1 .cs-dot{color:var(--accent,#e2544c)}
.cs-hero__lead{margin:clamp(26px,3.4vw,46px) 0 0;max-width:46ch;
  font-size:clamp(17px,1.75vw,23px);line-height:1.48;letter-spacing:-.014em;color:var(--cs-soft)}
.cs-hero__foot{margin-top:clamp(38px,5vw,74px);padding-top:24px;border-top:1px solid var(--cs-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px 40px;align-items:start}
.cs-fact small{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.42;margin-bottom:8px}
.cs-fact strong{font-weight:500;font-size:16px;letter-spacing:-.012em}
.cs-fact--scope{grid-column:span 2}
.cs-scope{display:flex;flex-wrap:wrap;gap:6px}
.cs-scope span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--cs-line);border-radius:2px;color:var(--cs-soft)}

/* ---------- SHOWCASE ---------- */
.cs-shot{margin:0;padding:clamp(46px,6.5vw,110px) 0}
.cs-shot__frame{position:relative;overflow:hidden;background:#0b0c0f}
.cs-shot__frame img{display:block;width:100%;height:auto;will-change:transform}
.cs-shot--full .cs-shot__frame{border-radius:0}
.cs-shot--inset .cs-shot__frame{border-radius:3px;
  box-shadow:0 50px 110px -60px rgba(0,0,0,.55)}
.cs-shot__cap{display:grid;grid-template-columns:52px 1fr;gap:0 18px;
  margin-top:20px;align-items:start}
.cs-shot__cap b{font-weight:400;font-size:10.5px;letter-spacing:.18em;opacity:.4;padding-top:3px}
.cs-shot__cap p{margin:0;font-size:14.5px;line-height:1.62;color:var(--cs-soft);max-width:52ch}
.cs-shot--offset .cs-grid{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,.74fr);
  gap:clamp(20px,3.4vw,52px);align-items:end}
.cs-shot--offset .cs-shot__cap{grid-template-columns:1fr;gap:12px;margin:0 0 4px}

/* ---------- QUOTE ---------- */
.cs-quote{padding:clamp(60px,8vw,130px) 0}
.cs-quote small{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.4;margin-bottom:clamp(20px,2.6vw,34px)}
.cs-quote p{margin:0;font-family:"Instrument Serif","Bodoni Moda",Georgia,serif;
  font-weight:400;font-size:clamp(28px,5.2vw,72px);line-height:1.04;letter-spacing:-.032em;
  max-width:20ch}

/* ---------- STORY ---------- */
.cs-story{padding:clamp(30px,4vw,56px) 0}
.cs-story__grid{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:clamp(20px,4vw,72px);align-items:start}
.cs-story__head{position:sticky;top:calc(var(--header-h,72px) + 34px)}
.cs-story__head b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.2em;
  opacity:.38;margin-bottom:14px}
.cs-story__head h2{margin:0;font-weight:400;font-size:clamp(26px,3.6vw,48px);
  letter-spacing:-.042em;line-height:1}
.cs-story__body p{margin:0;font-size:clamp(15.5px,1.45vw,17.5px);line-height:1.75;
  color:var(--cs-soft);max-width:64ch}

/* ---------- MARQUEE ---------- */
.cs-marquee{overflow:hidden;padding:clamp(46px,6vw,92px) 0;
  border-top:1px solid var(--cs-line);border-bottom:1px solid var(--cs-line);
  margin-top:clamp(40px,6vw,90px)}
.cs-marquee__track{display:flex;gap:44px;width:max-content;
  animation:cs-slide 34s linear infinite}
.cs-marquee:hover .cs-marquee__track{animation-play-state:paused}
.cs-marquee span{font-size:clamp(24px,3.6vw,52px);font-weight:300;letter-spacing:-.04em;
  white-space:nowrap;opacity:.32}
.cs-marquee i{font-style:normal;opacity:.2;font-size:clamp(20px,3vw,42px)}
@keyframes cs-slide{to{transform:translateX(-50%)}}

/* ---------- CTA ---------- */
.cs-cta{padding:clamp(66px,9vw,140px) 0}
.cs-cta small{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.4;margin-bottom:18px}
.cs-cta h2{margin:0 0 20px;font-weight:300;font-size:clamp(32px,5.6vw,80px);
  letter-spacing:-.052em;line-height:.98;max-width:16ch}
.cs-cta p{margin:0 0 clamp(28px,3.4vw,44px);max-width:48ch;line-height:1.66;color:var(--cs-soft)}
.cs-btns{display:flex;flex-wrap:wrap;gap:11px}
.cs-btn{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  padding:16px 28px;border-radius:999px;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;text-decoration:none;
  transition:transform .5s var(--cs-ease)}
.cs-btn:hover{transform:translateY(-3px)}
.cs-btn--solid{background:var(--ink,#0d0d0d);color:var(--paper,#f5f6f4)}
[data-theme=dark] .cs-btn--solid{background:var(--paper,#f5f6f4);color:var(--ink,#0d0d0d)}
.cs-btn--line{border:1px solid var(--cs-line)}

/* ---------- NEXT ---------- */
.cs-next{display:block;text-decoration:none;padding:clamp(44px,6vw,92px) 0;
  border-top:1px solid var(--cs-line)}
.cs-next__grid{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.cs-next small{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  opacity:.4;margin-bottom:16px}
.cs-next strong{display:block;font-weight:300;font-size:clamp(34px,6.4vw,92px);
  letter-spacing:-.055em;line-height:.94;
  transition:transform .8s var(--cs-ease)}
.cs-next:hover strong{transform:translateX(14px)}
.cs-next em{display:block;font-style:normal;margin-top:16px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.45}
.cs-next__media{position:relative;overflow:hidden;border-radius:3px;background:#0b0c0f;
  aspect-ratio:16/9}
.cs-next__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;transform:scale(1.01);
  transition:transform 1.3s var(--cs-ease)}
.cs-next:hover .cs-next__media img{transform:scale(1.07)}

/* ---------- KARTICE (reference + početna) ---------- */
.reference-card__media,.featured-card__media{
  aspect-ratio:16/9!important;background:#0b0c0f!important;border-radius:3px;overflow:hidden}
.reference-card__media .project-visual.has-shot .project-visual__top,
.featured-card__media .project-visual.has-shot .project-visual__top,
.reference-card__media .project-visual.has-shot::after,
.featured-card__media .project-visual.has-shot::after,
.work-slide .project-visual.has-shot .project-visual__top{display:none!important}
.project-visual.has-shot .project-visual__photo{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover;object-position:top center;
  transform:scale(1.005);transition:transform 1.25s var(--cs-ease),filter .7s ease}
.reference-card:hover .project-visual.has-shot .project-visual__photo,
.featured-card:hover .project-visual.has-shot .project-visual__photo{transform:scale(1.045)}

@media (max-width:900px){
  .cs-hero{min-height:auto;padding-top:calc(var(--header-h,72px) + 40px)}
  .cs-fact--scope{grid-column:span 1}
  .cs-story__grid,.cs-shot--offset .cs-grid,.cs-next__grid{grid-template-columns:1fr;gap:20px}
  .cs-story__head{position:static}
  .cs-next__grid{gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .cs-r,.cs-mask,.cs-rule,.cs-next strong,.cs-shot__frame img,
  .project-visual.has-shot .project-visual__photo{
    transition:none!important;transform:none!important;clip-path:none!important;opacity:1!important}
  .cs-marquee__track{animation:none}
}

/* ---- mask fix: clip-path je nepouzdan uz transformisano dete ---- */
.cs-mask{clip-path:none!important;opacity:0;transform:translateY(30px) scale(.988);
  transition:opacity 1.05s var(--cs-ease),transform 1.25s var(--cs-ease)}
.cs-mask.is-in{opacity:1;transform:none}
.cs-hero__crumb{margin-bottom:clamp(56px,11vh,150px)}


/* ============================================================
   BROWSER FRAME — uvek svetli, slika bez isecanja
   ============================================================ */
.bf{position:relative;border-radius:12px;overflow:hidden;
  background:#ffffff;border:1px solid rgba(15,17,20,.10);
  box-shadow:0 2px 4px rgba(15,17,20,.04),
             0 18px 40px -22px rgba(15,17,20,.28),
             0 60px 120px -70px rgba(15,17,20,.45);
  transition:box-shadow 1s var(--cs-ease),transform 1.2s var(--cs-ease);
  will-change:transform}
.bf__bar{display:flex;align-items:center;gap:14px;height:38px;padding:0 15px;
  background:#f4f4f2;border-bottom:1px solid rgba(15,17,20,.075)}
.bf__dots{display:flex;gap:6px;flex:none}
.bf__dots i{width:9px;height:9px;border-radius:50%;background:#d9d9d4}
.bf__dots i:nth-child(1){background:#e5b0a8}
.bf__dots i:nth-child(2){background:#e5d5a8}
.bf__dots i:nth-child(3){background:#bcd6b4}
.bf__url{flex:1;min-width:0;max-width:340px;padding:5px 12px;border-radius:999px;
  background:#ffffff;border:1px solid rgba(15,17,20,.07);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8a8d8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.bf__view{background:#ffffff;line-height:0}
.bf__view img{display:block;width:100%;height:auto}
/* okvir ostaje svetao i u dark modu — to je prozor, ne UI sajta */
[data-theme=dark] .bf{border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.7),0 80px 150px -80px rgba(0,0,0,.9)}

/* ---------- showcase raspored ---------- */
.cs-shot{margin:0;padding:clamp(44px,6vw,104px) 0}
.cs-shot--wide .bf{width:min(100%,1180px);margin:0 auto}
.cs-shot--wide .cs-shot__cap{max-width:1180px;margin-left:auto;margin-right:auto}
.cs-shot--narrow .cs-grid{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);
  gap:clamp(20px,3.4vw,54px);align-items:end}
.cs-shot--narrow .bf{width:100%}
.cs-shot__cap{display:grid;grid-template-columns:46px 1fr;gap:0 16px;margin-top:22px;align-items:start}
.cs-shot--narrow .cs-shot__cap{grid-template-columns:1fr;gap:12px;margin:0 0 6px}
.cs-shot__cap b{font-weight:400;font-size:10.5px;letter-spacing:.18em;opacity:.38;padding-top:3px}
.cs-shot__cap p{margin:0;font-size:14.5px;line-height:1.62;color:var(--cs-soft);max-width:50ch}

/* ---------- ulazna animacija okvira ---------- */
.bf.cs-r{opacity:0;transform:translateY(46px) scale(.972);
  transition:opacity 1.1s var(--cs-ease),transform 1.35s var(--cs-ease),box-shadow 1.2s var(--cs-ease);
  box-shadow:0 0 0 rgba(0,0,0,0)}
.bf.cs-r.is-in{opacity:1;transform:none;
  box-shadow:0 2px 4px rgba(15,17,20,.04),
             0 18px 40px -22px rgba(15,17,20,.28),
             0 60px 120px -70px rgba(15,17,20,.45)}

/* ============================================================
   KARTICE — isti prozor, manji
   ============================================================ */
.reference-card__media,.featured-card__media{
  aspect-ratio:auto!important;background:transparent!important;
  border:0!important;border-radius:0!important;overflow:visible!important;padding:0!important}
.reference-card__media::after,.featured-card__media::after{display:none!important}

.reference-card__media .project-visual,
.featured-card__media .project-visual{
  position:relative!important;inset:auto!important;aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;background:#fff;
  border:1px solid rgba(15,17,20,.10);
  box-shadow:0 2px 3px rgba(15,17,20,.035),0 14px 30px -20px rgba(15,17,20,.3);
  transition:transform .85s var(--cs-ease),box-shadow .85s var(--cs-ease);
  margin-top:30px}
.reference-card__media .project-visual::before,
.featured-card__media .project-visual::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-31px;height:30px;z-index:5;
  background:#f4f4f2;border:1px solid rgba(15,17,20,.10);border-bottom:0;
  border-radius:10px 10px 0 0}
.reference-card__media .project-visual::after,
.featured-card__media .project-visual::after{
  content:""!important;position:absolute;left:12px;top:-19px;width:38px;height:7px;z-index:6;
  background:
    radial-gradient(circle 3.5px at 3.5px 3.5px,#e5b0a8 99%,transparent) 0 0/13px 7px no-repeat,
    radial-gradient(circle 3.5px at 3.5px 3.5px,#e5d5a8 99%,transparent) 13px 0/13px 7px no-repeat,
    radial-gradient(circle 3.5px at 3.5px 3.5px,#bcd6b4 99%,transparent) 26px 0/13px 7px no-repeat;
  display:block!important;height:7px;bottom:auto;opacity:1}
.reference-card:hover .project-visual,
.featured-card:hover .project-visual{
  transform:translateY(-6px);
  box-shadow:0 4px 8px rgba(15,17,20,.05),0 30px 60px -28px rgba(15,17,20,.42)}
.project-visual.has-shot .project-visual__photo{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover;object-position:top center;transform:none!important;transition:none}
[data-theme=dark] .reference-card__media .project-visual,
[data-theme=dark] .featured-card__media .project-visual,
[data-theme=dark] .reference-card__media .project-visual::before,
[data-theme=dark] .featured-card__media .project-visual::before{
  border-color:rgba(255,255,255,.16)}

/* gradijentne kartice bez snimka — isti prozor, sadržaj unutra */
.reference-card__media .project-visual:not(.has-shot){background:#12141a}

/* ---------- NEXT: isti okvir ---------- */
.cs-next__media{border-radius:10px;border:1px solid rgba(15,17,20,.10);background:#fff;
  box-shadow:0 16px 36px -24px rgba(15,17,20,.34);margin-top:30px;overflow:hidden}
.cs-next__media::before{content:"";position:absolute;left:-1px;right:-1px;top:-31px;height:30px;
  background:#f4f4f2;border:1px solid rgba(15,17,20,.10);border-bottom:0;border-radius:10px 10px 0 0}
.cs-next__mediawrap{position:relative}
[data-theme=dark] .cs-next__media,[data-theme=dark] .cs-next__media::before{
  border-color:rgba(255,255,255,.16)}

@media (max-width:900px){
  .cs-shot--narrow .cs-grid{grid-template-columns:1fr;gap:18px}
  .bf__bar{height:32px;padding:0 11px;gap:10px}
  .bf__url{font-size:9px;padding:4px 9px}
  .bf__dots i{width:7px;height:7px}
  .reference-card__media .project-visual,
  .featured-card__media .project-visual{margin-top:26px}
  .reference-card__media .project-visual::before,
  .featured-card__media .project-visual::before{top:-27px;height:26px}
  .reference-card__media .project-visual::after,
  .featured-card__media .project-visual::after{top:-17px}
}
@media (prefers-reduced-motion:reduce){
  .bf,.bf.cs-r,.reference-card__media .project-visual{transition:none!important;transform:none!important}
}

/* ---- kartica kao mali prozor (pravi markup) ---- */
.reference-card__media,.featured-card__media{aspect-ratio:auto!important;background:transparent!important;
  border:0!important;border-radius:0!important;overflow:visible!important;padding:0!important;margin-bottom:16px}
.reference-card__media::after,.featured-card__media::after,
.reference-card__media::before,.featured-card__media::before{display:none!important;content:none!important}
.bf--card{border-radius:9px}
.bf--card .bf__bar{height:26px;padding:0 10px;gap:0}
.bf--card .bf__dots i{width:6px;height:6px}
.bf--card .bf__view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0e1015}
.bf--card .project-visual{position:absolute!important;inset:0!important;aspect-ratio:auto!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;margin:0!important;
  transform:none!important}
.bf--card .project-visual::before,.bf--card .project-visual::after{display:none!important;content:none!important}
.bf--card .project-visual__photo{position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;object-fit:cover;object-position:top center;
  transform:scale(1.001);transition:transform 1.1s var(--cs-ease)}
.reference-card:hover .bf--card,.featured-card:hover .bf--card{
  transform:translateY(-7px);
  box-shadow:0 4px 9px rgba(15,17,20,.05),0 34px 66px -30px rgba(15,17,20,.44)}
.reference-card:hover .bf--card .project-visual__photo,
.featured-card:hover .bf--card .project-visual__photo{transform:scale(1.045)}



/* ---- browser frame: prati light/dark temu ---- */
[data-theme=dark] .bf{background:#15171b;border-color:rgba(255,255,255,.16)}
[data-theme=dark] .bf__bar{background:#1d2025;border-bottom-color:rgba(255,255,255,.10)}
[data-theme=dark] .bf__url{background:#101216;border-color:rgba(255,255,255,.10);color:#9aa0a6}
[data-theme=dark] .bf__view{background:#15171b}
[data-theme=dark] .bf__dots i{opacity:.85}
[data-theme=dark] .bf--card .bf__view{background:#0e1015}

/* ---- URL pilula optički centrirana kao u pravom browseru ---- */
.bf__bar{display:grid!important;grid-template-columns:1fr minmax(170px,360px) 1fr;
  align-items:center;gap:0}
.bf__dots{justify-self:start}
.bf__url{justify-self:stretch;width:100%;max-width:none;flex:none;margin:0}
.bf__bar::after{content:"";display:block}
.bf--card .bf__bar{grid-template-columns:1fr;justify-items:start}

/* ---- kompaktan pregled projekta umesto velikog serif citata ---- */
.cs-overview{padding:clamp(46px,6vw,92px) 0}
.cs-overview__label{margin:0 0 clamp(20px,2.4vw,32px);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.42}
.cs-overview__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--cs-line);border:1px solid var(--cs-line)}
.cs-overview__grid > div{background:var(--paper,#f5f6f4);padding:clamp(20px,2.4vw,32px)}
[data-theme=dark] .cs-overview__grid > div{background:var(--ink,#0d0d0d)}
.cs-overview__grid small{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.45;margin-bottom:14px}
.cs-overview__grid p{margin:0;font-size:14.5px;line-height:1.68;color:var(--cs-soft)}
@media (max-width:900px){.cs-overview__grid{grid-template-columns:1fr}}