/* ─────────────────────────────────────────────────────────────────────────
   wsl-cards.css — shared product-card depth + zoom layer (2026-06-01)
   Opt-in, performant. A card opts in with [data-tilt]; an image gets a
   tap-to-zoom magnifier via a <span class="wsl-zoom" data-zoom="<full-img>">.
   Pair with /wsl-cards.js. No blur, no always-on filters — transform-only,
   one card animates at a time (cheap on old hardware).
   ──────────────────────────────────────────────────────────────────────── */

/* Depth: the card tilts toward the cursor (JS sets the transform). We only
   declare the transition + hint here so the motion is smooth and GPU-composited. */
[data-tilt]{transition:transform .14s ease, box-shadow .2s ease; transform-style:preserve-3d}
[data-tilt] .wsl-pop{transition:transform .18s ease}
/* stop the browser dragging the image/link out from under the spin/tilt */
[data-spin],[data-tilt],[data-spin] img,[data-tilt] img,.wsl-pop{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
/* On hover the product image gently scales inside its frame = "lifts" off the card. */
@media (hover:hover) and (pointer:fine){
  [data-tilt]:hover .wsl-pop{transform:scale(1.06)}
  [data-tilt]:hover{box-shadow:0 30px 60px -22px rgba(13,30,70,.55)}
}

/* Image frame: clips the zoom-on-hover + hosts the magnifier button. No own
   radius — each card's existing image CSS owns the corners (dg = inset 8px,
   picks = edge-to-edge clipped by the card). */
.wsl-imgframe{position:relative;overflow:hidden}
.wsl-imgframe .wsl-pop{display:block;width:100%;height:100%}

/* ── Drag-to-spin (data-spin): grab the product and rotate it in 3-D space ── */
[data-spin]{cursor:grab;transform-style:preserve-3d;will-change:transform;touch-action:pan-y}
[data-spin].wsl-spinning{cursor:grabbing}
/* the product lifts off the card while you spin it = real depth */
[data-spin] .wsl-pop{transition:transform .6s cubic-bezier(.2,.9,.2,1)}
[data-spin].wsl-spinning .wsl-pop{transform:translateZ(34px) scale(1.02)}
/* moving sheen — light sliding across a turning surface (no blend-mode; cheap) */
.wsl-glare{position:absolute;inset:-25%;pointer-events:none;opacity:0;z-index:1;border-radius:inherit;
  background:radial-gradient(closest-side at 50% 38%, rgba(255,255,255,.6), rgba(255,255,255,0) 72%);
  transition:opacity .35s ease}
/* "drag to spin" affordance badge, fades when you grab it */
.wsl-spin-hint{position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;
  background:rgba(10,18,38,.62);color:#fff;font:600 10.5px/1 'Hanken Grotesk','Barlow',sans-serif;
  letter-spacing:.02em;opacity:.9;transition:opacity .25s ease}
.wsl-spin-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-spin].wsl-spinning .wsl-spin-hint,[data-spin].wsl-spun .wsl-spin-hint{opacity:0}

/* Amazon-style magnifier button, bottom-right of the image. */
.wsl-zoom{
  position:absolute;right:7px;bottom:7px;z-index:2;
  width:30px;height:30px;border-radius:999px;cursor:zoom-in;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.82);border:1px solid rgba(13,30,70,.12);
  color:#0a1226;box-shadow:0 4px 12px -4px rgba(13,30,70,.5);
  -webkit-backdrop-filter:saturate(1.2);transition:background .14s, transform .14s;
}
.wsl-zoom:hover{background:#fff;transform:scale(1.08)}
.wsl-zoom:active{transform:scale(.94)}
.wsl-zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* On desktop the button is subtle until you hover the card; on touch it's always visible. */
@media (hover:hover) and (pointer:fine){
  .wsl-zoom{opacity:0;transform:translateY(4px);transition:opacity .15s, transform .15s, background .14s}
  [data-tilt]:hover .wsl-zoom, .wsl-imgframe:hover .wsl-zoom{opacity:1;transform:translateY(0)}
}

/* ── Lightbox (injected once by wsl-cards.js) ─────────────────────────────── */
.wsl-lb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:rgba(7,12,26,.82);padding:24px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.wsl-lb.open{opacity:1;pointer-events:auto}
.wsl-lb-stage{position:relative;max-width:min(92vw,1100px);max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:10px}
/* consistent popup size across pages — small source images scale up to a
   generous target instead of rendering tiny (the per-page size mismatch). */
.wsl-lb-img{width:min(90vw,820px);height:auto;max-height:85vh;object-fit:contain;border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);background:#fff;
  transform:scale(.96);transition:transform .22s cubic-bezier(.2,.8,.2,1);cursor:zoom-in}
.wsl-lb.open .wsl-lb-img{transform:scale(1)}
.wsl-lb-img.zoomed{cursor:zoom-out;transform:scale(1.7)}
.wsl-lb-cap{color:rgba(255,255,255,.92);font-family:'Hanken Grotesk','Barlow',sans-serif;font-size:13px;text-align:center;max-width:90vw}
.wsl-lb-x{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:999px;border:0;cursor:pointer;
  background:#fff;color:#0a1226;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6)}
.wsl-lb-x:hover{background:#f1f5f9}
@media(max-width:560px){.wsl-lb-x{top:6px;right:6px}}
@media (prefers-reduced-motion:reduce){
  [data-tilt],[data-tilt] .wsl-pop,.wsl-lb,.wsl-lb-img{transition:none}
}