/*
 * The swipe control in viewAR: that there is more behind this image, and how
 * far through it you are.
 *
 * Centred, and above the capture button rather than beside it — about 130px of
 * it once its mode switch is counted. Nothing here covers the AR content,
 * which is the point: the control changes what is projected on the object, and
 * the object itself never moves.
 */

/* The experience is swipeable across its whole surface, and on a phone that
   only holds if the browser is told so: left to itself it treats a sideways
   drag as a possible scroll, withholds the moves while it decides and then
   cancels the gesture. Vertical stays the browser's, horizontal is ours. */
#unity-container {
    touch-action: pan-y;
}

.magoo-swipe {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 150px;
    z-index: 31;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    /* Only the chip and the dots take input; the gap between them must not
       swallow a tap meant for whatever is on the target. */
    pointer-events: none;
}

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

.magoo-swipe__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .52);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
    cursor: grab;
    /* The browser keeps vertical gestures, we take the horizontal ones. */
    touch-action: pan-y;
}

.magoo-swipe__hint.is-dragging {
    cursor: grabbing;
}

/* Only on the way back: while dragging, the chip has to track the finger
   exactly, and a transition would leave it trailing behind. */
.magoo-swipe__hint.is-settling {
    transition: transform .28s cubic-bezier(.22, .9, .3, 1);
}

.magoo-swipe__hand {
    flex: none;
    display: block;
    animation: magoo-swipe-hand 2.6s cubic-bezier(.4, 0, .25, 1) infinite;
}

@keyframes magoo-swipe-hand {
    0%, 8%  { transform: translateX(7px) scale(1);    opacity: 0 }
    16%     { transform: translateX(7px) scale(1);    opacity: 1 }
    24%     { transform: translateX(7px) scale(.88);  opacity: 1 }
    52%     { transform: translateX(-8px) scale(.88); opacity: 1 }
    60%     { transform: translateX(-8px) scale(1);   opacity: 1 }
    70%     { transform: translateX(-8px) scale(1);   opacity: 0 }
    100%    { transform: translateX(7px) scale(1);    opacity: 0 }
}

.magoo-swipe__dots {
    display: flex;
    align-items: center;
}

/* The dot is 6px; the button around it is what a thumb actually hits. */
.magoo-swipe__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.magoo-swipe__dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    transition: background .2s, transform .2s;
}

.magoo-swipe__dot.on::before {
    background: #fff;
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .magoo-swipe__hand { animation: none; opacity: 1; transform: none }
    .magoo-swipe__hint.is-settling { transition: none }
}