/* Meander: the drawing (js/meander.js) lies under everything, fixed to the window, and
   every page is pasted on top of it, the way the posters are pasted over the drawings. */

#ink {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    display: block;
    z-index: 0;
    touch-action: none;
    transition: opacity .6s;
}

@media (pointer: coarse) {
    #ink { touch-action: auto; }
}

body.plain #ink {
    display: none;
}

/* The about page's portrait (Ezra, in ASCII): the drawing prints it on the paper and
   runs round him (js/meander.js), so the video itself is never seen, only kept playing. */
#ascii {
    position: fixed;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------------------------------------ home: one poster */

.home .work .t { margin-top: .45em; }
.home .work .more { margin-top: .1em; }
.home .acts { margin-top: .25em; }

/* wide screens: one board, laid out like the poster */
@media (min-width: 761px) {
    .home, .home body { height: 100%; overflow: hidden; }
    .home #board {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(100vw, 160vh);
        height: calc(min(100vw, 160vh) * .625);
        transform: translate(-50%, -50%);
        font-size: calc(min(100vw, 160vh) * .0101);
    }
    .home .piece {
        position: absolute;
        left: calc(var(--x) * 1%);
        top: calc(var(--y) * 1%);
        width: calc(var(--w) * 1%);
        transition: left .5s cubic-bezier(.2, .7, .2, 1), top .5s cubic-bezier(.2, .7, .2, 1), width .5s cubic-bezier(.2, .7, .2, 1), opacity .45s ease;
    }
    .home .name .strip.big { font-size: 3.1em; }
    .home .work { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
    .home .work .shot { cursor: pointer; }
    .home .work.dragging { cursor: grabbing; transition: none; z-index: 6; }
    .home .work .more, .home .work .close { display: none; }
    /* A work opened on its own: a card in the middle of the sheet. Everything else is
       lifted off the paper, and the drawing closes in all round the card, greyed out
       (js/meander.js), so the card is all that is left in focus. */
    .home.showing .piece:not(.open) {
        opacity: 0;
        pointer-events: none;
    }
    .home .work.open {
        z-index: 5;
        left: 27%;
        top: 7%;
        width: 46%;
        background: var(--slip);
        padding: 1.1em 1.1em 1.25em;
        cursor: auto;
        user-select: text;
        -webkit-user-select: text;
        box-shadow: var(--lift);
    }
    .home .work.open .more { display: block; }
    .home .work.open .close { display: inline; }
    .home .work.open .t { margin-top: .7em; }
    .home .work.open .t .strip { font-size: 1.6em; }
    .home .work.open .more p { max-width: 46em; }
    .home .work.open .acts { margin-top: .6em; }
}

/* phones: the same poster as one long strip you scroll down */
@media (max-width: 760px) {
    .home #board {
        padding: calc(env(safe-area-inset-top) + 26px) 16px calc(env(safe-area-inset-bottom) + 70px);
    }
    .home .piece {
        position: relative;
        width: var(--mw, 86%);
        margin-left: var(--ml, 0%);
        margin-top: 46px;
    }
    .home .piece.name { margin-top: 10px; }
    .home .piece.nav { margin-top: 14px; }
    .home .strip.big { font-size: 2.35em; }
    .home .close { display: none !important; }
}