/* Storetasker /how-it-works, "The Storetasker Difference" section image: photo with slowly drifting light. */
/* the image: the photo, with soft bands of light and shade drifting slowly over it */
.lit{position:relative;width:100%;aspect-ratio:2000/1284;line-height:0;overflow:hidden;background:#1b1512;container-type:inline-size;isolation:isolate}
.lit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lit i{position:absolute;left:-25%;width:150%;display:block;pointer-events:none;will-change:transform,opacity}
/* warm light beams: screen-blended so they only ever brighten */
.lit .b1,.lit .b2,.lit .b3{mix-blend-mode:screen;filter:blur(2.4cqw);background:linear-gradient(to bottom, rgba(255,240,214,0), rgba(255,240,214,.4) 42%, rgba(255,246,230,.5) 50%, rgba(255,240,214,.4) 58%, rgba(255,240,214,0))}
.lit .b1{top:8%;height:15%;animation:litA 10s ease-in-out infinite alternate}
.lit .b2{top:45%;height:12%;animation:litB 13s ease-in-out infinite alternate}
.lit .b3{top:76%;height:17%;animation:litC 16s ease-in-out infinite alternate}
/* one passing shade band, so the light has something to move against */
.lit .s1{top:22%;height:26%;mix-blend-mode:multiply;filter:blur(3cqw);background:linear-gradient(to bottom, rgba(24,22,44,0), rgba(24,22,44,.42) 50%, rgba(24,22,44,0));animation:litS 14s ease-in-out infinite alternate}
/* the thin rainbow fringe along the desk edge */
.lit .r1{top:60%;height:3.2%;mix-blend-mode:screen;filter:blur(.7cqw);background:linear-gradient(to bottom, rgba(255,120,150,0), rgba(255,130,160,.55) 25%, rgba(255,226,140,.5) 50%, rgba(120,214,255,.55) 75%, rgba(120,214,255,0));animation:litR 7s ease-in-out infinite alternate}
@keyframes litA{0%{transform:translate3d(-5%,-34%,0) rotate(-7deg);opacity:.08}50%{opacity:.46}100%{transform:translate3d(5%,40%,0) rotate(-3deg);opacity:.16}}
@keyframes litB{0%{transform:translate3d(4%,46%,0) rotate(-14deg);opacity:.36}55%{opacity:.06}100%{transform:translate3d(-4%,-50%,0) rotate(-10.5deg);opacity:.4}}
@keyframes litC{0%{transform:translate3d(-4%,-20%,0) rotate(-3deg);opacity:.06}45%{opacity:.36}100%{transform:translate3d(4%,22%,0) rotate(4deg);opacity:.12}}
@keyframes litS{0%{transform:translate3d(3%,-44%,0) rotate(-6.5deg);opacity:.95}100%{transform:translate3d(-3%,48%,0) rotate(-10deg);opacity:.4}}
@keyframes litR{0%{transform:translate3d(-2%,-90%,0) rotate(-12.6deg);opacity:.08}50%{opacity:.58}100%{transform:translate3d(2%,110%,0) rotate(-12.6deg);opacity:.14}}
@media (prefers-reduced-motion: reduce){.lit i{animation:none;opacity:.2}}