/* LLC CAFE — brand layer (2026-09-04). Motion + components only; product markup untouched.
   Loaded after each page's inline styles so it can restyle the shared background. */

/* 1. The aurora goes steel: monochrome chrome with a cool cast, to match the silver system. */
.bg .ribbon{filter:saturate(.28) hue-rotate(-12deg) brightness(.9) contrast(1.06)}
.bg .ribbon--b{opacity:.3}

/* 2. The network: a canvas of nodes that link up around you. Sits under the vignette so edges stay dark. */
#brand-net{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;mix-blend-mode:screen;opacity:.92}
html.static #brand-net{opacity:.5}

/* 3. Scroll hairline in chrome */
.brand-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:20;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#f4f5f7,#c8cdd4 30%,#8a909c 55%,#d7dbe1 80%,#f4f5f7);opacity:.9}

/* 4. Cursor light — desktop only */
.brand-cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(closest-side,rgba(190,205,235,.13),rgba(190,205,235,.05) 45%,transparent 72%);mix-blend-mode:screen;
  transition:opacity .6s ease;will-change:transform}
@media (hover:none),(pointer:coarse){.brand-cursor{display:none}}

/* 5. Chrome highlight bars get a slow sheen */
.hl{background-size:220% auto;animation:brandSheen 7s ease-in-out infinite alternate}
@keyframes brandSheen{from{background-position:0% center}to{background-position:100% center}}

/* 6. Magnetic buttons */
.brand-mag{will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background-position .6s ease,border-color .3s ease}
.brand-mag:hover{transition-duration:.12s}

/* 7. Ticker strip */
.brand-ticker{overflow:hidden;border-top:1px solid rgba(200,205,212,.16);border-bottom:1px solid rgba(200,205,212,.16);
  background:rgba(5,5,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:13px 0;white-space:nowrap;position:relative;z-index:1}
.brand-ticker__track{display:inline-flex;align-items:center;gap:0;animation:brandTicker 42s linear infinite;will-change:transform}
.brand-ticker span{font-family:"JetBrains Mono","SF Mono",Menlo,monospace;font-size:.66rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#c8cdd4;padding:0 26px}
.brand-ticker span.k{color:#f4f5f7}
.brand-ticker i{display:inline-block;width:6px;height:6px;transform:rotate(45deg);flex:none;
  background:linear-gradient(160deg,#f4f5f7,#8a909c)}
.brand-ticker:hover .brand-ticker__track{animation-play-state:paused}
@keyframes brandTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 8. Cards-page hero eyebrow gets the same rotate the site uses everywhere */
@media (prefers-reduced-motion:reduce){
  .hl{animation:none}
  .brand-ticker__track{animation:none}
  .brand-mag{transition:none}
  .brand-cursor{display:none}
}