/* =============================================================
   PDA Doors & More — Real Florida Installs : premium gallery animation
   NATIVE to the existing site. Reuses the site's own CSS variables:
   --ink, --gold, --gold-2, --bone, --line, --ease, --shadow.
   Loads AFTER assets/styles.css, so it only refines existing classes.
   APPLY TARGET: the existing  .gallery > .cell  cards on gallery.html
   (each .cell already contains  .pic = image layer  and  .cap = caption).
   ============================================================= */

/* 1) Subtle hover — gentle lift + slow image zoom (no bounce, no flash) */
.gallery .cell{cursor:zoom-in;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);}
.gallery .cell:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line);}
.gallery .cell .pic{transition:transform 1.1s var(--ease);}      /* slow, cinematic */
.gallery .cell:hover .pic{transform:scale(1.06);}                /* subtle */

/* 2) Soft dark overlay that deepens on hover (keeps captions legible) */
.gallery .cell::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,0) 45%,rgba(8,8,8,.5));
  opacity:.8;transition:opacity .55s var(--ease);}
.gallery .cell:hover::after{opacity:1;}

/* 3) Clean caption reveal — gold hairline + slide/fade up on hover */
.gallery .cell .cap{transform:translateY(10px);opacity:.92;
  transition:transform .55s var(--ease),opacity .55s var(--ease);}
.gallery .cell .cap::before{content:"";display:block;width:26px;height:1px;background:var(--gold);
  margin-bottom:9px;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);}
.gallery .cell:hover .cap{transform:none;opacity:1;}
.gallery .cell:hover .cap::before{transform:scaleX(1);}

/* 4) Lightbox — smooth fade + scale, in the site's black/gold language */
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,6,.92);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;}
.lb.open{opacity:1;visibility:visible;}
.lb figure{margin:0;text-align:center;transform:scale(.94);opacity:0;
  transition:transform .45s var(--ease),opacity .45s var(--ease);}
.lb.open figure{transform:scale(1);opacity:1;}
.lb img{max-width:92vw;max-height:80vh;object-fit:contain;border:1px solid var(--line);box-shadow:var(--shadow);}
.lb figcaption{margin-top:14px;color:var(--bone);font-size:14px;letter-spacing:.04em;font-family:"Inter",system-ui,sans-serif;}
.lb button{position:absolute;color:var(--bone);background:rgba(10,10,10,.5);border:1px solid var(--line);
  cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease);}
.lb button:hover{border-color:var(--gold);color:var(--gold-2);}
.lb .x{top:20px;right:20px;width:46px;height:46px;font-size:20px;}
.lb .nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:26px;}
.lb .prev{left:18px;} .lb .next{right:18px;}

/* 5) Mobile — captions always shown (no hover), smaller controls */
@media(max-width:860px){
  .gallery .cell .cap{transform:none;opacity:1;}
  .gallery .cell .cap::before{transform:scaleX(1);}
  .lb .nav{width:42px;height:42px;}
}

/* 6) Respect reduced-motion — calm, no transforms */
@media (prefers-reduced-motion:reduce){
  .gallery .cell,.gallery .cell .pic,.gallery .cell .cap,
  .gallery .cell .cap::before,.lb,.lb figure{transition:none;}
  .gallery .cell:hover{transform:none;}
  .gallery .cell:hover .pic{transform:none;}
  .lb figure{transform:none;}
}