/* One airy swathe crosses the introduction; the paper and live type stay visible. */
.invitation--silk { isolation: isolate; overflow: hidden; }
.invitation--silk .invitation__eyebrow { color: var(--dark-burgundy); }
.invitation--silk > .invitation__silk {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: -16%;
  top: 38px;
  width: 132%;
  height: clamp(340px, 34vw, 470px);
  opacity: calc(.44 * var(--silk-arrival, 1));
  transform: rotate(-4deg);
  -webkit-mask-image: radial-gradient(ellipse 31% 30% at 50% 49%, rgb(0 0 0 / .23), #000 85%);
  mask-image: radial-gradient(ellipse 31% 30% at 50% 49%, rgb(0 0 0 / .23), #000 85%);
}
.invitation__silk-canvas, .invitation__silk-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.invitation__silk-canvas { opacity: 0; }
.invitation__silk-canvas.is-ready { opacity: 1; }
.invitation__silk-canvas.is-ready + .invitation__silk-fallback { opacity: 0; }
.invitation--silk > .invitation__motion-toggle {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  right: clamp(24px, 5vw, 48px);
}
@media (max-width: 680px) {
  .invitation--silk > .invitation__silk {
    left: -26%;
    top: 64px;
    width: 152%;
    height: 350px;
    transform: rotate(-7deg);
    opacity: calc(.40 * var(--silk-arrival, 1));
    -webkit-mask-image: radial-gradient(ellipse 32% 34% at 50% 50%, rgb(0 0 0 / .18), #000 90%);
    mask-image: radial-gradient(ellipse 32% 34% at 50% 50%, rgb(0 0 0 / .18), #000 90%);
  }
}