/* iPhone Duo photo demo: an Apple open-Duo photo with Saddle composited in, cut out for the dark site.
   Tap the reply to bring up the Duo keyboard; tap the email to put it away.
   Everything in .photo-frame is in photo pixels (sized in the page) and scaled to fit by photo.js.
   Each .plane is one screen half in points (475.5x669), mapped onto the photo by its matrix3d in the page. */

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
}

html.is-embed, html.is-embed body { background: transparent; }

.photo {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.photo-frame {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    -webkit-tap-highlight-color: transparent;
}

.photo-still {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.plane {
    position: absolute;
    left: 0;
    top: 0;
    height: 670px; /* 1pt past the screen, over the photo's anti-aliased edge */
    overflow: hidden;
    transform-origin: 0 0;
}

/* The left half runs 2pt past the hinge, under the right half, so the keyboard shows no seam. */
.plane--left {
    width: 477.5px;
    border-radius: 55px 0 0 55px;
}

.plane--right {
    width: 475.5px;
    border-radius: 0 55px 55px 0;
}

.kb {
    position: absolute;
    left: 0;
    top: 401.67px;
    width: 950.67px;
    height: 268.33px;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    transform: translateY(102%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.plane--right .kb { left: -475.5px; }

.is-typing .kb { transform: none; }

/* The composer's body, from below the To row to above "Sent with Saddle" */
.reply-field {
    position: absolute;
    left: 25px;
    top: 190px;
    width: 370px;
    height: 365px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: text;
    -webkit-tap-highlight-color: transparent;
}

.reply-field:focus { outline: none; }

.caret {
    position: absolute;
    left: 46.5px;
    top: 201.5px;
    width: 2px;
    height: 18px;
    border-radius: 1px;
    background: #3b7ddd;
    opacity: 0;
    pointer-events: none;
}

/* iOS blink: on half a second, quick fade out, short gap, quick fade in. Starts once the keyboard lands. */
.is-typing .caret { animation: caret-blink 1s 300ms infinite; }

@keyframes caret-blink {
    0%, 53% { opacity: 1; }
    65%, 88% { opacity: 0; }
    100% { opacity: 1; }
}

.hand {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.hand--left { left: 596px; top: 468px; width: 79px; height: 810px; }
.hand--right { left: 1928px; top: 453px; width: 64px; height: 821px; }

@media (prefers-reduced-motion: reduce) {
    .kb, .is-typing .kb { transition: none; }
    .is-typing .caret { animation: none; opacity: 1; }
}