.light-opening[hidden] { display: none; }

.light-opening {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}

.light-opening-matte,
.light-opening-grain {
  position: absolute;
  inset: 0;
}

.light-opening-matte { background: var(--paper, #eeeee8); }

.light-opening-grain {
  background: url("./grain.png") repeat;
  background-size: 285px;
  inset: -24px;
  opacity: .62;
  animation: light-opening-grain-shift 680ms steps(1, end) infinite;
}

@keyframes light-opening-grain-shift {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-13px, 7px); }
  25% { transform: translate(9px, -16px); }
  37.5% { transform: translate(-5px, -10px); }
  50% { transform: translate(15px, 12px); }
  62.5% { transform: translate(-18px, 3px); }
  75% { transform: translate(4px, 17px); }
  87.5% { transform: translate(12px, -6px); }
}

.light-opening-image {
  position: relative;
  width: min(89vw, 760px, 110svh);
  aspect-ratio: 1056 / 640;
}

.light-opening-image canvas {
  display: block;
  width: 100%;
  height: 100%;
}