body{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:'Courier Prime','Courier New',monospace}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cursor{display:inline-block;width:0.5em;height:0.95em;background:currentColor;margin-left:0.08em;vertical-align:-0.08em;animation:blink 1.1s steps(1) infinite}
.hatch{background-image:repeating-linear-gradient(135deg,#0a0a0a 0,#0a0a0a 1px,transparent 1px,transparent 9px)}
.hatch-inv{background-image:repeating-linear-gradient(135deg,#f6f5f1 0,#f6f5f1 1px,transparent 1px,transparent 9px)}
.btn-dark{background:#0a0a0a;color:#f6f5f1;border:2px solid #0a0a0a}
.btn-dark:hover{background:#f6f5f1;color:#0a0a0a}
.btn-light{background:transparent;color:#0a0a0a;border:2px solid #0a0a0a}
.btn-light:hover{background:#0a0a0a;color:#f6f5f1}
.btn-paper{background:#f6f5f1;color:#0a0a0a;border:2px solid #f6f5f1}
.btn-paper:hover{background:#0a0a0a;color:#f6f5f1}
.btn-ghost{background:transparent;color:#f6f5f1;border:2px solid #f6f5f1}
.btn-ghost:hover{background:#f6f5f1;color:#0a0a0a}
/* ====== PUTOVANJE: animacije ====== */
@property --p{syntax:'<percentage>';inherits:false;initial-value:40%}
button{transition:background .2s,color .2s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(246,245,241,.55)}100%{box-shadow:0 0 0 22px rgba(246,245,241,0)}}
@keyframes stamp{0%{transform:rotate(-12deg) scale(2.8);opacity:0}55%{transform:rotate(-12deg) scale(.92);opacity:1}75%{transform:rotate(-12deg) scale(1.04)}100%{transform:rotate(-12deg) scale(1);opacity:1}}
@keyframes thud{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,5px)}50%{transform:translate(-2px,-1px)}75%{transform:translate(1px,2px)}}
@keyframes flip{from{transform:perspective(700px) rotateY(95deg);opacity:0}to{transform:perspective(700px) rotateY(0);opacity:1}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes spinIn{from{transform:rotate(-220deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes irisOpen{from{clip-path:circle(150% at 40% min(50%,520px))}to{clip-path:circle(0% at 40% min(50%,520px));visibility:hidden}}
@keyframes irisClose{from{clip-path:circle(0% at var(--ox,50%) var(--oy,50%));visibility:visible}to{clip-path:circle(150% at var(--ox,50%) var(--oy,50%));visibility:visible}}
@keyframes rip{from{transform:scale(1);opacity:.9}to{transform:scale(26);opacity:0}}

/* uvodni iris */
#u-iris{position:fixed;inset:0;z-index:100;background:#0a0a0a;color:#f6f5f1;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:circle(150% at 40% min(50%,520px));animation:irisOpen 1.5s cubic-bezier(.7,0,.2,1) 1.05s forwards}
#u-iris b{display:block;width:84px;height:84px;border:2px solid #f6f5f1;border-radius:50%;background:linear-gradient(90deg,#f6f5f1 40%,transparent 40%);animation:spinIn 1s cubic-bezier(.2,.7,.2,1) both}
#u-iris span{margin-top:18px;font-family:'Special Elite','Courier New',monospace;font-size:22px;letter-spacing:.2em;animation:fadeUp .8s .3s both}
#u-iris.out{visibility:visible;animation:irisClose .8s cubic-bezier(.7,0,.2,1) forwards}

/* hero: ulaz posle irisa */
.hi{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.h1a{animation-delay:2s}.h2a{animation-delay:2.15s}.h5a{animation-delay:2.2s}.h3a{animation-delay:2.4s}.h4a{animation-delay:2.55s}

/* otkrivanje na scroll */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity 1s ease var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .rvc{clip-path:inset(-.1em 100% -.25em -.1em)}
.js .rvc.in{clip-path:inset(-.1em -.1em -.25em -.1em);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) var(--d,0ms)}
.js .ws .w{opacity:.16;transition:opacity .3s}

/* crne sekcije: krug se siri iz tacke 40% */
.js .dk{position:relative;overflow:hidden;background:#f6f5f1!important;color:#0a0a0a!important;transition:color .5s ease .55s}
.js .dk::before{content:"";position:absolute;inset:0;background:#0a0a0a;clip-path:circle(0% at 40% 0%);transition:clip-path 1.8s cubic-bezier(.7,0,.2,1);z-index:0}
.js .dk>*{position:relative;z-index:1}
.js .dk.on{color:#f6f5f1!important}
.js .dk.on::before{clip-path:circle(165% at 40% 0%)}
.seam{height:14px;border-top:2px solid #0a0a0a;background:#f6f5f1;overflow:hidden}
.seam i{display:block;height:100%;width:100%;background:#0a0a0a}
.js .seam i{transform:scaleX(.4);transform-origin:left center;transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.js .seam.in i{transform:scaleX(1)}

/* trake sa recima */
.mq{overflow:hidden;white-space:nowrap;border-bottom:2px solid #0a0a0a;padding:14px 0;font-family:'Special Elite','Courier New',monospace;font-size:clamp(34px,6vw,84px);line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
.mq-in{display:inline-block;animation:mq 46s linear infinite}
.mq-in span{display:inline-block;padding:0 .35em}
.mq.out-l{color:transparent;-webkit-text-stroke:1.5px #0a0a0a}

/* intermezzo: kucanje vezano za scroll */
.inter{position:relative}
.inter .tx{white-space:pre-wrap}

/* navigacija po poglavljima + traka */
#u-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;mix-blend-mode:difference;display:flex;flex-direction:column;gap:14px;color:#fff}
#u-nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
#u-nav a span{opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s}
#u-nav a:hover span,#u-nav a.act span{opacity:1;transform:none}
#u-nav a i{display:block;width:14px;height:14px;border:2px solid #fff;border-radius:50%;transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s}
#u-nav a.act i{transform:scale(1.6);background:linear-gradient(90deg,#fff 40%,transparent 40%)}
#u-bar{position:fixed;top:0;left:0;height:3px;width:var(--w,0%);background:#fff;mix-blend-mode:difference;z-index:70}
@media (max-width:900px){#u-nav{display:none}}

/* kursor i klik */
#u-cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
#u-cur.vis{opacity:1}
#u-cur i{display:block;width:28px;height:28px;margin:-14px 0 0 -14px;border:2px solid #fff;border-radius:50%;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s}
#u-cur.big i{transform:scale(2.4);background:#fff}
@media (hover:none){#u-cur{display:none}}
.u-rip{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;z-index:90;animation:rip 1.1s cubic-bezier(.2,.7,.2,1) forwards}

/* dva ulaza */
.doors .door{transition:flex-grow .7s cubic-bezier(.7,0,.2,1)}
.doors:hover .door{flex-grow:3!important}
.doors:hover .door:hover{flex-grow:8!important}
.door>div:last-child{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.door:hover>div:last-child{transform:translateX(10px)}

/* dugmad: magnet + podizanje + pritisak */
.btn-dark,.btn-light,.btn-paper,.btn-ghost{transition:background .25s,color .25s,transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .25s;transform:translate(var(--mx,0px),var(--my,0px))}
.btn-dark:hover,.btn-light:hover{transform:translate(calc(var(--mx,0px) - 3px),calc(var(--my,0px) - 3px));box-shadow:5px 5px 0 #0a0a0a}
.btn-paper:hover,.btn-ghost:hover{transform:translate(calc(var(--mx,0px) - 3px),calc(var(--my,0px) - 3px));box-shadow:5px 5px 0 #f6f5f1}
.btn-dark:active,.btn-light:active,.btn-paper:active,.btn-ghost:active{transform:translate(0,0) scale(.96);box-shadow:none}

/* redovi */
.row{transition:background .3s,color .3s}
.row:hover{background:#0a0a0a;color:#f6f5f1}
.row>*{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.row:hover>*{transform:translateX(10px)}

/* radovi */
.pw{position:relative}
.pw .pimg{scale:1.08;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.js .pw .pimg{filter:grayscale(1)}
.pw:hover .pimg{transform:scale(1.05);filter:none}
@media (hover:none){.js .pw .pimg{filter:none}}

.play{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.play:hover{transform:scale(1.1);animation:ring 1.2s ease-out infinite}
.tile{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.tile:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 #0a0a0a}
.seal{width:64px;height:64px;border:2px solid #f6f5f1;border-radius:50%;background:linear-gradient(90deg,#f6f5f1 var(--p),transparent var(--p));transition:--p 1.4s cubic-bezier(.7,0,.2,1) .6s}
.seal.on{--p:100%}
.nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
.nav a:hover{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#u-iris{display:none!important}}


html{scroll-behavior:auto}
/* pecat i listic */
#slip.thud{animation:thud .45s .3s both}
#stamp{position:absolute;left:50%;top:44%;margin-left:-135px;width:270px;box-sizing:border-box;text-align:center;border:4px double #f6f5f1;color:#f6f5f1;font-family:'Special Elite','Courier New',monospace;font-size:34px;letter-spacing:.1em;padding:12px 8px;pointer-events:none;background:rgba(10,10,10,.86);opacity:0;transform:rotate(-12deg)}
#stamp.on{animation:stamp .65s cubic-bezier(.2,.9,.3,1.2) both}
/* pismo */
.lf{transition:opacity .7s ease,transform .9s cubic-bezier(.7,0,.2,1)}
.lt{display:flex;flex-direction:column;justify-content:center;transition:opacity .8s ease .6s,transform .8s ease .6s;opacity:0;transform:translateY(24px);pointer-events:none}
#letter.sent .lf{opacity:0;transform:translateY(-60px) rotate(-3deg);pointer-events:none}
#letter.sent .lt{opacity:1;transform:none;pointer-events:auto}
#letter.sent .seal{--p:100%}

/* ===== MOBILNI MENI: krug 40/60 otvara dusu ===== */
@property --q{syntax:'<percentage>';inherits:true;initial-value:40%}
@keyframes btnOpen{0%{--q:40%;rotate:0deg}55%{--q:100%}100%{--q:60%;rotate:540deg}}
@keyframes btnClose{0%{--q:60%;rotate:540deg}45%{--q:100%}100%{--q:40%;rotate:0deg}}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.m-btn,.m-menu{display:none}
@media (max-width:900px){
  .nav{display:none!important}
  .m-btn{display:flex;position:fixed;top:16px;right:14px;z-index:85;align-items:center;gap:10px;background:transparent;border:0;padding:6px;cursor:pointer;color:#fff;mix-blend-mode:difference;-webkit-tap-highlight-color:transparent}
  .m-lab{font-family:'Courier Prime','Courier New',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
  .m-circle{display:block;width:46px;height:46px;border:2px solid #fff;border-radius:50%;background:linear-gradient(90deg,#fff var(--q),transparent var(--q));--q:40%}
  .menu-open .m-circle{animation:btnOpen .95s cubic-bezier(.7,0,.2,1) forwards}
  .menu-closing .m-circle{animation:btnClose .95s cubic-bezier(.7,0,.2,1) forwards}
  .m-btn:active .m-circle{scale:.9}
  .m-circle{transition:scale .2s}

  .m-menu{display:block;position:fixed;inset:0;z-index:80;background:#0a0a0a;color:#f6f5f1;overflow:hidden;visibility:hidden;
    clip-path:circle(0px at var(--bx,calc(100% - 40px)) var(--by,40px));
    transition:clip-path 1s cubic-bezier(.7,0,.2,1),visibility 0s linear 1s}
  .menu-open .m-menu{visibility:visible;clip-path:circle(150vmax at var(--bx,calc(100% - 40px)) var(--by,40px));
    transition:clip-path 1.15s cubic-bezier(.7,0,.2,1),visibility 0s}
  .m-in{position:relative;z-index:2;height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:92px 26px 28px;overflow-y:auto}
  .m-eye{margin:0 0 20px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s}
  .menu-open .m-eye{opacity:1;transform:none;transition:opacity .8s .45s,transform .8s .45s}
  .m-menu nav{display:flex;flex-direction:column}
  .m-menu nav a{display:flex;align-items:center;gap:16px;min-height:62px;padding:12px 0;border-top:1px solid rgba(246,245,241,.3);color:#f6f5f1;opacity:0;transform:translateY(36px);transition:opacity .3s,transform .3s}
  .m-menu nav a:last-child{border-bottom:1px solid rgba(246,245,241,.3)}
  .menu-open .m-menu nav a{opacity:1;transform:none;transition:opacity .8s calc(.5s + var(--i)*.09s),transform .9s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i)*.09s)}
  .m-menu .mc{flex:0 0 24px;height:24px;border:1.5px solid #f6f5f1;border-radius:50%;background:linear-gradient(90deg,#f6f5f1 calc(40% + var(--i)*12%),transparent calc(40% + var(--i)*12%))}
  .m-menu .mt{font-family:'Special Elite','Courier New',monospace;font-size:clamp(26px,8vw,38px);line-height:1.1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .m-menu .mt small{display:block;margin-top:5px;font-family:'Courier Prime','Courier New',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.65}
  .m-menu .mn{margin-left:auto;font-size:13px;opacity:.6;text-align:right}
  .m-menu nav a.here .mn::before{content:"ovde si \00b7  "}
  .m-menu nav a:active .mt,.m-menu nav a:focus-visible .mt{transform:translateX(10px)}
  .m-menu nav a.pick .mt{transform:translateX(18px)}
  .m-tag{margin:auto 0 0;padding-top:28px;font-family:'Special Elite','Courier New',monospace;font-size:20px;line-height:1.25;max-width:16em;opacity:0;transition:opacity .3s}
  .menu-open .m-tag{opacity:1;transition:opacity 1s 1.1s}
  .m-foot{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
  .m-orb{position:absolute;left:50%;bottom:-30vmin;width:100vmin;height:100vmin;margin-left:-50vmin;z-index:1;pointer-events:none;opacity:0;rotate:0deg;--q:40%;
    transition:--q 1.2s cubic-bezier(.7,0,.2,1),rotate 1.6s cubic-bezier(.7,0,.2,1),opacity .6s ease}
  .menu-open .m-orb{opacity:.17;transition:--q 1.2s cubic-bezier(.7,0,.2,1),rotate 1.6s cubic-bezier(.7,0,.2,1),opacity 1.4s ease .3s}
  .m-orb i{display:block;width:100%;height:100%;border:2px solid #f6f5f1;border-radius:50%;background:linear-gradient(90deg,#f6f5f1 var(--q),transparent var(--q));animation:orbSpin 70s linear infinite}
}
@media (min-width:901px){.m-btn,.m-menu{display:none!important}}