/* ==========================================================================
   DJOLE VISUALS — noć, lak, stop-svetlo
   Tipografija: plakat (kondenzovani grotesk) / italik serif / sans / mašina
   ========================================================================== */

@font-face{font-family:"DV Poster";src:url(../assets/fonts/dv-poster-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"DV Poster";src:url(../assets/fonts/dv-poster-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DV Serif";src:url(../assets/fonts/dv-serif-italic.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"DV Display";src:url(../assets/fonts/dv-sans-display-200.woff) format("woff");font-weight:200;font-display:swap}
@font-face{font-family:"DV Display";src:url(../assets/fonts/dv-sans-display-300.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"DV Sans";src:url(../assets/fonts/dv-sans-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DV Sans";src:url(../assets/fonts/dv-sans-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"DV Sans";src:url(../assets/fonts/dv-sans-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"DV Mono";src:url(../assets/fonts/dv-mono-400.woff) format("woff");font-weight:400;font-display:swap}

:root{
  --noir:#060708;
  --asfalt:#0b0d10;
  --grafit:#15181d;
  --celik:#8b939d;
  --celik-2:#5d646d;
  --kost:#ece7dd;
  --stop:#ff3b1f;
  --amber:#ff8a2a;
  --line:rgba(236,231,221,.13);
  --line-2:rgba(236,231,221,.07);
  --pad:clamp(20px,4.4vw,72px);
  --tl:46px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.65,0,.2,1);
  --f-poster:"DV Poster","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-serif:"DV Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-sans:"DV Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"DV Display","DV Sans",system-ui,sans-serif;
  --f-mono:"DV Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;background:var(--noir)}
body{margin:0;background:var(--noir);color:var(--kost);font-family:var(--f-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"ss01","cv11"}
body.is-loading,body.is-locked{overflow:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video,canvas{display:block;max-width:100%}
::selection{background:var(--stop);color:var(--noir)}
:focus-visible{outline:1px solid var(--stop);outline-offset:4px}

.wrap{width:100%;max-width:1680px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.poster{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;letter-spacing:-.012em}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.mono{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase}
.mono i{font-style:normal;color:var(--celik-2);margin:0 .35em}

.label{display:flex;align-items:center;gap:12px;color:var(--celik)}
.tick{display:inline-block;width:22px;height:1px;background:var(--stop);box-shadow:0 0 12px var(--stop)}

.h-display{font-size:clamp(44px,8.6vw,150px);line-height:.88;margin-top:clamp(18px,2.4vw,34px)}
.h-display .poster,.h-display .serif{display:block}
.h-display .serif{font-size:.82em;line-height:1.02;color:var(--kost);margin-top:.04em;padding-left:.9em}
.h-display--m{font-size:clamp(40px,6.6vw,112px)}

/* ---------- dugmad ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:18px;padding:17px 26px 16px;background:var(--kost);color:var(--noir);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),transform .6s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--stop);transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn__arrow{font-style:normal;font-family:var(--f-sans);font-size:15px;line-height:1;transition:transform .5s var(--ease)}
.btn:hover .btn__arrow{transform:translate(3px,3px)}
.btn--small{padding:11px 16px 10px;font-size:11px;background:transparent;color:var(--kost);box-shadow:inset 0 0 0 1px var(--line)}
.btn--small::before{background:var(--kost)}
.btn--small:hover{color:var(--noir)}
.btn--big{padding:26px 34px 25px;font-size:13px;background:var(--stop);box-shadow:0 0 60px rgba(255,59,31,.35)}
.btn--big::before{background:var(--kost)}
.btn--big:hover .btn__arrow{transform:translate(4px,-4px)}
.link{position:relative;display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--kost);padding-bottom:6px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .5s var(--ease)}
.link:hover::after{transform-origin:left;animation:linkswipe .7s var(--ease)}
@keyframes linkswipe{0%{transform:scaleX(1);transform-origin:right}49%{transform:scaleX(0);transform-origin:right}50%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}

/* ---------- špica ---------- */
.leader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:all}
.leader__bar{position:absolute;left:0;right:0;height:50.2%;background:var(--noir);transition:transform 1.25s var(--ease-io)}
.leader__bar--top{top:0}.leader__bar--bottom{bottom:0}
.leader__core{position:relative;width:min(560px,78vw);display:grid;gap:18px;transition:opacity .45s ease,transform .8s var(--ease)}
.leader__mark{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;font-size:clamp(30px,5vw,54px);line-height:1;letter-spacing:.0em}
.leader__line{display:block;height:1px;background:var(--line)}
.leader__line i{display:block;height:1px;width:100%;background:var(--stop);box-shadow:0 0 18px 1px var(--stop);transform-origin:left;transform:scaleX(0)}
.leader__tc{display:flex;justify-content:space-between;color:var(--celik)}
.leader__tc b{font-weight:400;color:var(--kost)}.leader__tc em{font-style:normal}
body.is-ready .leader__core{opacity:0;transform:scale(.98)}
body.is-ready .leader__bar--top{transform:translateY(-101%)}
body.is-ready .leader__bar--bottom{transform:translateY(101%)}
body.is-ready .leader{pointer-events:none}
body.is-done .leader{display:none}

/* ---------- zrno + kursor ---------- */
.grain{position:fixed;inset:-120px;z-index:150;pointer-events:none;opacity:.1;mix-blend-mode:overlay;background-size:220px 220px}
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor [data-cursor]{cursor:none}
}
.cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--kost);transition:transform .3s var(--ease),background .3s}
.cursor__ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;transition:transform .5s var(--ease),opacity .3s;transform:scale(.45);opacity:0}
.cursor__ring b{position:absolute;width:9px;height:9px;border:1px solid var(--kost);transition:border-color .3s}
.cursor__ring b:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.cursor__ring b:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.cursor__ring b:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.cursor__ring b:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.cursor__label{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;white-space:nowrap;font-size:11px;color:var(--noir);transition:opacity .25s,transform .45s var(--ease)}
.cursor.is-link .cursor__ring{opacity:1;transform:scale(.8) rotate(45deg)}
.cursor.is-link .cursor__dot{transform:scale(.5);background:var(--stop)}
.cursor.is-play .cursor__dot{transform:scale(13);background:var(--kost)}
.cursor.is-play .cursor__label{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor.is-play .cursor__ring{opacity:1;transform:scale(2.35)}
.cursor.is-drag .cursor__ring{opacity:1;transform:scale(1.2)}
.cursor.is-down .cursor__dot{transform:scale(.6)}
.cursor.is-play.is-down .cursor__dot{transform:scale(11)}

/* ---------- zaglavlje ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:100;display:flex;align-items:center;gap:28px;padding:18px var(--pad);mix-blend-mode:normal;transition:transform .7s var(--ease),opacity .5s}
.top::before{content:"";position:absolute;inset:0 0 -30px 0;background:linear-gradient(to bottom,rgba(6,7,8,.72),rgba(6,7,8,0));pointer-events:none;z-index:-1}
body.is-loading .top{opacity:0;transform:translateY(-16px)}
.top.is-hidden{transform:translateY(-110%)}
.top__mark{display:flex;align-items:center;gap:11px;margin-right:auto}
.top__rec{width:8px;height:8px;border-radius:50%;background:var(--stop);box-shadow:0 0 14px 2px rgba(255,59,31,.75);animation:rec 2.4s steps(1) infinite}
@keyframes rec{0%,58%{opacity:1}59%,100%{opacity:.22}}
.top__name{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1;letter-spacing:.012em}
.top__nav{display:flex;gap:30px}
.top__nav a{position:relative;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--celik);padding:6px 0;transition:color .3s}
.top__nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--stop);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.top__nav a:hover,.top__nav a.is-active{color:var(--kost)}
.top__nav a:hover::after,.top__nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.top__burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px}
.top__burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--kost);transition:transform .5s var(--ease),top .5s var(--ease)}
.top__burger i:nth-child(1){top:18px}.top__burger i:nth-child(2){top:26px}
.menu-open .top__burger i:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .top__burger i:nth-child(2){top:22px;transform:rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:90;background:rgba(6,7,8,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--pad) calc(var(--tl) + 28px);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__nav{display:grid;gap:2px;margin-bottom:auto;margin-top:4vh}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:6px 0;border-bottom:1px solid var(--line-2);overflow:hidden}
.menu__nav a span{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;font-size:clamp(44px,13vw,84px);line-height:1.02;transform:translateY(105%);transition:transform .9s var(--ease)}
.menu__nav a em{font-style:normal;color:var(--stop);min-width:26px}
.menu-open .menu__nav a span{transform:none}
.menu__nav a:nth-child(2) span{transition-delay:.04s}.menu__nav a:nth-child(3) span{transition-delay:.08s}.menu__nav a:nth-child(4) span{transition-delay:.12s}.menu__nav a:nth-child(5) span{transition-delay:.16s}.menu__nav a:nth-child(6) span{transition-delay:.2s}
.menu__foot{display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--celik);margin-top:28px}
.menu__foot a:first-child{color:var(--stop)}

/* ---------- 3D pozornica ---------- */
.stage{position:fixed;inset:0;z-index:0;background:var(--noir);opacity:0;transition:opacity 1.4s ease .25s}
body.is-ready .stage{opacity:1}
.stage canvas{width:100%;height:100%}
.stage__fallback{position:absolute;inset:0;display:none;background:linear-gradient(to bottom,rgba(6,7,8,.2),rgba(6,7,8,.55)),url(../assets/hero-fallback.jpg) 50% 30%/cover no-repeat,var(--noir)}
.no-webgl .stage canvas{display:none}.no-webgl .stage__fallback{display:block}
main{position:relative;z-index:1}

/* ---------- 01 uvod ---------- */
.hero{position:relative;height:330vh}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__frame{position:absolute;inset:0;pointer-events:none}
.hero__slate{position:absolute;top:84px;color:var(--celik);font-size:11px}
.hero__slate--tl{left:var(--pad)}.hero__slate--tr{right:var(--pad)}
.hero__slate b{font-weight:400;color:var(--kost);display:inline-block;min-width:1.6em;text-align:right}
.hero__slate em{display:block;font-style:normal;margin-top:6px;color:var(--celik-2);opacity:0;transition:opacity 1s ease 2.6s}
body.is-ready .hero__slate em{opacity:1}
@media (hover:none){.hero__slate em{display:none}}
.hero__reel{display:flex;align-items:flex-end;gap:14px;cursor:pointer}
.hero__reel[hidden]{display:none}
.hero__reel-frame{position:relative;width:var(--rw,150px);aspect-ratio:var(--rar,16/9);overflow:hidden;background:var(--grafit);box-shadow:0 0 0 1px var(--line)}
.hero__reel-frame{background-size:cover;background-position:center}
.hero__reel-frame video,.hero__reel-frame .vc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .5s}
.hero__reel:hover .hero__reel-frame video,.hero__reel:hover .hero__reel-frame .vc{transform:scale(1.06)}
.hero__reel-frame i{position:absolute;left:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--stop);box-shadow:0 0 10px var(--stop);animation:rec 2.4s steps(1) infinite}
.hero__reel p{display:grid;gap:3px;font-size:10.5px;color:var(--celik);padding-bottom:2px}
.hero__reel p b{font-weight:400;color:var(--stop)}
.hero__reel p span{color:var(--kost);white-space:nowrap}
.beat{position:absolute;inset:0;padding:0 var(--pad) calc(var(--tl) + clamp(26px,4.6vh,56px));display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;opacity:0;visibility:hidden;will-change:opacity,transform}
.beat.is-on{visibility:visible}
.beat a,.beat button{pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--kost);margin-bottom:clamp(14px,2.2vh,26px);font-size:11.5px}
.hero__title{font-size:clamp(76px,13.6vw,252px);line-height:.8;margin-left:-.035em}
.hero__title .line{display:block;clip-path:inset(0 -100vw 0 -100vw);padding-top:.09em;margin-top:-.09em}
.hero__title .line:nth-child(2){padding-left:.62em;padding-bottom:.2em;margin-bottom:-.2em;margin-top:-.1em}
.hero__title .poster,.hero__title .serif{display:inline-block;white-space:nowrap}
.hero__title .serif{font-size:.86em;line-height:.9;padding-right:.04em}
.hero__title .lit{--lxp:-40vw;color:transparent;background-image:linear-gradient(100deg,#c6c1b7 0,#c6c1b7 calc(var(--lxp) - 17vw),#fffefa var(--lxp),#c6c1b7 calc(var(--lxp) + 17vw),#c6c1b7 100%);-webkit-background-clip:text;background-clip:text;padding:.3em .08em;margin:-.3em -.08em}
.hero__title .dot{display:inline-block;width:.105em;height:.105em;border-radius:50%;background:var(--stop);box-shadow:0 0 .22em rgba(255,59,31,.9);margin-left:.05em;transform:scale(0);transition:transform .9s var(--ease) 1.5s}
body.is-ready .hero__title .dot{transform:scale(1)}
.ch{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:left bottom;transition:transform 1.2s var(--ease)}
body.is-ready .ch{transform:none}
.hero__sub{position:absolute;right:var(--pad);bottom:calc(var(--tl) + clamp(26px,4.6vh,56px));width:min(390px,32vw);display:grid;gap:22px;opacity:0;transform:translateY(18px);transition:opacity 1s ease 1.25s,transform 1.2s var(--ease) 1.25s}
body.is-ready .hero__sub{opacity:1;transform:none}
.hero__sub p{font-size:15px;line-height:1.6;color:#cfcbc2}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.beat__big{font-size:clamp(46px,9.4vw,172px);line-height:.86;max-width:12ch}
.beat__big .poster,.beat__big .serif{display:block}
.beat__big .serif{font-size:.86em;line-height:1;padding-left:.5em}
.beat__big--right{margin-left:auto;text-align:right}
.beat__big--right .serif{padding-left:0;padding-right:.5em}
.beat__note{margin-top:22px;color:var(--celik)}
.beat--c .beat__note{text-align:right}
.hero__scroll{display:none;position:absolute;left:50%;bottom:calc(var(--tl) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:var(--celik);font-size:10.5px;white-space:nowrap;opacity:0;transition:opacity .8s ease 2.2s}
body.is-ready .hero__scroll{opacity:1}
.hero__scroll.is-off{opacity:0;transition-delay:0s}
.hero__scroll i{width:1px;height:26px;background:linear-gradient(var(--kost),transparent);animation:drip 2.2s var(--ease-io) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 02 manifest ---------- */
.manifest{position:relative;background:var(--noir);padding:clamp(120px,20vh,240px) 0 clamp(110px,18vh,220px)}
.manifest::before{content:"";position:absolute;left:0;right:0;top:-18vh;height:18vh;background:linear-gradient(to bottom,transparent,var(--noir));pointer-events:none}
.manifest__text{font-family:var(--f-display);font-weight:200;font-size:clamp(28px,4.5vw,78px);line-height:1.13;letter-spacing:-.028em;margin-top:clamp(26px,4vw,56px);max-width:21ch;max-width:min(1400px,100%)}
.manifest__text em,.about__text em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--kost)}
.w{display:inline-block;opacity:.14;transition:opacity .5s ease;will-change:opacity}
.w.is-lit{opacity:1}
.manifest__meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(50px,8vw,120px);padding-top:22px;border-top:1px solid var(--line);color:var(--celik)}
.manifest__meta span:last-child{color:var(--kost);justify-self:end;text-align:right}

/* ---------- 03 izabrani radovi ---------- */
.reel{position:relative;background:var(--noir)}
.reel__head{padding-bottom:clamp(60px,9vw,130px)}
.scene{position:relative;height:230vh}
.scene__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.scene__amb{position:absolute;inset:-12%;width:124%;height:124%;filter:blur(60px) saturate(1.5);opacity:0;transform:translateZ(0);pointer-events:none}
.scene__veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(6,7,8,.25) 0%,rgba(6,7,8,.78) 62%,var(--noir) 100%);pointer-events:none}
.scene__frame{position:relative;z-index:2;width:var(--fw);aspect-ratio:var(--ar);max-height:calc(100svh - 150px);background:#000;overflow:hidden;will-change:transform,clip-path;cursor:pointer}
.scene__frame video,.scene__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene__frame video{opacity:0;transition:opacity .6s ease}
.scene__frame video.is-playing{opacity:1}
.scene__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,8,.55),transparent 38%);pointer-events:none}
.scene--land{--fw:min(78vw,calc((100svh - 150px) * var(--arn)))}
.scene--port{--fw:min(calc((100svh - 150px) * var(--arn)),74vw)}
.scene--tri{--fw:min(calc((100svh - 190px) * var(--arn)),30vw)}
.scene__side{position:absolute;z-index:2;left:50%;top:50%;--sw:calc(var(--fw) * .74);width:var(--sw);aspect-ratio:var(--ar);margin-top:calc(var(--sw) / var(--arn) * -.5);overflow:hidden;background:#000;cursor:pointer;will-change:transform,opacity}
.scene__side--l{margin-left:calc(var(--fw) * -.5 - var(--sw) - 2.2vw)}
.scene__side--r{margin-left:calc(var(--fw) * .5 + 2.2vw)}
.scene__side img,.scene__side video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene__side video{opacity:0;transition:opacity .6s ease}
.scene__side video.is-playing{opacity:1}
.scene__side::after{content:"";position:absolute;inset:0;background:rgba(6,7,8,.28);transition:background .5s}
.scene__side:hover::after{background:rgba(6,7,8,0)}
.scene__side span{position:absolute;left:12px;top:10px;z-index:2;font-size:9.5px;color:var(--kost)}
.scene__corners{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene__corners b{position:absolute;width:22px;height:22px;border:1px solid rgba(236,231,221,.75)}
.scene__corners b:nth-child(1){left:14px;top:14px;border-right:0;border-bottom:0}
.scene__corners b:nth-child(2){right:14px;top:14px;border-left:0;border-bottom:0}
.scene__corners b:nth-child(3){left:14px;bottom:14px;border-right:0;border-top:0}
.scene__corners b:nth-child(4){right:14px;bottom:14px;border-left:0;border-top:0}
.scene__rec{position:absolute;left:44px;top:17px;z-index:3;color:var(--kost);font-size:10.5px;display:flex;align-items:center;gap:8px}
.scene__rec b{font-weight:400;font-variant-numeric:tabular-nums}
.scene__rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--stop);box-shadow:0 0 10px var(--stop)}
.scene__dur{position:absolute;right:44px;top:17px;z-index:3;font-size:10.5px;color:var(--kost)}
.scene__info{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:calc(var(--tl) + clamp(22px,4vh,46px));display:flex;align-items:flex-end;justify-content:space-between;gap:28px;pointer-events:none}
.scene__title{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;font-size:clamp(44px,8.4vw,150px);line-height:.84;letter-spacing:-.012em;max-width:11ch;text-shadow:0 2px 40px rgba(6,7,8,.55)}
.scene__title em{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;font-size:.52em;line-height:1.1;letter-spacing:-.02em;margin-top:.14em}
.scene__meta{position:absolute;z-index:4;right:var(--pad);top:96px;display:grid;gap:4px;text-align:right;color:var(--celik);min-width:200px;pointer-events:none}
.scene__meta b{font-weight:400;color:var(--kost)}
.scene__no{position:absolute;z-index:1;left:var(--pad);top:96px;font-size:11px;color:var(--celik)}
.scene__no b{font-weight:400;color:var(--kost)}
.scene__play{position:absolute;z-index:5;right:14px;bottom:14px;display:none;align-items:center;gap:9px;padding:10px 14px 9px;background:rgba(236,231,221,.94);color:var(--noir);font-size:10.5px}
.scene__play i{margin:0;border:5px solid transparent;border-left:8px solid var(--noir);border-right:0}
@media (hover:none){.scene__play{display:flex;right:12px;top:12px;bottom:auto}.scene__dur{display:none}.scene__corners b:nth-child(2){display:none}}

/* ---------- 04 cela rolna ---------- */
.roll{position:relative;background:var(--noir);padding:clamp(110px,16vw,220px) 0 clamp(90px,12vw,170px);overflow:hidden}
.roll__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,70px)}
.roll__hint{display:flex;align-items:center;gap:8px;color:var(--celik)}
.roll__hint span{margin-right:6px}
.roll__hint button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);color:var(--kost);font-family:var(--f-sans);font-size:14px;transition:background .3s,color .3s,border-color .3s}
.roll__hint button:hover{background:var(--kost);color:var(--noir);border-color:var(--kost)}
.roll__side{display:grid;gap:16px;justify-items:end}
.roll__projects{color:var(--kost);text-align:right;max-width:52ch}
.roll__projects span{color:var(--stop);margin-right:10px}
.roll__viewport{position:relative;touch-action:pan-y}
.roll__track{position:relative;-webkit-user-select:none;user-select:none;display:flex;gap:clamp(10px,1.1vw,18px);width:max-content;padding:34px var(--pad) 0;will-change:transform}
.roll__track::before,.roll__track::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(236,231,221,.14) 12px 26px,transparent 26px 38px)}
.roll__track::before{top:8px}
.roll__track::after{bottom:-22px}
.roll.is-dragging .roll__track{cursor:grabbing}
.tile{position:relative;flex:none;width:calc(var(--th) * var(--arn));--th:clamp(360px,60vh,620px);cursor:pointer;transition:opacity .5s ease}
.tile__edge{display:flex;justify-content:space-between;color:var(--celik-2);font-size:9.5px;margin-bottom:8px}
.tile__edge b{font-weight:400;color:var(--amber)}
.tile__frame{position:relative;width:100%;height:var(--th);overflow:hidden;background:var(--grafit)}
.tile__frame img,.tile__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .5s ease;-webkit-user-drag:none;user-select:none;pointer-events:none}
.tile__frame video{opacity:0}
.tile__frame video.is-playing{opacity:1}
.tile:hover .tile__frame img,.tile:hover .tile__frame video,.tile:hover .tile__frame .vc{transform:scale(1.045)}
.tile__frame::before{content:"";position:absolute;inset:10px;z-index:2;border:1px solid rgba(236,231,221,0);transition:border-color .4s,inset .6s var(--ease);pointer-events:none}
.tile:hover .tile__frame::before{border-color:rgba(236,231,221,.55);inset:14px}
.tile__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,8,.7),transparent 34%);pointer-events:none}
.tile__name{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:grid;gap:2px}
.tile__name b{font-family:var(--f-poster);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.1vw,34px);line-height:.95;letter-spacing:-.01em}
.tile__name em{font-family:var(--f-serif);font-style:italic;font-size:14px;color:#d8d4cb;line-height:1.25}
.tile__cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--celik);font-size:10.5px}
.tile__cap span:last-child{color:var(--kost)}
.roll__next{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 30px;margin-top:clamp(70px,8vw,120px);padding-top:22px;border-top:1px solid var(--line)}
.roll__next .serif{font-size:clamp(22px,2.4vw,38px);line-height:1.15}
@media (hover:hover){.roll__track:hover .tile:not(:hover){opacity:.38}}
@media (hover:none){
  .roll__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:auto}
  .roll__viewport::-webkit-scrollbar{display:none}
  .tile{scroll-snap-align:center;--th:min(62vh,128vw)}
  .roll__track{padding-bottom:26px}
}

/* ---------- 05 za koga ---------- */
.who{position:relative;background:var(--asfalt);padding:clamp(110px,15vw,210px) 0;border-top:1px solid var(--line-2)}
.who__head{margin-bottom:clamp(50px,7vw,110px)}
.who__grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.who__card{position:relative;padding:clamp(24px,2.6vw,44px) clamp(18px,2.4vw,40px) clamp(30px,3.4vw,56px);border-right:1px solid var(--line);display:grid;gap:16px;align-content:start;overflow:hidden;transition:background .6s ease}
.who__card:first-child{padding-left:0}
.who__card:last-child{border-right:0}
.who__card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--stop);box-shadow:0 0 16px var(--stop);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.who__card:hover::before{transform:scaleX(1)}
.who__no{color:var(--stop)}
.who__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--grafit) 50% 58%/cover no-repeat;margin-top:clamp(8px,1vw,16px);cursor:pointer;filter:grayscale(1) contrast(1.08) brightness(.82);transition:filter .9s ease}
.who__media video,.who__media .vc{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.04);transition:transform 1.6s var(--ease),opacity .6s ease}
.who__card:hover .who__media{filter:none}
.who__card:hover .who__media video,.who__card:hover .who__media .vc{transform:scale(1)}
.who__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line-2);pointer-events:none}
.who__card h3{font-size:clamp(34px,4.1vw,70px);line-height:.9;margin-top:clamp(14px,1.6vw,26px)}
.who__lead{font-size:clamp(19px,1.7vw,26px);line-height:1.25;color:var(--kost)}
.who__card p:not(.who__lead){color:#b9b6ae;font-size:15px;max-width:44ch}
.who__card ul{display:grid;gap:6px;margin-top:10px;color:var(--celik);font-size:11px}
.who__card li::before{content:"+";color:var(--stop);margin-right:10px}

/* ---------- 06 usluge ---------- */
.services{position:relative;background:var(--noir);padding:clamp(110px,15vw,210px) 0}
.services__head{margin-bottom:clamp(40px,6vw,90px)}
.services__list{border-top:1px solid var(--line)}
.services__list li{position:relative;display:grid;grid-template-columns:70px minmax(0,1.25fr) minmax(0,1fr) 40px;align-items:center;gap:20px;padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease),color .4s}
.services__list li::before{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--stop);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.services__list li>span{color:var(--celik-2);transition:color .4s}
.services__list h3{font-size:clamp(30px,4.9vw,86px);line-height:.92;transition:transform .7s var(--ease)}
.services__list p{color:#b9b6ae;font-size:15px;max-width:42ch;transition:color .4s}
.services__list li>i{font-style:normal;font-size:22px;justify-self:end;color:var(--celik-2);transition:transform .6s var(--ease),color .4s}
@media (hover:hover){
  .services__list:hover li{color:rgba(236,231,221,.34)}
  .services__list:hover li p{color:rgba(185,182,174,.34)}
  .services__list li:hover{color:var(--kost)}
  .services__list li:hover p{color:#d8d4cb}
  .services__list li:hover::before{transform:scaleX(1)}
  .services__list li:hover>span{color:var(--stop)}
  .services__list li:hover h3{transform:translateX(18px)}
  .services__list li:hover>i{transform:translate(4px,-4px);color:var(--stop)}
}
.services__peek{position:fixed;left:0;top:0;z-index:60;width:clamp(200px,19vw,300px);aspect-ratio:4/5;pointer-events:none;overflow:hidden;opacity:0;clip-path:inset(50% 0 50% 0);transition:opacity .35s ease,clip-path .7s var(--ease);background:var(--grafit)}
.services__peek.is-on{opacity:1;clip-path:inset(0 0 0 0)}
.services__peek{background-size:cover;background-position:center}
.services__peek video{width:100%;height:100%;object-fit:cover}
.services__peek span{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--kost);text-shadow:0 1px 8px #000}

/* ---------- 07 režija ---------- */
.direction{position:relative;background:var(--asfalt);padding:clamp(110px,15vw,210px) 0;border-top:1px solid var(--line-2)}
.direction__intro{margin-top:clamp(22px,3vw,40px);max-width:46ch;color:#b9b6ae;font-size:17px}
.nle{margin-top:clamp(50px,7vw,100px);border:1px solid var(--line);background:rgba(6,7,8,.6)}
.nle__ruler{display:flex;justify-content:space-between;padding:10px 16px 9px 62px;border-bottom:1px solid var(--line);color:var(--celik-2);font-size:10px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(2.5% - 1px),rgba(236,231,221,.1) calc(2.5% - 1px),rgba(236,231,221,.1) 2.5%) 62px 100%/calc(100% - 78px) 6px no-repeat}
.nle__tracks{position:relative;padding:6px 16px 8px 0}
.nle__track{display:grid;grid-template-columns:62px 1fr;align-items:center;height:clamp(34px,4.4vw,58px)}
.nle__track+.nle__track{border-top:1px solid var(--line-2)}
.nle__track>b{font-weight:400;color:var(--celik-2);font-size:10px;text-align:center}
.nle__lane{position:relative;height:100%}
.clip{position:absolute;top:5px;bottom:5px;left:calc(var(--s) * 1%);width:calc(var(--w) * 1%);display:flex;align-items:center;padding:0 10px;overflow:hidden;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease),filter .5s,opacity .5s;border-left:2px solid rgba(255,255,255,.45);opacity:.55}
.nle.is-in .clip{transform:scaleX(1)}
.clip em{font-style:normal;font-size:10px;white-space:nowrap;color:rgba(236,231,221,.9)}
.clip--a{background:#2b3038}.clip--b{background:#353b45}.clip--c{background:#49515d}.clip--d{background:linear-gradient(90deg,#b5321e,#ff3b1f)}.clip--e{background:#ece7dd}.clip--e em{color:var(--noir)}
.clip--grade{background:linear-gradient(90deg,#1d3a44,#8a4a26)}.clip--fx{background:#3b2f4a}.clip--audio{background:#1c2a24}
.clip.is-live{opacity:1;filter:brightness(1.15)}
.nle.is-in .nle__track:nth-child(2) .clip{transition-delay:.15s}.nle.is-in .nle__track:nth-child(3) .clip:nth-child(1){transition-delay:.05s}.nle.is-in .nle__track:nth-child(3) .clip:nth-child(2){transition-delay:.15s}.nle.is-in .nle__track:nth-child(3) .clip:nth-child(3){transition-delay:.25s}.nle.is-in .nle__track:nth-child(3) .clip:nth-child(4){transition-delay:.35s}.nle.is-in .nle__track:nth-child(3) .clip:nth-child(5){transition-delay:.45s}.nle.is-in .nle__track:nth-child(4) .clip{transition-delay:.3s}.nle.is-in .nle__track:nth-child(1) .clip{transition-delay:.5s}
.wave{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5}
.wave path{fill:none;stroke:#63d6a0;stroke-width:1;vector-effect:non-scaling-stroke}
.nle__playhead{position:absolute;top:-26px;bottom:0;left:62px;width:1px;background:var(--stop);box-shadow:0 0 12px var(--stop);will-change:transform}
.nle__playhead::before{content:"";position:absolute;left:-5px;top:0;border:5px solid transparent;border-top:8px solid var(--stop)}
.nle__playhead span{position:absolute;left:10px;top:-2px;color:var(--stop);font-size:10px;white-space:nowrap}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,34px);margin-top:clamp(40px,5vw,70px)}
.steps li{display:grid;gap:12px;align-content:start;padding-top:16px;border-top:1px solid var(--line);transition:border-color .5s}
.steps li.is-live{border-top-color:var(--stop)}
.steps li>span{color:var(--celik);transition:color .4s}
.steps li.is-live>span{color:var(--stop)}
.steps h3{font-size:clamp(22px,2vw,32px);line-height:1.1}
.steps p{color:#b9b6ae;font-size:14.5px}

/* ---------- 08 studio ---------- */
.about{position:relative;background:var(--noir);padding:clamp(110px,15vw,210px) 0}
.about__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:end}
.about__head{grid-column:1 / -1;margin-bottom:clamp(10px,3vw,50px)}
.about__plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--grafit)}
.about__media{position:absolute;inset:-8% 0;will-change:transform;background-size:cover;background-position:center;filter:grayscale(.35) contrast(1.06)}
.about__media video,.about__media img{width:100%;height:100%;object-fit:cover}
.about__plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,8,.6),transparent 45%),linear-gradient(to bottom,rgba(6,7,8,.35),transparent 30%)}
.about__plate-tc{position:absolute;left:16px;top:14px;z-index:2;font-size:10.5px;display:flex;align-items:center;gap:8px}
.about__plate-tc i{width:6px;height:6px;border-radius:50%;background:var(--stop);margin:0;box-shadow:0 0 10px var(--stop)}
.about__name{font-size:clamp(46px,12.6vw,236px);line-height:.82;margin-top:clamp(18px,2.4vw,34px);margin-left:-.02em}
.about__name .serif{display:block;font-size:.62em;line-height:1;padding-left:.12em}
.about__name .poster{display:block}
.about__role{margin-top:clamp(16px,2vw,30px);color:var(--celik)}
.about__text{font-family:var(--f-display);font-weight:200;font-size:clamp(22px,2.5vw,42px);line-height:1.22;letter-spacing:-.022em;max-width:24ch;max-width:min(760px,100%)}
.about__small{margin:clamp(22px,2.6vw,38px) 0 30px;max-width:50ch;color:#b9b6ae;font-size:15.5px}

/* ---------- 09 kontakt ---------- */
.contact{position:relative;background:transparent}
.contact::before{content:"";position:absolute;left:0;right:0;top:0;height:42vh;background:linear-gradient(to bottom,var(--noir),transparent);pointer-events:none}
.contact__pin{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:clamp(140px,22vh,260px) 0 clamp(40px,7vh,90px)}
.contact__tail{position:relative;background:linear-gradient(to bottom,transparent,rgba(6,7,8,.88) 38%,var(--noir) 100%)}
.contact__inner{position:relative}
.contact__title{font-size:clamp(58px,13.4vw,250px);line-height:.82;margin-top:clamp(18px,2.4vw,34px);margin-left:-.03em}
.contact__title .line{display:block}
.contact__title .line:nth-child(2){padding-left:.5em;margin-top:-.02em}
.contact__title .serif{font-size:.86em}
.contact__lead{margin-top:clamp(24px,3vw,44px);max-width:46ch;font-size:clamp(16px,1.25vw,20px);color:#d5d1c8}
.contact__actions{margin-top:clamp(26px,3vw,44px)}
.contact__lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:22px;border-top:1px solid var(--line)}
.contact__lines dt{color:var(--celik);margin-bottom:8px}
.contact__lines dd a{position:relative;font-family:var(--f-display);font-weight:300;font-size:clamp(17px,1.7vw,28px);letter-spacing:-.02em;word-break:break-word;background:linear-gradient(var(--stop),var(--stop)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);padding-bottom:3px}
.contact__lines dd a:hover{background-size:100% 1px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:calc(var(--tl) + 26px);color:var(--celik-2);font-size:10.5px;position:relative}
.foot a{color:var(--celik)}.foot a:hover{color:var(--kost)}

/* ---------- tajmlajn ---------- */
.timeline{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--tl);display:flex;align-items:center;gap:18px;padding:0 var(--pad);background:linear-gradient(to top,rgba(6,7,8,.94) 35%,rgba(6,7,8,0));transition:transform .8s var(--ease),opacity .5s}
body.is-loading .timeline{transform:translateY(100%);opacity:0}
.timeline__tc{color:var(--kost);font-size:11px;min-width:92px;font-variant-numeric:tabular-nums}
.timeline__end{color:var(--celik-2);font-size:10.5px;min-width:44px;text-align:right}
.timeline__rail{position:relative;flex:1;height:26px}
.timeline__cta{display:none;color:var(--noir);background:var(--stop);padding:7px 10px 6px;font-size:10px;white-space:nowrap}
.timeline__ticks{position:absolute;left:0;right:0;bottom:4px;height:7px;background:repeating-linear-gradient(to right,rgba(236,231,221,.2) 0,rgba(236,231,221,.2) 1px,transparent 1px,transparent 1.25%);-webkit-mask-image:linear-gradient(to right,#000,#000);mask-image:linear-gradient(to right,#000,#000)}
.timeline__ticks::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(236,231,221,.22)}
.timeline__clips{position:absolute;inset:0;display:flex}
.timeline__clips a{position:relative;height:100%;display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--celik-2);padding:0 0 0 7px;line-height:14px;white-space:nowrap;overflow:hidden;transition:color .3s}
.timeline__clips a::before{content:"";position:absolute;left:0;bottom:4px;width:1px;height:16px;background:rgba(236,231,221,.38)}
.timeline__clips a:hover,.timeline__clips a.is-active{color:var(--kost)}
.timeline__clips a.is-active::before{background:var(--stop)}
.timeline__head{position:absolute;left:0;top:-4px;bottom:0;width:1px;background:var(--stop);box-shadow:0 0 10px 1px rgba(255,59,31,.8);will-change:transform}
.timeline__head::before{content:"";position:absolute;left:-4px;top:0;border:4px solid transparent;border-top:6px solid var(--stop)}

/* ---------- plejer ---------- */
.player{position:fixed;inset:0;z-index:250;visibility:hidden;pointer-events:none}
.player.is-open{visibility:visible;pointer-events:auto}
.player__bg{position:absolute;inset:0;background:#030304;opacity:0;transition:opacity .6s ease}
.player.is-open .player__bg{opacity:1}
.player__amb{position:absolute;z-index:0;inset:-10%;width:120%;height:120%;filter:blur(70px) saturate(1.4);opacity:0;transition:opacity 1.2s ease .4s;pointer-events:none}
.player.is-open .player__amb{opacity:.42}
.player__frame{position:absolute;left:0;top:0;width:100%;height:100%;display:grid;place-items:center;clip-path:inset(var(--ct,50%) var(--cr,50%) var(--cb,50%) var(--cl,50%));transition:clip-path .95s var(--ease-io)}
.player.is-open .player__frame{clip-path:inset(0 0 0 0)}
.player__frame video{position:absolute;left:0;top:74px;width:100%;height:calc(100% - 164px);object-fit:contain;background:transparent}
.player__big{position:absolute;inset:70px 0 80px;cursor:pointer}
.player__top,.player__bar{position:absolute;left:0;right:0;display:flex;align-items:center;gap:18px;padding:18px var(--pad);opacity:0;transition:opacity .5s ease .25s,transform .7s var(--ease) .25s}
.player__top{top:0;justify-content:space-between;align-items:flex-start;background:linear-gradient(to bottom,rgba(3,3,4,.85),transparent);transform:translateY(-12px)}
.player__bar{bottom:0;background:linear-gradient(to top,rgba(3,3,4,.92),transparent);padding-top:40px;transform:translateY(12px)}
.player.is-open .player__top,.player.is-open .player__bar{opacity:1;transform:none}
.player.is-idle .player__top,.player.is-idle .player__bar{opacity:0;transition-delay:0s}
.player__meta{display:grid;gap:4px;color:var(--celik)}
.player__meta h3{font-size:clamp(24px,3vw,44px);line-height:1;color:var(--kost)}
.player__close{display:flex;align-items:center;gap:10px;color:var(--kost);padding:12px 0;min-height:44px}
.player__close i{font-style:normal;margin:0;padding:3px 6px;border:1px solid var(--line);color:var(--celik)}
.player__btn{color:var(--kost);font-size:11px;padding:14px 4px;min-height:44px;white-space:nowrap;transition:color .3s}
.player__btn:hover{color:var(--stop)}
.player__time{font-size:11px;color:var(--celik);min-width:42px;font-variant-numeric:tabular-nums}
.player__scrub{position:relative;flex:1;height:26px;cursor:pointer;touch-action:none}
.player__scrub::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:rgba(236,231,221,.25)}
.player__scrub i{position:absolute;left:0;top:12px;height:1px;width:100%;background:rgba(236,231,221,.45);transform-origin:left;transform:scaleX(0)}
.player__scrub b{position:absolute;left:0;top:11px;height:3px;width:100%;background:var(--stop);box-shadow:0 0 12px var(--stop);transform-origin:left;transform:scaleX(0)}

/* ---------- otkrivanje ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1.2s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.who__card:nth-child(2)[data-reveal]{transition-delay:.1s}.who__card:nth-child(3)[data-reveal]{transition-delay:.2s}
.steps li:nth-child(2){transition-delay:.06s}.steps li:nth-child(3){transition-delay:.12s}.steps li:nth-child(4){transition-delay:.18s}.steps li:nth-child(5){transition-delay:.24s}
.h-display .poster,.h-display .serif{clip-path:inset(0 0 105% 0);transform:translateY(.35em);transition:clip-path 1.1s var(--ease),transform 1.2s var(--ease)}
.h-display .serif{transition-delay:.12s}
.h-display.is-in .poster,.h-display.is-in .serif{clip-path:inset(-10% -5% -25% -5%);transform:none}

/* ==========================================================================
   Prilagođavanje
   ========================================================================== */
@media (max-width:1100px){
  .top__nav{display:none}
  .top__burger{display:block}
  .scene__side{display:none}
  .scene__meta{top:auto;right:auto;left:var(--pad);bottom:calc(var(--tl) + 12px);text-align:left;display:flex;flex-wrap:wrap;gap:4px 14px;min-width:0;font-size:10px}
  .scene__meta span:nth-child(n+3){display:none}
  .scene__info{bottom:calc(var(--tl) + 40px)}
  .scene--tri{--fw:min(calc((100svh - 150px) * var(--arn)),74vw)}
  .who__grid{grid-template-columns:1fr}
  .who__card,.who__card:first-child{padding-left:0;padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
  .who__card h3{margin-top:14px}
  .who__media{max-width:560px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .services__list li{grid-template-columns:44px minmax(0,1fr) 30px;row-gap:8px}
  .services__list li p{grid-column:2 / 3;grid-row:2}
  .services__list li>i{grid-row:1;grid-column:3}
  .about__grid{grid-template-columns:1fr;align-items:start}
  .about__plate{max-width:440px}
  .contact__lines{grid-template-columns:1fr}
  .timeline__clips a{color:transparent}
  .timeline__clips a.is-active{color:var(--kost);overflow:visible}
}
@media (max-width:760px){
  :root{--tl:40px}
  body{font-size:15px}
  .top{padding-top:12px;padding-bottom:12px;gap:10px}
  .top__cta{display:none}
  .hero{height:300vh}
  .roll__side{justify-items:start}
  .roll__projects{text-align:left}
  .hero__slate{top:66px;font-size:9.5px}
  .hero__slate--tr{display:none}
  .hero__title{font-size:20.2vw}
  .hero__title .line:nth-child(2){padding-left:.3em}
  .beat--a{padding-bottom:calc(var(--tl) + 244px)}
  .eyebrow{font-size:9.5px;gap:8px;letter-spacing:.06em;white-space:nowrap}
  .eyebrow .tick{width:14px}
  .hero__sub{left:var(--pad);right:var(--pad);width:auto;bottom:calc(var(--tl) + 26px);gap:16px}
  .hero__sub p{font-size:14px;line-height:1.5;max-width:40ch}
  .hero__scroll{display:none}
  .hero__reel{display:none}
  .beat__big{font-size:14.5vw}
  .manifest__meta{grid-template-columns:1fr}
  .manifest__meta span:last-child{justify-self:start;text-align:left}
  .scene{height:200vh}
  .scene--land{--fw:92vw}
  .scene--port{--fw:min(calc((100svh - 250px) * var(--arn)),78vw)}
  .scene__frame{max-height:calc(100svh - 250px)}
  .scene__info{flex-direction:column;align-items:flex-start;gap:0}

  .scene__title{font-size:13vw}
  .scene__no{top:70px}
  .steps{grid-template-columns:1fr}
  .nle__ruler span:nth-child(even){display:none}
  .nle__ruler{padding-left:40px}.nle__track{grid-template-columns:40px 1fr}.nle__playhead{left:40px}
  .clip em{font-size:8.5px}
  .contact__lines{grid-template-columns:1fr}
  .contact__pin{align-items:flex-start;padding-top:110px;padding-bottom:46vh}
  .contact__tail{background:linear-gradient(to bottom,transparent,var(--noir) 70px);padding-top:70px}
  .timeline{gap:10px}
  .timeline__tc{min-width:80px;font-size:10px}
  .timeline__end{display:none}
  .timeline__cta{display:block}
  .timeline__clips a{color:transparent}
  .timeline__clips a.is-active{color:var(--kost);overflow:visible}
  .player__bar{flex-wrap:wrap;gap:6px 14px;padding-bottom:14px}
  .player__frame video{top:78px;height:calc(100% - 210px)}
  .player__scrub{order:-1;flex-basis:100%}
  .player__time{min-width:0}
  #playerMute{margin-left:auto}
}
@media (max-width:420px){
  .player__btn{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
  .w{opacity:1}
  .ch{transform:none}
}

/* ---------- rez: oznake između scena ---------- */
.cut{display:flex;align-items:center;gap:14px;color:var(--celik-2);font-size:10.5px;margin-bottom:clamp(40px,6vw,90px)}
.cut b{font-weight:400;color:var(--stop)}
.cut i{flex:1;height:1px;margin:0;background:var(--line);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.cut.is-in i{transform:scaleX(1)}
.cut span{opacity:0;transition:opacity .8s ease .5s}
.cut.is-in span{opacity:1}

/* ---------- pregledi kroz platno (desktop) ---------- */
video.is-src{display:none!important}
.vc{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform 1.4s var(--ease);pointer-events:none}
.vc.is-on{opacity:1}

/* ==========================================================================
   v2 — bez teksta: logo, kadrovi, naslovi, kontakt
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.leader__logo{display:block;width:min(440px,74vw);height:auto}
.leader__tc{justify-content:flex-start}
.top__mark img{display:block;height:26px;width:auto}
.menu__foot a:first-child{color:var(--stop)}

.hero{height:250vh}
.hero__logo{--lxp:-40vw;width:min(66vw,1120px);aspect-ratio:1663/424;-webkit-mask:url(../assets/logo.svg) left center/contain no-repeat;mask:url(../assets/logo.svg) left center/contain no-repeat;background:linear-gradient(100deg,#c9c5bc 0,#c9c5bc calc(var(--lxp) - 18vw),#fffefa var(--lxp),#c9c5bc calc(var(--lxp) + 18vw),#c9c5bc 100%);clip-path:inset(0 100% 0 0);transform:translateY(14px);transition:clip-path 1.7s var(--ease) .45s,transform 1.7s var(--ease) .45s}
body.is-ready .hero__logo{clip-path:inset(0 0 0 0);transform:none}
.no-webgl .hero__logo{background:var(--kost)}
.beat--a .hero__reel{position:absolute;right:var(--pad);bottom:calc(var(--tl) + clamp(26px,4.6vh,56px));opacity:0;transform:translateY(14px);transition:opacity 1s ease 1.5s,transform 1.2s var(--ease) 1.5s;pointer-events:auto}
body.is-ready .beat--a .hero__reel{opacity:1;transform:none}
.hero__reel p{padding-bottom:0}
.hero__down{position:absolute;left:50%;bottom:calc(var(--tl) + 8px);width:44px;height:44px;margin-left:-22px;display:grid;place-items:end center;opacity:0;transition:opacity .8s ease 2.2s}
body.is-ready .hero__down{opacity:1}
.hero__down i{width:1px;height:30px;background:linear-gradient(var(--kost),transparent);animation:drip 2.2s var(--ease-io) infinite;transform-origin:top}

.reel{padding-top:1px}
.roll{padding-top:clamp(70px,9vw,140px)}
.roll__head{justify-content:flex-end;margin-bottom:clamp(20px,2.4vw,34px)}
.tile__edge b{color:var(--kost)}
.tile__edge span{color:var(--celik)}
.tile__name b{font-size:clamp(24px,2.3vw,38px)}

.contact__logo{display:block;width:min(56vw,900px);height:auto;margin-left:-.2%}
.contact__actions{margin-top:clamp(30px,4.4vw,64px)}
ul.contact__lines{list-style:none;margin:0;padding:22px 0 0}
.contact__lines li a{position:relative;font-family:var(--f-display);font-weight:300;font-size:clamp(17px,1.7vw,28px);letter-spacing:-.02em;word-break:break-word;background:linear-gradient(var(--stop),var(--stop)) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);padding-bottom:3px}
.contact__lines li a:hover{background-size:100% 1px}
.foot a{font-family:var(--f-sans);font-size:15px;min-width:44px;min-height:44px;display:grid;place-items:center;margin:-12px -14px -12px 0}

@media (max-width:1100px){
  .scene__info{bottom:calc(var(--tl) + 24px)}
  ul.contact__lines{display:grid;gap:14px}
}
@media (max-width:760px){
  .top__mark img{height:20px}
  .hero{height:230vh}
  .beat--a{padding-bottom:calc(var(--tl) + 44px)}
  .hero__logo{width:100%}
  .hero__down{display:none}
  .contact__logo{width:100%}
  .contact__pin{padding-top:120px;padding-bottom:50vh}
}

/* ============ v3 — naslovna kartica „Portfolio“ (rez u crno na kraju uvoda) ============ */
.hero{height:290vh}
.hero__card{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,30px);padding:0 var(--pad) var(--tl);background:var(--noir);opacity:0;visibility:hidden;pointer-events:none}
.hero__card.is-on{opacity:1;visibility:visible}
.hero__card-title{margin:0;font-size:min(19.5vw,330px);line-height:.84;letter-spacing:-.012em;text-transform:uppercase;color:var(--kost);white-space:nowrap}
.hero__card-word{display:block;overflow:hidden;padding:.05em .02em 0}
.hero__card-word span{display:inline-block;transform:translate3d(0,108%,0)}
.hero__card.is-on .hero__card-word span{transform:none;transition:transform 1s var(--ease) calc(var(--i) * 38ms + 60ms)}
.hero__card-line{display:block;width:min(19.5vw,330px);height:2px;background:var(--stop);transform:scaleX(0);transform-origin:left center}
.hero__card.is-on .hero__card-line{transform:none;transition:transform 1.1s var(--ease) .5s}
@media (max-width:760px){
  .hero{height:265vh}
  .hero__card-title{font-size:18.4vw}
  .hero__card-line{width:18.4vw}
}
@media (prefers-reduced-motion:reduce){
  .hero__card-word span,.hero__card-line{transform:none!important;transition:none!important}
}

/* ============ v4 — zasluge za 3D model (CC BY) ============ */
.credit{margin:clamp(26px,3vw,40px) 0 0;font-size:10px;line-height:1.7;letter-spacing:.06em;color:var(--celik-2);max-width:70ch}
.credit a{color:var(--celik);border-bottom:1px solid rgba(236,231,221,.16);transition:color .3s,border-color .3s}
.credit a:hover{color:var(--kost);border-color:var(--stop)}

.top__mark{transition:opacity .25s ease}
@media (max-width:980px){.beat--a .hero__reel{display:none}}