:root {
  --oa-red: #e30613; /* exact brand red, sampled from the ELEMENTART logo */
  --oa-red-dark: #b30510;
  --oa-white: #ffffff;
  --oa-blush: #f7e9e6;
  --oa-ink: #2a1414;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* IMPORTANT: html/body must stay transparent. MindAR appends the live camera
   <video> to <body> with z-index:-2, and in CSS paint order a body background
   is drawn *above* negative z-index children — an opaque background here hides
   the camera feed entirely (tracking still works, so the bug looks like "the
   video plays but the room behind it is invisible"). Branded screens carry
   their own background instead. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--oa-ink);
}

/* The live camera feed.
   MindAR appends this <video> to <body> and parks it at z-index:-2, i.e. painted
   *behind* the page. Anything opaque in the background layer then hides it, and
   the app looks like the camera never started — the AR still tracks, so the bug
   is easy to misread. Pulling the video up to z-index:0 (still under the scene)
   removes that whole class of failure. object-fit reproduces the cover framing
   MindAR computes itself; tracking uses the stream's own dimensions, not these. */
body > video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  z-index: 0 !important;
}

a-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ---------- Branded full-screen overlay screens ---------- */
.overlay-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  text-align: center;
  /* Light blush backdrop so the red logo tile reads as the hero element.
     (A red background would leave the red logo invisible against it.) */
  background: var(--oa-blush);
  color: var(--oa-ink);
}

.overlay-screen.hidden {
  display: none;
}

/* The logo already contains the ELEMENTART / BY OA wordmark, so the screens
   carry no separate brand text — just the tile plus a status line. */
.overlay-logo {
  width: 148px;
  height: 148px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(227, 6, 19, 0.22);
}

.overlay-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--oa-red);
}

.overlay-text {
  font-size: 15px;
  line-height: 1.5;
  max-width: 320px;
  opacity: 0.8;
  margin: 0;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(227, 6, 19, 0.22);
  border-top-color: var(--oa-red);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-primary {
  margin-top: 8px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--oa-white);
  background: var(--oa-red);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

/* ---------- Scanning guide overlay (shown live over the camera feed) ---------- */
#scanning-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#scanning-overlay.hidden {
  display: none;
}

.viewfinder {
  position: relative;
  width: 62vw;
  max-width: 320px;
  aspect-ratio: 3 / 4;
}

.corner {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--oa-white);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 10px; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 10px; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 10px; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 10px; }

.scan-hint {
  margin-top: 22px;
  padding: 8px 18px;
  background: rgba(227, 6, 19, 0.88);
  color: var(--oa-white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
}

/* Brand signature, pinned to the bottom of the scanning view. */
#brand-link {
  position: absolute;
  bottom: calc(26px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto; /* the parent overlay disables them */
  line-height: 0;
}

#brand-link img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

#brand-link:active img {
  transform: scale(0.95);
}

/* ---------- Sound toggle (shown once the AR video is playing) ---------- */
#sound-toggle {
  position: fixed;
  bottom: 28px;
  right: 20px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--oa-red);
  color: var(--oa-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid var(--oa-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

#sound-toggle.hidden {
  display: none;
}
