@layer effects {
  body.is-preintro .background-effects {
    opacity: 0;
  }

  body.is-intro .background-effects {
    opacity: 1;
  }

  body.has-intro-started #site-wrap {
    background: radial-gradient(circle at 30% 15%, #f6f1e9 0%, var(--paper) 45%, var(--paper-deep) 100%);
  }

  body.is-intro #site-wrap {
    clip-path: circle(0% at 50% 45%);
    animation: intro-reveal var(--intro-reveal-dur) cubic-bezier(0.12, 0.9, 0.18, 1) both;
  }

  .background-effects {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.16, 0.9, 0.2, 1);
  }

  .vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 20vw var(--vignette);
  }

  .grain {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    mix-blend-mode: multiply;
  }
}