/* The iridescent stage the designer renders every scene on.
   Tuned against measurements of the source, not by eye. The source page 4
   stage reads mean saturation 0.34, mean value 0.60, corners
   TL #3D353F · TR #C0866D · BL #4D3946 · BR #A07E76 · centre #A4A1C4.
   A first pass came in at 0.17 (washed out), a second at 0.56 (garish). */
.aurora{position:absolute;inset:0;overflow:hidden;background:#2B2431;z-index:0}
.aurora::before,
.aurora::after{content:"";position:absolute;inset:-18%}
.aurora::before{
  background:
    radial-gradient(46% 58% at 2% 0%,   rgba(20,36,62,.86) 0%, rgba(20,36,62,0) 60%),
    radial-gradient(34% 44% at 6% 96%,  rgba(48,34,44,.72) 0%, rgba(48,34,44,0) 62%),
    radial-gradient(42% 52% at 52% 98%, rgba(218,40,138,.66) 0%, rgba(206,56,135,0) 66%),
    radial-gradient(56% 66% at 46% 42%, rgba(186,180,226,.78) 0%, rgba(186,180,226,0) 70%),
    radial-gradient(50% 66% at 99% 58%, rgba(220,155,108,.82) 0%, rgba(220,155,108,0) 66%),
    radial-gradient(40% 50% at 86% 6%,  rgba(240,213,188,.62) 0%, rgba(240,213,188,0) 62%),
    linear-gradient(122deg,#2E2732 0%,#4B3752 28%,#7C4E71 54%,#AC7A6E 79%,#C69B7E 100%);
  filter:saturate(1.2);
  animation:auroraDrift 34s ease-in-out infinite alternate;
}
.aurora::after{
  background:radial-gradient(32% 40% at 74% 82%, rgba(255,186,216,.18) 0%, rgba(255,186,216,0) 64%);
  mix-blend-mode:screen;
  animation:auroraDrift2 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{transform:translate3d(-2%,-1.5%,0) scale(1.05) rotate(-1deg)}
  to  {transform:translate3d(2%,1.8%,0)   scale(1.12) rotate(1.4deg)}
}
@keyframes auroraDrift2{
  from{transform:translate3d(3%,2%,0) scale(1.08)}
  to  {transform:translate3d(-3%,-2%,0) scale(1.2)}
}
.aurora .grain{
  position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after{animation:none}
}