/* Shutterbug — frame styles + floating reveal.
   All colors/sizes come from CSS variables printed by the plugin settings,
   so changing a setting repaints every reveal without touching this file. */

/* Triggers made with the editor button are real <a> links, so they inherit
   your theme's link styles — no separate cue. Bare non-link triggers (e.g. a
   shortcode with no link) get a pointer cursor only. */
[data-shutterbug]:not(a){ cursor:pointer; }

.sb-float{
  position:fixed; top:0; left:0; z-index:50;
  width:var(--sb-width,280px);
  pointer-events:none; will-change:transform;
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s ease;
}
.sb-float.is-visible{ opacity:1; }
.sb-float.is-touch{ left:50%; top:42%; }

.sb-inner{ position:relative; }

.sb-photo{
  position:relative; width:100%; aspect-ratio:1/1;
  overflow:hidden; background:#e9edf5;
}
.sb-layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.sb-layer.is-active{ opacity:1; transform:scale(1); }

/* parts are hidden until a frame opts them in */
.sb-chin,.sb-perf{ display:none; }
.sb-perf i{ display:block; background:var(--sb-film-perf,#ededed); border-radius:2px; }

/* ── POLAROID ─────────────────────────────────────────────── */
.sb-float--polaroid .sb-inner{
  background:var(--sb-pola-paper,#ffffff);
  padding:var(--sb-pola-bw,11px) var(--sb-pola-bw,11px) 0;
  border:.5px solid rgba(15,25,57,.07);
  box-shadow:0 22px 55px rgba(15,25,57,.22), 0 4px 10px rgba(15,25,57,.12);
}
.sb-float--polaroid .sb-chin{ display:block; height:var(--sb-pola-chin,46px); }

/* ── GALLERY MAT ──────────────────────────────────────────── */
.sb-float--matte .sb-inner{
  background:var(--sb-mat,#F1EEE7);
  padding:var(--sb-mat-pad,20px);
  box-shadow:0 22px 55px rgba(15,25,57,.20);
}
.sb-float--matte .sb-photo{ border:1px solid var(--sb-mat-key,#20262B); }

/* ── FILMSTRIP ────────────────────────────────────────────── */
.sb-float--film .sb-inner{
  background:var(--sb-film,#141414);
  box-shadow:0 22px 55px rgba(15,25,57,.26);
}
.sb-float--film .sb-perf{ display:flex; }

/* horizontal: sprockets top + bottom */
.sb-float--film.sb-h .sb-inner{ display:block; }
.sb-float--film.sb-h .sb-perf--top,
.sb-float--film.sb-h .sb-perf--bottom{ justify-content:space-between; padding:7px 10px; }
.sb-float--film.sb-h .sb-perf--left,
.sb-float--film.sb-h .sb-perf--right{ display:none; }
.sb-float--film.sb-h .sb-perf i{ width:12px; height:9px; }
.sb-float--film.sb-h .sb-photo{ margin:0 10px; }

/* vertical: sprockets left + right */
.sb-float--film.sb-v .sb-inner{ display:block; padding:10px 0; }
.sb-float--film.sb-v .sb-perf--top,
.sb-float--film.sb-v .sb-perf--bottom{ display:none; }
.sb-float--film.sb-v .sb-perf--left,
.sb-float--film.sb-v .sb-perf--right{
  display:flex; flex-direction:column; justify-content:space-between;
  position:absolute; top:0; bottom:0; width:24px; padding:10px 7px; box-sizing:border-box;
}
.sb-float--film.sb-v .sb-perf--left{ left:0; }
.sb-float--film.sb-v .sb-perf--right{ right:0; }
.sb-float--film.sb-v .sb-perf i{ width:9px; height:12px; }
.sb-float--film.sb-v .sb-photo{ margin:0 24px; }