/* Decorative desktop surround only. No styles apply below 900px. */
@media(min-width:900px){
  body{background:#b3c9ee url('assets/satin-veil.png') center center / cover fixed no-repeat}
  body::before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#b8d0eb0a, #dceaf738 36%,#c9dcf138 64%,#b8d0eb0a);z-index:0}
  main#invitation{box-shadow:none;background:transparent}
  /* A wide feather on background layers dissolves their outermost pixels.
     Text, original portrait, controls and animated butterflies retain full opacity. */
  #invitation .reference-base,#invitation .floral-protection{
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-middle.svg');
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-middle.svg');
    mask-composite:intersect;-webkit-mask-composite:source-in;
  }
  #invitation .page:first-child .reference-base{mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-first.svg');-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-first.svg')}
  #invitation .page:last-child .reference-base{mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-last.svg');-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent),url('assets/edge-last.svg')}
  #invitation .scene:before{mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),url('assets/edge-middle.svg');-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),url('assets/edge-middle.svg');mask-composite:intersect;-webkit-mask-composite:source-in}
}