/* Lightbox 4 praseta - lan (#EFE5D3) liquid glass. Samostalan: ne zavisi od hp.css. */
html.lbx-otv,html.lbx-otv body{overflow:hidden}
.lbx{--e:cubic-bezier(.2,.8,.2,1);--vuci:0;position:fixed;inset:0;z-index:200;color:#221714;font-family:"Figtree",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.lbx[hidden]{display:none}
.lbx-defs{position:absolute;width:0;height:0}

/* pozadina: lan staklo preko strane + tople mrlje koje lagano plove (tečnost) + zrno papira */
.lbx-poz{position:absolute;inset:0;overflow:hidden;background:rgba(239,229,211,.74);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  opacity:calc((1 - var(--vuci) * .7) * var(--o,0));transition:opacity .55s var(--e)}
.lbx.otv .lbx-poz{--o:1}
.lbx-poz i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:lbxTok 16s ease-in-out infinite alternate}
.lbx-poz i:nth-child(1){width:46vmax;height:38vmax;left:-10vmax;top:-12vmax;background:radial-gradient(closest-side,rgba(109,29,42,.32),transparent)}
.lbx-poz i:nth-child(2){width:42vmax;height:42vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(closest-side,rgba(79,91,60,.34),transparent);animation-duration:21s;animation-delay:-6s}
.lbx-poz i:nth-child(3){width:36vmax;height:24vmax;left:38%;top:-8vmax;background:radial-gradient(closest-side,rgba(255,250,240,.95),transparent);animation-duration:13s;animation-delay:-3s}
.lbx-poz::after{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes lbxTok{50%{transform:translate3d(6vmax,4vmax,0) scale(1.12)}to{transform:translate3d(-3vmax,7vmax,0) scale(.94) rotate(14deg)}}

/* scena: prostor za fotografiju/video, iznad trake sa opisom */
.lbx-scena{position:absolute;inset:84px 0 118px;touch-action:none}
.lbx-m{position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:none;display:block;object-fit:cover;border-radius:6px;background:#E2D4BC;user-select:none;-webkit-user-select:none;
  box-shadow:0 50px 90px -46px rgba(34,23,20,.6),0 0 0 1px rgba(255,255,255,.45)}
video.lbx-m{object-fit:contain;background:#1b1210}

/* liquid glass: kontrole kao kapi stakla (svetla ivica gore, topla senka dole, refrakcija gde je podržana) */
.lbx-dug,.lbx-traka{position:absolute;z-index:3;color:#6D1D2A;border:0;
  background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(247,240,227,.2) 55%,rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1px 2px rgba(109,29,42,.14),inset 0 0 0 1px rgba(255,255,255,.4),0 14px 30px -16px rgba(34,23,20,.5);
  opacity:0;transition:opacity .45s var(--e),transform .45s var(--e),background .3s,color .3s}
@supports (backdrop-filter:url(#lbxRefr)){.lbx-dug,.lbx-traka{backdrop-filter:blur(10px) saturate(1.8) url(#lbxRefr)}}
.lbx.otv .lbx-dug,.lbx.otv .lbx-traka{opacity:1;transition-delay:.15s}
.lbx-dug{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transform:scale(.8)}
.lbx.otv .lbx-dug{transform:none}
.lbx-dug svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lbx-dug:hover{background:rgba(109,29,42,.88);color:#F6EFE2;transform:scale(1.07)}
.lbx-dug:focus-visible{outline:2px solid #6D1D2A;outline-offset:4px}
.lbx-x{top:16px;right:20px}
.lbx-pret{left:24px;top:50%;margin-top:-46px}
.lbx-sled{right:24px;top:50%;margin-top:-46px}
.lbx.jedan .lbx-pret,.lbx.jedan .lbx-sled{display:none}

.lbx-traka{left:50%;bottom:30px;translate:-50% 0;display:flex;align-items:center;gap:18px;max-width:min(760px,calc(100vw - 40px));padding:10px 26px 10px 12px;border-radius:999px;color:#221714}
.lbx-br{flex:none;font:400 1.02rem/1 "Marcellus",Georgia,serif;letter-spacing:.06em;color:#F6EFE2;background:#6D1D2A;border-radius:999px;padding:12px 16px;font-variant-numeric:tabular-nums lining-nums}
.lbx-br:empty{display:none}
.lbx-opis{margin:0;display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.35}
.lbx-pog{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6D1D2A}
.lbx-pog:empty{display:none}
.lbx-cap{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media (max-width:760px){
  .lbx-scena{inset:72px 0 150px}
  .lbx-m{border-radius:4px}
  .lbx-x{top:12px;right:12px;width:50px;height:50px}
  .lbx-pret,.lbx-sled{top:auto;bottom:86px;margin:0;width:50px;height:50px}
  .lbx-pret{left:14px}.lbx-sled{right:14px}
  .lbx-traka{bottom:20px;width:calc(100vw - 28px);padding:8px 18px 8px 8px;gap:12px}
  .lbx-br{font-size:.9rem;padding:10px 12px}
  .lbx-cap{white-space:normal;font-size:.88rem}
}
/* „Okrenite uređaj" (samo video, telefon uspravno): staklena pilula na sredini, telefon se okreće u položeno */
.lbx-okreni{position:absolute;z-index:4;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 22px 16px;border-radius:20px;
  background:rgba(34,23,20,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F6EFE2;font:500 .82rem/1 "Figtree",system-ui,sans-serif;letter-spacing:.04em;
  opacity:0;scale:.9;pointer-events:none;transition:opacity .45s var(--e),scale .45s var(--e)}
.lbx.okreni .lbx-okreni{opacity:1;scale:1;pointer-events:auto;transition-delay:.5s}
.lbx-okreni svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lbx-okreni rect,.lbx-okreni path:not(.lbx-strel){transform-origin:24px 22px;transform-box:view-box}
.lbx.okreni .lbx-okreni rect,.lbx.okreni .lbx-okreni path:not(.lbx-strel){animation:lbxOkret 2.2s var(--e) .7s infinite}
.lbx-strel{opacity:.7}
@keyframes lbxOkret{0%,15%{transform:none}55%,85%{transform:rotate(-90deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.lbx-poz i{animation:none}.lbx.okreni .lbx-okreni rect,.lbx.okreni .lbx-okreni path{animation:none}}