/* The web viewer (viewAR-web.blade.php). Brand: red #CC0000, ink #0F133A, overlay #00000081. */
html, body.web-viewer { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff;
    font: 15px/1.4 'Roboto', sans-serif; touch-action: none; }
[hidden] { display: none !important; }

#web-camera, .web-viewer-media { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* The camera's own size and proportions, scaled by viewer.js to cover the screen. */
/* Under the Unity page's buttons (viewar.css). */
#web-stage { position: fixed; z-index: 0; left: 50%; top: 50%; transform-origin: 50% 50%; }
#web-stage canvas, #web-stage .web-viewer-css { position: absolute; left: 0; top: 0; }
#web-stage canvas { width: 100%; height: 100%; display: block; }
/* YouTube pages (CSS3D) lie under the canvas and show through the transparent
   hole viewer.js leaves where each one is (youtubeHole). Taps go through the
   canvas: to a YouTube page where it is, else to the stage, as before. */
#web-stage .web-viewer-css { z-index: 0; }
#web-stage canvas { position: absolute; z-index: 1; pointer-events: none; }
/* Pin, full screen and the handle are drawn in the canvas, which takes no taps;
   over a YouTube page a tap on them went into the page. A transparent circle
   over each (viewer.js, placeToolHits), above the stage and under the buttons,
   takes the tap instead. Its size is the reach toolAt allows (2 x 36 px). */
.web-tool-hits { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.web-tool-hit { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%;
    pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }

.web-chip { position: fixed; z-index: 5; left: 14px; border: 0; border-radius: 999px; background: #00000081;
    color: #fff; font: 12px/1.3 monospace; padding: 6px 10px; }
.web-smoothing { top: calc(52px + env(safe-area-inset-top, 0px)); font-weight: 600; }
.web-stats { top: calc(88px + env(safe-area-inset-top, 0px)); right: 64px; pointer-events: none; white-space: normal; }


.web-start { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: #00000081; padding: 16px; }
.web-card { background: #fff; color: #0F133A; border-radius: 15px; padding: 24px; max-width: 340px; text-align: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; }
.web-card h2 { color: #CC0000; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.web-card p { font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.web-card button { border: 0; border-radius: 999px; background: #CC0000; color: #fff; font: inherit; font-weight: 700;
    padding: 12px 28px; }
.web-card button:disabled { background: #E4E4E4; color: #707070; }

/* The loader after I'm Ready: the same card as the start screen (the shared
   loader's own box is sized for Studio, with a spinner half its width). */
.web-viewer .file-loading { padding: 16px; }
.web-viewer .file-loading .loading-content { width: 100%; max-width: 340px; padding: 28px 24px 24px; border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px; }
.web-viewer .file-loading .loading-content img { width: 64px; height: 64px; }
.web-viewer .file-loading .web-loading-title { color: #CC0000; font-size: 22px; font-weight: 700; line-height: 1.25; margin: 16px 0 6px; }
.web-viewer .file-loading #status2 { color: #0F133A; font-size: 15px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; }

.web-status { position: fixed; z-index: 7; left: 16px; right: 16px; bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    margin: 0; background: #CC0000; color: #fff; border-radius: 12px; padding: 12px 14px; text-align: center; }

.web-card { position: relative; padding-top: 54px; }
.web-permission-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; }
.web-permission-close img { width: 28px; height: 28px; }
.web-permission-close:focus-visible { outline: 3px solid #FFC42E; }

/* Design 02 — Expand & Explain. The fixed overlay keeps the experience still.
   The catalog's five-second sequence runs once; the default is a true circle. */
#capture-button {
    width: max-content;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: #CC0000;
    color: #fff;
    padding: 0;
    box-shadow: 0 7px 24px #0005;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}
#capture-button .reveal-create-icon {
    display: grid;
    place-items: center;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}
#capture-button .reveal-create-icon svg { display: block; width: 24px; height: 24px; }
#capture-button .reveal-create-label {
    display: block;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font: 700 14px/1.2 'Roboto', sans-serif;
}
#capture-button[hidden] { display: none !important; }
#capture-button::after { content: none; }
#capture-button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
#capture-button.reveal-intro { animation: reveal-create-expand 5s ease 1; }
#capture-button.reveal-intro .reveal-create-label { animation: reveal-create-words 5s ease 1; }
@keyframes reveal-create-expand {
    0%, 13%, 80%, 100% { max-width: 52px; }
    25%, 65% { max-width: 260px; }
}
@keyframes reveal-create-words {
    0%, 13%, 80%, 100% { max-width: 0; margin-right: 0; opacity: 0; }
    25%, 65% { max-width: 180px; margin-right: 20px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #capture-button.reveal-intro,
    #capture-button.reveal-intro .reveal-create-label { animation: none; }
}