/* =========================================================================
   ar-viewer.css: the 3D/AR machine viewer block on /3d.
   Reuses the site's actual tokens (--radius-lg, --shadow-lg, the spacing
   scale) and the same plain hairline-border + shadow treatment used by
   .callout, .fact and the calculator's result cards elsewhere on the site,
   so this reads as a native part of the page, not a third-party widget
   dropped in. (An earlier version mirrored .hero-figure's glow-behind-a-
   photo effect, but with no photo to absorb it, the glow just read as an
   out-of-place pink halo against this page's plain white card, so it's
   gone.)
   ========================================================================= */

.ar-viewer-block {
  position: relative;
  margin-top: var(--s-6);
  border-radius: var(--radius-lg);
}

model-viewer {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: var(--hair);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
  --progress-bar-color: var(--pink);
  --progress-bar-height: 4px;
}
/* Before the custom element upgrades (library still lazy-loading), show the
   poster image as a plain CSS background so the card isn't blank. The
   moment model-viewer upgrades, :not(:defined) stops matching and this
   rule switches off on its own -- it can never coexist with the live
   component's own internal poster/canvas rendering, which is what caused
   the earlier ghosting bug (a persistent inline background-image sitting
   behind the real render indefinitely, since nothing ever cleared it). */
model-viewer:not(:defined) {
  background-image: var(--fallback-poster, none);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 640px) {
  model-viewer {
    aspect-ratio: 1 / 1;
  }
}
@media (min-width: 900px) {
  model-viewer {
    aspect-ratio: 4 / 3;
  }
}

/* The AR launch button, slotted into model-viewer's own ar-button slot.
   model-viewer shows/hides this automatically based on real AR capability
   (see .slot.ar-button:not(.enabled) in the vendored library). We never
   toggle it ourselves, so there is no way for a broken button to show. */
.ar-launch-btn {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font: inherit;
}
/* .btn:hover in site.css sets transform: translateY(-2px) scale(1.01) with
   higher specificity (.btn:hover = 0,2,0) than .ar-launch-btn alone (0,1,0),
   which would silently win the cascade and wipe out the translateX(-50%)
   centering above, visibly shifting the button sideways on hover. This
   explicit, same-specificity-class hover rule keeps both effects together
   in one transform value instead. */
.ar-launch-btn:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.01);
}
.ar-launch-btn .ar-launch-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Desktop / no-AR-transport fallback. Hidden by default; ar-viewer.js
   reveals this only once model-viewer's own canActivateAR check comes back
   false. Never guessed from a user-agent string. */
.ar-fallback {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 48ch;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  border: var(--hair);
  background: var(--accent-wash);
  text-align: center;
}
.ar-fallback p {
  margin: 0 0 var(--s-3);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
.ar-fallback-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.ar-copy-link-btn[data-copied="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Load-error state. Hidden by default; shown only on a real 'error' event
   from model-viewer (bad network, blocked request, 404, etc.) rather than
   left as a blank box. .ar-lib-error covers the library script itself
   failing to load. A different failure surface, same visual treatment. */
.ar-load-error,
.ar-lib-error {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 48ch;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-lg);
  border: var(--hair);
  background: var(--surface);
  text-align: center;
}
.ar-load-error p,
.ar-lib-error p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* No-JS visitors get a static photo instead of a blank custom element. */
.ar-noscript-fallback img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: var(--hair);
  box-shadow: var(--shadow-lg);
}

/* Small print under the viewer: real-size disclosure, matches .muted.fs-sm
   used elsewhere on the site rather than inventing a new text style. */
.ar-viewer-note {
  margin-top: var(--s-3);
  text-align: center;
}