/* bex-lux.css — the elevated layer, v0.1 (2026-09-16)
   ---------------------------------------------------------------------------
   Proposed as the kit's `bex-kit-lux-v1.css`. It loads AFTER bex-kit-v1.css and
   after the page's own stylesheet, and it is additive only:

     · every token is prefixed --lux-
     · every rule is a .lux- class
     · no bare element selector, no override of a kit token

   The kit already defines --ease, --r-card, --sh-md and --sh-lg. Redefining any
   of them here would change every card on every bex page, so the lifted values
   live under their own --lux- names instead. The VALUES are verbatim from the
   Boston franchise report (report.bexandcofranchise.com/boston/assets/site.css),
   which is where this look was proved. Nothing here was re-picked.

   Two keyframes, both stopped under prefers-reduced-motion: `luxshimmer` and
   `luxbeam`. Do not add a third.
   ------------------------------------------------------------------------- */

:root{
  /* teals, verbatim from the report's :root and its panel gradient */
  --lux-deep:#0B3A3C;
  --lux-primary:#0F4B4E;
  --lux-lift:#15646A;

  /* the light accents */
  --lux-iris:#EAD6FF;
  --lux-blush:#F7E7E5;
  --lux-paper:#FAF7F4;

  /* the signature ground */
  --lux-iridescent:linear-gradient(115deg,#F7DCE6 0%,#EAD6FF 30%,#D9E0FA 55%,#CFEDE0 78%,#F8E6D4 100%);

  /* the report's dark panel */
  --lux-panel:linear-gradient(165deg,#0F4B4E 0%,#0B3A3C 100%);

  /* depth and shape */
  --lux-sh-md:0 8px 22px rgba(15,46,48,.08),0 26px 56px rgba(15,46,48,.10);
  --lux-sh-lg:0 34px 80px rgba(15,46,48,.18);
  --lux-r-card:18px;
  --lux-r-panel:24px;
  --lux-ease:cubic-bezier(.2,.7,.2,1);

  /* the glass surface, lifted from the report's sticky bar */
  --lux-glass-bg:rgba(255,255,255,.06);
  --lux-glass-line:1px solid rgba(250,247,244,.14);
}

/* ---------- the deep panel ----------
   The report's hero sits INSIDE the page as a rounded panel rather than running
   edge to edge. .lux-panel is that panel. The page decides its margins. */
.lux-panel{
  background:var(--lux-panel);
  border-radius:var(--lux-r-panel);
  box-shadow:var(--lux-sh-lg);
  position:relative;
  overflow:hidden;
}

/* ---------- the italic accent ----------
   The second line of a two-line serif headline, italic, in iris on the panel.
   Measured on --lux-panel: 7.3:1. */
.lux-it{font-style:italic;color:var(--lux-iris)}

/* ---------- kickers on the panel ----------
   Iris rather than flat white, held back so the headline still leads. The alpha
   is set where it still clears 4.5:1 on the deep panel. */
.lux-kicker{color:rgba(234,214,255,.8)}

/* ---------- the signature tile ----------
   ONE per set. The iridescent ground with a slow shimmer, deep-teal type. The
   eye lands here without any extra copy. */
.lux-sig{
  background:var(--lux-iridescent);
  background-size:200% 200%;
  animation:luxshimmer 16s var(--lux-ease) infinite;
  border-color:transparent;
}
.lux-sig-ink{color:var(--lux-deep)}
.lux-sig-sub{color:rgba(33,31,30,.76)}
@keyframes luxshimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ---------- glass ----------
   A surface that sits on a dark ground and lets it through. */
.lux-glass{
  background:var(--lux-glass-bg);
  border:var(--lux-glass-line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* ---------- the iridescent beam ----------
   A progress rail that draws once as its set enters. Vertical by default. */
.lux-beam{
  position:absolute;
  top:0;bottom:0;left:0;
  width:3px;
  border-radius:3px;
  background:rgba(250,247,244,.16);
  overflow:hidden;
}
.lux-beam::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:0;
  background:var(--lux-iridescent);
  transition:height 2.4s var(--lux-ease);
}
.lux-beam-on::after,.lux-beam-on .lux-beam::after{height:100%}

/* ---------- a rounded figure on the panel ---------- */
.lux-figure{
  border-radius:var(--lux-r-panel);
  box-shadow:var(--lux-sh-lg);
  overflow:hidden;
}

/* ---------- motion off ---------- */
@media(prefers-reduced-motion:reduce){
  .lux-sig{animation:none;background-position:0% 50%}
  .lux-beam::after{transition:none;height:100%}
}