/* Vera scan loader — cosmetic layer.
 *
 * CANONICAL: packages/ui/scan-loader/loader.css. Copied to apps/app/public/loader.css
 * (which Vite emits to dist/ and the deploy uploads to the bucket root, so it is
 * served as {baseUrl}/loader.css). `pnpm check:scan-loader` enforces the copy.
 *
 * Everything here is SAFE TO LOSE. The cover, its z-index and the 8s failsafe are
 * inlined in the snippet instead, and the snippet hides this file's children by
 * default — so if this request 404s, is ad-blocked, or is refused by CSP, the
 * degradation is a plain white cover that clears itself at 8s, not naked
 * "Loading…" text stranded over the merchant's page forever.
 *
 * That is the whole reason for the split: keep the two guarantees inline, move the
 * ~1.3KB of appearance out, so the pasted snippet stays short.
 *
 * NOTE the children are revealed with `display`, never `visibility`. The failsafe
 * hides the cover with `visibility: hidden`, and visibility is inherited — an
 * explicit `visibility: visible` on a child would survive its hidden parent and
 * leave the ring and label floating over the page after the failsafe fired.
 */

#vera-scan-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@keyframes veraScanLoaderIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veraScanLoaderSpin { to { transform: rotate(360deg); } }

/* Progressive disclosure: nothing for 300ms, then the mark, then the label at
   1200ms. A loader that comes and goes inside 300ms reads as a flicker and makes
   a fast scan feel broken rather than fast.

   The 1200ms label delay is also what lets the app UPGRADE the copy from the
   snippet's neutral "Loading…" to "Verifying authenticity…" when the entry URL
   carries a scan token: JS gets to run long before the text is ever visible, so
   the honest default is what shows if the bundle never boots
   (apps/app/src/utils/scanLoader.ts, upgradeScanLoaderLabel).

   THE STAGE OWNS THE LOADER'S SIZE, and it is the ONLY place that size lives.
   The ring's `viewBox` stays 0 0 48 48 in the markup on purpose: a viewBox is a
   coordinate system, not a size, so scaling the stage scales the circle, its
   stroke and the arc's dash pattern together, in exact proportion. That is why
   this resize touches one stylesheet instead of the three documents the snippet
   is duplicated into (index.html, widget-installation.hbs, and the canonical).
   Set the two boxes below and the mark's box; change nothing in the markup. */
#vera-scan-loader .vera-scan-loader__stage {
  display: block;
  position: relative;
  width: 64px;
  height: 64px;
  opacity: 0;
  animation: veraScanLoaderIn 0.25s ease-out 0.3s forwards;
}

#vera-scan-loader .vera-scan-loader__ring {
  display: block;
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  animation: veraScanLoaderSpin 1.1s linear infinite;
}

/* A full TRACK ring plus a rotating ARC on top — the ordinary spinner shape.
   Two earlier attempts read wrong. First, stroke-dashoffset animated 128 -> 34
   against a 132 circumference (r=21, 2*pi*r = 131.9), sweeping the arc between
   ~3% and ~75%; at the short end it was a stray tick orbiting the V, not a
   spinner. Removing that swing left a lone 30% arc, which still read as a loose
   stroke beside the mark rather than something circling it, because there was no
   circle for the eye to complete. The track supplies it: the arc is now visibly
   travelling around a ring. The track is a full circle, so the SVG spinning it
   along with the arc is undetectable. */
#vera-scan-loader .vera-scan-loader__ring circle {
  fill: none;
  stroke: #272727;
  stroke-width: 2;
}

#vera-scan-loader .vera-scan-loader__track { opacity: 0.12; }

#vera-scan-loader .vera-scan-loader__arc {
  stroke-linecap: round;
  stroke-dasharray: 36 96;
  opacity: 0.9;
}

/* The Vera mark.

   This is the ONE box that does not scale with the stage on its own — it is a
   sibling of the ring, not a child of its viewBox — so it is sized here in step
   with the stage above. These numbers are the original 19x17 at the same 4/3
   scale the stage took (48 -> 64). The box's aspect is narrower than the
   artwork's (172:148), so `contain` fits to WIDTH and letterboxes vertically;
   scaling both edges by the same factor preserves that fit exactly, which is why
   the mark's rendered size tracks the ring instead of drifting inside it.

   A background-image rather than inline SVG purely to get its
   ~530-byte path OUT of the pasted snippet — it is static, so nothing is lost by
   moving it here. The ring stays inline markup because it costs ~100 bytes and an
   SVG arc with stroke-linecap: round gives properly rounded ends; the CSS
   border-spinner equivalent has square-cut ends and cannot round them.

   (A previous version of this comment said the mark "feeds the morph" — the
   shared-element flight into the certificate badge. That flight was deleted; see
   the header of apps/app/src/utils/scanLoader.ts for why. Nothing outside this
   stylesheet reads `__mark` or `__stage` any more, so their boxes are free to
   change size. `__label` IS still read by name, for the copy upgrade.) */
#vera-scan-loader .vera-scan-loader__mark {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25.33px;
  height: 22.67px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 172 148'%3E%3Cpath fill='%23272727' d='M84.0345 79.33L39.6849 1.77528C39.3364 1.17763 38.6829 0.802368 37.9568 0.802368H2.39299C0.897245 0.802368 -0.0466709 2.34512 0.679419 3.59601L84.0345 147.031C84.7896 148.323 86.721 148.323 87.4616 147.031L170.817 3.59601C171.543 2.34512 170.599 0.802368 169.103 0.802368H133.539C132.828 0.802368 132.16 1.17763 131.811 1.77528L87.4616 79.33C86.721 80.6365 84.7606 80.6365 84.02 79.33H84.0345Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#vera-scan-loader .vera-scan-loader__label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #6b6b6b;
  opacity: 0;
  animation: veraScanLoaderIn 0.3s ease-out 1.2s forwards;
}

@media (prefers-reduced-motion: reduce) {
  #vera-scan-loader .vera-scan-loader__ring { animation: none; }
}