/* Rifat Mujanović – Atelje | Boje: 01 Ponoćni bakar | Fontovi: 04 Instrument Serif + Figtree
   Animacije: potpis loader (S1) + A1 liquid glass, G1, G4, G5, G6, N2, A3, A2, B4/B1, S1, S2 */
:root{
  --bg:#0e0d0c; --surface:#1a1816; --surface-2:#221f1c; --fg:#f2ece4; --muted:#a89f94; --line:#2c2925;
  --accent:#d9773a; --on-accent:#140c06; --c1:#b8572a; --c2:#3b5b6b; --c3:#c9a46a;
  --serif:"Instrument Serif","IS Fallback", Georgia, serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --dur-1:180ms; --dur-2:420ms; --dur-3:900ms;
  --wrap:min(1180px, 100% - 32px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--sans); overflow-x:clip}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--serif); font-weight:400; line-height:1.05; letter-spacing:-.01em; margin:0}
h2{font-size:clamp(34px,5vw,58px)}
h2 em, h1 em{font-style:italic; color:var(--c3)}
p{margin:0}
.wrap{width:var(--wrap); margin-inline:auto}
.eyebrow{font:600 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--c3)}
.muted{color:var(--muted)}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--accent); color:var(--on-accent); padding:10px 14px; border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--c3); outline-offset:3px}

/* Traka primjera */


/* ---------- Loader: potpis se iscrta ---------- */
.loader{display:none}
.js .loader{display:grid; place-items:center; position:fixed; inset:0; z-index:90; background:var(--bg); transition:opacity .6s var(--ease-out), visibility .6s}
.js .loader.is-done{opacity:0; visibility:hidden}
.loader svg{width:min(560px,86vw); height:auto; overflow:visible}
.loader .sig{font:400 italic 92px var(--serif); fill:transparent; stroke:var(--fg); stroke-width:1.1; stroke-dasharray:900; stroke-dashoffset:900;
  animation:sig-draw 1.5s var(--ease-in-out) forwards, sig-fill .5s 1.25s forwards}
.loader .brush{fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:sig-draw .7s 1.1s var(--ease-out) forwards}
.loader .sub{font:600 13px var(--sans); letter-spacing:.32em; fill:var(--muted); opacity:0; animation:sig-fill .5s 1.4s forwards}
@keyframes sig-draw{to{stroke-dashoffset:0}}
@keyframes sig-fill{to{fill:var(--fg); opacity:1}}
.loader .sub{animation-name:fade-in}
@keyframes fade-in{to{opacity:1}}

/* ---------- Liquid glass (A1) ---------- */
.glass{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg,hsl(0 0% 100%/.22),hsl(0 0% 100%/.05)), hsl(30 20% 10%/.18);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  border:1px solid hsl(0 0% 100%/.2);
  box-shadow:inset 0 1px 0 hsl(0 0% 100%/.5), inset 0 -1px 0 hsl(0 0% 100%/.08), 0 10px 30px -10px hsl(20 40% 4%/.6);
  color:#fff; transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,hsl(0 0% 100%/.85),transparent 35% 65%,hsl(0 0% 100%/.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.glass::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity var(--dur-2);
  background:radial-gradient(120px circle at var(--x,50%) var(--y,50%),hsl(0 0% 100%/.35),transparent 70%)}
@media (hover:hover){.glass:hover::after{opacity:1}}
.glass:active{transform:scale(.97)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:hsl(25 18% 14%/.94)}}
.pill{white-space:nowrap; border-radius:999px; padding:.85em 1.5em; min-height:48px; display:inline-flex; gap:.6em; align-items:center; justify-content:center; text-decoration:none; font-weight:600; cursor:pointer}
.btn-accent{background:var(--accent); color:var(--on-accent); border:0; box-shadow:0 12px 30px -12px hsl(22 70% 45%/.8)}
.btn-accent .arr{transition:transform var(--dur-2) var(--spring)}
@media (hover:hover){.btn-accent:hover .arr{transform:translateX(4px)}}
.btn-accent:active{transform:scale(.97)}
[data-magnetic]{transition:transform var(--dur-2) var(--spring)}

/* ---------- Header ---------- */
.hdr{position:fixed; top:var(--hdr-top,16px); left:0; right:0; z-index:50; transition:top .3s var(--ease-out)}
.hdr.is-scrolled{--hdr-top:10px}
.hdr .bar{width:var(--wrap); margin:auto; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 20px; border-radius:999px; border:1px solid transparent; transition:background .4s, padding .4s}
.hdr.is-scrolled .bar{background:linear-gradient(135deg,hsl(0 0% 100%/.16),hsl(0 0% 100%/.04)),hsl(25 20% 8%/.45); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); border-color:hsl(0 0% 100%/.16); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.35),0 12px 30px -14px #000; padding-block:6px}
.logo{display:flex; flex-direction:column; text-decoration:none; line-height:1; margin-right:auto}
.logo b{font:400 italic 28px/1 var(--serif); letter-spacing:-.01em}
.logo small{font:600 9.5px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--c3); margin-top:5px}
.nav{display:flex; gap:22px}
.nav a{text-decoration:none; font-size:15px; background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .35s var(--ease-out); padding-block:4px}
.nav a:hover,.nav a:focus-visible{background-size:100% 1.5px}
.hdr .cta{padding:.6em 1.15em; min-height:44px; font-size:15px}
@media (max-width:860px){.nav{display:none}}
@media (max-width:420px){.hdr .cta{display:none}}

/* Jezik (G1 mini) */
.seg{--n:2; --k:0; position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:4px; border-radius:999px}
.seg button{position:relative; z-index:1; border:0; background:none; padding:.45em .85em; min-height:36px; min-width:44px; font-weight:600; font-size:13px; letter-spacing:.06em; cursor:pointer; border-radius:999px; color:hsl(0 0% 100%/.75); transition:color .3s}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{color:var(--on-accent)}
.seg .lens{position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/var(--n)); border-radius:999px; background:var(--c3); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.6),0 6px 16px -6px #000; transform:translateX(calc(var(--k)*100%)); transition:transform 560ms var(--spring)}
.seg.is-moving .lens{animation:stretch 560ms var(--ease-out)}
@keyframes stretch{40%{scale:1.16 .9}}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:end; overflow:clip; isolation:isolate}
.hero__img{position:absolute; inset:0; z-index:-2}
.hero__img img{width:100%; height:100%; object-fit:cover; animation:slowzoom 14s var(--ease-out) both}
@keyframes slowzoom{from{transform:scale(1.12)}}
.hero__shade{position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,hsl(20 30% 4%/.55) 0%,transparent 28%,transparent 40%,hsl(20 30% 4%/.6) 72%,var(--bg) 100%),linear-gradient(90deg,hsl(20 30% 4%/.5),transparent 60%)}
/* G4 progresivni blur */
.pblur{position:absolute; inset:auto 0 0; height:52%; z-index:-1; pointer-events:none}
.pblur i{position:absolute; inset:0}
.pblur i:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-mask:linear-gradient(to bottom,transparent 0%,#000 25%);mask:linear-gradient(to bottom,transparent 0%,#000 25%)}
.pblur i:nth-child(2){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);-webkit-mask:linear-gradient(to bottom,transparent 20%,#000 45%);mask:linear-gradient(to bottom,transparent 20%,#000 45%)}
.pblur i:nth-child(3){-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);-webkit-mask:linear-gradient(to bottom,transparent 40%,#000 65%);mask:linear-gradient(to bottom,transparent 40%,#000 65%)}
.pblur i:nth-child(4){-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask:linear-gradient(to bottom,transparent 60%,#000 85%);mask:linear-gradient(to bottom,transparent 60%,#000 85%)}
.pblur i:nth-child(5){-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);-webkit-mask:linear-gradient(to bottom,transparent 78%,#000 100%);mask:linear-gradient(to bottom,transparent 78%,#000 100%)}
.hero__in{width:var(--wrap); margin:auto; padding:140px 0 clamp(48px,9vh,96px); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end}
.hero h1{font-size:clamp(46px,8.2vw,112px); line-height:1.02; max-width:12ch}
.hero p.lead{margin-top:18px; max-width:46ch; font-size:clamp(17px,1.6vw,20px); color:#efe7dc; text-shadow:0 1px 16px #000}
.hero .eyebrow{color:#f0d9b5}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero .credit{position:absolute; right:16px; top:calc(100% - 34px); font-size:12px; color:hsl(0 0% 100%/.7)}


/* A3 tekst kroz masku */
.split .w{display:inline-block; overflow:clip; padding-block:.12em; margin-block:-.12em; vertical-align:top}
.js .split .w>span{display:inline-block; transform:translateY(110%); transition:transform var(--dur-3) var(--ease-out); transition-delay:calc(var(--i)*70ms + 150ms)}
.js .split.is-in .w>span{transform:none}

/* N2 bedž */
.badge{position:relative; width:150px; height:150px; display:grid; place-items:center; text-decoration:none; border-radius:50%}
.badge svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 16s linear infinite}
.badge:hover svg{animation-duration:6s}
.badge text{font:600 12.5px var(--sans); letter-spacing:.2em; fill:#fff; text-transform:uppercase}
.badge .dot{width:62px; height:62px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:24px; transition:transform var(--dur-2) var(--spring)}
.badge:hover .dot{transform:rotate(-45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.hero__in{grid-template-columns:1fr}.badge{display:none}.hero__shade{background:linear-gradient(180deg,hsl(20 30% 4%/.55) 0%,hsl(20 30% 4%/.25) 25%,hsl(20 30% 4%/.55) 50%,hsl(20 30% 4%/.8) 80%,var(--bg) 100%)}}

/* ---------- Sekcije ---------- */
section{padding:clamp(72px,11vw,140px) 0}
.head{display:flex; flex-wrap:wrap; gap:18px 40px; align-items:end; justify-content:space-between; margin-bottom:36px}
.head p{max-width:44ch}

/* Galerija */
.filters-wrap{position:sticky; top:84px; z-index:20; display:flex; justify-content:center; margin:0 auto 34px; width:fit-content; max-width:100%}
.filters-wrap::before{content:""; position:absolute; inset:-10px -30px; z-index:-1; border-radius:999px; filter:blur(22px); opacity:.85;
  background:radial-gradient(40% 90% at 15% 50%,var(--c1),transparent 70%),radial-gradient(40% 90% at 55% 50%,var(--c2),transparent 70%),radial-gradient(35% 90% at 90% 50%,var(--c3),transparent 70%)}
.filters{--n:5; overflow-x:auto; max-width:calc(100vw - 32px); scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{white-space:nowrap; font-size:14px; padding:.55em 1.1em; color:#fff}
.grid{columns:4 240px; column-gap:16px}
.work{break-inside:avoid; margin:0 0 16px; position:relative; border-radius:14px; overflow:hidden; background:var(--surface); cursor:zoom-in}
.work button{all:unset; display:block; width:100%; cursor:zoom-in; border-radius:14px}
.work button:focus-visible{outline:2px solid var(--c3); outline-offset:3px}
.work img{width:100%; transition:transform 1.2s var(--ease-out), filter .6s}
.work figcaption{position:absolute; left:10px; right:10px; bottom:10px; padding:.5em .9em; border-radius:999px; font-size:14px; display:flex; justify-content:space-between; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .45s var(--ease-out)}
.work figcaption span:last-child{color:hsl(0 0% 100%/.7); font-size:12.5px}
@media (hover:hover) and (pointer:fine){.work:hover img{transform:scale(1.04)}.work:hover figcaption,.work:focus-within figcaption{opacity:1; transform:none}}
@media (hover:none){.work figcaption{opacity:1; transform:none}}
.work[hidden]{display:none}
@media (max-width:540px){.filters{display:flex; flex-wrap:wrap; justify-content:center; border-radius:24px; overflow:visible; gap:2px}.filters .lens{display:none}.filters button{padding:.5em .8em; font-size:13.5px}.filters button[aria-selected="true"]{background:var(--c3); color:var(--on-accent)}.filters-wrap{position:relative; top:auto}}
@supports (animation-timeline: view()){
  .work{animation:unveil linear both; animation-timeline:view(); animation-range:entry 0% cover 30%}
}
@keyframes unveil{from{clip-path:inset(10% 6% 10% 6% round 24px); opacity:.2}}
.grid.is-switching .work{animation:pop .55s var(--ease-out) both; animation-delay:calc(var(--d,0)*30ms)}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.98)}}

/* Reveal (B1) */
@keyframes rise{from{opacity:0; transform:translateY(40px)}}
@supports (animation-timeline: view()){.reveal{animation:rise linear both; animation-timeline:view(); animation-range:entry 5% cover 30%}}
@supports not (animation-timeline: view()){
  .js .reveal{opacity:0; transform:translateY(40px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
  .js .reveal.is-in{opacity:1; transform:none}}

/* Kako naručiti – S1 linija */
.steps{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; view-timeline-name:--tl}
.steps .line{position:absolute; left:0; right:0; top:34px; width:100%; height:40px; pointer-events:none; overflow:visible}
.steps .draw{fill:none; stroke:var(--c3); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:0}
@supports (animation-timeline: view()){.steps .draw{stroke-dashoffset:1; animation:draw linear both; animation-timeline:--tl; animation-range:cover 10% cover 55%}}
@keyframes draw{to{stroke-dashoffset:0}}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px 24px 26px}
.step .num{width:68px; height:68px; border-radius:50%; display:grid; place-items:center; font:400 italic 34px/1 var(--serif); background:var(--bg); border:1px solid var(--c3); color:var(--c3); margin-bottom:18px; position:relative}
.step h3{font-size:30px; margin-bottom:8px}
@media (max-width:820px){.steps{grid-template-columns:1fr}.steps .line{display:none}}
.note{margin-top:26px; color:var(--muted); font-size:15px; text-align:center}

/* O umjetniku */
.about{display:grid; grid-template-columns:5fr 6fr; gap:clamp(28px,6vw,80px); align-items:center}
.about__img{position:relative; border-radius:26px; overflow:hidden; aspect-ratio:3/4}
.about__img img{width:100%; height:100%; object-fit:cover}
@supports (animation-timeline: view()){.about__img img{animation:par linear both; animation-timeline:view(); scale:1.15}}
@keyframes par{from{translate:0 -6%}to{translate:0 6%}}
.about__img .tag{position:absolute; left:14px; bottom:14px; font-size:13px; padding:.55em 1em}
.read{font:400 clamp(26px,3.3vw,40px)/1.2 var(--serif); view-timeline-name:--read}
.read span{opacity:1}
@supports (animation-timeline: view()){.read span{opacity:.18; animation:lit linear both; animation-timeline:--read; animation-range:cover calc(20% + var(--i)*var(--step)) cover calc(24% + var(--i)*var(--step))}}
@keyframes lit{to{opacity:1}}
.facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.facts li{list-style:none; padding:.5em 1em; border:1px solid var(--line); border-radius:999px; font-size:15px; color:#dcd3c7}
.facts{padding:0}
@media (max-width:820px){.about{grid-template-columns:1fr}.about__img{max-width:460px}}

/* Kontakt */
.contact{position:relative; overflow:clip; isolation:isolate; border-radius:32px; padding:clamp(36px,6vw,72px) clamp(20px,5vw,64px); text-align:center}
.contact__bg{position:absolute; inset:0; z-index:-1}
.contact__bg img{width:100%; height:100%; object-fit:cover; filter:saturate(1.1)}
.contact__bg::after{content:""; position:absolute; inset:0; background:hsl(20 30% 5%/.45)}
.contact h2{text-shadow:0 2px 24px #000}
.contact p.lead{max-width:46ch; margin:14px auto 0; color:#f3ece2; text-shadow:0 1px 12px #000}
.cbtns{display:grid; grid-template-columns:repeat(2,minmax(0,260px)); gap:14px; justify-content:center; margin-top:34px}
.cbtn{border-radius:20px; padding:18px 18px; min-height:72px; display:flex; align-items:center; gap:14px; text-decoration:none; text-align:left; font-weight:600; font-size:18px; border:0; cursor:pointer}
.cbtn svg{width:30px; height:30px; flex:none}
.cbtn small{display:block; font-weight:400; font-size:13px; color:hsl(0 0% 100%/.78)}
@media (max-width:560px){.cbtns{grid-template-columns:1fr}}

/* Footer */
footer{padding:44px 0 110px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:28px}
footer .logo b{font-size:24px; color:var(--fg)}

/* Mobilna traka za narudžbu */
.mbar{position:fixed; left:50%; bottom:14px; z-index:40; translate:-50% 0; display:none; gap:8px; padding:6px; border-radius:999px; transition:translate .5s var(--spring), opacity .3s}
.mbar a,.mbar button{min-height:48px; padding:.6em 1.2em; font-size:15px}
.mbar.is-hidden,.mbar.is-top{translate:-50% 140%; opacity:0}
@media (max-width:760px){.mbar{display:flex}}

/* G5 lightbox – preko cijelog ekrana, swipe prati prst */
dialog.lb{position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:hsl(20 25% 4%/.96); color:var(--fg); overflow:hidden;
  display:none; grid-template-rows:auto 1fr auto; opacity:0; transition:opacity .35s var(--ease-out), overlay .35s allow-discrete, display .35s allow-discrete}
dialog.lb[open]{display:grid; opacity:1}
@starting-style{dialog.lb[open]{opacity:0}}
dialog.lb::backdrop{background:transparent}
.lb__top{display:flex; justify-content:space-between; align-items:center; padding:max(12px,env(safe-area-inset-top)) 16px 8px; z-index:3}
.lb__count{font-size:14px; padding:.5em 1em; min-height:40px; font-variant-numeric:tabular-nums}
.lb__close{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0; font-size:18px}
.lb__stage{position:relative; overflow:hidden; touch-action:pan-y; user-select:none; -webkit-user-select:none; min-height:0}
.lb__track{position:absolute; inset:0; display:flex; transform:translate3d(calc(-100% + var(--dx,0px)),0,0); will-change:transform}
.lb__track.anim{transition:transform .42s var(--ease-out)}
.lb__slide{flex:0 0 100%; height:100%; margin:0; display:grid; place-items:center; padding:4px 16px}
.lb__slide img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:6px; box-shadow:0 30px 60px -30px #000; pointer-events:none;
  opacity:0; transition:opacity .35s}
.lb__slide img.ok{opacity:1}
.lb__nav{position:absolute; top:50%; translate:0 -50%; z-index:3; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0}
.lb__nav svg{width:24px; height:24px}
.lb__nav.prev{left:20px}.lb__nav.next{right:20px}
.lb__info{margin:8px 16px max(16px,env(safe-area-inset-bottom)); border-radius:22px; padding:14px 16px 14px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; max-width:1100px; justify-self:center; width:calc(100% - 32px); z-index:3}
.lb__txt .eyebrow{margin:0 0 4px}
.lb__txt h3{font-size:clamp(24px,3vw,32px)}
.lb__info .acts{display:flex; gap:8px; flex-wrap:wrap}
.lb__info .pill{min-height:46px; padding:.6em 1.1em; font-size:15px}
@media (max-width:760px){
  .lb__nav{display:none}
  .lb__slide{padding:0 10px}
  .lb__info{padding:12px 14px; gap:10px}
  .lb__info .acts{width:100%; display:grid; grid-template-columns:1fr auto auto}
  .lb__info .pill{padding:.6em .9em; font-size:14px}
}
@media (hover:hover){.lb__nav:hover{transform:scale(1.06)}}

/* G6 obavijest */
.toast{position:fixed; left:50%; bottom:84px; z-index:95; translate:-50% calc(100% + 140px); visibility:hidden; padding:.85em 1.4em; border-radius:999px; font-size:15px; max-width:calc(100vw - 32px); text-align:center; transition:translate .6s var(--spring)}
.toast.is-on{translate:-50% 0; visibility:visible}

.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .split .w>span,.js .reveal{transform:none !important; opacity:1 !important}
  .badge svg,.hero__img img{animation:none !important}
  .read span{opacity:1 !important; animation:none !important}
  .steps .draw{stroke-dashoffset:0 !important; animation:none !important}
  .work{animation:none !important}
  .js .loader{display:none}
}
.toast{background:hsl(25 18% 11%/.94); border-radius:20px; width:max-content; max-width:min(360px,calc(100vw - 32px)); line-height:1.4}

/* D3 veliki tekst marquee */
.marquee{overflow:clip; padding:28px 0 0; border-block:1px solid var(--line); margin-top:-1px}
.marquee-track{display:flex; width:max-content; gap:42px; animation:mq 38s linear infinite; padding-bottom:22px}
.marquee span{font:400 italic clamp(40px,6vw,84px)/1 var(--serif); white-space:nowrap; color:var(--fg)}
.marquee span.o{color:transparent; -webkit-text-stroke:1px var(--c3); font-style:normal}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* H4 kartice koje se okreću */
.flips{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.flip{all:unset; position:relative; display:block; aspect-ratio:3/4; perspective:1000px; cursor:pointer; border-radius:22px}
.flip:focus-visible{outline:2px solid var(--c3); outline-offset:4px}
.fi{position:absolute; inset:0; border-radius:22px; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:transform 900ms var(--spring); display:flex; flex-direction:column; justify-content:flex-end}
.fi.front img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fi.front::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%,hsl(20 30% 4%/.85))}
.fi.front b{position:relative; z-index:1; font:400 italic 38px/1 var(--serif); padding:20px 22px}
.fi.front b::after{content:" ↻"; font:400 16px var(--sans); color:var(--c3); vertical-align:middle}
.fi.back{transform:rotateY(180deg); background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line); padding:24px; gap:12px; justify-content:center}
.fi.back b{font:400 italic 40px/1 var(--serif); color:var(--c3)}
.fi.back span{color:#dcd3c7; font-size:16.5px; line-height:1.55}
.flip[aria-pressed="true"] .front{transform:rotateY(-180deg)}
.flip[aria-pressed="true"] .back{transform:rotateY(0)}
@media (hover:hover) and (pointer:fine){.flip:hover .front{transform:rotateY(-180deg)}.flip:hover .back{transform:rotateY(0)}}
@media (max-width:900px){.flips{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.flips{grid-template-columns:1fr}.flip{aspect-ratio:4/4.4}}

/* B7 prije/poslije */
.cmpwrap{display:grid; grid-template-columns:1fr minmax(0,440px); gap:clamp(28px,6vw,80px); align-items:center}
.cmp{position:relative; display:grid; border-radius:26px; overflow:hidden; aspect-ratio:3/4; touch-action:pan-y}
.cmp img{grid-area:1/1; width:100%; height:100%; object-fit:cover}
.cmp img.top{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.cmp::after{content:""; position:absolute; top:0; bottom:0; left:var(--p); width:2px; translate:-1px 0; background:#fff; box-shadow:0 0 12px #000; pointer-events:none}
.cmp .handle{position:absolute; top:50%; left:var(--p); translate:-50% -50%; z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:18px; pointer-events:none; color:#fff}
.cmp input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3}
.cmp:has(input:focus-visible) .handle{outline:2px solid #fff; outline-offset:3px}
.cmp .lbl{position:absolute; top:14px; z-index:2; font-size:13px; padding:.4em .9em; border-radius:999px; pointer-events:none}
.cmp .lbl.l{left:14px}.cmp .lbl.r{right:14px}
@media (max-width:820px){.cmpwrap{grid-template-columns:1fr}.cmp{max-width:440px}}

/* Ideje za poklon */
.gifts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.gifts li{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 20px; display:flex; flex-direction:column; gap:8px; transition:transform .5s var(--spring), border-color .3s}
.gifts .gi{font-size:30px; line-height:1}
.gifts b{font:400 26px/1.1 var(--serif)}
.gifts .muted{font-size:15px}
@media (hover:hover) and (pointer:fine){.gifts li:hover{transform:translateY(-6px); border-color:var(--c3)}}
@media (max-width:1000px){.gifts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gifts{grid-template-columns:1fr}}

/* E2 FAQ */
:root{interpolate-size:allow-keywords}
.faqwrap{display:grid; grid-template-columns:1fr 1.6fr; gap:clamp(24px,5vw,70px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:22px 0; font:400 clamp(22px,2.4vw,28px)/1.2 var(--serif); min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal; font:300 28px/1 var(--sans); color:var(--c3); transition:transform .5s var(--spring)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details::details-content{block-size:0; overflow:clip; transition:block-size .5s var(--ease-out), content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq details p{padding:0 0 22px; max-width:60ch}
@media (max-width:820px){.faqwrap{grid-template-columns:1fr}}

/* O umjetniku – dvije slike */
.about__pics{position:relative; padding:0 0 70px 0}
.about__pics .about__img{aspect-ratio:1/1}
.about__pics .about__img img{object-position:40% 30%}
.about__img2{position:absolute; right:-18px; bottom:0; width:46%; aspect-ratio:1/1; border-radius:22px; overflow:hidden; border:4px solid var(--bg); box-shadow:0 20px 40px -18px #000; rotate:3deg}
.about__img2 img{width:100%; height:100%; object-fit:cover}
@media (max-width:820px){.about__img2{right:0}}

@media (prefers-reduced-motion: reduce){.marquee-track{animation:none !important}}

/* Bez bočnog pomjeranja na telefonu */
html{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media (max-width:820px){.about__img2{right:10px; width:44%}.about__pics{padding-right:0}}
@media (max-width:760px){.filters-wrap::before{inset:-10px 0}}

/* Lightbox: Viber i Messenger s ikonom; na telefonu samo ikona */
.lb__info .ic svg{width:20px; height:20px; flex:none}
.cbtn svg{overflow:visible}
@media (max-width:760px){
  .lb__info .acts{grid-template-columns:1fr 48px 48px; align-items:center}
  .lb__info .ic{width:48px; height:48px; min-height:48px; padding:0; border-radius:50%}
  .lb__info .ic .t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .lb__info .ic svg{width:22px; height:22px}
  .lb__info .btn-accent{min-width:0}
}

/* ===== Izložba: zid galerije ===== */
.expo{padding-bottom:0}
.expo__head{display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:space-between; align-items:end; margin-bottom:28px}
.expo__head p{max-width:44ch}
.expo__track{position:relative}
.expo__pin{position:relative}
.expo__room{--rh:min(76svh,760px); position:relative; height:var(--rh); overflow:hidden; isolation:isolate;
  background:#2a2622 url(img/expo-wall.webp) 0 0/auto 100% repeat-x}
.expo__room::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,transparent 7%,transparent 93%,var(--bg) 100%),
             linear-gradient(180deg,hsl(20 25% 4%/.55) 0%,transparent 22%,transparent 70%,hsl(20 25% 4%/.35) 100%)}
.expo__wall{position:relative; z-index:1; height:100%; display:flex; width:max-content; padding:0 18vw;
  background:inherit; background-color:transparent; will-change:transform}
.spot{position:relative; flex:none; height:80%; width:calc(var(--rh)*var(--s)*var(--ar) + 22vw); min-width:calc(var(--rh)*.42);
  display:grid; place-items:center; padding-bottom:4%}
/* svjetlo reflektora na zidu i podu */
.spot::before{content:""; position:absolute; left:50%; top:-12%; width:calc(var(--rh)*var(--s)*var(--ar)*1.9 + 140px); height:115%; translate:-50% 0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 50% 46% at 50% 47%, hsl(38 70% 86%/.38), hsl(38 60% 75%/.14) 45%, transparent 72%),
             radial-gradient(ellipse 22% 30% at 50% 0%, hsl(40 80% 90%/.22), transparent 70%);
  mix-blend-mode:screen; filter:blur(2px); transition:opacity .6s}
.spot::after{content:""; position:absolute; left:50%; bottom:-21%; width:calc(var(--rh)*var(--s)*var(--ar)*1.6 + 80px); height:20%; translate:-50% 0; pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 50% 30%, hsl(36 60% 80%/.16), transparent 70%); mix-blend-mode:screen}
.art{all:unset; position:relative; display:block; cursor:zoom-in; height:calc(var(--rh)*var(--s)); aspect-ratio:auto;
  transition:transform .9s var(--ease-out), filter .9s; transform-origin:50% 0}
.art:focus-visible{outline:2px solid var(--c3); outline-offset:8px}
.fr{position:relative; display:block; height:100%; --fw:clamp(8px,1.4vh,16px); padding:var(--fw);
  box-shadow:0 34px 46px -22px hsl(20 40% 3%/.85), 0 10px 18px -6px hsl(20 40% 3%/.55), 18px 26px 40px -24px hsl(20 40% 3%/.6)}
.fr::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 1px 1px 0 hsl(40 60% 92%/.35), inset -2px -2px 3px hsl(20 40% 3%/.6), inset 0 0 0 1px hsl(20 40% 3%/.5)}
.mat{display:block; height:100%; box-shadow:inset 0 0 0 1px hsl(20 40% 3%/.6), inset 3px 4px 8px hsl(20 40% 3%/.45)}
.mat img{display:block; height:100%; width:auto; max-width:none}
/* staklo: blagi odsjaj koji se pomjera */
.fr::after{content:""; position:absolute; inset:var(--fw); z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, hsl(0 0% 100%/.07) 42%, hsl(0 0% 100%/.02) 52%, transparent 60%) 0 0/250% 100%;
  background-position:var(--gl,80%) 0; transition:background-position 1.2s var(--ease-out)}
.fr-black .fr{background:linear-gradient(145deg,#3a3734,#121110 45%,#1e1c1a 70%,#0b0a09)}
.fr-black .mat{background:#efe9df; padding:calc(var(--fw)*2.6)}
.fr-black .mat img{box-shadow:0 0 0 1px hsl(20 20% 30%/.25)}
.fr-walnut .fr{background:linear-gradient(135deg,hsl(30 60% 80%/.18),transparent 35%,hsl(20 40% 3%/.35)), url(img/frame-walnut.webp) 0 0/256px}
.fr-gold .fr{--fw:clamp(12px,2vh,22px); background:linear-gradient(135deg,hsl(45 90% 90%/.45),transparent 30%,transparent 60%,hsl(20 50% 8%/.45)), url(img/frame-gold.webp) 0 0/256px}
.fr-gold .fr::before{box-shadow:inset 2px 2px 0 hsl(45 90% 92%/.55), inset -3px -3px 4px hsl(25 60% 10%/.6), inset 0 0 0 calc(var(--fw) - 4px) hsl(40 60% 40%/.0), inset 0 0 0 calc(var(--fw) - 3px) hsl(30 50% 15%/.0)}
.fr-gold .mat{box-shadow:0 0 0 3px hsl(38 55% 35%), inset 2px 3px 6px hsl(20 40% 3%/.5)}
@media (hover:hover) and (pointer:fine){
  .art:hover{transform:translateY(-6px) scale(1.015)}
  .art:hover .fr{--gl:10%}
}
.plate{position:absolute; left:calc(50% + var(--rh)*var(--s)*var(--ar)/2 + 26px); bottom:calc(50% - var(--rh)*var(--s)/2 + 2%); max-width:150px;
  background:#ece6db; color:#2a2420; padding:9px 11px 8px; font-size:11.5px; line-height:1.35; box-shadow:2px 3px 6px hsl(20 40% 3%/.45); display:flex; flex-direction:column; gap:1px}
.plate b{font:400 italic 15px/1.1 var(--serif)}
.plate span{color:#5a5048}
.plate i{font-style:normal; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7a6e63; margin-top:3px}
.expo__ui{display:flex; align-items:center; gap:18px; padding:18px 0 0}
.expo__bar{flex:1; height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:2px}
.expo__bar i{position:absolute; inset:0; background:var(--c3); transform-origin:0 50%; transform:scaleX(var(--p,0))}
.expo__hint{font-size:13px; color:var(--muted); letter-spacing:.06em}

/* Računar: skrol vodi kroz izložbu (pin) */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .js .expo__track{height:var(--trackH,300vh)}
  .js .expo__pin{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center}
  .js .expo__room{--rh:min(78vh,800px)}
}
/* Telefon i tablet: prirodno prevlačenje sa snapom */
@media not ((min-width:900px) and (hover:hover) and (pointer:fine)){
  .expo__room{--rh:min(68svh,560px); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; background:none}
  .expo__room::-webkit-scrollbar{display:none}
  .expo__room::before{position:sticky; display:none}
  .expo__wall{background:#2a2622 url(img/expo-wall.webp) 0 0/auto 100% repeat-x; padding:0 6vw}
  .spot{scroll-snap-align:center; width:max(86vw, calc(var(--rh)*var(--s)*var(--ar) + 30px))}
  .plate{left:50%; translate:-50% 0; bottom:-6%; text-align:center; max-width:220px; align-items:center}
  .spot{padding-bottom:12%}
}
@media (prefers-reduced-motion: reduce){ .js .expo__track{height:auto} .js .expo__pin{position:relative; height:auto} }

/* Prelaz kad se klikne logo – zavjesa s monogramom */
.veil{position:fixed; inset:0; z-index:200; pointer-events:none; display:grid; place-items:center; background:var(--bg);
  clip-path:inset(100% 0 0 0); visibility:hidden}
.veil.in{visibility:visible; animation:veil-in .55s var(--ease-in-out) forwards}
.veil.out{visibility:visible; clip-path:inset(0 0 0 0); animation:veil-out .7s var(--ease-in-out) forwards}
@keyframes veil-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes veil-out{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
.veil svg{width:min(220px,50vw); height:auto; overflow:visible}
.veil .m{font:400 italic 120px var(--serif); fill:transparent; stroke:var(--c3); stroke-width:1.2; stroke-dasharray:600; stroke-dashoffset:600}
.veil.in .m{animation:sig-draw .9s .15s var(--ease-in-out) forwards, vfill .4s .7s forwards}
.veil .ln{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1}
.veil.in .ln{animation:sig-draw .5s .55s var(--ease-out) forwards}
@keyframes vfill{to{fill:var(--c3)}}
@media (prefers-reduced-motion: reduce){.veil{display:none}}
/* izložba – ispravke */
.spot{display:flex; align-items:center; justify-content:center; width:calc(var(--rh)*var(--s)*var(--ar) + 15vw)}
.spot::before{z-index:0; mix-blend-mode:screen; filter:blur(6px);
  background:radial-gradient(ellipse 46% 44% at 50% 46%, hsl(38 75% 82%/.55), hsl(36 60% 70%/.20) 48%, transparent 74%),
             linear-gradient(180deg, hsl(40 80% 88%/.18), transparent 55%) 50% 0/38% 100% no-repeat}
.art{z-index:1}
.plate{z-index:1}
.spot{padding-bottom:0 !important}
.art{margin-bottom:calc(var(--rh)*.05)}
@media not ((min-width:900px) and (hover:hover) and (pointer:fine)){ .art{margin-bottom:calc(var(--rh)*.12)} .plate{bottom:calc(var(--rh)*-.02)} }
.veil svg{position:absolute; top:50%; left:50%; translate:-50% -50%}
@media not ((min-width:900px) and (hover:hover) and (pointer:fine)){ .expo__room{--rh:min(62svh,520px)} }
@media (max-width:900px){.badge{display:none}}
.mbar.is-expo{translate:-50% 140%; opacity:0}
/* Pregled slike: slika uvijek cijela (računar) */
.lb__stage{container-type:size}
.lb__slide{display:flex; align-items:center; justify-content:center; height:100%; min-height:0; overflow:hidden}
.lb__slide img{max-width:calc(100cqw - 32px); max-height:calc(100cqh - 16px); width:auto; height:auto; object-fit:contain}
@media (min-width:761px){ .lb__slide img{max-width:calc(100cqw - 180px)} }
/* Galerija: prvih 12, pa „Pogledaj još“ */
.work.is-clip{display:none}
.more-wrap{display:flex; justify-content:center; margin-top:26px}
.more-wrap[hidden]{display:none}
.more-btn{color:var(--fg); border:1px solid hsl(0 0% 100%/.2); font-size:16px; padding:.9em 1.6em}
.more-btn .more-n{color:var(--c3); font-weight:500}
.cmail{margin-top:22px; color:#f3ece2; text-shadow:0 1px 10px #000; font-size:15.5px}
.cmail a,.fcontact a,.flegal a{color:inherit; text-underline-offset:3px}
.fcontact,.flegal{margin:0}
footer .wrap{row-gap:8px}
/* Pravne stranice */
body.legal{min-height:100vh}
.legal__in{max-width:760px; padding:40px 0 80px}
.legal__in .logo{margin-bottom:40px}
.legal__in h1{font-size:clamp(38px,6vw,60px); margin-bottom:10px}
.legal__in h2{font-size:28px; margin:34px 0 10px}
.legal__in p,.legal__in li{color:#dcd3c7; max-width:68ch}
.legal__in ul{padding-left:20px}
.legal__in a{color:var(--c3)}
.legal__dl{display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; margin:26px 0}
.legal__dl dt{color:var(--muted)} .legal__dl dd{margin:0}
.legal__in hr{border:0; border-top:1px solid var(--line); margin:40px 0 0}
.legal__back{margin-top:44px}
.legal__back .pill{color:var(--fg); border:1px solid hsl(0 0% 100%/.2)}
@media (max-width:520px){.legal__dl{grid-template-columns:1fr; gap:2px} .legal__dl dd{margin-bottom:10px}}
.seg button{min-height:44px}
.filters button{min-height:44px}
/* S2 samo kad je sekcija blizu */
@supports (animation-timeline: view()){ .read span{opacity:1; animation:none} .read.lit-on span{opacity:.18; animation:lit linear both; animation-timeline:--read; animation-range:cover calc(20% + var(--i)*var(--step)) cover calc(24% + var(--i)*var(--step))} }
/* kraći loader */
.loader .sig{animation:sig-draw .95s var(--ease-in-out) forwards, sig-fill .4s .75s forwards}
.loader .brush{animation:sig-draw .5s .65s var(--ease-out) forwards}
.loader .sub{animation:fade-in .4s .8s forwards}
.js .split .w>span{transition-delay:calc(var(--i)*60ms)}
.fcredit{margin:0; font-size:13px; color:var(--muted)} .fcredit a{color:var(--c3); text-decoration:none} .fcredit a:hover{text-decoration:underline}
/* dok se fontovi ne učitaju, tekst u heroju i meni su nevidljivi (bez skakanja) */
.js:not(.fonts-ok) .hero__in, .js:not(.fonts-ok) .hdr .bar{visibility:hidden}