/* The cover shares a moving light; the opened paper sits above a softly lit backdrop. */
#viewport { isolation: isolate; }
#viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 62% 72% at 50% 50%,
    #f5f4f1 0%, #f5f4f1 42%, #e6e5e2 50%,
    #cecdca 64%, #aaa9a6 83%, #999895 100%);
  transition: opacity 650ms ease;
}
#viewport.is-reading-lit::before { opacity: 1; }
#viewport.is-reading-lit .kraft {
  box-shadow: 0 5px 9px rgb(38 36 31 / .16),
    0 22px 35px rgb(38 36 31 / .18), inset 0 0 12px #7e603b25;
}

#coverLight {
  --cover-x: 50vw;
  --cover-y: 42vh;
  --cover-power: 0;
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 360ms ease;
}

#coverLight::before {
  content: '';
  position: absolute;
  inset: 0;
  transition: opacity 650ms ease;
}

#coverLight::before {
  background: radial-gradient(
    ellipse var(--cover-radius-x, 360px) var(--cover-radius-y, 360px) at var(--cover-x) var(--cover-y),
    rgb(34 31 26 / calc(var(--cover-dim, .38) * (1 - var(--cover-power)))) 0%,
    rgb(34 31 26 / calc(var(--cover-dim, .38) * (1 - var(--cover-power) * .95))) 18%,
    rgb(34 31 26 / calc(var(--cover-dim, .38) * (1 - var(--cover-power) * .76))) 40%,
    rgb(34 31 26 / calc(var(--cover-dim, .38) * (1 - var(--cover-power) * .42))) 64%,
    rgb(34 31 26 / calc(var(--cover-dim, .38) * (1 - var(--cover-power) * .12))) 84%,
    rgb(34 31 26 / var(--cover-dim, .38)) 100%
  );
}

/* Once unfolded, illuminate behind the document so its text and images stay clear. */
#coverLight.is-page::before { opacity: 0; }
#coverLight.is-focus:not(.is-suspended), #coverLight.is-page:not(.is-suspended) { opacity: 1; }
#coverLight.is-handoff { transition-duration: 650ms; }

@media (max-width: 600px) {
  #viewport::before {
    /* Follow the full scrollable sheet, not a spotlight fixed to the phone screen. */
    background: radial-gradient(ellipse 85% 65% at 50% 50%,
      #f5f4f1 0%, #e6e5e2 48%, #cecdca 66%, #999895 100%);
  }
}

@media (hover: hover) and (pointer: fine) {
  #coverLight:not(.is-suspended) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #coverLight, #coverLight::before, #viewport::before { transition: none; }
}

@media (forced-colors: active), print {
  #coverLight, #viewport::before { display: none; }
  #viewport.is-reading-lit .kraft { box-shadow: none; }
}