/* QBC 3D mark: hero stage + Scroll World. Uses the tokens of qbc.css (--gold, --lavender, --indigo-deep ...). */

/* ---------- hero stage: a fixed square box, so nothing moves when the canvas arrives ---------- */
.mark3d { position: relative; isolation: isolate; width: min(100%, 440px, 50vh, 70vw); min-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto clamp(0px, 1.2vw, 10px); }
.mark3d::before {
  content: ""; position: absolute; inset: 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,165,96,.22), rgba(184,168,209,.08) 56%, transparent 74%);
  filter: blur(10px);
}
.mark3d img, .mark3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mark3d canvas { opacity: 0; transition: opacity .5s var(--ease-out, ease-out); pointer-events: none; }
.mark3d.is-live canvas { opacity: 1; }
.mark3d.is-live img { opacity: 0; transition: opacity .35s linear .5s; }   /* poster leaves after the canvas is opaque */
@media (prefers-reduced-motion: reduce) { .mark3d canvas { display: none; } }
/* phones: the scan form's first field has to stay in the first 375x812 screen, so the mark is small there */
@media (max-width: 720px) { .mark3d { width: min(150px, 20vh); min-width: 0; margin-bottom: 4px; } }
/* wide screens: the copy is centred beside the tall form, so the mark sits in the empty space above it and moves nothing */
@media (min-width: 1100px) { #scan .hero-copy { position: relative; } #scan .mark3d { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(400px, 42vh); margin: 0; } }