/* Light falls on the finished illustration only; source pixels stay untouched. */
.art-light {
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  opacity:0;
  visibility:hidden;
  contain:paint;
  -webkit-mask-image:var(--art-light-mask);
  mask-image:var(--art-light-mask);
  -webkit-mask-size:contain;
  mask-size:contain;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  mask-mode:alpha;
  mix-blend-mode:screen;
}
.art-light.is-lit {opacity:1;visibility:visible}
.art-light__glass,
.art-light__stream {
  position:absolute;
  display:block;
  pointer-events:none;
  animation-play-state:paused;
  animation-delay:0s;
  animation-fill-mode:both;
  animation-iteration-count:1;
  animation-timing-function:linear;
}
.art-light__glass {
  inset:-25% -85%;
  background:linear-gradient(var(--light-angle,112deg),
    transparent 43%,rgb(255 255 255 / .04) 47%,
    rgb(255 247 234 / .6) 49.4%,rgb(255 255 255 / .9) 50%,
    rgb(236 231 255 / .35) 51.2%,transparent 56%);
  animation-name:art-light-glass;
  animation-duration:var(--light-duration,240ms);
}
.art-light__stream {
  inset:-12%;
  background:
    radial-gradient(ellipse at 38% 32%,var(--light-warm,#fff0dc) 0%,transparent 42%),
    radial-gradient(ellipse at 65% 72%,var(--light-cool,#dcd7ff) 0%,transparent 40%);
  animation-name:art-light-stream;
  animation-duration:var(--light-duration,240ms);
}
.art-light__rim {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  animation:art-light-rim var(--light-duration,240ms) linear 0s 1 both paused;
}
.art-light.is-lit > * {animation-play-state:running}
.art-light[data-light="silk"] {--light-angle:119deg;--light-duration:240ms}
.art-light[data-light="glass"] {--light-angle:104deg;--light-duration:200ms}
.art-light[data-light="pearl"] {--light-angle:76deg;--light-duration:240ms;--light-warm:#fff5e9;--light-cool:#e5e2ff}
.art-light[data-light="aurora"] {--light-angle:124deg;--light-duration:220ms;--light-warm:#eff8ff;--light-cool:#e6d9ff}
.art-light[data-light="dawn"] {--light-angle:68deg;--light-duration:260ms;--light-warm:#fff0e4;--light-cool:#f0ddf1}
.art-light[data-light="silk"] .art-light__glass {animation-direction:reverse}
.art-light[data-light="pearl"] .art-light__stream {animation-direction:reverse}
.art-light[data-light="dawn"] .art-light__glass {animation-direction:reverse}
@keyframes art-light-glass {
  0% {transform:translate3d(-36%,0,0);opacity:0}
  18% {opacity:.12}
  45% {opacity:.24}
  78% {opacity:.12}
  100% {transform:translate3d(36%,0,0);opacity:0}
}
@keyframes art-light-stream {
  0% {transform:translate3d(-7%,-5%,0) rotate(-7deg);opacity:0}
  45% {opacity:.06}
  100% {transform:translate3d(8%,6%,0) rotate(8deg);opacity:0}
}
@keyframes art-light-rim {
  0%,100% {opacity:0}
  45% {opacity:.14}
}
@media(prefers-reduced-motion:reduce) {
  .art-light,.art-light.is-lit {display:none}
  .art-light > * {animation:none!important}
}
