/* v330 — lightbox open / navigate transitions (assets/js/lightbox-fx.js).
   Only transform / opacity / clip-path / filter. Classes are removed when the
   animation ends, so the resting lightbox is exactly the original one. */
.lightbox.zg-lbx-in { animation: zgLbxBg .32s ease-out both; }
@keyframes zgLbxBg { from { opacity: 0; } to { opacity: 1; } }
.lightbox .zg-lbx-hold { opacity: 0 !important; }
.lightbox .zg-lbx-m { will-change: transform, opacity, clip-path, filter; animation-fill-mode: both; transform-origin: 50% 50%; }

/* 1 cinematic clip-path */
.zg-lbx-m.zg-lbx--cinematic { animation: zgLbxCine 1s cubic-bezier(.77,0,.18,1) both; }
@keyframes zgLbxCine {
  0%   { opacity: 0; clip-path: inset(40% 45% 40% 45%); transform: scale(.85); filter: brightness(1.6); }
  30%  { opacity: 1; clip-path: inset(30% 20% 30% 20%); transform: scale(.9); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); filter: none; }
}
/* 2 3D spatial unfold */
.zg-lbx-m.zg-lbx--spatial { animation: zgLbxSpatial .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes zgLbxSpatial {
  0%   { opacity: 0; transform: perspective(1400px) rotateX(38deg) rotateY(-18deg) translateZ(-420px) scale(.7); filter: blur(6px); }
  100% { opacity: 1; transform: perspective(1400px) none; filter: none; }
}
/* 3 liquid (SVG displacement driven by JS) */
.zg-lbx-m.zg-lbx--liquid { animation: zgLbxLiquid 1s ease-out both; }
@keyframes zgLbxLiquid { 0% { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* 5 parallax mask expand */
.zg-lbx-m.zg-lbx--parallax { animation: zgLbxPara 1s cubic-bezier(.65,0,.35,1) both; }
@keyframes zgLbxPara {
  0%   { clip-path: inset(48% 0 48% 0); transform: scale(1.35) translateY(6%); opacity: .4; }
  100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}
/* 6 iris wipe */
.zg-lbx-m.zg-lbx--iris { animation: zgLbxIris .9s cubic-bezier(.7,0,.3,1) both; }
@keyframes zgLbxIris {
  0%   { clip-path: circle(0% at var(--ox,50%) var(--oy,50%)); transform: scale(1.15); filter: blur(4px); }
  100% { clip-path: circle(150% at var(--ox,50%) var(--oy,50%)); transform: none; filter: none; }
}
/* 8 blob morph */
.zg-lbx-m.zg-lbx--blob { animation: zgLbxBlob 1.05s cubic-bezier(.65,0,.35,1) both; }
@keyframes zgLbxBlob {
  0%   { opacity: 0; transform: scale(.4) rotate(-8deg); clip-path: ellipse(8% 12% at 50% 50%); }
  45%  { opacity: 1; transform: scale(.85) rotate(3deg); clip-path: ellipse(38% 30% at 48% 54%); }
  100% { opacity: 1; transform: none; clip-path: ellipse(100% 100% at 50% 50%); }
}
/* 9 diagonal slash */
.zg-lbx-m.zg-lbx--slash { animation: zgLbxSlash .9s cubic-bezier(.77,0,.18,1) both; }
@keyframes zgLbxSlash {
  0%   { clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%); transform: scale(1.2); }
  100% { clip-path: polygon(0 0, 120% 0, 100% 100%, -20% 100%); transform: none; }
}
/* 13 zoom from the clicked tile (FLIP) */
.zg-lbx-m.zg-lbx--zoom { animation: zgLbxZoom .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes zgLbxZoom {
  0%   { transform: translate(var(--tx,0), var(--ty,0)) scale(var(--sx,.3), var(--sy,.3)); opacity: .6; }
  100% { transform: none; opacity: 1; }
}

/* Piece layer (glass / slices / venetian / pixels / tiles) */
.zg-lbx-fx { position: fixed; z-index: 1; pointer-events: none; perspective: 1200px; }
.zg-lbx-fx > i { position: absolute; display: block; background-repeat: no-repeat; animation-duration: var(--dur, .7s); animation-delay: var(--d, 0ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.16,1,.3,1); will-change: transform, opacity, clip-path; backface-visibility: hidden; }
.zg-lbx-fx--slices > i:nth-child(odd)  { animation-name: zgLbxSliceU; }
.zg-lbx-fx--slices > i:nth-child(even) { animation-name: zgLbxSliceD; }
@keyframes zgLbxSliceU { from { transform: translateY(-110%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zgLbxSliceD { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.zg-lbx-fx--venetian > i { animation-name: zgLbxVen; transform-origin: 50% 0; }
@keyframes zgLbxVen { from { transform: rotateX(-92deg); opacity: 0; } to { transform: none; opacity: 1; } }
.zg-lbx-fx--glass > i:nth-child(1) { animation-name: zgLbxGlass1; filter: blur(10px) saturate(1.4); opacity: .55; }
.zg-lbx-fx--glass > i:nth-child(2) { animation-name: zgLbxGlass2; filter: blur(4px); opacity: .8; }
.zg-lbx-fx--glass > i:nth-child(3) { animation-name: zgLbxGlass3; }
@keyframes zgLbxGlass1 { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: scale(1.08); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } }
@keyframes zgLbxGlass2 { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transform: scale(1.05); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } }
@keyframes zgLbxGlass3 { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
.zg-lbx-fx--pixels > i { animation-name: zgLbxPix; animation-timing-function: cubic-bezier(.77,0,.18,1); }
@keyframes zgLbxPix { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.02); opacity: 1; } }
.zg-lbx-fx--tiles > i { animation-name: zgLbxTile; }
@keyframes zgLbxTile { from { transform: rotateY(-100deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Next / prev — subtle directional slide */
.zg-lbx-m.zg-lbx-nav-n { animation: zgLbxNavN .42s cubic-bezier(.2,.8,.2,1) both; }
.zg-lbx-m.zg-lbx-nav-p { animation: zgLbxNavP .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes zgLbxNavN { from { opacity: 0; transform: translateX(-46px) scale(.98); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes zgLbxNavP { from { opacity: 0; transform: translateX(46px) scale(.98); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .lightbox.zg-lbx-in, .lightbox .zg-lbx-m { animation: none !important; }
  .zg-lbx-fx { display: none !important; }
  .lightbox .zg-lbx-hold { opacity: 1 !important; }
}