/* ── MarbleArc home: 3D bags mosaic (31 Oct 2026, Ben: "add the 4 bags" to a second masonry, lower down the home page).
   Reuses the shop-by-categories grid (.tz-cats / .tz-cat / .tz-cat-label from marblearc.css) so the layout, gaps,
   breakpoints and labels match it exactly; this file only adds the tile backdrops, the canvas and the loading state.
   Script: assets/bags3d.js. Marble: assets/marble/. Models: assets/models/*.glb (meshopt + WebP, credits in the section footnote). ──────────── */
.tz-bags-intro{margin:-8px 0 18px;color:var(--tz-mute);font-size:14px}
.tz-bag3d{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tz-bag3d:active{cursor:grabbing}
.tz-bag3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tz-bag3d .tz-cat-label{z-index:2;pointer-events:none}

/* marble backdrop (31 Oct 2026, Ben: "a marble texture spanning the full bg", then "fade the marble texture down low"):
   warm white Carrara across the whole tile under an 80% cream veil, so only a whisper of veining shows,
   each tile showing a different part of the slab, with a soft window-light streak and a faint floor shade where the bag
   stands. Dark theme dims the slab rather than swapping it. */
.tz-bag3d,.tz-bag3d-viewer{background:linear-gradient(rgba(246,242,236,.8),rgba(246,242,236,.8)),#efebe5 url(marble/marble_bg.jpg) 50% 50%/cover no-repeat}
.tz-bag3d-2{background-position:0 0,15% 80%}
.tz-bag3d-3{background-position:0 0,85% 20%}
.tz-bag3d-4{background-position:0 0,70% 65%}
.tz-bag3d::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 44%,transparent 60%),linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 45%,rgba(120,100,80,.10) 100%)}
html[data-theme="dark"] .tz-bag3d::before,html[data-theme="dark"] .tz-bag3d-viewer::before{background:rgba(10,10,12,.62)}
html[data-theme="dark"] .tz-bag3d-viewer::before{content:"";position:absolute;inset:0;pointer-events:none}

/* placeholder until the model is in: a soft bag-shaped block that pulses */
.tz-bag3d::after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1.15;transform:translate(-50%,-45%);border-radius:18% 18% 22% 22%;background:rgba(255,255,255,.45);animation:tzBagPulse 1.6s ease-in-out infinite;transition:opacity .6s ease;pointer-events:none}
html[data-theme="dark"] .tz-bag3d::after{background:rgba(255,255,255,.08)}
.tz-bag3d.is-ready::after{opacity:0;animation:none}
@keyframes tzBagPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.tz-bag3d::after{animation:none}}

.tz-bags-credit{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--tz-mute)}
.tz-bags-credit a{color:inherit;text-decoration:underline}

/* tile controls (31 Oct 2026): a faint single-tone drag hint top right that fades once the bag has been turned, and a
   round zoom button bottom right, level with the label pill, that opens the full-screen viewer */
.tz-bag3d-hint{position:absolute;top:16px;right:16px;z-index:2;width:30px;height:30px;color:var(--tz-ink);opacity:.32;pointer-events:none;transition:opacity .5s ease}
.tz-bag3d-hint svg{display:block;width:100%;height:100%;fill:none}
.tz-bag3d.is-turned .tz-bag3d-hint{opacity:0}
.tz-bag3d-zoom{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:#fff;color:var(--tz-ink);box-shadow:0 6px 18px rgba(0,0,0,.12);cursor:pointer;transition:transform .2s ease}
.tz-bag3d-zoom svg{width:19px;height:19px;fill:none}
.tz-bag3d-zoom:hover{transform:scale(1.06)}
.tz-bag3d-zoom:focus-visible{outline:2px solid var(--tz-accent);outline-offset:2px}
.tz-bag3d-zoom[hidden]{display:none}
@media (min-width:834px){
  .tz-bag3d-hint{top:20px;right:20px}
  .tz-bag3d-zoom{right:18px;bottom:18px;width:42px;height:42px}
}
html[data-theme="dark"] .tz-bag3d-hint{color:#fff}
html[data-theme="dark"] .tz-bag3d-zoom{background:#1c1c20;color:var(--tz-ink)}

/* full-screen viewer */
html.tz-bag3d-locked,html.tz-bag3d-locked body{overflow:hidden}
.tz-bag3d-viewer{position:fixed;inset:0;z-index:100000;cursor:grab}   /* above the store header (9999) and announcement bar (10001) */
.tz-bag3d-viewer[hidden]{display:none}
.tz-bag3d-viewer:active{cursor:grabbing}
.tz-bag3d-viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.tz-bag3d-viewer-title{position:absolute;left:24px;top:20px;margin:0;background:#fff;color:var(--tz-ink);border-radius:999px;padding:11px 18px;font-size:14px;font-weight:600;text-transform:lowercase;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.tz-bag3d-close{position:absolute;right:20px;top:16px;height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 14px;border:0;border-radius:999px;background:#fff;color:var(--tz-ink);box-shadow:0 6px 18px rgba(0,0,0,.12);font-family:inherit;font-size:14px;font-weight:600;line-height:1;cursor:pointer}
.tz-bag3d-close svg{width:18px;height:18px;fill:none}
.tz-bag3d-close:focus-visible{outline:2px solid var(--tz-accent);outline-offset:2px}
.tz-bag3d-viewer-hint{position:absolute;left:0;right:0;bottom:22px;margin:0;text-align:center;font-size:13px;color:var(--tz-ink);opacity:.55;pointer-events:none}
html[data-theme="dark"] .tz-bag3d-viewer-title,html[data-theme="dark"] .tz-bag3d-close{background:#1c1c20;color:var(--tz-ink)}