/*
 * The camera scanner. Fills whatever it is mounted in, so the same component
 * serves the full-screen page and an embedded panel.
 *
 * The palette, the scrim and the placement of the text come from the eyes
 * handoff: the animation was designed against them, and it stops reading as
 * one piece if they drift.
 */

.magoo-scanner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #141216;
    color: #F7F4EF;
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.magoo-scanner__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Darkest at the edges, so whatever the camera is pointed at never competes
   with the eyes in the middle. */
.magoo-scanner__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 44%,
        rgba(10, 8, 12, .20) 0%,
        rgba(10, 8, 12, .40) 42%,
        rgba(10, 8, 12, .68) 78%,
        rgba(10, 8, 12, .82) 100%);
}

/* The eyes do the looking, over the camera and never on it: recognition
   answers with what it saw, never with where it is. */
.magoo-scanner__eyes {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Leaving has to work before the camera is allowed, which means clearing the
   permission modal as well as the backdrop behind it — bootstrap puts those at
   1050 and 1055. Under them the button was there but untouchable, and tapping
   it only made the modal refuse to be dismissed.
   The inset keeps it clear of a notch. */
.magoo-scanner__close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 1060;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #E4E4E4;
    text-decoration: none;
}

.magoo-scanner__close img {
    width: 14px;
    height: 14px;
}

.magoo-scanner__decline {
    color: #6B6B6B;
    font-size: 14px;
    text-decoration: underline;
}

/* Same two layers viewAR puts behind its permission modal: white, dimmed. */
.magoo-scanner__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: #fff;
}

.magoo-scanner__backdrop::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000081;
}

.magoo-scanner.is-scanning .magoo-scanner__backdrop {
    display: none;
}

/* Sits just under the eyes, where the handoff puts it. Further down and it
   reads as a caption for the camera rather than for them. */
.magoo-scanner__status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .85);
}

.magoo-scanner__label {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(247, 244, 239, .86);
}

.magoo-scanner__hint {
    max-width: 26ch;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(247, 244, 239, .48);
}

/* The eyes and the instruction only mean something once the camera is live;
   before that they are a black screen showing through the modal. */
.magoo-scanner__eyes,
.magoo-scanner__status {
    opacity: 0;
    transition: opacity .35s ease;
}

.magoo-scanner.is-scanning .magoo-scanner__eyes,
.magoo-scanner.is-scanning .magoo-scanner__status,
.magoo-scanner.is-blocked .magoo-scanner__status {
    opacity: 1;
}

/* Anything other than searching takes the middle of the screen: the wordmark
   forming, or the eyes closing. The instruction gets out of the way. */
.magoo-scanner.is-found .magoo-scanner__status {
    opacity: 0;
}

/* Whatever went wrong has to be readable over the backdrop, not the camera. */
.magoo-scanner.is-blocked .magoo-scanner__status {
    z-index: 4;
    bottom: auto;
    top: 45%;
}

/* Where the eyes closed, fading up into place rather than sliding over them. */
.magoo-scanner__empty {
    position: absolute;
    left: 50%;
    top: 74%;
    z-index: 4;
    width: min(340px, 82vw);
    transform: translate(-50%, -44%);
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
}

/* Set a frame after the element is shown: going straight from display:none
   would skip the fade entirely. */
.magoo-scanner__empty.is-open {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.magoo-scanner__empty-title {
    margin-bottom: 9px;
    font-size: 21px;
    font-weight: 600;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
}

.magoo-scanner__empty-text {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(247, 244, 239, .6);
}

.magoo-scanner__empty[hidden] {
    display: none;
}

.magoo-scanner__create {
    display: block;
    width: 100%;
    padding: 15px 0;
    border: 0;
    border-radius: 14px;
    background-color: #CC0000;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(204, 0, 0, .35);
    cursor: pointer;
}

/* Quiet on purpose: the offer beside it is the one worth taking. */
.magoo-scanner__again {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 13px 0;
    border: 0;
    background: none;
    color: rgba(247, 244, 239, .55);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}