/* Sign-in background (LXP-2701): the light along the path (appjs/common/luxPath.js). Behind the white sheet; desktop only. */
@media (min-width: 992px) {
    .lux-shell:has(> .lux-aside.is-photo) { background-attachment: fixed; } /* the picture and the drawing share the window */
    .lux-shell:has(> .lux-aside.is-photo) > .lux-main { position: relative; z-index: 1; }
}
.lux-trail { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.lux-trail-head,
.lux-trail-tail { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .8s ease; }
.lux-trail-head { stroke: #fff4e0; stroke-width: 6; }
.lux-trail-tail { stroke: #ffb27a; stroke-width: 3; opacity: .55; }
.lux-trail.is-done .lux-trail-head,
.lux-trail.is-done .lux-trail-tail { opacity: 0; }

.lux-trail-dot { fill: #fff4e0; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lux-trail-dot.is-hit { animation: lux-dot-blink .7s ease-out forwards; }
.lux-trail-dot.is-hit.is-last { animation: lux-dot-rest 1.2s ease forwards; }
@keyframes lux-dot-blink {
    0%   { opacity: 0;   transform: scale(.6); }
    25%  { opacity: 1;   transform: scale(1.9); }
    100% { opacity: 0;   transform: scale(1); }
}
@keyframes lux-dot-rest { from { opacity: 0; } to { opacity: .7; filter: drop-shadow(0 0 6px #ffb27a); } }

/* The small dots on the hills: a soft twinkle, once or twice each, only while the light runs */
.lux-trail-star { fill: #ffe2c2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lux-trail.is-running .lux-trail-star { animation: lux-star 1.1s ease-in-out both; }
@keyframes lux-star {
    0%, 100% { opacity: 0;   transform: scale(.5); }
    45%      { opacity: .5;  transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) { .lux-trail { display: none; } }
html.ux2-calm .lux-trail { display: none; }