/* The page is a sheet of the same paper the film is painted on. */
:root { --paper: #f2f2ef; }
* { box-sizing: border-box; }
html { background: var(--paper) url(media/paper.jpg) repeat 0 0; background-size: 512px 512px; }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
.stage { position: relative; }
.work { position: absolute; }
.work video {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: transparent;
  opacity: 0; transition: opacity 2.6s ease;
  /* the film's edge settles softly into the page, as if painted on it */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.6%, #000 99.4%, transparent), linear-gradient(180deg, transparent, #000 1.1%, #000 98.9%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.work video.shown { opacity: 1; }
.work.playing video { cursor: pointer; }
.work.idle, .work.idle video { cursor: none; }
canvas.ink { position: absolute; pointer-events: none; mix-blend-mode: multiply; }
.writing { position: absolute; }
button { appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; color: inherit; }
.drop {
  /* it sits on the pale stain in the snow: the place where, at the end, she lands */
  position: absolute; left: 38.82%; top: 36.9%; border-radius: 50%; transform: translate(-50%, -50%);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1); z-index: 3;
}
.drop canvas { position: absolute; display: block; pointer-events: none; }
.drop:hover { transform: translate(-50%, -50%) scale(1.07); }
.drop.gone { pointer-events: none; }
.drop:focus-visible, .fs:focus-visible { outline: 1px dotted rgba(40, 40, 42, .45); outline-offset: 7px; }
.fs { position: absolute; z-index: 3; opacity: 0; transition: opacity .5s; mix-blend-mode: multiply; }
.fs canvas { display: block; }
.work:hover .fs, .fs:focus-visible { opacity: .72; }
.fs:hover { opacity: 1 !important; }
.seek { position: absolute; z-index: 2; cursor: pointer; touch-action: none; }
@media (hover: none) { .fs { opacity: .6; } }