/**
 * Tap on the floor: the photo, the tapping hand and the pin. Shared by the
 * product page's room preview and the rug advisor; see views/floor-stage.php.
 */
.ds-plek {
    --ds-plek-accent: #ff6700;
    --ds-plek-tint: #f7f6f4;
}

/* Keeps `hidden` authoritative: no display rule below can outvote it. */
.ds-plek [hidden] {
    display: none !important;
}

.ds-plek__frame {
    display: flex;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ds-plek-tint);
}

/*
 * Sized by the photo, never by the box around it. A tap is sent on as a
 * fraction of this element, and the pin is placed inside it with the same two
 * numbers, so any letterbox between the two would be a rug in the wrong spot.
 */
.ds-plek__stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    cursor: crosshair;
}

.ds-plek__photo {
    display: block;
    max-width: 100%;
    max-height: 52vh;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * A finger tapping the suggested spot. Sized in pixels rather than percentages:
 * it is a cursor, not part of the photograph.
 */
.ds-plek__tap {
    position: absolute;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    pointer-events: none;
    opacity: 0;
}

/*
 * Keeps tapping until the customer does. It is the only thing on the screen
 * saying "this is yours to move", so it has no business giving up after a few
 * seconds and leaving a silent picture behind.
 */
.ds-plek__tap.is-tapping {
    animation: ds-plek-tap 1.8s ease-in-out infinite;
}

@keyframes ds-plek-tap {
    0%   { opacity: 0; transform: scale(1.6); }
    25%  { opacity: 1; transform: scale(1.6); }
    45%  { opacity: 1; transform: scale(.85); }
    65%  { opacity: 1; transform: scale(1.6); }
    100% { opacity: 0; transform: scale(1.6); }
}

.ds-plek__pin {
    position: absolute;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--ds-plek-accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
    pointer-events: none;
}

@media (max-width: 767px) {
    .ds-plek__photo {
        max-height: 44vh;
    }
}