/* 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", Georgia, "Times New Roman", 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 */
dialog.lb{border:0; padding:0; background:none; color:var(--fg); max-width:min(1100px,96vw); width:100%; max-height:96svh; overflow:visible}
dialog.lb[open]{display:grid; opacity:1; transform:none}
dialog.lb{opacity:0; transform:scale(.9) translateY(24px); transition:opacity .35s var(--ease-out), transform .5s var(--spring), overlay .35s allow-discrete, display .35s allow-discrete}
@starting-style{dialog.lb[open]{opacity:0; transform:scale(.9) translateY(24px)}}
dialog.lb::backdrop{background:hsl(20 30% 4%/.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.lb__box{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0; background:var(--surface); border-radius:24px; overflow:hidden; border:1px solid var(--line)}
.lb__img{background:#090807; display:grid; place-items:center; min-height:300px; position:relative}
.lb__img img{max-height:86svh; width:auto; max-width:100%; object-fit:contain}
.lb__side{padding:28px 24px; display:flex; flex-direction:column; gap:14px}
.lb__side h3{font-size:38px}
.lb__side .acts{margin-top:auto; display:grid; gap:10px}
.lb__side .acts .btn-accent{flex-direction:column; gap:0; line-height:1.2; padding-block:.7em}.lb__side .acts .btn-accent small{font-weight:500; opacity:.8; font-size:13px}
.lb__close{position:absolute; top:12px; right:12px; z-index:3; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0}
.lb__nav{position:absolute; top:50%; translate:0 -50%; z-index:3; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0}
.lb__nav.prev{left:12px}.lb__nav.next{right:12px}
@media (max-width:820px){.lb__box{grid-template-columns:1fr; max-height:96svh; overflow:auto}.lb__img img{max-height:62svh}.lb__side{padding:20px}}

/* 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}}