/* relief.css: a drawing shown as a relief that turns round (sky/relief.js) */

/* wherever one ends up (the site copies the traveller now and then), it's never in the way of the layout or of clicks */
canvas.relief,
svg.relief-hit {
    position: absolute;
    pointer-events: none;
}

/* the flat picture stays underneath, unseen: it keeps their box the size it always was, and it's what shows where the
   relief can't be drawn */
.character.relief-on > img.art {
    visibility: hidden;
}

/* the relief itself: over the picture's box and a little past it on every side (--relief-room, set by the script), so
   nothing's cut off as the near edge swings towards you mid-turn */
.character > canvas.art.relief {
    left: 50%;
    top: 50%;
    width: calc(100% * var(--relief-room, 1.3));
    height: calc(100% * var(--relief-room, 1.3));
    translate: -50% -50%;
    /* the site's bobbing and toppling turn "the art" about its feet: these are the feet, not the canvas's own bottom edge */
    transform-origin: 50% calc(50% + 50% / var(--relief-room, 1.3)) !important;
    pointer-events: none;
}

/* facing left is a real turn now, not a mirror flip */
.character.relief-on.face-left > canvas.art.relief {
    transform: none;
}
.character.relief-on.walking.face-left > canvas.art.relief {
    animation-name: char-step;
}

/* a walk of its own (a sheet of frames): that's what shows while they walk, in place of a flat walking picture,
   and the site's little walking bob stops */
.character.relief-on.relief-walks.has-walking.walking > .art {
    display: block;
}
.character.relief-on.relief-walks.has-walking.walking > .pose-walking {
    display: none;
}
.character.relief-on.relief-walks.walking > canvas.art.relief {
    animation: none;
}

/* only the figure itself takes a click (its shape, from the picture), never the empty box round it */
.character > svg.relief-hit {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.character.face-left > svg.relief-hit {
    transform: scaleX(-1);
}

/* on a phone they stand in front of things (a room fills the screen side to side), so there only their head and shoulders
   take a tap: a tap lower down goes to whatever's behind their legs (the fridge door, a drawer) */
@media (max-width: 620px), (max-height: 500px) {
    .scene-character > svg.relief-hit {
        clip-path: inset(0 0 52% 0);
    }
}