/* ---------------------------------------------------------------------------
   Lucentive sky treatment for the Sage Intacct posts.

   Nothing here invents a colour or an animation. The sky is the existing
   cloud shader (web/public/quiz/cloud-sky.js, itself extracted verbatim from
   components/ui/cloud-shader.tsx). The marquee rules are copied verbatim from
   design/base.css. Tokens are the measured ones in design/tokens.css.
   ------------------------------------------------------------------------ */

:root{
  --brand:#0652fd;      /* x37 inline theme options  */
  --cta:#491178;        /* x16 child theme           */
  --cta-hover:#481e89;  /* x3  child theme           */
  --ink:#191919;        /* x12 child theme           */
  --muted:#777777;      /* x15 inline                */
  --white:#ffffff;      /* x120                      */
  --paper:#fafafa;      /* x4  child theme           */
}

/* The sky sits behind everything and the article scrolls over it. */
#lucentive-sky{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:-1; pointer-events:none; display:block;
}
body.lucentive-sky-on{ background:transparent; }

/* Readable panel over the sky. White at high opacity rather than a tint, so
   the Sage product screenshots keep their own colour. */
body.lucentive-sky-on .entry-content,
body.lucentive-sky-on .post-content,
body.lucentive-sky-on article .grve-content{
  background:rgb(255 255 255 / .94);
  backdrop-filter:blur(2px);
  border-radius:10px;
  padding:clamp(22px,4vw,54px);
  box-shadow:0 10px 40px rgb(6 82 253 / .10), 0 1px 0 rgb(255 255 255 / .6) inset;
  max-width:820px; margin-inline:auto;
  color:var(--ink);
}
body.lucentive-sky-on .entry-content h2{
  color:var(--ink); margin-top:2em; line-height:1.25;
}
body.lucentive-sky-on .entry-content h3{ color:var(--ink); }
body.lucentive-sky-on .entry-content a{ color:var(--brand); }
body.lucentive-sky-on .entry-content figure img{
  border:1px solid #e8e8e8; border-radius:6px; height:auto; max-width:100%;
}
body.lucentive-sky-on .entry-content figcaption{
  color:var(--muted); font-size:.9rem; margin-top:.55em;
}
/* The staged [DATA: ...] slots should be obvious to whoever fills them. */
body.lucentive-sky-on .entry-content p.image-note{
  color:var(--muted); font-size:.92rem;
}

/* ---------------------------------------------------------------------------
   MARQUEE — copied verbatim from design/base.css. Applied to the existing
   .proof-strip .logos row; this only adds motion. Reverts to a static wrapped
   row under prefers-reduced-motion.
   ------------------------------------------------------------------------ */
.proof-strip.is-marquee .wrap{max-width:none;padding-inline:0}
.proof-strip.is-marquee .logos{flex-wrap:nowrap;width:max-content;justify-content:flex-start;
  padding-right:clamp(26px,5vw,60px);
  animation:marquee 18s linear infinite;will-change:transform}
.proof-strip.is-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion:reduce){
  .proof-strip.is-marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .proof-strip.is-marquee .wrap{max-width:1180px;padding-inline:clamp(20px,5vw,48px)}
  .proof-strip.is-marquee .logos{animation:none;flex-wrap:wrap;width:auto;justify-content:center;
    padding-right:0}
  .proof-strip.is-marquee .logos .dup{display:none}
  #lucentive-sky{display:none}
  body.lucentive-sky-on{background:var(--paper)}
}