/* ===== Site-wide loading component: the green monkey + one flowing line =====
   Pure CSS, no images, no SVG files, no libraries. The monkey is the exact
   inline SVG that sits before "Your quiet little Joker" on the home page
   (same viewBox, same strokes, same green) - see site-loader.js for the
   markup. The line is a 2px green-and-grey gradient that keeps flowing.
   Everything lives in one fixed overlay that never touches page layout:
   pointer-events:none, visibility-hidden when idle, fade in / fade out. */

.site-loader{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:transparent !important;opacity:0;visibility:hidden;pointer-events:none;transition:none}
.site-loader.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease}

/* The monkey: the home page's artwork, a touch larger, still green. */
.loader-monkey{display:block;width:32px;height:32px;color:var(--jade,#3F7464);animation:loaderBob .8s ease-in-out infinite}
.loader-monkey svg{width:100%;height:100%;display:block}
@keyframes loaderBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

/* The line: 2px, green leading with grey, flowing forever. */
.loader-line{display:block;width:180px;height:2px;border-radius:2px;background:linear-gradient(90deg,#E5E5E5 0%,#A8D5B5 50%,#E5E5E5 100%);background-size:200% 100%;animation:loaderFlow 1.2s linear infinite}
@keyframes loaderFlow{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Inline loading slots (feed.js list/detail): the very same monkey + line,
   just laid out inside the page flow instead of the fixed overlay. The
   .loader-monkey / .loader-line rules above carry all the animation. */
.feed-loading{display:flex;flex-direction:column;align-items:center;gap:14px}

/* Reduced motion: the loader still reads, it just holds still. */
@media (prefers-reduced-motion:reduce){
  .loader-monkey,.loader-line{animation:none}
}