/* =============================================================================
   AMERICAN LEATHER COMPANY OF SCOTTSDALE - Build Your Own Belt
   viewer360.css - the 3D viewer well, its chrome, label and note.
   Composes v3/skin.css tokens only (no raw hex, no px space outside tokens
   except hairline sizes). The well IS the scene background: the canvas is
   transparent so silver and stone read against the espresso ground.
   ========================================================================== */

/* ---- the well ------------------------------------------------------------- */
.albb-viewer{
  position:relative; overflow:hidden; display:block;
  aspect-ratio:var(--al-ratio, 4 / 3);
  background-color:var(--al-ground-2);
  /* the homepage hero's brass pool, low and behind the belt */
  background-image:radial-gradient(70% 55% at 50% 78%, var(--al-brass-tint), transparent 72%);
  border:var(--al-border); border-radius:var(--al-r-card);
  box-shadow:var(--al-shadow-well);
  isolation:isolate;
}
/* skin's ground-2 wash sits above the canvas by default - not over a live render */
.al-well.albb-viewer::after{ content:none; }

.albb-viewer__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  touch-action:pan-y;          /* one finger sideways turns; vertical still scrolls the page; two fingers pinch */
  cursor:grab; outline:none;
  opacity:0; transition:opacity var(--al-t-slow) var(--al-ease);
  z-index:2;
}
.albb-viewer.is-ready .albb-viewer__canvas{ opacity:1; }
.albb-viewer.is-dragging .albb-viewer__canvas{ cursor:grabbing; }
.albb-viewer__canvas:focus-visible{ box-shadow:inset 0 0 0 2px var(--al-turq-300); }

/* ---- the 2D pairing card slot (skeleton, fallback, print) ----------------- */
.albb-viewer__fallback{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  padding:var(--al-plate-pad);
  transition:opacity var(--al-t-slow) var(--al-ease);
}
.albb-viewer.is-ready .albb-viewer__fallback{ opacity:0; pointer-events:none; }
.albb-viewer.is-fallback .albb-viewer__fallback{ opacity:1; pointer-events:auto; }
.albb-viewer.is-fallback .albb-viewer__canvas{ opacity:0; pointer-events:none; }
/* minimal card the viewer builds only when the page gave it nothing */
.albb-viewer__card{ display:grid; grid-template-columns:1fr 1fr; gap:var(--al-gap); width:100%; max-width:560px; }
.albb-viewer__card-well{ --al-ratio:1 / 1; }
.albb-viewer__card-well::after{ content:none; }

/* ---- loading shimmer (UX 3.5) --------------------------------------------- */
.albb-viewer__loading{
  position:absolute; left:50%; bottom:var(--al-sp-5); transform:translateX(-50%);
  z-index:3; display:none; align-items:center; gap:var(--al-sp-3);
  padding:var(--al-sp-2) var(--al-sp-4); border-radius:var(--al-r-pill);
  background:rgba(11,10,8,.7); color:var(--al-text-mid);
  font-family:var(--al-font-util); font-size:var(--al-fs-u-xs); letter-spacing:var(--al-ls-u-xs); text-transform:uppercase;
}
.albb-viewer.is-loading .albb-viewer__loading{ display:inline-flex; }
.albb-viewer__loading-bar{
  width:56px; height:3px; border-radius:var(--al-r-pill); overflow:hidden; position:relative;
  background:var(--al-line-2);
}
.albb-viewer__loading-bar::after{
  content:""; position:absolute; inset:0; width:40%;
  background:var(--al-grad-gold);
  animation:albb-shimmer 1.1s var(--al-ease) infinite;
}
@keyframes albb-shimmer{ from{ transform:translateX(-100%);} to{ transform:translateX(260%);} }

/* ---- chrome: bottom-left cluster on ground-0 at 70% (UX 3.4) -------------- */
.albb-viewer__chrome{
  position:absolute; left:var(--al-sp-4); bottom:var(--al-sp-4); z-index:3;
  gap:var(--al-sp-2); padding:var(--al-sp-1);
  background:rgba(11,10,8,.7); border-radius:calc(var(--al-r-ctrl) + var(--al-sp-1));
  opacity:0; transition:opacity var(--al-t) var(--al-ease);
}
.albb-viewer.is-ready .albb-viewer__chrome{ opacity:1; }
.albb-viewer__chrome[hidden]{ display:none; }
.al-btn.albb-viewer__btn{
  min-height:44px; min-width:44px; padding:10px 16px;
  font-size:var(--al-fs-u-xs); letter-spacing:var(--al-ls-u-xs);
}
.albb-viewer__btn-off{ display:none; }
.albb-viewer__spin[aria-pressed="false"] .albb-viewer__btn-on{ display:none; }
.albb-viewer__spin[aria-pressed="false"] .albb-viewer__btn-off{ display:inline; }
.albb-viewer__spin[hidden]{ display:none; }

/* ---- first-visit rotate hint ---------------------------------------------- */
.albb-viewer__hint{
  position:absolute; top:var(--al-sp-4); left:50%; transform:translateX(-50%);
  z-index:3; padding:var(--al-sp-2) var(--al-sp-4); border-radius:var(--al-r-pill);
  background:rgba(11,10,8,.7); color:var(--al-brass-100);
  font-family:var(--al-font-util); font-weight:600; font-size:var(--al-fs-u-xs); letter-spacing:var(--al-ls-u-xs); text-transform:uppercase;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity var(--al-t) var(--al-ease);
}
.albb-viewer.has-hint.is-ready .albb-viewer__hint{ opacity:1; }

/* ---- honesty label + note line, directly under the well (UX 3.7) ---------- */
.albb-viewer__label,
body.theme-rocket-wc-master p.albb-viewer__label{
  font-size:var(--al-fs-xs); line-height:var(--al-lh-tight); color:var(--al-text-dim);
  margin:var(--al-sp-3) 0 0; max-width:var(--al-measure);
}
.albb-viewer__label strong{ color:var(--al-text-mid); font-weight:600; }
.albb-viewer__note,
body.theme-rocket-wc-master p.albb-viewer__note{
  font-size:var(--al-fs-xs); line-height:var(--al-lh-tight); color:var(--al-brass-300);
  margin:var(--al-sp-1) 0 0; max-width:var(--al-measure); min-height:1.5em;
}
.albb-viewer__note:empty{ display:none; }

/* ---- motion safety ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .albb-viewer__canvas, .albb-viewer__fallback, .albb-viewer__chrome, .albb-viewer__hint{ transition:none; }
  .albb-viewer__loading-bar::after{ animation:none; width:100%; }
}

/* ---- small screens ---------------------------------------------------------- */
@media (max-width:639px){
  .albb-viewer__chrome{ left:var(--al-sp-3); bottom:var(--al-sp-3); }
  .albb-viewer__card{ grid-template-columns:1fr 1fr; gap:var(--al-sp-3); }
}